Spreadsheet Level editor

Html test for google app script

by falldeaf

HTML

<style>
 .buttons {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-gap: 10px;
 }
 
 .button {
   border:1px solid #ccc;
   background-color:#000;
   color:white;
   height:30px;
   width:100px;
 }
 
 #results {
   
 }
</style>

<div id="container">

  <div class="buttons">
    <div class="creature button">player</div>
  </div>

  <div class="buttons">
    <div class="tile button">empty</div>
    <div class="tile button">tile1</div>
    <div class="tile button">button</div>
    <div class="tile button">switch</div>
    <div class="tile button">fork</div>
    <div class="tile button">forkland</div>
    <div class="tile button">dispensor</div>
    <div class="tile button">port</div>
    <div class="tile button">gate</div>
    <div class="tile button">lgate</div>
    <div class="tile button">turrent</div>
    <div class="tile button">spikes</div>
    <div class="tile button">exit</div>
  </div>
  
  <div class="label"> Results </div>
  <div id="result"></div>
</div>

<script>

  var classname = document.getElementsByClassName("button");

  var addTile = function() {
  		
      var name = this.innerHTML;
      console.log(name);
      
      if(this.classList.contains("tile")) {
         var funcname = "set" + name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
	  		console.log(funcname);

      	 google.script.run[funcname];
      } else if (this.classList.contains("creature")) {
      
      }
  };

  for (var i = 0; i < classname.length; i++) {
      classname[i].style.cursor = 'pointer';
      classname[i].addEventListener('click', addTile, false);
  }

</script>