JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://project-vanquish.co.cc/jQRPG/js/jquery.hotkeys.js"></script>
<div id="everything"> 
 
    <div id="jqrpg_wrapper"> 
        <div id="jqrpg_preloader"> 
            <span class="sprites face_u">@</span>        
            <span class="sprites face_d">@</span> 
            <span class="sprites face_l">@</span> 
            <span class="sprites face_r">@</span> 
        </div> 
        <div id="jqrpg_screen"> 
 
            <span id="jqrpg_player"></span> 
            <div id="jqrpg_map"> 
            <span>This should be replaced by jQuery.</span> 
            </div> 
        </div> 
        <div id="jqrpg_menu"> 
            <h1>jQRPG</h1> 
 
        </div> 
    </div> 
 
</div>

CSS

html,body,div,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd,p,blockquote,pre,form,fieldset,table,th,td{margin: 0;padding: 0;}
html,body{height:100%;}
a,input{outline:0;}
a img{border:0;}
/* ************************************************************************** *\
 * ********************************* Layout ********************************* *
\* ************************************************************************** */
body {
 background: #333;
 font: 62.5%/1.62 Helvetica, Arial, Sans-serif;
}

#everything {
 overflow: hidden;
}

#information {
 background: #111;
 border: 16px #222 solid;
 color: #fff;
 float: left;
 margin: 50px 0 0;
 padding: 1em 2em;
 width: 480px;
}
#information p {
 font-size: 1.4em;
 line-height: 1.62;
 margin: 0 1em 0.5em;
}
#information h1 {
 font: 2em/1 Georgia, Times, Serif;
 margin: 0.5em 0;
}
#information h2 {
 font: 700 1.5em/1 Georgia, Times, Serif;
 margin: 1em 0 0.5em;
}
#information ul {
 margin: 0 2em 0.5em;
}
#information a {
 border-bottom: 1px #ffa dotted;
 color: #ffa;
 padding: 0 2px;
 text-decoration: none;
}
#jqrpg_preloader {
 height: 0px;
 overflow: hidden;
 width: 0px;
}
#jqrpg_wrapper {
 border: 16px #000 solid;
 border-radius: 8px; -moz-border-radius: 8px;
 float: left;
 margin: 50px;
 overflow: hidden;
 position: relative;
}
#jqrpg_screen {
 background: #000;
 overflow: hidden;
 position: relative;
 z-index: 0;
}
#jqrpg_menu {
 background: #000;
 background: rgba(0,0,0,0.5);
 bottom: 0;
 color: #fff;
 font: 8px/1 'Consolas', 'Lucida Console', Monaco, Monospace;
 overflow: hidden;
 padding: 1em;
 position: absolute;
 width: 100%;
}
#jqrpg_map {
 display: none;
}
    #jqrpg_map span,
    #jqrpg_player,
    .sprites {
     background-repeat: no-repeat;
     display: block;
     height: 0;
     line-height: 1;
     overflow: hidden;
     padding: 16px 0 0;
     width: 16px;
    }
    #jqrpg_player {
     left: 0;
      position: absolute;
     top: 0;
     z-index: 999;
    }
    .face_u {
     width: 4px;
     height:...

JavaScript

$(function() {

jqr = new Object();
jqr.settings = new Object();
jqr.settings.sprite_width = 16;
jqr.settings.sprite_height = 16;
jqr.settings.space = false;

jqr.p = new Object();
function jqrpgResetPlayer() {
    jqr.p.face = 'd';
    jqr.p.x = 3;
    jqr.p.y = 3;
    jqr.p.state = 'map';
}

jqr.map = new Object();
jqr.map.height     = 16;
jqr.map.width     = 16;
jqr.map.terrain    = [
 '01','02','03','11','11','11','11','11','11','11','11','11','11','11','11','11',
 '01','01','00','00','11','00','00','11','11','00','00','00','00','00','00','00',
 '01','00','00','00','11','00','00','00','00','11','00','00','00','00','00','00',
 '01','00','00','00','00','00','00','11','00','11','00','00','00','00','00','00',
 '01','00','00','00','00','00','00','11','00','11','11','11','11','00','00','00',
 '00','00','00','00','00','11','11','00','00','00','00','00','11','00','00','00',
 '00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00',
 '00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00',
 '00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00',
 '00','00','00','00','00','00','00','00','00','00','00','00','11','00','00','00',
 '00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00',
 '00','00','00','00','00','00','00','00','00','11','00','00','00','00','00','00',
 '00','00','00','00','00','00','00','00','00','11','00','00','11','01','01','01',
 '00','00','00','00','00','00','00','00','00','11','11','11','00','00','00','01',
 '00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00',
 '00','00','00','00','00','00','00','00','00','00','00','00','00','00','00','00',
];
jqr.map.terrain_walkable = [
 '00','01','02',
];

jqr.battle = new Object();

jqrpgBuildMapHtml();
jqrpgUpdateMapClasses();
jqrpgResetPlayer();
jqrpgSetPlayerFace(jqr.p.face);
jqrpgSetPlayer(jqr.p.x, jqr.p.y);
jqrpgBindKeys();

/**
 * only call this once
 */
function jqrpgBuildInterface()...