// MAIN UPDATE

const end = 1300;

const direCreepStart = 325;
const radiantCreepStart = end;
const offpath = 15;
    
const update = (newDireCreepsData,
                newRadiantCreepsData,
                worldseconds) => {
     
const creepDire = direWorld.selectAll("g").data(newDireCreepsData);
      
  // DIRE CREEP     

  const creepDireEnter = creepDire
  .enter();

  function getX(){
    const newX = (worldseconds * 10 > worldWidth) ? 
          worldWidth : worldseconds * 10; 
    return newX;
  }
  

  const getAdvanceDireCreepTrans = (d,i)=> {
    const newY = d.y;
    const newX = d.x + getX();

    const node = d3.select("#lane").node()

    if (!node) return;

    const len = node.getTotalLength();

    const newXLen = (newX + direCreepStart)  * direCreepStart;
    const p = node.getPointAtLength(newX);
    const newPoint = {x:p.x, y: p.y + offpath};

    return "translate(" + newPoint.x + "," + newPoint.y + ")";

  }

  const creepDireBody = creepDireEnter	
  .append("g")
  .attr("id", (d,i) => `direCrep${i}`);


  creepDireBody
    .attr("transform", getAdvanceDireCreepTrans)
    .transition()
    .duration(1000)
    .attr("transform", getAdvanceDireCreepTrans);
	
  // skin...
  creepDireBody
    .append("rect")
    .style("fill", direColor)
    .attr("width",creepWidth)
    .attr("height",creepHeight);
  
  // append conditionally... 
  
  const applyCarry = body => {
    body
      .append("rect")
        .style("fill", "purple")
        .attr("width",2)
        .attr("height",30)
        .attr("y",-22)
        .attr("x",-2);
  }
  
  const applySupport = body => {
    body
      .append("rect")
        .style("fill", "red")
        .attr("width",2)
        .attr("height",10)
        .attr("y",-2)
        .attr("x",-2);
  }
  
  const applyDurable = body => {
    body
      .append("circle")
        .style("fill", "blue")
        .attr("r",5)
        .attr("cy",4)
        .attr("cx",-3);
  }
  
  
  function addBody(d, i) {
    
    const body = d3.select(this);
    
    if (d) {
      switch(d.type){
        case "carry":
          applyCarry(body)
          break;
        case "support":
          applySupport(body)
          break; 
        case "durable":
          applyDurable(body)
          break;   
        default:
          break;
      }
    }
  }
  
  creepDireBody
  	.each(addBody)
  
  const creepDireMerge = creepDire
  .merge(creepDire);

  creepDireMerge
    .merge(creepDire)
    .transition()
    .duration(1000)
    .attr("transform", getAdvanceDireCreepTrans);


  const creepDireExit = creepDire
  .exit();

  creepDireExit
    .remove();
      
  // RADIENT CREEP

  const creepRadiant = radiantWorld.selectAll("g").data(newRadiantCreepsData);

  const creepRadiantEnter = creepRadiant.enter();

  const getAdvanceRadiantCreepTrans = (d,i)=> {
    const newY = d.y;
    const newX = d.x + getX();
    const node = d3.select("#lane").node()

    if (!node) return;

    const len = node.getTotalLength();

    const newXLen = end - (newX - end);
    const p = node.getPointAtLength(newXLen);

    const newPoint = {x:p.x, y: p.y + offpath};

    return "translate(" + newPoint.x + "," + newPoint.y + ")";

  }
  
  const getWithinRangeRadiantCreepTrans = (d,i)=> {
    const newY = d.y;
    const newX = d.x;
    const node = d3.select("#lane").node()

    if (!node) return;

    const len = node.getTotalLength();

    const newXLen = end - (newX - end);
    const p = node.getPointAtLength(newXLen);

    const newPoint = {x:p.x, y: p.y + offpath};

    return "translate(" + newPoint.x + "," + newPoint.y + ")";

  }


  const creepRadiantBody = creepRadiantEnter	
  .append("g")
  .attr("id", (d,i) => `radiantCrep${i}`);

  creepRadiantBody
    .attr("transform", getAdvanceRadiantCreepTrans)
    .transition()
    .duration(1000)
    .attr("transform", getAdvanceRadiantCreepTrans);

  creepRadiantBody
    .append("rect")
    .style("fill", radiantColor)
    .attr("width", creepWidth)
    .attr("height", creepHeight);
  
  creepRadiantBody
  	.each(addBody)

  const creepRadiantMerge = creepRadiant
  .merge(creepRadiant);
  
  const getTransform = (d,i) => {
    
    // am I close to the dire creep?
    // if so, stop and fight...
    
    const myX = d.x;
    //const theirX = 
    
    const isWithinRange = false;
    
    if (isWithinRange) {
      return getWithinRangeRadiantCreepTrans(d,i);
    } else {
      return getAdvanceRadiantCreepTrans(d,i);
    }
    
	}
  
  creepRadiantMerge
    .merge(creepRadiant)
    .transition()
    .duration(1000)
    .attr("transform", getTransform);


  const creepRadiantExit = creepRadiant
  .exit();

  creepRadiantExit
    .remove();

}