const worldWidth = window.innerWidth;
const worldHeight = window.innerHeight - 40;
    
let creepsDireData = [
  {id: 0, x: 325, y: -40, type: "support"},
  {id: 1, x: 325 + 40, y: -40, type: "carry"},
  {id: 2, x: 325 + 80, y: -40, type: "durable"},
]

let creepsRadiantData = [
  {id: 0, x: 1300, y: worldHeight + 40, type: "durable"},
  {id: 1, x: 1300 + 40, y: worldHeight + 40, type: "carry"},
  {id: 2, x: 1300 + 80, y: worldHeight + 40, type: "support"},
]

let worldseconds = 0;

const creepWidth = 5;
const creepHeight = 10;

const direColor = "grey"
const radiantColor = "green";

const svg = d3.select("#svg").append("svg");

svg
  .attr("width", worldWidth)
  .attr("height", worldHeight)

const world = svg.append("g")
.attr("id", "world");

const radiantDireWorld = world.append("g");
const radiantWorld = world.append("g");
const direWorld = world.append("g");

radiantDireWorld
  .attr("id", "radiantDire");

radiantWorld
  .attr("id", "radiant");

direWorld
  .attr("id", "dire");

const ground = "#eee";

world
  .append("rect")
  .attr("width", worldWidth)
  .attr("height", worldHeight)
  .style("fill", "none");

radiantDireWorld
  .append("rect")
  .attr("width",worldWidth)
  .attr("height",worldHeight)
  .style("fill", ground);


radiantDireWorld
  .append("g")
  .attr("id", "surface");

// half the world
radiantWorld
  .append("rect")
  .attr("width", worldWidth)
  .attr("height",worldHeight)
  .style("fill", "none");

// half the world
direWorld
  .append("rect")
  .attr("width",worldWidth)
  .attr("height",worldHeight)
  .style("fill", "none");

setTimeout( () => {
  const loading = document.getElementsByClassName("Loading")[0];
	loading.style.display = "none";
}, 4000)