JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='inv-popup'>
<div id='inv-popup-inner'>
    
    <div id='inv-topbar'>
        <div id='inv-directory-btn' class='inv-btn'><a href='/directory/items'>Directory</a></div>
		<div id='inv-name'>[item name]</div>
		<div id='inv-close-btn' class='inv-btn'>Close</div>
    </div>
    
    <div id='inv-top'>
    
        <!-- Item image -->
        <div id='inv-top-left'>
            <img src=''>
        </div>
        
        <!-- Item desc + creator -->
        <div id='inv-top-middle'>
            <div id='inv-desc'>
                [desc]
            </div>
            <div id='inv-creator'>
                Creator: [flag] [name] [gamename lang]
            </div>
        </div>
        
        <!-- Category, qty, value -->
        <div id='inv-top-right'>
            <div>Category: </div>
            <div>You have <b>0</b> items</div>
            <div>Sell for <b>0</b> gold each</div>
            <div>Private: </div>
        </div>
        
    </div>
    
    <div id='inv-bottom'>
    
        <!-- Use + pet finder-->
        <div id='inv-bottom-left'>
            
            <div id='inv-use'>
                <div id='inv-use-info'>[info]</div>
                <div id='inv-use-btn' class='inv-btn'>Use</div>
            </div>
            
            <div id='inv-pf'>
                <div id='inv-pf-title'>Choose Pet</div>
                <div class='inv-pf-option'>
                    Name: <input type='text'>
                </div>
                <div class='inv-pf-option'>
                    Breed: <select></select>
                </div>
                <div class='inv-pf-option'>
                    Breed: <select></select>
                </div>
                <div class='inv-pf-option'>
                    Stage: <select></select>
                </div>
                <div id='inv-pf-search-btn' class='inv-btn'>Search</div>
                <div id='inv-pf-page-btns'>
                    <div class='inv-pf-page-btn'><<</div>
                  ...

CSS

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



/* Need 2 because of umbrella.js */
#inv-popup {
	
	width: 840px;
	height: 480px;
	background-color: #fff;
	border-radius: 20px;
	overflow: hidden;
}
#inv-popup-inner {
	width: 100%;
	height: 100%;
}

#inv-popup .inv-btn {
	min-width: 80px;
    max-width: 90px;
	padding: 6px 8px;
	border-radius: 5px;
	text-align: center;
	background-color: #fff;
	border: 1px solid silver;
}
#inv-popup .inv-btn:hover {
	cursor: pointer;
	border: 1px solid grey;
}


/* Top bar. Item name, Close button, Directory link. */

#inv-topbar {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
	padding: 10px 20px;
	background-color: #eee;
    border-bottom: 1px solid silver;
}
#inv-topbar #inv-name {
	font-size: 30px;
}

/* Top section. Image, description, category, qty, value. */
#inv-top {
	height: 160px;
    display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid silver;
    padding: 10px;
    text-align: center;
}

#inv-top-left {
	width: 160px;
	height: 120px;
}
#inv-top-left img {
    width: 150px;
    height: 120px;
    background-color: #eee;
}

#inv-top-middle {
    width: 450px;
    padding: 10px 10px;
}
#inv-desc {
    height: 100px;
    background-color: #eee;
    border-radius: 10px;
    padding: 10px 20px;
}
#inv-creator {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
}

#inv-top-right {
    width: 210px;
    padding-left: 5px;
}
#inv-top-right > div {
    background-color: #eee;
    border-radius: 10px;
    padding: 4px 20px;
    font-size: 18px;
    margin: 5px 0;
}


#inv-bottom {
    display: flex;
    justify-content: space-between;
}
#inv-bottom-left {
    width: 630px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

/* Use info. */
#inv-use {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
   ...

JavaScript

function getPercentage(amount, max){
    return 60;
}

class Battlefield {

    constructor(){
        this.terrain = [];
        this.scenery = [];
        this.scenery2 = [];
        
        this.cameraX = 0;
        this.cameraY = 0;
    
        this.pets = [];
        this.enemies = [];
        this.entities = [];
        
        this.turns = 0;
        this.reports = [];
        
        this.selectedPet = null;
        this.selectedAction = null;
        this.targetX = 0;
        this.targetY = 0;
        
        let html = "<div class='affected-thumb'>";
        html += "<div class='affected-sprite'></div>";
        html += "<div class='affected-info'>";
        html += "<div class='affected-name ally-name'>name....</div><div class='affected-hp'>hp....</div>";
        html += "</div></div>";
        
        html += "<div class='affected-thumb'>";
        html += "<div class='affected-sprite'></div>";
        html += "<div class='affected-info'>";
        html += "<div class='affected-name enemy-name'>name....</div><div class='affected-hp'>hp....</div>";
        html += "</div></div>";
        
        html += "<div class='affected-thumb'>";
        html += "<div class='affected-sprite'></div>";
        html += "<div class='affected-info'>";
        html += "<div class='affected-name entity-name'>name....</div><div class='affected-hp'>hp....</div>";
        html += "</div></div>";
        
        html += "<div class='affected-thumb'>";
        html += "<div class='affected-sprite'></div>";
        html += "<div class='affected-info'>";
        html += "<div class='affected-name entity-name'>name....</div><div class='affected-hp'>hp....</div>";
        html += "</div></div>";
        
        html += "<div class='affected-thumb'>";
        html += "<div class='affected-sprite'></div>";
        html += "<div class='affected-info'>";
        html += "<div class='affected-name entity-name'>name....</div><div class='affected-hp'>hp....</div>";
        html...