JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!--sample isometric cube code-->

<div class="grid"></div>

<div class="controls">
    <p><label>x: <input class="input-x" type="number" size="2" min="1" max="30" value="15" /></label></p>
    <p><label>y: <input class="input-y" type="number" size="2" min="1" max="30" value="15" /></label></p>
    <p><label>z: <input class="input-z" type="number" size="2" min="1" max="30" value="15" /></label></p>
    <p><button class="input-button">Generate</button></p>
</div>

<div class="controls-tiles controls"><div class="img"></div></div>

<p class="twitter-link">
  <a href="https://twitter.com/tayokoart" target="_blank">@tayokoart</a>
</p>

CSS

.grid {
  position: relative;
  margin: 2em auto;
  z-index: 1;
}

.grid .cell {
  position: absolute;
  display: block;
  width: 2em;
  height: 2em;
  background-position: 256px 0;
  background-repeat: none;
}
.grid .cell:nth-child(2n) {
  
  background-position: 256px -33px;
 
}

.grid .cell:hover {
  background-position: 192px 0;
  cursor: pointer;
}

.controls {
  position: absolute;
  left: 1em;
  top: 1em;
  padding: 1em;
  background-color: #eee;
  border: 1px solid #999;
  border-bottom-width: 2px;
  z-index: 2;
}

.twitter-link {
  position: absolute;
  bottom: 1em;
  left: 1em;
}

.controls-tiles {
  bottom: 1em;
  right: 1em;
  top: auto;
  left: auto;
}
.controls-tiles .img {
  display: block;
  height: 100px;
  width: 320px;
}

.input-button {
  cursor: pointer;
}

.grid .cell,
.controls-tiles .img {
  background-image:...

JavaScript

// Crappy "sketch" code. 

function Isometry(xLen, yLen, zLen) {
	this.xLen		= xLen;
	this.yLen		= yLen;
	this.zLen		= zLen;
	this.cellWidth	= 32;
	this.cellHeight	= 32;
	this.height 	= ((this.cellHeight / 2) * (this.zLen)) + (this.cellHeight / 4) * (this.xLen + this.yLen);
	this.width		= (this.cellWidth / 2) * (this.xLen + this.yLen);

	this.calcPos = function(x,y,z) {
		var maxYPos		= ((this.xLen - 1) * this.cellHeight / 4) + (this.cellWidth / 2) * (this.zLen -1),
			pos 		= new Array();

		pos["x"] = (x * this.cellWidth / 2) + (y * this.cellWidth / 2); //x
		pos["y"] = (y * this.cellHeight / 4) - (x * this.cellHeight / 4); //y
		pos["y"] = pos["y"] - (this.cellWidth / 2) * z; //z
		pos["y"] = pos["y"] + maxYPos; //global offset	
		pos["z"] = this.xLen - x; // z-index


		return pos;
	};

	this.drawSquare = function(xLen, yLen, zLen) {
		var elementString	= '';
		for (var z = 0; z <= zLen - 1; z++) {
			for (var x = 0; x <= xLen - 1; x++) {
				for (var y = 0; y <= yLen - 1; y++) {
						var pos = this.calcPos(x,y,z);
						elementString = elementString + '<div class="cell" style="left:' + pos['x'] + 'px; top:' + pos['y'] + 'px; z-index:' + pos['z'] + ';" data-coord="z:' + z + ' x:' + x + ' y:' + y + '"></div>';
				};
			};
		};
		this.renderGrid(elementString);
	};

	this.addCell = function(x,y,z) {
		var pos = this.calcPos(x,y,z),
			elementString = '<div class="cell" style="left:' + pos['x'] + 'px; top:' + pos['y'] + 'px; z-index:' + pos['z'] + ';" data-coord="z:' + z + ' x:' + x + ' y:' + y + '"></div>';
		$('.grid').append(elementString);
	};

	this.renderGrid = function(elementString) {
		$('.grid')
			.width(this.width)
			.height(this.height)
			.html(elementString);

		$('.cell').click(function(e){
			e.preventDefault;
			$(this).fadeOut();
		});
	}

	this.drawSquare(xLen, yLen, zLen);
}


$(document).ready(function(){
	var cube = new Isometry(9,9,9);
	$('.input-button').click(function(e){
		var x = $('.input-x').val(),
			y =...