// Feel free to change or delete any of the code you see in this editor!
    const svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    const getGridData = (total) => {
      const gridData = [];
      const flatGrid = [];
      for (let i=0; i<total;i++){
        if (!gridData[i]) gridData[i] = [];
        for (let j=0; j<total;j++){
          if (!gridData[i][j]) gridData[i][j] = [];
          gridData[i][j].push({x: j, y: i, type: "floor"})
          flatGrid.push({x: j, y: i, type: "floor"});
        }
      }
      
      return flatGrid;
    }
    
    const gridData = getGridData(4);
    
    const meadow = d3.select("svg")
    .append("g")
    	.attr("transform","translate (20,20)")
    	.attr("id","meadow");
    
    const stage = d3.select("svg")
    .append("g")
    	.attr("transform","translate (20,20)")
    	.attr("id","stage");
    
    const grid = meadow.selectAll("g").data(gridData);

    const CELL_SIZE = 40;
    const CELL_PAD = CELL_SIZE + 2;
    
    const getTrans = d => {
      return `translate (${d.x * CELL_PAD},${d.y * CELL_PAD})`;
    }

    const gridEnter = grid.enter();
    const gridG =	gridEnter.append("g")
    									.attr("class", "cell")	
    									.attr("transform", getTrans );
    
    gridG
      .append("rect")
    	.attr("width", CELL_SIZE)
    	.attr("height", CELL_SIZE)
    	.style("fill", "green");
    
    // add actors
      
    const ACTOR_SIZE = 10;
    const ACTOR_PAD = 12;
    
    const professions = ["thief", "wizard", "warrior", "cleric"];
    
		const fighters = [
      {name: "Glendra", profession: "thief", color:"black", type: "actor"},
      {name: "Allsion", profession: "wizard", color:"white", type: "actor"},
      {name: "Bearheart", profession: "warrior",color:"darkred", type: "actor"},
      {name: "Sensulla", profession: "cleric", color:"pink", type: "actor"}
    ]

    
    const actorData = fighters;
    
    const getActorTrans = (d,i) => {
      const cell = gridData[i];
      const HALF = Math.floor((CELL_SIZE / 2) - (ACTOR_SIZE /2));
      return `translate (${cell.x * CELL_PAD + HALF },${cell.y * CELL_PAD + HALF})`;
    }	
        
    const actors = stage.selectAll("g").data(actorData);
    
    const actorsG = actors.enter()
    													.append("g")
    															.attr("class", "actor")	
    															.attr("id", d => d.profession)
    															.attr("transform", getActorTrans); 
    
    actorsG
      .append("rect")
        .attr("width", ACTOR_SIZE)
        .attr("height", ACTOR_SIZE)
        .style("fill", d => d.color);