JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Virtual griffin stable, for OotG fansite.<br>Create, rename or delete griffins from list. Make eggs grow, and inspect genomes in detail. Choose two parents to breed and create new eggs.
<br>
<span class='result'></span>
<br>
<button class='tab_button active_tab' data-tab='create'>Create Griffins</button> 
<button class='tab_button' data-tab='breed'>Breeding</button> 
<button class='tab_button' data-tab='inspect'>Inspection</button>

<div class='tab_content tab_create' style='display: visible;'>
Name: <input type='text' class='create_name' value='Unnamed'> 
Sex: <select class='create_sex'>
    <option value='m'>Male</option>
    <option value='f'>Female</option>
</select><br>
Red: <select class='create_r1'>
    <option value='R'>R</option>
    <option value='r'>r</option>
</select> <select class='create_r2'>
    <option value='R'>R</option>
    <option value='r'>r</option>
</select> 
Green: <select class='create_g1'>
    <option value='G'>G</option>
    <option value='g'>g</option>
</select> <select class='create_g2'>
    <option value='G'>G</option>
    <option value='g'>g</option>
</select> 
Cream: <select class='create_cr1'>
    <option value='Cr'>Cr</option>
    <option value='cr'>cr</option>
</select> <select class='create_cr2'>
    <option value='Cr'>Cr</option>
    <option value='cr'>cr</option>
</select> 
Fade: <select class='create_f1'>
    <option value='F'>F</option>
    <option value='f'>f</option>
</select> <select class='create_f2'>
    <option value='F'>F</option>
    <option value='f'>f</option>
</select>
<br>
Black: <select class='create_k1'>
    <option value='K'>K</option>
    <option value='k'>k</option>
</select> <select class='create_k2'>
    <option value='K'>K</option>
    <option value='k'>k</option>
</select> 
White: <select class='create_w1'>
    <option value='W'>W</option>
    <option value='w'>w</option>
</select> <select class='create_w2'>
    <option value='W'>W</option>
    <option value='w'>w</option>
</select> 
Exotic: <select...

CSS

.stack {
    width: 150px;
    display: inline-block;
    background-color: white;
    border: 1px solid grey;
    border-radius: 5px;
    padding: 5px;
    margin: 5px;
    text-align: center;
}

.tab_content {
    display: none;
    padding: 10px;
    border: 1px solid grey;
}


.active_tab {
    border: 1px solid blue;
}

#griffin_list {
    padding: 10px;
    border: 1px solid grey;
    background-color: silver;
    border-radius: 5px;
}

/* These buttons, divs appear only when 2 valid parents are loaded. */
#try_breeding, #baby_image, #baby_genes, #confirm_breeding {
    display: none;
}

.hidden {
    display: none;
}

#error_holder {
    display: none;
    max-width: 40%;
    max-height: 40%;
    background-color: white;
    padding: 10px;
    border: 1px solid grey;
}

JavaScript

// JS for Virtual Griffin Stable by Gwyn Milcote.
// This is part of a fan-site for Order of the Griffin.
// Griffin designs and genetic system belong to Jennifer Hoffman.

// Griffin objects are saved in array.
// Try to retrieve from user's local storage.
var griffins = [];
if (localStorage.getItem("griffins") !== null) {
    griffins = JSON.parse(localStorage.getItem('griffins'));
}

function saveGriffins(){
    localStorage.setItem('griffins', JSON.stringify(griffins));
}

// Begin by rendering any existing griffins.
for(var i = 0; i < griffins.length; i++){
    renderGriffin(griffins[i]);
}

// And an accurate stable counter.
countGriffins();


// GLOBAL VARS
// Used for creating, breeding etc.

// Unsure how else to handle. 
// Must be unique number, higher than any existing griffin.
var last_id = 1;
if(griffins.length > 0){
    last_id = Math.max.apply(Math,griffins.map(function(o){return o.id;})) + 1;
}

// Keep track of current male and female, to test-breed with.
// You can switch them out at any time.
var male = {"id": 0};
var female = {"id": 0};

// The last randomly-generated offspring.
// Need to have these 4 properties set up, in order.
var baby = {"id": 0, "name":"", "sex":"", "stage": 0};

// Alleles in every locus, in order of dominance.
// Used when making random griffins, and ordering genotype.
var red = ["R", "r"];
var green = ["G", "g"];
var black = ["K", "k"];
var white = ["W", "w"];
var exotic = ["E", "e"];
var cream = ["Cr", "cr"];
// Below, genes I had to guess/make up.
// Fade: inc dominant.
var fade = ["F", "f"];
// LimiterPattern: tiger, leopard.
var lp = ["Lp^t", "Lp^l", "lp"];
// LimiterDusky: dusky, mask.
var ld = ["Ld^d", "Ld^m", "ld"];
// Paint: boots, dip (dosage effect), splash.
var paint = ["P^b", "P^d", "P^s", "p"];
// Sunny: dominant.
var sunny = ["S", "s"];
// Fair: fairbelly, snowy. Co-dom.
var fair = ["Fa^f", "Fa^s", "fa"];

// Used when generating babies and random adults.
var names =...