let hasAddedDireHomeBase = false;
let hasAddedRadiantHomeBase = false;

function placeHome(type,color, pos){
  
  // first check if the lane exists...
    
  const node = d3.select("#lane").node()
 	if (!node) return;
  
  const addBase = () => {
    const len = node.getTotalLength();
  	const point = node.getPointAtLength(pos);
    
    const newPoint = (type === "radiant") ? {x: point.x + 50, y: point.y + 10 } : {x: point.x - 50, y: point.y };
    
    const surface = d3.select("#surface");
    
    const base = surface
  		.append("g")
  		.attr("id", `${type}Homebase`)
  		.attr("transform", "translate(" + newPoint.x + "," + newPoint.y + ")");

  	base	
    	.append("circle")
        .attr("r", 40)
    		.attr("opacity", 0.05)
        .attr("fill", color);
  }
    
  if (type === "dire") {
    	if (!hasAddedDireHomeBase) addBase();
      return hasAddedDireHomeBase = true;
  } else if (type === "radiant") {
    	if (!hasAddedRadiantHomeBase) addBase();
      return hasAddedRadiantHomeBase = true;
  }
}


const worldstep = () => {
  worldseconds++;

  // 
  placeHome("dire","grey",325);
  placeHome("radiant","green",1300);

  document.getElementById("time").innerHTML = worldseconds;
  
  update(creepsDireData, creepsRadiantData, worldseconds);
  
  if (worldseconds > 3) {
    d3.select("#world").style("opacity", 1);
  }
  
  // any collisions? compare dire & radiant
  creepsDireData.forEach( (data, i) => {
    
    const direId = `#dire${i}`;
    
    const node = d3.select(direId).node();
    // console.log("dire check: ", node);
    
    if (node){
      const direBox = node.getBBox();
    	console.log("dire check: ", direBox);
    }
    
    
  });
  
}

const start = () => {

  // hide the players until they properly positioned on either end 
  //d3.select("#world").style("opacity", 0);

  update(creepsDireData, creepsRadiantData);

  const interval = setInterval(
    worldstep
    ,1000)

  }

start();