JSFiddle - React, Tailwind, and code Playground

by Joel Dies

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>

JavaScript

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { create: create });


// taken from my code and striped out useless parts
var gameScale = 2
var sprite = (function() {
  'use strict';

  var sprite = {
    creature: {},
    misc: {},
    object: {},
    structure: {},
    tile: {},
    vehicle: {},
  };

  sprite.misc.buttonBackground = {
    size: [16, 16],
    data: [
      '0000000000000000',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0999999999999990',
      '0000000000000000'
    ],
  };

  sprite.object.table = {
    size: [6, 3],
    thumbOffset: [5, 8],
    data: [
      '666666',
      '.6..6.',
      '.6..6.'
    ],
    thumbData: [
      '666666',
      '.6..6.',
      '.6..6.'
    ],
  };

  sprite.mergeData = function mergeData(bgData, fgData, xOffset, yOffset) {
    var bgDimensions = sprite.getDimensions(bgData);
    var fgDimensions = sprite.getDimensions(fgData);
    var size = sprite.getMaxDimensions(bgDimensions, fgDimensions);
    var newData = [];
    _.times(size[1], function(y) {
      var row = '';
      _.times(size[0], function(x) {
        var s = '.';
        if (yOffset || xOffset) {
          if (y >= yOffset || x >= xOffset) {
            if (fgData[y - yOffset] && fgData[y - yOffset][x - xOffset])  {

              s = fgData[y - yOffset][x - xOffset];
            }
          }
        } else {
          if (fgData[y] && fgData[y][x])  {
            s = fgData[y][x];
          }
        }

        if (s == '.' && bgData[y] && bgData[y][x])  {
          s = bgData[y][x];
        }
        row += s;
      });
      newData.push(row);
    });

    return newData;
  };

  sprite.makeTexture = function makeTexture(name, data) {
   ...