JSFiddle - React, Tailwind, and code Playground

by realhunts

JavaScript

var room = [
       ["x", "x", "x", "x", "x", "x"],
       ["x", "y", "y", "y", "y", "x"],
       ["x", "y", "y", "y", "y", "x"],
       ["x", "x", "x", "y", "x", "x"],
       ["x", "y", "x", "y", "y", "x"],
       ["x", "y", "x", "y", "x", "x"],
       ["x", "y", "x", "y", "x", "x"],
       ["x", "y", "x", "y", "x", "x"],
       ["x", "y", "x", "y", "x", "x"],
       ["x", "y", "y", "y", "x", "x"],
       ["x", "x", "x", "x", "x", "x"],
   ]
   
   var bt = []
   for(var i = 0; i<room.length; i++){
    for(var j = 0; j<room[i].length; j++){
    var buttons = document.createElement("button")
    buttons.style.position = "absolute"
    buttons.style.left = ((i*20)+55)+"px";
    buttons.style.top = ((j*20)+55)+"px";
    //buttons.innerHTML = "-"
    buttons.index = i;
    buttons.jdex = j;
    room[i][j] = buttons.innerHTML;
    document.body.appendChild(buttons)
    bt.push(buttons)
    
   var col = "red"; 
   var tp = ((j*20)+55)+"px"
   var lf = ((i*20)+55)+"px"
   
   //console.log("%c["+JSON.stringify(buttons.innerHTML)+"]", "position: absolute; left: 400px;")//+tp+"; left: "+lf);
    }
     }
     
       bt.forEach(function(button){
     button.onclick = function(){
     button.innerHTML = "|"
   		  }
     })
 
      document.addEventListener("keyup", function(e){

     bt.forEach(function(button){
     button.onclick = function(){
     button.innerHTML = "|"
   		  }
     })

     })
     
     document.addEventListener("keydown", function(e){
      if(e.which == 16){
       bt.forEach(function(button){
     button.onclick = function(){
     button.innerHTML = "-"
   		  }
     })
      }
     if(e.which == 32){
     
     for(var i = 0; i<room.length; i++){
    for(var j = 0; j<room[i].length; j++){
    
//    room[i][j] = bt[]
      bt.forEach(function(button){
  
      if(button.index == i && button.jdex == j){
      console.log(room[i][j])
      room[i][j] = button.innerHTML
      }
  // if(button.innerHTML != null) room[i][j] =       ...