JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="stage">
  <div id="someidrequired" class="floor" data-tron-wall-south="on"></div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
   perspective:500px;
}
.tron-output{
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  height:30px;
}
.stage{

  transform-style:preserve-3d;
  transform:rotateY(30deg);
  height:100%;
}
.floor{
  position:absolute;
  width:200px;
  height:200px;
  background-color:#666;
  transform:translateX(-100px) rotateX(90deg);
  top:50%;
  left:50%;
}
.floor:before{
  content:"";
  display:block;
  width:50%;
  height:50%;
  top:0%;
  left:0%;
  background-color:#000;
  opacity:.3;
  position:absolute;
}
.floor:after{
  position:absolute;
  content:"";
  display:block;
  width:50%;
  height:50%;
  top:0%;
  left:0%;
  background-color:#000;
  opacity:.3;
}

.floor[data-tron-wall-south="on"]{
  transform-style:preserve-3d;
}
.floor[data-tron-wall-south="on"]:before{
  background-color:#ffcc00;
  transform:translateZ(50px) translateX(50px) translateY(100px) rotateX(-90deg) rotateY(-90deg);
}
.floor[data-tron-wall-north="on"]{
  transform-style:preserve-3d;
}
.floor[data-tron-wall-north="on"]:after{
  background-color:#ffcc00;
  transform:translateZ(50px) translateY(-100px) translateX(50px) translateY(100px) rotateX(-90deg) rotateY(-90deg);
}


.floor[data-tron-wall-west="on"]{
  transform-style:preserve-3d;
}
.floor:not([data-tron-wall-south])[data-tron-wall-west="on"]:before{
  background-color:#ffcc00;
  transform:translateZ(50px) translateX(0px) translateY(50px) rotateX(-90deg) rotateY(0deg);
}
.floor[data-tron-wall-south="on"][data-tron-wall-west="on"]:after{
  background-color:#ffcc00;
  transform:translateZ(50px) translateX(0px) translateY(50px) rotateX(-90deg) rotateY(0deg);
}
.floor[data-tron-wall-east="on"]{
  transform-style:preserve-3d;
}
.floor:not([data-tron-wall-north])[data-tron-wall-east="on"]:after{
  background-color:#ffcc00;
  transform:translateZ(50px) translateX(100px) translateY(50px) rotateX(-90deg) rotateY(0deg);
}
.floor[data-tron-wall-north="on"][data-tron-wall-east="on"]:before{
 ...

JavaScript

var tron = {};

tron.direction = 'northsouth';
tron.degrees = 0;

tron.canturn = false;
tron.turning = false;

tron.floor;

tron.init = function(){

	$('.viewport-left .floor').each(function(){

    var cached = $(this);

    // center marker
    var obj = { 
      x:parseInt(parseInt(cached.attr('cssattr_translatex')-400) * -1), 
      y:parseInt(cached.attr('cssattr_translatey')), 
      z:parseInt(parseInt(parseInt(cached.attr('cssattr_translatez'))) * -1), 
      span: 100,
      remove: 1,
      apicode: 'tron.floor = $(\'.floor[id="' + cached.attr('id') + '"]\'); tron.canturn = true;' 
    };

    controls.push_proximity(obj);

    // center south
    var obj = { 
      x:parseInt(parseInt(cached.attr('cssattr_translatex')-400) * -1), 
      y:parseInt(cached.attr('cssattr_translatey')), 
      z:parseInt(parseInt(parseInt(cached.attr('cssattr_translatez'))) * -1)+400, 
      span: 100,
      remove: 1,
      apicode: 'tron.floor = $(\'.floor[id="' + cached.attr('id') + '"]\'); tron.floor.attr(\'data-tron-wall-south\',\'on\'); tron.canturn = false;' 
    };

    controls.push_proximity(obj);

    // center north
    var obj = { 
      x:parseInt(parseInt(cached.attr('cssattr_translatex')-400) * -1), 
      y:parseInt(cached.attr('cssattr_translatey')), 
      z:parseInt(parseInt(parseInt(cached.attr('cssattr_translatez'))) * -1)-400, 
      span: 100,
      remove: 1,
      apicode: 'tron.floor = $(\'.floor[id="' + cached.attr('id') + '"]\'); tron.floor.attr(\'data-tron-wall-north\',\'on\'); tron.canturn = false;' 
    };

    controls.push_proximity(obj);

    // center west
    var obj = { 
      x:parseInt(parseInt(cached.attr('cssattr_translatex')-400) * -1)-400, 
      y:parseInt(cached.attr('cssattr_translatey')), 
      z:parseInt(parseInt(parseInt(cached.attr('cssattr_translatez'))) * -1), 
      span: 100,
      remove: 1,
      apicode: 'tron.floor = $(\'.floor[id="' + cached.attr('id') + '"]\'); tron.floor.attr(\'data-tron-wall-west\',\'on\');...