JSFiddle - React, Tailwind, and code Playground

by fletcher00

HTML

<div id="gameContainer">
		
		<div id="newswireContainer">
			<button class="button" id="chatButton">
                <input type="image" class="buttonImage" id="buttonImage_chat" src="http://tankwar2000.com/assets/gui/iconChat.png"/>
			</button>
			<div id="newswire">
				<span id="newswireText" contentEditable=false type="text"></span>
				<span id="optionalInputText" class="chatInput" contentEditable=true></span>
			</div>
        </div>
		
		<div id="mapContainer">
			<canvas id="mapView" class="pixelated"></canvas>
			<canvas id="markersView" class="pixelated"></canvas>
		</div>
		<div id="statsPanel">
			<div id="healthProgress" class="progress">
			    <div id="healthBar"></div>
			    <span id="healthText" class="percent">0%</span>
			</div>
			<div id="pointsProgress" class="progress">
			    <div id="pointsBar"></div>
			    <span id="pointsText" class="percent">0</span>
			</div>
		</div>
		
		<div id="buildButtons">
		    <button class="button" id="buildButton_wall">
	        	<img class="buttonImage pixelated" id="buttonImage_wall" src="http://tankwar2000.com/assets/gui/iconWall.png"/>
		    </button>
		    <button class="button" id="buildButton_road">
	        	<img class="buttonImage pixelated" id="buttonImage_road" src="http://tankwar2000.com/assets/gui/iconRoad.png"/>
		    </button>
		    <button class="button" id="buildButton_pillbox">
	        	<img class="buttonImage pixelated" id="buttonImage_pillbox" src="http://tankwar2000.com/assets/gui/iconPillbox.png"/>
		    </button>
		</div>
    <div id="teamDisplay">
    </div>
		
		<div id="touchControlsContainer">
			<button class="button" id="leftButton">			    
	        	<img class="buttonImage" id="buttonImage_left" src="http://tankwar2000.com/assets/gui/touch/left.png"/></button>
			<button class="button" id="rightButton">    
	        	<img class="buttonImage" id="buttonImage_right" src="http://tankwar2000.com/assets/gui/touch/right.png"/></button>
			<button class="button" id="fireButton"> ...

CSS

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {border:0;padding:0;margin:0;}

.pixelated {
  image-rendering:optimizeSpeed;             /* Legal fallback */
  image-rendering:-moz-crisp-edges;          /* Firefox        */
  image-rendering:-o-crisp-edges;            /* Opera          */
  image-rendering:-webkit-optimize-contrast; /* Safari         */
  image-rendering:optimize-contrast;         /* CSS3 Proposed  */
  image-rendering:crisp-edges;               /* CSS4 Proposed  */
  image-rendering:pixelated;                 /* CSS4 Proposed  */
  -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}
/* Hue shifts for team colors (from red) */
.team0 {    
}
.team1 {    
    -webkit-filter: hue-rotate(240deg);
}
.team2 {    
    -webkit-filter: hue-rotate(120deg) brightness(175%);
}

@font-face {
	    font-family: CourierBd;
	    src: url(assets/courierBd.ttf);
}
@font-face {
	    font-family: Chicago;
	    src: url(assets/chicago.ttf);
}
html,body{
    background: rgb(0, 0, 0) transparent;
    background: rgba(0, 0, 0, 0);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.rendererView {	
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
	margin: 0;
	padding: 0;
	background-color: #fff;
	display: block;
	left:0;
	top:0;
	z-index:0;
}
#gameContainer {
    width: 100%;
    height: 100%;
}
/* Minimap */
#mapContainer {
	position: absolute;
    width: auto;
    height: auto;
    background-color:#00F;
    border-style: outset;
    z-index: 1;
	position: absolute;
	right: 0;
	top:62px;
	display:block;
}
#mapView {
    width: 5px;
    height: 5px;
    display: block;
    margin: 8px;
}
#markersView {    
    width: auto;
    height: auto;
    margin: 8px;
    position: absolute;
    top: 0;
    left: 0;
}

#pillboxDisplay {
   ...

JavaScript

function browserOnLoad() {
	isCocoon = false;
    isTyping = false;
    inputCallback = null;
	isTouchDevice = ('ontouchstart' in document.documentElement);
	//$("#buildButtons").draggable();
	document.getElementById("buildButton_wall").onclick = build_button_pressed;
	document.getElementById("buildButton_road").onclick = build_button_pressed;
	document.getElementById("buildButton_pillbox").onclick = build_button_pressed;
	//document.getElementById("buildButton_mine").onclick = build_button_pressed;
	document.getElementById("buildButton_wall").onmouseup = focus_game;
	document.getElementById("buildButton_road").onmouseup = focus_game;
	document.getElementById("buildButton_pillbox").onmouseup = focus_game;
	//document.getElementById("buildButton_mine").onmouseup = focus_game;
	//$("#newswire").draggable();
	//document.getElementById("newswire").style.width = "auto";
	this.newswire_queue = [];
    this.newswire_timer = {};
    newswire_set_shown(false);
    document.getElementById("chatButton").onclick = chat_button_pressed.bind(this);    
	//connectToServer(); 
}
function cocoonOnLoad() {
	newswire_message = function(msg) {
		msg = encodeURI(msg);
		Cocoon.App.forwardAsync("newswire_message('"+msg+"');", null);
		console.log(msg);
	}
	stats_set_health = function(value, maxValue){
		Cocoon.App.forwardAsync('stats_set_health('+value+','+maxValue+');');
	}
	stats_set_points = function(value){
		Cocoon.App.forwardAsync('stats_set_points('+value+');');
	}
	set_button_depressed = function(whichButton, depressed) {
		Cocoon.App.forwardAsync('set_button_depressed('+whichButton+', '+depressed+');');
	}
	set_build_button_enabled = function(whichButton, enabled) {
		Cocoon.App.forwardAsync('set_build_button_enabled('+whichButton+', '+enabled+');');
	}
	set_control_bounds = function(bounds) {
		console.log(bounds);
		controlBounds = bounds;
	}	
	interface_resize = function() {
		Cocoon.App.forwardAsync('interface_resize();');
	}
	isCocoon = true;
	isTouchDevice =...