JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='shade-overlay' style='display:none'></div>

<div id='battle-popup' style='display:none'>

    <div id='battle-top'>
        <div id='battle-guide-btn'>Guide</div>
        <span>Battle Title</span>
        <div id='battle-close-btn'>Close</div>
    </div>
    
<div id='battle-container'>
    
    <!-- Up to 4 fighters on each side.. -->
    <div class='battle-sprites' id='battle-pets'></div>
    <div class='battle-sprites' id='battle-enemies'></div>

    
    <!-- Info boxes for selected pet/enemy. -->
    <div class='battle-pet-info' id='battle-pet-info' style='display:none'></div>    
    <div class='battle-pet-info' id='battle-enemy-info' style='display:none'></div>

    
    <!-- Middle pop-up section with reports, status. -->
    <div id='battle-info'>
    
        <div id='battle-title'>
            <span>Battle Reports (turn 1)</span>
            <div id='battle-hide-info'>Hide</div>
        </div>
        
        <div id='battle-reports'></div>

        <div id='battle-status'>
            <div>Location: [area name]</div>
            <div>Time elapsed: 3m 35s</div>
            <div>Weather: Raining</div>
            <div>Magic: Silence</div>
        </div>

    </div>
    
    <!-- At bottom, 3 option buttons. -->
    <div id='battle-panel'>
        <div class='battle-button' id='battle-forfeit-btn'>Flee</div>
        <div class='battle-button' id='battle-show-info'>Info</div>
        <div class='battle-button' id='battle-move-btn'>Move!</div>
    </div>
    
    
</div>
</div>

<div id='battle-variables'>
    <div>
        Selected pet: <span id='selected-pet'>0</span> - 
        Selected enemy: <span id='selected-enemy'>0</span>
    </div>
    <div>
        Pet 1 - Action <span id='action-1'>0</span> - 
        Target <span id='target-1'>0</span>
    </div>
    <div>
        Pet 2 - Action <span id='action-2'>0</span> - 
        Target <span id='target-2'>0</span>
    </div>
    <div>
        Pet 3 - Action <span id='action-3'>0</span> - 
     ...

CSS

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

#shade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

#battle-popup {
    z-index: 2;
    position: fixed;
    top: calc(50% - 270px);
    left: calc(50% - 450px);
    width: 900px;
    height: 540px;
    border-radius: 5px;
    overflow: hidden;
}

/* Top bar with title, Close btn, Guide btn. */
#battle-top {
    height: 40px;
    background-color: #eee;
    border-bottom: 1px solid grey;
    display: flex;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}
#battle-guide-btn,
#battle-close-btn {
    font-size: 16px;
    background-color: #fff;
    border: 1px solid grey;
    padding: 5px 10px;
}


/* Contains the whole battlefield scene. */
#battle-container {
    width: 100%;
    height: 500px;
    position: relative;
    background-color: skyblue;
}

/* For pets and normal-sized enemies. */
#battle-container .battle-sprites {
    position: absolute;
    width: 300px;
    height: 290px;
    top: 70px;
}
#battle-container #battle-pets {
    left: 30px;
}
#battle-container #battle-enemies {
    right: 30px;
    transform: scaleX(-1);
}

/* 1-4 of these on each side. */
#battle-container .battle-sprite {
    position: absolute;
    width: 140px;
    height: 110px;
    background-color: rgba(255, 255, 255, 0.3);
    text-align: center;
}
#battle-container .battle-sprite:hover {
    cursor: pointer;
    border: 1px dashed #fff;
}
#battle-container .selected-sprite {
    border: 1px solid #fff;
    /*box-shadow: 0 0 40px 40px #fff;*/
}

/* Positions of 1-4 pets and 1-4 enemies. */
#battle-container .battle-sprites .battle-sprite-1 {
    top: 120px;
    left: 0;
}
#battle-container .battle-sprites .battle-sprite-2 {
    top: 50px;
    left: 150px;
}
#battle-container .battle-sprites .battle-sprite-3 {
    top: 170px;
    left:...

JavaScript

const db = {

   battlefields: [
       {id: 1, name: "Arena"},
       {id: 2, name: "Forest"},
       {id: 3, name: "Beach"},
       {
           id: 4, name: "Caves",
           day: 3, night: 3
       },
       {
           id: 5, name: "Magma Cavern",
           day: 2, night: 2
       },
       {
           id: 6, name: "Desert",
           day: 1, night: 3
       },
       {
           id: 7, name: "Crystal Caves", 
           day: 2, night: 3
       },{
           id: 8, name: "Swamp",
           day: 2, night: 3
       },{
           id: 9, name: "Savannah",
           day: 2, night: 3
       },{
           id: 10, name: "Boss Lair",
           day: 2, night: 2
       },{
           id: 10, name: "Sunny Caves",
           day: 1, night: 3
       },{
           id: 10, name: "Carilan Streets",
           day: 1, night: 2
       },{
           id: 10, name: "Carilan Temple",
           day: 2, night: 1
       },{
           id: 10, name: "Carilan Outpost",
           day: 2, night: 3
       },{
           id: 10, name: "Tundra",
           day: 2, night: 3
       },{
           id: 10, name: "Enchanted Forest",
           day: 2, night: 2
       },{
           id: 10, name: "Grassland",
           day: 2, night: 3
       },{
           id: 10, name: "Light Temple",
           day: 1, night: 1, weather: [], perm: true
       },{
           id: 10, name: "Shadow Temple",
           day: 3, night: 3, weather: [], perm: true
       },{
           id: 10, name: "Fire Temple",
           day: 1, night: 2, weather: [], perm: true
       },{
           id: 10, name: "Ice Temple",
           day: 2, night: 3, weather: [], perm: true
       },{
           id: 10, name: "Water Temple",
           day: 1, night: 3, weather: [], perm: true
       },{
           id: 10, name: "Earth Temple",
           day: 2, night: 2, weather: [], perm: true
       },{
           id: 10, name: "Wind Temple",
           day: 2, night: 2, weather: [], perm: true
       },{
           id:...