JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script>
<div id='container'>

    <table id='game-status'>
        <tr>
           <td colspan='3'><b>Player state:</b> <span id='move-state'></span></td>
        </tr>
        <tr>
           <td colspan='3'><b>Player animation:</b> <span id='player-anim'></span></td>
        </tr>
        <tr>
           <td colspan='3'><b>Time in state:</b> <span id='player-state-time'></span></td>
        </tr>
        <tr>
           <td colspan='3'><b>Keys down:</b> <span id='input-keys'></span></td>
        </tr>
        <tr>
            <td colspan='3'><b>Angle:</b> <span id='angle'></span> degrees</td>
        </tr>
        <tr>
            <th colspan='3'>Player rotation</th>
        </tr>
        <tr>
            <td><b>X (pitch):</b> <span id='player-rotX'></span></td>
            <td><b>Y (yaw):</b> <span id='player-rotY'></span></td>
            <td><b>Z (roll):</b> <span id='player-rotZ'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Player position</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='player-posX'></span></td>
            <td><b>Y:</b> <span id='player-posY'></span></td>
            <td><b>Z:</b> <span id='player-posZ'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Player speed</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='player-speedX'></span></td>
            <td><b>Y:</b> <span id='player-speedY'></span></td>
            <td><b>Z:</b> <span id='player-speedZ'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Camera position</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='camPosX'></span></td>
            <td><b>Y:</b> <span id='camPosY'></span></td>
            <td><b>Z:</b> <span id='camPosZ'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Camera rotation</th>
        </tr>
        <tr>
            <td><b>X:</b> <span...

JavaScript

const span = {
    inputKeys: "input-keys",
    moveState: "move-state",
    stateTime: "player-state-time",
    animation: "player-anim",
    ticks: "tick-counter",
    
    posX: "player-posX",
    posY: "player-posY",
    posZ: "player-posZ",
    speedX: "player-speedX",
    speedY: "player-speedY",
    speedZ: "player-speedZ",
    rotX: "player-rotX",
    rotY: "player-rotY",
    rotZ: "player-rotZ"
};
for(let key of Object.keys(span)){
    let e = document.getElementById(span[key]);
    span[key] = e;
}

const flightEnabled = false;

/*
* Just for testing. See numbers changing.
* Later do same for camera too.
*/

const spyroProperties = [
    "posX", "posY", "posZ", 
    "speedX", "speedY", "speedZ",
    "rotX", "rotY", "rotZ"
];

function updateDisplay(){
    for(let prop of spyroProperties){
        span[prop].innerHTML = Game.Spyro[prop];
    }
}



class InputClass {

    constructor(){
        this.keys = ["W","A","S","D","Z","X","Q","E","Sp","M"    , "C", "T"];
        for(let key of this.keys){
            this[key] = false;
        }
        
        let keyDown = event => {
            this.updateKey(event.which, true);
        }
        let keyUp = event => {
            this.updateKey(event.which, false);
        }
        document.addEventListener("keydown", keyDown, false);
        document.addEventListener("keyup", keyUp, false);
        
        // test
        this.keysDown = [];
        //this.status = document.getElementById("input-keys");
       // this.status = span.inputKeys;
        
        // buttons
        let _this = this;
        let buttons = document.querySelectorAll("#game-controls button");
        buttons.forEach(function(e){
            let key = e.getAttribute("data-key");
            let __this = _this;
            e.addEventListener("mousedown", function(e){
                __this.updateButton(key, true);
            });
            e.addEventListener("mouseup", function(e){
                __this.updateButton(key,...