//////////////////////////////////////////////////////////////////////
//                                                                  //
//                            - SPOIDS -                            //
//                                                                  //
//        (POC: "Petri Dish" + EvolveJS + Kill 'em! + Sex)         //
//                                                                  //
//////////////////////////////////////////////////////////////////////


// Evolve.js Library: https://github.com/matthewmain/EvolveJS
// Evolve.js CDN Location: https://cdn.jsdelivr.net/gh/matthewmain/[email protected]/evolve.js
// Original "Petri Dish" pen: https://codepen.io/robbobfrh84/pen/ozgvzx 
// Forked "Petri Dish" + Evolve.js + Kill 'em!" pen: https://codepen.io/robbobfrh84/pen/ywoNeZ





/****************************** SETUP *******************************/

///canvas
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");
var cef = 2;  // canvas enlargement factor
canvas.width = window.innerWidth*cef;
canvas.height = window.innerHeight*cef;

///spoid (organism) settings
var initialPopulationCount = 30;
var imw = canvas.height*0.05;  // initial mature width

///colors
var C = {
  bf: "208, 242, 176", // base color for females
  bm: "86, 153, 37",  // base color for males
  y: "205, 211, 122",  // yellow
  p: "216, 172, 156",  // pink
};

var sc = [ "yellow", "base", "pink" ];  // stripe colors

///Trackers
var spoids = [];
var spoidCount = 0;
var worldTime = 0;

///Evolve.js
var spoidGenome = EV.addGenome( "spoid", "sexual" );
EV.addGene( spoidGenome, "matureWidth", "partial", "scale", imw, 5, imw, imw*0.5, null );
EV.addGene( spoidGenome, "stripeColor", "co", "count", 1, 3, 3, 0, 2 );
EV.addGene( spoidGenome, "litterSize", "complete", "count", 5, 10, 3, 1, null );





/************************* SPOID PROTOTYPE **************************/


function Spoid( x, y, generation, genotype ) {  
  spoidCount++;
  this.id = spoidCount;
  this.father = null;
  this.mother = null;
  this.x = x;
  this.y = y;
  this.nx = x;  // new x
  this.ny = y;  // new y
  this.ys = 1;  // y step 
  this.xs = 1;  // x step
  this.speedArc = 0.5; 
  this.saMax = 0.8;  // speed arc max
  this.angle = rib(0,360);
  this.rotationSpeed = rfb(-0.01,0.01);
  this.generation = generation;
  this.birthTime = worldTime;
  this.maturityRatio = 0.1; // starting maturity ratio at birth
  this.isMature = false;
  this.isColliding = false;
  this.isReadyToReproduce = false;
  this.isAlive = true;
  this.isVisible = true;
  this.lifespan = rib(20000,30000);
  this.deathTime = null;
  //genes
  this.genotype = genotype;
  this.phenotype = EV.generatePhenotype( this.genotype );
  this.sex = this.phenotype.sex;
  this.matureWidth = this.phenotype.matureWidthValue;
  this.stripeColorIndexes = shuffle(this.phenotype.stripeColorValues);  // as array: [<integer>,<integer>]
  this.litterSize = this.phenotype.litterSizeValue;
  //gene handling
  this.colorRgbVal = this.sex === "female" ? C.bf : C.bm;  // base color, determined by sex
  this.radius = (this.matureWidth/2) * this.maturityRatio;
}

Spoid.prototype.move = function() {
  var distX = Math.abs( this.x - this.nx );
  if ( distX > this.xs * this.speedArc ) {
    this.x = this.nx-this.x > 0 ? this.x+this.xs*this.speedArc : this.x-this.xs*this.speedArc;
    this.y = this.ny-this.y > 0 ? this.y+this.ys*this.speedArc : this.y-this.ys*this.speedArc;
    var distY = Math.abs( this.y - this.ny );
    var dist = Math.sqrt( distX*distX + distY*distY );
    if ( dist - this.radius*2 > 0) {
      this.speedArc = this.speedArc >= this.saMax ? this.saMax : this.speedArc * 1.05 ;
    } else {
      this.speedArc = this.speedArc >= 0.5 ? this.speedArc * 0.9 : 0.5;
    }
  } else {
    setSpoidPosition( this,random( 0, canvas.width), random( 0, canvas.height ) ); 
  }
};

