JSFiddle - React, Tailwind, and code Playground

by Robin

HTML

<h2>Resources</h2>
<div class="panel res">
    Scrap: <span id="res-scrap">0</span><br />
    <button class="build" id="gather-scrap">Gather</button>
</div>

<h2>Robots</h2>
<div class="panel robot">
    Type-E: <span id="rob-e">0</span><br />
    <span class="info">Gathers 1 Scrap / s</span><br />
    <button class="build" id="build-rob-e">Build (10)</button>
</div>
<div class="panel robot">
    Type-Z: <span id="rob-z">0</span><br />
    <span class="info">Gathers 10 Scrap / s</span><br />
    <button class="build" id="build-rob-z">Build (250)</button>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, san-serif;
    font-size: 1em;
    font-weight: 200;
}

h2 {
    font-weight: 300;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

div.panel {
    padding: 5px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    margin-bottom: 10px;
}

span.info {
    font-size: 0.75em;
    font-style: italic;
}

JavaScript

window.addEventListener('load', function() {
    var elements = {
        txtScrap: document.querySelector("#res-scrap"),
        txtRobotsTypeE: document.querySelector("#rob-e"),
        btnRobotsTypeE: document.querySelector("#build-rob-e"),
        txtRobotsTypeZ: document.querySelector("#rob-z"),
        btnRobotsTypeZ: document.querySelector("#build-rob-z")
    };
    
    var numScrap = 0;
    var robotsTypeE = {
        count: 0,
        cost: 10,
        scrap: 1
    };
    var robotsTypeZ = {
        count: 0,
        cost: 250,
        scrap: 10
    };
    
    document.querySelector("#gather-scrap").addEventListener('click', function(evt) {
        numScrap++;
        updateScrapText();
    });
    
    document.querySelector("#build-rob-e").addEventListener('click', function(evt) {
        if (numScrap < robotsTypeE.cost) return;
        
        robotsTypeE.count += 1;
        numScrap -= robotsTypeE.cost;
        robotsTypeE.cost = Math.ceil(robotsTypeE.cost * 1.25);
        updateTypeEText();
        updateScrapText();
    });
    
    document.querySelector("#build-rob-z").addEventListener('click', function(evt) {
        if (numScrap < robotsTypeZ.cost) return;
        
        robotsTypeZ.count += 1;
        numScrap -= robotsTypeZ.cost;
        robotsTypeZ.cost = Math.ceil(robotsTypeZ.cost * 1.25);
        updateTypeZText();
        updateScrapText();
    });
    
    function updateScrapText() {
        elements.txtScrap.innerHTML = numScrap;
    }
    
    function updateTypeEText() {
        elements.txtRobotsTypeE.innerHTML = robotsTypeE.count;
        elements.btnRobotsTypeE.innerHTML = "Build (" + robotsTypeE.cost + ")";
    }
    
    function updateTypeZText() {
        elements.txtRobotsTypeZ.innerHTML = robotsTypeZ.count;
        elements.btnRobotsTypeZ.innerHTML = "Build (" + robotsTypeZ.cost + ")";
    }
    
    function gameLoop() {
        numScrap += Math.ceil(robotsTypeE.count * robotsTypeE.scrap);
        numScrap +=...