JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='stats'>
    <div>
        <b>State:</b> <span id='stats-state'></span>
    </div>
    <div>
        <b>Substate:</b> <span id='stats-substate'></span>
    </div>
    <div>
        <b>Inputs:</b> <span id='stats-inputs'></span>
    </div>
    <div>
        <select id='select-state'>
            <option value='start'>Start</option>
            <option value='map'>Map</option>
            <option value='dex'>Battle</option>
            <option value='dex'>Pokedex</option>
        </select>
    </div>
</div>

<div id='game-container'>
    
    <!-- Opening screen. -->
    <div class='game-screen' id='screen-opening'>
        [Opening]
    </div>
    
    <!-- Start screen. -->
    <div class='game-screen' id='screen-start'>
        [Start]
    </div>
    
    <!-- Intro screen. -->
    <div class='game-screen' id='screen-intro'>
        [Intro]
    </div>
    
    <!-- Map screen. -->
    <div class='game-screen' id='screen-map'>
        [Map]
    </div>
    
    <!-- World map screen. -->
    <div class='game-screen' id='screen-worldmap'>
        [World map]
    </div>
    
    <!-- Inventory screen. -->
    <div class='game-screen' id='screen-inventory'>
        [Inventory]
    </div>
    
    <!-- PC screen. -->
    <div class='game-screen' id='screen-pc'>
        [PC]
    </div>
    
    <!-- Pokedex screen - list. -->
    <div class='game-screen' id='screen-dexlist'>
        [Dex list]
    </div>
    
    <!-- Pokedex screen - entry. -->
    <div class='game-screen' id='screen-dexentry'>
        [Dex entry]
    </div>
    
    <!-- PKMN screen. -->
    <div class='game-screen' id='screen-pkmn'>
        [PKMN]
    </div>
    
    <!-- Battle screen. -->
    <div class='game-screen' id='screen-battle'>
        [Battle]
    </div>
    
    <!-- End credits screen. -->
    <div class='game-screen' id='screen-credits'>
        [Credits]
    </div>
    
</div>

<div id='controls'>
    <div class='control-btn' data-input='u'>Up ^</div>
    <div...

CSS

#stats {
    display: flex;
    flex-flow: row wrap;
}
#stats > div {
    width: 50%;
}

/* SCREENS */

#game-container {
    width: 400px;
    height: 300px;
    box-shadow: 0 0 0 1px black;
    margin: 15px 0;
    position: relative;
}
#game-container .game-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* CONTROLS */

#controls {
    display: flex;
    justify-content: center;
    margin: 15px 0;
}
#controls .control-btn {
    padding: 5px 10px;
    border: 1px solid silver;
    background-color: #eee;
    margin: 0 5px;
}
#controls .control-btn:hover {
    cursor: pointer;
    border: 1px solid grey;
}

JavaScript

const db = {};

const Save = {
    name: "",
    time: 0,
    inventory: [],
    seen: [],
    caught: [],
    owned: [],
    party: [],
    badges: [],
    flags: [],
    map: 0,
    x: 0,
    y: 0
};

const Input = {};

class Utility {


}



class State_Opening {}

class State_Dex {

    constructor(){
        this.screen = "list";
        this.monId = 1;
        //this.listTop = 1;
        this.entryPage = 1;
    }
    
    renderList(){
        let start = this.monId;
        if(this.monId > 142){
            start = 142;
        }
        
        // clear list canvas section
        
        for(let i = 0; i < 9; i++){
            let monId = start + i;
            let mon = db.species.find(row => row.id == monId);
            let seen = Save.seen.includes(monId);
            let caught = Save.caught.includes(monId);
            
            // draw mon row
            let top = i * 30;
            
            // Draw pointer next to name.
            if(monId == this.monId){
                
            }
        }
    }
    
    /*
    * Not called every frame. Only when needed.
    */
    renderEntry(){
        if(this.entryPage == 1){
            // Render whole page.
        }else{
            // Replace the text only.
        }
    }
    
    
    update(){
        if(this.screen == "list"){
        
            // Scroll up or down, within limits.
            if(Input.u && this.monId > 1){
                this.monId -= 1;
            }
            if(Input.d && this.monId < 151){
                this.monId += 1;
            }
            
            if(Input.b){
                // exit dex
            }
            if(Input.a){
                // try to select mon, if seen it
            }
            
        }
        
        if(this.screen == "entry"){
        
            if(Input.a){
                if(this.entryPage == 1){
                    this.entryPage = 2;
                }else{
                    this.screen = "list";
              ...