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='3'><b>Control type:</b> <span id='status-control'></span></td>
        </tr>
        <tr>
           <td colspan='3'><b>Keys down:</b> <span id='status-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='pitch'></span></td>
            <td><b>Y (yaw):</b> <span id='roll'></span></td>
            <td><b>Z (roll):</b> <span id='yaw'></span></td>
        </tr>
        <tr>
            <th colspan='3'>Player position</th>
        </tr>
        <tr>
            <td><b>X:</b> <span id='playerX'></span></td>
            <td><b>Y:</b> <span id='playerY'></span></td>
            <td><b>Z:</b> <span id='playerZ'></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 id='camRotX'></span></td>
            <td><b>Y:</b> <span id='camRotY'></span></td>
            <td><b>Z:</b> <span id='camRotZ'></span></td>
        </tr>
    </table>
    
    <div id='game_container'></div>

</div>

<button id='pause-btn'>Pause</button>

<div id='game-controls'>
    <button class='uh' data-key='W'>Up</button>
    <button class='uh' data-key='A'>Left</button>
    <button class='uh' data-key='D'>Right</button>
    <button class='uh'...

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;
}



#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/buttons 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{
               ...