JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<span class="fontawesome-home button"></span>
<span class="fontawesome-refresh button" id="replay-bttn"></span>
<span class="fontawesome-plus button" id="new-bttn"></span>
<div id="vislog">hi</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);

body {
    overflow:hidden;
    background:#DFE5E8;
}

#vislog {
    font-size:16px;
    font-family: 'Open Sans', sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space:nowrap;
    background:#fff;
    padding:20px;
    border-radius:5px;
}

.square {
    display:inline-block;
    color:black;
    width:60px;
    height:60px;
    text-align:center;
    margin:0px 3px;
    position:relative;
    line-height:0;
    font-weight:bold;
    font-size:44px;
    border-radius:5px;
}
.square:before {
    position:absolute;
    top:0px;
    left:0px;
    width:60px;
    height:60px;
    background:#7FA2B0;
    content:' ';
    display:block;
    border-radius:5px;
    z-index:-1;
}
.square span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:300;
    color:rgba(255,255,255,0.8);
}
.square.end {
    background:#5CC465;
}

.button {
    display:inline-block;
    background:#152024;
    width:60px;
    height:60px;
    font-size:38px;
    position:relative;
    cursor:pointer;
    border-radius:5px;
}
.button:before {
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    color:#CCE6ED;
}
#player {
    position:absolute;
    top:0px;
    left:0px;
    width:60px;
    height:60px;
    background:#E0A35C;
    z-index:200;
    border-radius:5px;
}

/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

JavaScript

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

// MIT license

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] 
                                   || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

// End of requestAnimationFrame polyfill

function logArray(a) {
    var outElem = document.getElementById("vislog");
    outElem.innerHTML = "";
    for (i = 0; i < a.length; i++) {
        for (n = 0; n < a[i].length; n++) {
            if (n == player.x && i == player.y) {
                outElem.innerHTML += "<span class='square'><span>" + String(a[i][n]) + "</span></span>";
            } else if (n == boardData.endX && i == boardData.endY) {
                outElem.innerHTML += "<span class='square end'><span>" + String(a[i][n]) + "</span></span>";
            } else {
                var colorString;
                var textColor = "";
                if(a[i][n] === 0) {
                    colorString = "#CCE6ED";
         ...