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>
editing flight test. found source code somewhere, editing it for learning purposes.
<br>
<div id='container'>

    <table id='game-status'>
        <tr>
           <td colspan='2'><b>Movement:</b> <span id='status-control'></span></td>
           <td colspan='1'><b>Angle:</b> <span id='status-angle'></span>°</td>
        </tr>
        <tr>
           <td colspan='2'><b>Keys down:</b> <span id='status-keys'></span></td>
           <td colspan='1'><b>Ticks:</b> <span id='status-ticks'></span></td>
        </tr>
        <tr>
            
        </tr>
        <tr>
            <th colspan='3'>Player position</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='status-pos-x'></span></td>
            <td><b>Y:</b> <span id='status-pos-y'></span></td>
            <td><b>Z:</b> <span id='status-pos-z'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Player rotation</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='status-rot-x'></span></td>
            <td><b>Y:</b> <span id='status-rot-y'></span></td>
            <td><b>Z:</b> <span id='status-rot-z'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Player speed</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='status-speed-x'></span></td>
            <td><b>Y:</b> <span id='status-speed-y'></span></td>
            <td><b>Z:</b> <span id='status-speed-z'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Camera position</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='status-campos-x'></span></td>
            <td><b>Y:</b> <span id='status-campos-y'></span></td>
            <td><b>Z:</b> <span id='status-campos-z'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Camera rotation</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='status-camrot-x'></span></td>
           ...

CSS

#container {
    width: 800px;
    height: 300px;
    background-color: #eee;
    padding: 20px;
    display: flex;
    justify-content: space-between;
}
#container table {
    width: 300px;
    border-collapse: collapse;
}
#container table td {
    background-color: #fff;
    border: 1px solid grey;
    width: 33%;
    padding: 2px 5px;
}
#container table th {
    background-color: #eee;
    border: 1px solid grey;
}



#asset-load-panel {
    display: flex;
    justify-content: space-evenly;
}
#asset-load-panel .asset-load-section {
    width: 220px;
}
.asset-load-top {
    display: flex;
    justify-content: space-evenly;
    margin: 15px 0 10px 0;
}
.asset-load-bar {
    width: 100px;
	height: 20px;
	border: 1px solid green;
}
.asset-load-bar > div {
    height: 100%;
	background-color: green;
}

.asset-load-list {
    width: 220px;
	height: 100px;
    border: 1px solid silver;
	padding: 5px;
	overflow: auto;
}




#game_container {
    width: 360px;
    height: 280px;
    border: 2px solid black;
}

#loading {
    width: 100px;
    height: 15px;
    display: inline-block;
    border: 1px solid blue;
    position: relative;
}
#loading .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    border: 1px solid white;
    background: green;
}

JavaScript

/*
* Can hold multiple keys down at same time.
*/
class Input {

    constructor(){
        this.keys = ["W","A","S","D","Z","X","Q","E","Sp","M"];
        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("status-keys");
        
        // 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, false);
            });
        });
    }
    
    updateKey(key, status){
        if(key == 87){ this.W = status; }
        if(key == 83){ this.S = status; }
        if(key == 65){ this.A = status; }
        if(key == 68){ this.D = status; }
        if(key == 90){ this.Z = status; }
        if(key == 88){ this.X = status; }
        if(key == 81){ this.Q = status; }
        if(key == 69){ this.E = status; }
        if(key == 32){ this.Sp = status; }
        if(key == 77){ this.M = status; }
        
        this.renderKeys();
    }
    
    updateButton(key, status){
        this[key] = status;
        this.renderKeys();
    }
    
    renderKeys(){
        for(let key of this.keys){
            if(this[key]){
                if(!this.keysDown.includes(key)){
                    this.keysDown.push(key);
                }
            }else{
               ...