JSFiddle - React, Tailwind, and code Playground

by hamix

HTML

<div class="wrapper">
  <div class="game-container">
    <div class="canvas-container">
      <canvas id="game-canvas" width="1024" height="640"></canvas>
      <div id="control-area">
        <span id="available-controls" ondrop="drop(event)" ondragover="allowDrop(event)">
            <img src="resources/graphics/right.png" draggable="true" ondragstart="drag(event)" id="drag1"/>
        </span>
      </div>
      <div id="action-area">
        <span class="action" ondrop="drop(event)" ondragover="allowDrop(event)"></span>
      </div>
    </div>
  </div>
</div>

CSS

.wrapper {
  display: table;
  padding: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.canvas-container {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
}

#game-canvas {
  width: 100%;
  height: auto;
  z-index: 0;
}

.game-container {
  display: table-cell;
  vertical-align: middle;
}

#available-controls {
  width:64px;
  height:64px;
  border:1px solid #aaaaaa;
  display: inline-block;
  overflow: hidden;
}

#control-area{
 display: block;
 overflow: hidden;
}
#action-area{
 display: block;
 overflow: hidden;
}

.action {
  width:64px;
  height:64px;
  border:1px solid #aaaaaa;
  display: block;
  float:left;
  overflow: hidden;
  background: #f00;
    margin:5px;
}

JavaScript

function addClass(element, value) {
    // Regex terms
    var rclass = /[\t\r\n\f]/g,
        rnotwhite = (/\S+/g);
    var classes,cur,curClass,finalValue,
        proceed = typeof value === "string" && value;

    if (!proceed) return element;
    classes = (value || "").match(rnotwhite) || [];
    cur = element.nodeType === 1
        && (element.className
                ? (" " + element.className + " ").replace(rclass, " ")
                : " "
        );
    if (!cur) return element;
    var j = 0;
    while ((curClass = classes[j++])) {
        if (cur.indexOf(" " + curClass + " ") < 0) {
            cur += curClass + " ";
        }
    }
    // only assign if different to avoid unneeded rendering.
    finalValue = cur.trim();
    if (element.className !== finalValue) {
        element.className = finalValue;
    }
    return element;
};

function drop() {
    //do
}

function dragover() {
    //do
}

function addAction() {
  var newAction = document.createElement("span");
  addClass(newAction,"action");
  newAction.addEventListener("drop", drop);
  newAction.addEventListener("dragover", dragover);   
  document.getElementById('action-area').appendChild(newAction); 
}
addAction();
addAction();
addAction();
addAction();
addAction();
addAction();
addAction();
addAction();
addAction();
addAction();
addAction();