JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Egg incubation simulator. Breed: <select id='egg_breed'>
    <option value='1'>Average</option>
    <option value='2'>Mountain</option>
    <option value='3'>Volcano</option>
</select><br>

<div class='spaced flex space_between'>
    <div class='info_panel quarter'>
    Current hour: <b><span id='dev_hour'>0</span></b><br>
    </div>
    <div class='info_panel quarter'>
    Dev points: <b><span id='dev_points'>0</span>/200</b><br>
    </div>
    <div class='info_panel quarter'>
    Last heat: <b><span id='last_heat'>Normal</span></b><br>
    </div>
    <div class='info_panel quarter'>
    Egg health: <b><span id='egg_health'>100</span>%</b>
    </div>
</div>

<div class='spaced flex'>
    <div class='half info_panel'>
    Cold points: <b><span id='cold_points'>0</span></b>
    <br><span id='cold_traits'></span>
    </div>
    <div class='half info_panel'>
    Heat points: <b><span id='heat_points'>0</span></b>
    <br><span id='heat_traits'></span>
    </div>
</div>

<div id='heat_options'>
<input type="radio" id="heat1" name="heat" value="1">
<label for="heat1">Freeze</label>
<input type="radio" id="heat2" name="heat"value="2">
<label for="heat2">Cool</label>
<input type="radio" id="heat3" name="heat" value="3" checked>
<label for="heat3">Normal</label>
<input type="radio" id="heat4" name="heat" value="4">
<label for="heat4">Warm</label>
<input type="radio" id="heat5" name="heat"value="5">
<label for="heat5">Roast</label>
</div>

<button id='advance'>Advance 1 hour</button>  |  <button id='reset'>Reset</button>  |  <button id='toggle_guide'>See guide</button> | <button id='toggle_spoilers'>See spoilers</button>

<p><span id='reset_message'></span></p>

<ul id='spoilers'>
    <li><b>Snowy:</b> Requires 10 cold points, and at least one Sn allele.</li>
    <li><b>Sooty:</b> Requires 10 heat points, and a Sty allele.</li>
    <li><b>Shadow:</b> Caused by a sudden roasting. This must be done from 100% health and straight back to Normal; it'll definitely kill the...

CSS

* {box-sizing: border-box;}

#spoilers, #guide {
    display: none;
}

#heat_options {
    width: 100%;
    max-width: 500px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}

input[type=radio] {
    display: none;
    margin: 10px;
}

input[type=radio] + label {
    cursor: pointer;
    margin: 2px;
    padding: 8px 16px;
    background-color: #e7e7e7;
    border: 1px solid grey;
    transition: 0.3s;
}

input[type=radio]:hover + label {
    background-image: none;
    opacity: 0.5;
    transition: 0.3s;
}

input[type=radio]:checked + label {
    background-image: none;
    border: 1px solid yellow;
}

/* Styles for the 5 heat buttons. */
#heat1 + label {
    background-color: blue;
}
#heat2 + label {
    background-color: lightblue;
}
#heat3 + label {
    background-color: green;
}
#heat4 + label {
    background-color: orange;
}
#heat5 + label {
    background-color: red;
}


.spaced {
    margin: 10px auto;
}

.space_between {
    justify-content: space-between;
}
.info_panel {
    border: 1px solid grey;
    padding: 10px;
    margin: 0px 5px;
}

.flex {
    display: flex;
}
.half {
    width: 50%;
}
.quarter {
    width: 25%;
}

JavaScript

var dev_points = 0;
var dev_hour = 0;
var health = 100;
var last_heat = 3;
// Total cold and heat points accumulated.
var cold = 0;
var heat = 0;
var cold_traits = [];
var heat_traits = [];

var enableSnowy = false;
var enableFrost = false;
var enableSooty = false;
var enableMask = false;
var enableCp = false;
var enableShadow = false;

$("#toggle_guide").click(function(){
    $("#guide").toggle();
});

$("#toggle_spoilers").click(function(){
    $("#spoilers").toggle();
});

$("#reset").click(function(){
    dev_points = dev_hour = cold = heat = 0;
    cold_traits = [];
    heat_traits = [];
    health = 100;
    last_heat = 3;
    enableSnowy = enableFrost = enableSooty = enableMask = enableCp = enableShadow = false;
    
    updateDisplay();
    $("#reset_message").hide();
});

function updateDisplay(){
    $("#cold_points").html(cold);
    $("#heat_points").html(heat);
    $("#cold_traits").html(cold_traits.join(", "));
    $("#heat_traits").html(heat_traits.join(", "));
    
    $("#egg_health").html(health);
    $("#last_heat").html(getHeatName(last_heat));
    $("#dev_points").html(dev_points);
    $("#dev_hour").html(dev_hour);
}

function getHeatName(heat){
    var names = ["?", "Freeze", "Cool", "Normal", "Warm", "Roast"];
    return names[heat];
}


$("#advance").click(function(){
    
    dev_hour++;
    var breed = $("#egg_breed").val();
    var growth = 3;
    var new_heat = document.querySelector('input[name="heat"]:checked').value;
    
    // A gradual transition is safest.
    // Sudden temp change is harmful.
    var diff = 0;
    if(last_heat > new_heat){
        diff = last_heat - new_heat;
    }else if(new_heat > last_heat){
        diff = new_heat - last_heat;
    }
    
    var damage = 0;
    if(diff == 2){
        damage = 20;
    }else if(diff == 3){
        damage = 50;
    }else if(diff == 4){
        damage = 80;
    }
    
    
    if(new_heat == 3){
        // Left at normal temp, egg recovers.
        health += 5;
    }else...