JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://steveshepherd.e-ddl.com/wp-content/plugins/podio_management/scripts/dateClass.js"></script>
<script src="http://steveshepherd.e-ddl.com/wp-content/plugins/podio_management/scripts/date.js"></script>
<div id="page">
    <div class="StartnewGame">Start New game</div>
    <div class="endGame">End game</div>
    <div class="clear"></div>
    
    <div id="pageContainer">
        <div id="playerBox"></div>
    </div>
</div>

CSS

#page{
    width:400px;
}

#pageContainer{
    width:400px;
    height:300px;
    float:left;
    border:1px solid black;
    background-color:yellow;
}

#playerBox{
    width:10px;
    height:10px;
    border:1px solid black;
    background-color:white;
}

.StartnewGame, .endGame{ padding:5px 10px; border:1px solid grey; float:left; margin-bottom:20px; cursor:pointer;}
.StartnewGame:hover, .endGame:hover{background-color:grey; border-color:white;}

.endGame{float:right;}

.clear{clear:both;}

JavaScript

var curPlayer = new player($('#playerBox'));
var oGame = new game(curPlayer);
/*
$(document).keypress(function(e){
dealWithClick(e)
});
*/



$('.StartnewGame').click(function() {
   $('#pageContainer').focus();
    oGame.fnStartGame();
});

$('.endGame').click(function() {
    oGame.fnEndGame();
});

function game(aoPlayers){
    var that = this;
    this.nElement = $(window);
    this.iGlobalCoolDown = 500;
    this.iRefreshGameFrequency = 100;
    this.aoPlayers = [];
    this.oGcInterval = '';
    this.oRgfInterval = '';
    this.aKeysPressed = [];
    
    this.fnAddPlayers = function(aoPlayer){
        if(typeof aoPlayers !== 'undefined')
        {
            if(typeof aoPlayers === 'array')
            {
                $.each(aoPlayers,function(i,oPlayer){
                    this.aoPlayers.push(oPlayer);
                });
                return;
            }
            else if(typeof aoPlayers === 'object')
            {
                this.aoPlayers.push(aoPlayers);
                return;
            }
            return false;
        }
        else if(typeof aoPlayer !== 'undefined')
        {
            if(typeof aoPlayer === 'array')
            {
                $.each(aoPlayer,function(i,oPlayer){
                    this.aoPlayers.push(oPlayer);
                });
                return;
            }
            else if(typeof aoPlayer === 'object')
            {
                this.aoPlayers.push(aoPlayer);
                return;
            }
            return false;
            
        }
    }
    this.fnRemovePlayers = function(){
        this.aoPlayers = [];
    }
    this.fnBindKeys = function(){
        this.nElement.keydown(function(e) {
            console.log(e.which);
            e.preventDefault();
            that.aKeysPressed[e.which] = true;
            //that.fnDealWithClick();
        }).keyup(function(e) {
            e.preventDefault();
            that.aKeysPressed[e.which] = false;
           ...