Spoid.prototype.collisionCheck = function() {
  var atLeastOneCollision = false;
  spoids.forEach( (that)=> { 
    var touchDist = this.radius+that.radius;
    var xDist = Math.abs( this.x - that.x );
    var yDist = Math.abs( this.y - that.y );
    var dist = Math.sqrt( xDist*xDist + yDist*yDist );
    //collisions
    if ( this != that && dist <= touchDist ) {
      atLeastOneCollision = true;
      this.isColliding = true;
      //male attack (mature males kill smaller mature males)
      if ( this.isMature && that.isMature && this.sex === "male" && that.sex === "male") {
        if ( this.radius > that.radius ) that.die();
      }
      //female attack (mature females kill smaller mature spoids who are not their own child or sibling)
      if ( !siblings(this,that) && this.isMature && that.isMature && that.mother != this && this.mother != that ) {
        if ( this.sex === "female" && this.radius > that.radius ) that.die();
        if ( this.sex === "male" && this.radius < that.radius ) this.die();
      }
      //reproduction (mature opposite-sex partners reproduce if both otherwise isolated)
      if ( this.isAlive && that.isAlive && this.isMature && that.isMature && this.sex != that.sex ) {
        if ( this.isReadyToReproduce && that.isReadyToReproduce && this.mother != that && that.mother != this ) { 
          this.reproduce( that ); 
          this.isReadyToReproduce = false; that.isReadyToReproduce = false;  // keeps reproduction to once per contact
        } 
      }
    }
  });
  if ( !atLeastOneCollision ) {
    this.isColliding = false;
    this.isReadyToReproduce = true;  // (re-)sets as ready for reproduction when isolated
  }
};

Spoid.prototype.reproduce = function( partner ) { 
  var litterSize = this.sex === "female" ? this.litterSize : partner.litterSize;
  for ( var i=0; i<litterSize; i++ ) {
    var childGenotype = EV.meiosis( spoidGenome, this.genotype, partner.genotype );
    var x = this.x + (partner.x-this.x)/2;
    var y = this.y + (partner.y-this.y)/2;
    var generation = this.sex === "female" ? this.generation+1 : partner.generation+1;
    var babySpoid = new Spoid( x, y, generation, childGenotype );
    babySpoid.mother = this.sex === "female" ? this : partner;
    babySpoid.father = this.sex === "female" ? partner : this;
    spoids.push( babySpoid );
  }
};

Spoid.prototype.draw = function(){
  if ( this.isVisible ) {
    //clip mask
    ctx.save();  // saves the context state (for clip mask & rotation)
    ctx.beginPath();
    ctx.fillStyle = this.sex === "female" ? "rgba("+this.colorRgbVal+",0.8)" : "rgba("+this.colorRgbVal+",0.8)";
    ctx.arc( this.x, this.y, this.radius, 0, 2*Math.PI );
    ctx.fill();
    ctx.clip();  
    //position & rotation
    ctx.translate( this.x, this.y);
    ctx.rotate(this.angle);
    this.angle += this.rotationSpeed;
    //base background stripe
    ctx.beginPath();
    ctx.strokeStyle = this.sex === "female" ? "#82a560" : "#3f6d1c";
    ctx.lineWidth = canvas.width*0.001;
    ctx.fillStyle = setStripeColor( sc[ this.stripeColorIndexes[0] ], this.sex );
    ctx.moveTo( -this.radius, -this.radius*0.5 );
    ctx.lineTo( this.radius, -this.radius*0.4 );
    ctx.lineTo( this.radius, this.radius*0.5 );
    ctx.lineTo( -this.radius, this.radius*0.5 );
    ctx.stroke();
    ctx.fill();
    //internal stripes
    if ( this.stripeColorIndexes[0] != this.stripeColorIndexes[1] ) {
      ctx.beginPath();
      //ctx.translate( this.x, this.y);
      ctx.fillStyle = setStripeColor( sc[ this.stripeColorIndexes[1] ], this.sex );
      //top internal stripe
      ctx.moveTo( -this.radius, -this.radius*0.2 );
      ctx.lineTo( this.radius, -this.radius*0.23 );
      ctx.lineTo( this.radius, this.radius*0.1 );
      ctx.lineTo( -this.radius, -this.radius*0.05 );
      //bottom internal stripe
      ctx.lineTo( -this.radius, this.radius*0.1 );
      ctx.lineTo( this.radius, this.radius*0.25 );
      ctx.lineTo( this.radius, this.radius*0.33 );
      ctx.lineTo( -this.radius, this.radius*0.37 );
      ctx.fill();
    }
    ctx.restore();  // restores the context state (for clip mask & rotation)
    //inner light outline
    ctx.beginPath();
    ctx.strokeStyle = "rgb("+this.colorRgbVal+")";
    ctx.lineWidth = this.radius*0.05;
    ctx.arc( this.x, this.y, this.radius, 0, 2*Math.PI);
    ctx.stroke();
    //outer dark outline
    ctx.beginPath();
    ctx.strokeStyle = "rgba(0,32,32,0.2)";
    ctx.lineWidth = canvas.width*0.001;
    ctx.arc( this.x, this.y, this.radius*1.025, 0, 2*Math.PI);
    ctx.stroke();
  }
};

