JSFiddle - React, Tailwind, and code Playground

by whtevn

HTML

<script src="https://raw.github.com/caleb531/jcanvas/master/jcanvas.min.js"></script>
  <!DOCTYPE html>
<html>
  <meta charset="UTF-8">
  <head>
  </head>
  <body>
    <script src="gameDefinitions.js"></script>
    <script src="fate.js"></script>
    <script>
      $(function(){
        game.env['board'] = fate.determineBoardSize(window, game.env);

        game = fate.designBoard(game, blockSetter);

        game.mouse  = fate.setPositionOf(mouse, game.env.board)
        game.cats   = fate.setPositionOf(cat, game.env.board, game.level['numCats'])

        game = fate.initiateReality(game);
        console.log('done');

        //fate.startLevel(game);
      });
    </script>
  </body>
</html>

JavaScript

var fate = {
  determineBoardSize: function (screen, env){
    canvas = $(env.element, {id: env.canvas['id']});
    canvas.attr('width', env.canvas['width']);
    canvas.attr('height', env.canvas['height']);
    $(env.container).append(canvas);
    return {
      rows: env['board']['rows'],
      cols: env['board']['cols']
    }
  },

  createRow: function(cellStates, y){
    if(cellStates[y] == undefined){
      cellStates[y] = [];
    }
    return cellStates;
  },

  designBoard: function (game, blockSetter){
    cellStates = game.level['cellStates'];
    for(var y=0; y<game.env.board['rows']; y++){
      cellStates = this.createRow(cellStates, y);
      for(var x=0; x<game.env.board['cols']; x++){
        cellStates[y][x] = blockSetter.generateSpace(game, x, y);
      }
    }

    game.level['cellStates'] = cellStates;

    return game;
  },

  placeOnBoard: function(obj, game){
    if($.isArray(obj)){
      for(var i=0; i<obj.length; i++){
        game = this.placeOnBoard(obj[i], game);
      }
    }else{
      game.level.cellStates[obj.position['y']][obj.position['x']] = obj;
    }
    return game;
  },

  clearLandingArea: function(obj, game){
    if($.isArray(obj)){
      for(var i=0; i<obj.length; i++){
        game = this.clearLandingArea(obj[i], game);
      }
    }else{
      for(var i=0; i<obj.radius; i++){
        yPos = obj.position['y']+i - (obj.radius/2);
        yPos = yPos < 1 ? 1 : yPos;
        yPos = yPos > game.env.board['rows']-2 ? game.env.board['rows']-2 : yPos;
        for(var j=0; j<obj.radius; j++){
          xPos = obj.position['x']+j - (obj.radius/2);
          xPos = xPos < 1 ? 1 : xPos;
          xPos = xPos > game.env.board['cols']-2 ? game.env.board['cols']-2 : xPos;
          game.level.cellStates[yPos][xPos] = {sprite: null};
          console.log(xPos+", "+yPos);
        }
      }
    }

    return game;
  },

  setPositionOf: function(obj, board, numObjs){
    if(numObjs === undefined){
      obj.position =...