/*
AOE

actorData

1. parabolic arc to target square 
2. show that surrounding squares will be affected
3. light up surrounding squares

*/

const cellSkins = d3.selectAll(".cell");
const actorSkins = d3.selectAll(".actor");

const fireEffect = target => {
  
}

const aoe = (targets,duration,dely) => {
  
  const handleEnd = () => {
    console.log("handle aoe end");
  }
  
  const afftectTarget = target => {
    
    d3.select(target)
        .select("rect")
          .transition()
            .duration(duration)
            .delay(delay)
            .attr("fill", "red")
            .on("end", handleEnd);
  }
  
  targets
  	.each(target, afftectTarget);
  
}

  const getSkinTrans = target => {
  	   const HALF = Math.floor((CELL_SIZE / 2) - (ACTOR_SIZE /2));
      return `translate (${target.x * CELL_PAD + HALF },${target.y * CELL_PAD + HALF})`;
  }
  

// move wizard down to bottom left corner 
function moveActor(profession,target,onCompleteCallback,duration,delay){
  d3.select(`#${profession}`)
		.transition()
			.duration(duration)
  		.delay(delay)
			.attr("transform", d => getSkinTrans(target))
			.on("end", d => onCompleteCallback(d,profession));
}  

const onCompleteCallback = (d,profession) => {
  console.log(`${profession} all done`);
}

moveActor("wizard", {x: 0,y:3},onCompleteCallback,3000,0);