Spoid.prototype.age = function() {
  if ( !this.isMature ) {
    if ( this.maturityRatio < 1 ) {
      this.maturityRatio += 0.001;
      this.radius = (this.matureWidth/2) * this.maturityRatio;
    } else {
      this.isMature = true;
    }
  }
  if ( worldTime - this.birthTime >= this.lifespan || !this.isAlive ) {
    this.die();
  }
};

Spoid.prototype.die = function() {
  if ( this.isAlive ) kill( this );
  var timeSinceDeath = worldTime - this.deathTime;
  var flashSpeed = 8;
  var flashCount = 6;
  if ( timeSinceDeath % flashSpeed === 0 ) {
    this.isVisible = this.isVisible ? false : true;
  }
  if ( timeSinceDeath >= flashSpeed*flashCount ) {
    spoids = spoids.filter( (spoid)=> spoid.id !== this.id );
  }
};





/**************************** FUNCTIONS *****************************/


function setSpoidPosition( spoid, newX, newY ){ 
  spoid.speedArc = 0.5;
  spoid.nx = newX; 
  spoid.ny = newY;
  var distX = Math.abs( spoid.x - spoid.nx ); 
  var distY = Math.abs( spoid.y - spoid.ny );
  spoid.xs = distX / Math.max( distX, distY ); 
  spoid.ys = distY / Math.max( distX, distY );
} 

function setStripeColor( color, sex ) {
  switch ( color ) {
    case "yellow": return "rgb("+C.y+")";
    case "base": return ( sex === "female" ) ? "rgb("+C.bf+")" : "rgb("+C.bm+")";
    case "pink": return "rgb("+C.p+")";
  }
}

function kill( spoid ) {
  spoid.isAlive = false;
  spoid.isVisible = false;
  spoid.deathTime = worldTime;
}

function random( max, min ) {
  return Math.floor( Math.random() * (max-min+1) + min );
}

function siblings( spoid1, spoid2 ) {
  if ( spoid1.mother === spoid2.mother && spoid1.father === spoid2.father ) {
    if ( spoid1.mother != null && spoid1.father != null ) { 
      return true;
    }
  }
}

function shuffle( array ) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  while ( 0 !== currentIndex ) {
    randomIndex = Math.floor( Math.random() * currentIndex );
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}





/****************************** EVENTS ******************************/


var noMove = setTimeout( ()=> {
  hover.innerHTML = "hover a spoid for info";
}, 1000 );
 
