JSFiddle - React, Tailwind, and code Playground

by polm23

HTML

<script src="http://www.kesiev.com/akihabara/demo/akihabara/gbox.js"></script>
<script src="http://www.kesiev.com/akihabara/demo/akihabara/iphopad.js"></script>
<script src="http://www.kesiev.com/akihabara/demo/akihabara/trigo.js"></script>
<script src="http://www.kesiev.com/akihabara/demo/akihabara/toys.js"></script>
<script src="http://www.kesiev.com/akihabara/demo/akihabara/help.js"></script>
<script src="http://www.kesiev.com/akihabara/demo/akihabara/tool.js"></script>
<script src="http://www.kesiev.com/akihabara/demo/akihabara/gamecycle.js"></script>

JavaScript

var maingame;



window.addEventListener('load', loadResources, false);

function loadResources() {

    //Had to override this to supply the debug fonti
    gbox.loadAll = function(cb) {
        // Setup logger
        if (this._canlog) this.log = console.log;
        // Set the callback function, which is called after the resources are loaded.
        if (!this._cb) this._cb = cb;
        // Default stuff
        this.addImage("_dbf", "http://i.imgur.com/wViah.png");
        if (this._splash.background) this.addImage("_splash", this._splash.background);
        gbox.addFont({
            id: "_dbf",
            image: "_dbf",
            firstletter: " ",
            tileh: 5,
            tilew: 4,
            tilerow: 16,
            gapx: 0,
            gapy: 0
        });
        if (!gbox._splash.minimalTime) gbox._minimalexpired = 2;
        this._waitforloaded();
    }
    var shoot = {
        title: "Shoot",
        splash: {
            background: "http://i.imgur.com/YWS2U.jpg"
        }
    };
    console.log(shoot.title);


    help.akihabaraInit(shoot);
    gbox.addImage('logo', 'http://i.imgur.com/66KBR.jpg');
    gbox.addImage('font', 'http://i.imgur.com/6LfGJ.png');
    gbox.addImage('cat', 'http://placekitten.com/24/44');
    gbox.addImage('background', 'http://i.imgur.com/nxVAX.jpg');
    gbox.addFont({
        id: 'small',
        image: 'font',
        firstletter: ' ',
        tileh: 8,
        tilew: 8,
        tilerow: 255,
        gapx: 0,
        gapy: 0
    });

    //Load the player.
    gbox.addImage('player_sprite', "http://dampfkraft.com/game/jabba.png");
    gbox.addImage('map_sprite', 'http://i.imgur.com/G4NAx.png');

    gbox.addTiles({
        id: 'map_tiles',
        image: 'map_sprite',
        tileh: 16,
        tilew: 16,
        tilerow: 1,
        gapx: 0,
        gapy: 0
    });

    gbox.addTiles({
        id: 'player_tiles',
        // set a unique ID for future reference
        image: 'player_sprite',
        // Use...