JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Figuring out how to use JS classes to organise and render 10+ types of animals.
<ul>
    <li>All animals work in similar way. Genes, loci, terminology are laid out in arrays. Every animal can be rendered in 3 growth stages, 2 sexes.</li>
    <li>Every animal needs separate functions for this rendering. Some have sex-linked genes, extra modifier numbers etc. Using shared functions just wouldn't work.</li>
    <li>These sets of functions must all have same names. So after creating a new Horse or a new Snake, can use properGeno() or generateImage("thumb") no matter what the animal is.</li>
</ul>
<p>
<span id='pretty'></span>
</p>
<span id='info'></span><br>
<span id='info2'></span>
<p>
<span id='r_pretty'></span>
</p>
<span id='r_info'></span><br>
<span id='r_info2'></span>
<p>
<span id='r2_pretty'></span>
</p>
<span id='r2_info'></span><br>
<span id='r2_info2'></span>

<p>Test. <select id='select_sex'>
    <option value='1'>Male</option>
    <option value='2'>Female</option>
</select> <select id='select_stage'>
    <option value='1'>Baby</option>
    <option value='2'>Young</option>
    <option value='3'>Adult</option>
</select> 
<select id='select_e1'>
    <option value='1'>E+</option>
    <option value='2'>e</option>
</select> <select id='select_e2'>
    <option value='1'>E+</option>
    <option value='2'>e</option>
</select> <select id='select_a1'>
    <option value='1'>A+</option>
    <option value='2'>a</option>
</select> <select id='select_a2'>
    <option value='1'>A+</option>
    <option value='2'>a</option>
</select>  <select id='select_cr1'>
    <option value='1'>Cr</option>
    <option value='2'>cr+</option>
    <option value='3'>prl</option>
</select> <select id='select_cr2'>
    <option value='1'>Cr</option>
    <option value='2'>cr+</option>
    <option value='3'>prl</option>
</select> <button id='create_animal'>Create</button>
</p>
<span id='new_info'></span>

JavaScript

var img_path = "http://mythstable.epizy.com/calculators/images/";

/*
    All possible alleles that can be carried.
    Ordered by dominance in each locus.
*/
var genomes = {
    horse: {
        e: ["E", "e"],
        a: ["A", "a"],
        cr: ["Cr", "cr+", "prl"]
    },
    rabbit: {
        a: ["A+", "A^t", "a"],
        b: ["B+", "b"],
        c: ["C+", "c"]
    }

};

/*
    Just the names of loci, in genomes.
    Useful for looping through.
*/
var loci = {
    horse: ["e", "a", "cr"],
    rabbit: ["a", "b", "c"]
};

/*
    The one wt (or most common) allele in each locus.
    Useful for counting mutations carried.
    And when generating random animals,
    most loci will contain the wildtypes.
*/
var wildtypes = {
    horse: ["E+", "A+", "cr+"],
    rabbit: ["A+", "B+", "C+"]
};

/*
    These traits are NOT genes. Just single numbers.
    Still need to be collected, looped through.
*/
var modifiers = {
    horse: ["dark", "sooty", "pangare", "flaxen", "silver", "tob", "overo", "splash"],
    rabbit: ["rufus", "broken"]
};

/*
    Correct words to describe animal stage.
    Such as "colt" instead of "baby male horse".
*/
var terminology = {
    horse: [
        ["Colt", "Filly"],
        ["Yearling Colt", "Yearling Filly"],
        ["Stallion", "Mare"]
    ],
    rabbit: [
        ["Buck Kit", "Doe Kit"],
        ["Young Buck", "Young Doe"],
        ["Buck", "Doe"]
    ],
};

/*
    Objects which store info for images, descs.
    Certain layers of coats, traits with names...
*/
var layers = {
    horse: {
        base: "bay", // CSS class
        legs: false, // CSS class
        wild_legs: false, // Boolean
        hair: false, // CSS class
        hoof: "grey", // CSS class
        eyes: "dark", // CSS class
        roan: false, // Boolean
        dun: false, // Boolean
        tob: false, // Boolean
        overo: false, // Boolean
        flaxen: false, // Boolean
        silver: false // Boolean
    },
    rabbit: {
        base: "brown", // CSS...