JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Battlefield demo. X means a tile is impassable. More info at the bottom.

<p>
Load a battle: <select id='select-battle'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
</select>
<button id='load-battle-btn'>Go</button>
 ---- 
<button id='toggle-grid-btn'>Toggle Grid</button>
</p>

<div id='bf-map-border'>
    <div id='bf-map-container'></div>
</div>

<div id='bf-tab-container'>
    <div id='bf-tab-buttons'>
        <div class='bf-tab-btn bf-active-tab-btn' id='bf-tab-btn-command' data-tab='command'>Command</div>
        <div class='bf-tab-btn' id='bf-tab-btn-reports' data-tab='reports'>Reports</div>
        <div class='bf-tab-btn' id='bf-tab-btn-allies' data-tab='allies'>Allies</div>
        <div class='bf-tab-btn' id='bf-tab-btn-enemies' data-tab='enemies'>Enemies</div>
        <!-- Maybe change to Reference?
        <div class='bf-tab-btn' id='bf-tab-btn-items' data-tab='items'>Inventory</div>
        -->
    </div>
    <div id='bf-tabs'>
        
        <div class='bf-tab' id='bf-tab-command'>
        
            <!-- First half -->
            <div id='bf-com-portrait'>[img]</div>
            <div id='bf-com-name'>[name]</div>
            
            <div id='bf-com-current-coords'>[x,y]</div>
            <div id='bf-com-target-coords'>Target: [x,y]</div>
            
            <div id='bf-com-hp'>HP: 100/00</div>
            <div id='bf-com-mp'>MP: 50/50</div>
            <div id='bf-com-statuses'>[icon]</div>
            
            <div id='bf-com-range-text'>
                Allies and enemies within range (<span id='bf-com-range'></span>)
            </div>
            <div id='bf-com-range-list'>
                [list, or warning about none, if using non-self attack/spell/item]
            </div>
            
            <!-- Second half -->
            <div id='bf-com-mode-buttons'>
                <div id='bf-mode-btn-switch' class='bf-com-mode-btn' data-mode='switch'>Switch</div>
                <div id='bf-mode-btn-move'...

CSS

div, img, button, canvas, p, span {
    box-sizing: border-box;
}

/* Contains buttons down side, and tabs. */
#bf-tab-container {
    width: 900px;
    height: 340px;
    display: flex;
    flex-flow: row;
}
#bf-tab-buttons {
    width: 120px;
    background-color: gold;
}
#bf-tab-buttons .bf-tab-btn {
    width: 121px;
    margin: 10px -1px 10px 0;
    height: 35px;
    border: 1px solid black;
    border-right: 1px solid gold;
}
.bf-active-tab-btn {
    background-color: #fff;
    border-right: 1px solid #fff;
}

#bf-tabs {
    width: 780px;
    background-color: #fff;
    border: 1px solid black;
}




/* Selected pet options, and allies/enemies in range. */
#bf-tab-command {
    width: 100%;
    height: 100%;
    position: relative;
}
#bf-tab-command > div {
    position: absolute;
    background-color: silver;
}
/* First half */
#bf-tab-command #bf-com-portrait {
    top: 5px;
    left: 5px;
    width: 90px;
    height: 90px;
}
#bf-tab-command #bf-com-name {
    top: 5px;
    left: 100px;
    width: 225px;
    height: 35px;
}
#bf-tab-command #bf-com-current-coords {
    top: 50px;
    left: 100px;
    width: 70px;
    height: 35px;
}
#bf-tab-command #bf-com-target-coords {
    top: 50px;
    left: 175px;
    width: 150px;
    height: 35px;
    text-align: right;
}
#bf-tab-command #bf-com-hp {
    top: 100px;
    left: 5px;
    width: 130px;
    height: 25px;
}
#bf-tab-command #bf-com-mp {
    top: 100px;
    left: 140px;
    width: 130px;
    height: 25px;
}
#bf-tab-command #bf-com-statuses {
    top: 100px;
    left: 275px;
    width: 25px;
    height: 25px;
}
#bf-tab-command #bf-com-range-text {
    top: 145px;
    left: 5px;
    width: 335px;
    height: 25px;
}
#bf-tab-command #bf-com-range-list {
    top: 175px;
    left: 5px;
    width: 335px;
    height: 160px;
    overflow: auto;
}
#bf-com-range-list .bf-range-fighter {
    border: 1px solid grey;
    margin: 5px;
}

/* Second half */
/* 6 buttons: move, scan, phys, magic, item, switch....

JavaScript

const db = {

    // separate movement and spell ranges later
    pets: [
        {
            id: 1, name: "Flower",
            maxHp: 100, hp: 89, maxMp: 20, mp: 20,
            moveRange: 2, magicRange: 4,
            abilities: [1,4,5,6,11]
        },{
            id: 2, name: "Snow",
            maxHp: 120, hp: 82, maxMp: 20, mp: 20,
            moveRange: 3, magicRange: 5,
            abilities: [2,7,9,12,13,14,15]
        },{
            id: 3, name: "Rain",
            maxHp: 135, hp: 38, maxMp: 20, mp: 20,
            moveRange: 4, magicRange: 3,
            abilities: [1,5,8,9,10]
        },{
            id: 4, name: "Storm",
            maxMp: 20, mp: 20, maxHp: 78, hp: 57,
            moveRange: 1, magicRange: 2, 
            abilities: [3,6,13,17]
        },{
            id: 5, name: "Breeze",
            maxHp: 67, hp: 19, maxMp: 20, mp: 20,
            moveRange: 6, magicRange: 3,
            abilities: [5,10,6,16,17,18]
        },{
            id: 6, name: "Flight",
            maxHp: 83, hp: 83, maxMp: 20, mp: 20,
            moveRange: 1, magicRange: 5,
            abilities: [2,7,8,12,14,15]
        },{
            id: 7, name: "Aura",
            maxHp: 184, hp: 138, maxMp: 20, mp: 20,
            moveRange: 4, magicRange: 2,
            abilities: [5,7,8,10,11,16]
        },{
            id: 8, name: "Swan",
            maxHp: 141, hp: 126, maxMp: 20, mp: 20,
            moveRange: 5, magicRange: 5,
            abilities: [1,2,5,10,15,16]
        },
    ],
    
    enemies: [
        {
            id: 1, name: "Grimgrowl", 
            maxHp: 50, hp: 39, maxMp: 20, mp: 20,
            moveRange: 1, magicRange: 5,
            abilities: [6,9,11,15]
        },{
            id: 2, name: "Uglymug", 
            maxHp: 114, hp: 112, maxMp: 20, mp: 20,
            moveRange: 2, magicRange: 3,
            abilities: [4,13,14,15]
        },{
            id: 3, name: "Muckflame",
            maxHp: 104, hp: 85, maxMp: 20, mp: 20,
           ...