canvas.onmousemove = function() {
  var mx = event.offsetX;
  var my = event.offsetY;
  for ( var i=0; i<spoids.length; i++ ) {
    var spoid = spoids[i];
    if ( Math.abs(spoid.x/cef-mx) <= spoid.radius && Math.abs(spoid.y/cef-my) <= spoid.radius ) {
      document.getElementsByClassName("info-content-div")[0].style.display = "block";
      hover.innerHTML = "Spoid #" + spoid.id;
      //general info
      sex.innerHTML = spoid.sex;
      size.innerHTML = (spoid.radius*2).toFixed(1);
      age.innerHTML = worldTime - spoid.birthTime + "/" + spoid.lifespan;
      maturity.innerHTML = spoid.isMature ? "adult" : "child";
      generation.innerHTML = spoid.generation;
      mother.innerHTML = spoid.mother ? "#"+spoid.mother.id : "(none; first gen)";
      father.innerHTML = spoid.father ? "#"+spoid.father.id : "(none; first gen)";
      //mature width gene
      widthType.innerHTML = spoid.genotype.genes.matureWidth.dominanceType;
      widthAlleleOne.innerHTML = spoid.genotype.genes.matureWidth.allele1.value.toFixed(1);
      widthAlleleTwo.innerHTML = spoid.genotype.genes.matureWidth.allele2.value.toFixed(1);
      widthExpression.innerHTML = spoid.phenotype.matureWidthValue.toFixed(1);
      //stripe color gene
      var colorTerm = [ "yellow", "base color", "pink"];
      var colorPhen = spoid.phenotype.stripeColorValues;
      stripeType.innerHTML = spoid.genotype.genes.stripeColor.dominanceType;
      stripeAlleleOne.innerHTML = colorTerm[spoid.genotype.genes.stripeColor.allele1.value];
      stripeAlleleTwo.innerHTML = colorTerm[spoid.genotype.genes.stripeColor.allele2.value];
      if ( sc[colorPhen[0]] == sc[colorPhen[1]] ) {
        stripeExpression.innerHTML = colorTerm[colorPhen[0]];
      } else {
        stripeExpression.innerHTML = sc[colorPhen[0]]+" & "+sc[colorPhen[1]];
      }
      //litter size gene
      litterType.innerHTML = spoid.genotype.genes.litterSize.dominanceType;
      var litterAllele1 = spoid.genotype.genes.litterSize.allele1;
      var litterAllele2 = spoid.genotype.genes.litterSize.allele2;
      var litDom1 = litterAllele1.dominanceIndex.toFixed(2).toString().replace(/^0+/,"");
      var litDom2 = litterAllele2.dominanceIndex.toFixed(2).toString().replace(/^0+/,"");
      litterAlleleOne.innerHTML = litterAllele1.value;
      document.getElementById("di1").innerHTML = "&nbsp;(" + litDom1 + " di)"; 
      litterAlleleTwo.innerHTML = litterAllele2.value;
      document.getElementById("di2").innerHTML = "&nbsp;(" + litDom2 + " di)";
      litterExpression.innerHTML = spoid.phenotype.litterSizeValue;
    }
  }
  clearTimeout( noMove );
  noMove = setTimeout( ()=> {
    hover.innerHTML = "hover a spoid for info";
    document.getElementsByClassName("info-content-div")[0].style.display = "none";
  }, 5000 );
};

canvas.onclick = function() {
  var mx = event.offsetX;
  var my = event.offsetY;
  spoids.map( (spoid)=> {
    if ( Math.abs(spoid.x/cef-mx) <= spoid.radius/cef && Math.abs(spoid.y/cef-my) <= spoid.radius/cef ) {
      kill( spoid );
    }
  });
};





/********************* INITIATION & DISPLAY ************************/


//initial population (from standard genotypes, then given random ("mutated") sizes & initialized as mature)
for ( var i=0; i<initialPopulationCount; i++ ) {
  var newSpoidGenotype = EV.newStandardFirstGenGenotype( spoidGenome );
  var x = rfb(canvas.width*0.2,canvas.width*0.8);
  var y = rfb(canvas.height*0.2,canvas.height*0.8);
  EV.mutate( EV.species.spoid, EV.species.spoid.genes.matureWidth, newSpoidGenotype.genes.matureWidth.allele1 );
  EV.mutate( EV.species.spoid, EV.species.spoid.genes.matureWidth, newSpoidGenotype.genes.matureWidth.allele2 );
  spoids.push( new Spoid( x, y, 1, newSpoidGenotype ) );
  spoids[i].maturityRatio = 1;
  spoids[i].isMature = true; 
  spoids[i].radius = spoids[i].matureWidth/2;
}

//displays scene
function display(){
  worldTime++;
  ctx.clearRect( 0, 0, canvas.width, canvas.height );
  spoids.forEach( (spoid)=> { 
    spoid.age(); 
    spoid.move(); 
    spoid.collisionCheck();
    spoid.draw();
  });
  population.innerHTML = "population: " + spoids.length;
  requestAnimationFrame( display );
}

display();