JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

animal classes.<br>
<select id='animal_types'>
    <option value='horse'>Horse</option>
    <option value='cat'>Cat</option>
    <option value='dog'>Dog</option>
    <option value='rabbit'>Rabbit</option>
    <option value='medaka'>Medaka</option>
    <option value='budgie'>Budgie</option>
    <option value='cockatiel'>Cockatiel</option>
    <option value='mouse'>Mouse</option>
    <option value='rat'>Rat</option>
    <option value='chicken'>Chicken</option>
    <option value='chicken2'>ChickenShape</option>
    <option value='goldfish'>Goldfish</option>
    <option value='zebrafish'>Zebrafish</option>
    <option value='quail'>Quail</option>
    <option value='ferret'>Ferret</option>
    <option value='zebrafinch'>Zebrafinch</option>
    <option value='cornsnake'>Corn snake</option>
    <option value='ballpython'>Ball python</option>
    <option value='reticpython'>Retic python</option>
</select> 
<button id='random_animal'>One random animal</button> 
<button id='cross_animal'>Cross random parents</button>

<p>JSON: <span id='json_geno'>...</span></p>
Geno: <span id='output_geno'>...</span>
<p>Image: <div id='animal_image'>...</div></p>

JavaScript

const path = "http://mythstable.epizy.com/genetics/images/";

// GENOMES
// Known alleles at each locus, ordered by dominance.
// Those marked with * are sex-linked.
// Those marked with ? are theoretical/unproven yet.
// Those marked with ! are lethal or dangerous.

const animalData = {
    horse: {
        loci: ["e", "a", "cr", "ch", "g", "d", "z", "o", "kit", "spl", "lp", "patn1", "patn2"],
        wt: ["E+", "A+", "cr+", "ch+", "g+", "nd1", "z+", "o+", "kit+", "spl+", "lp+", "patn1+", "patn2+"],
        genome: {
            // Extension
            e: ["E+", "e"],
            // Agouti
            a: ["A+", "a^t", "a"],
            // Cream - not including sunshine/snowdrop
            cr: ["Cr", "cr+", "prl"],
            // Champagne
            ch: ["Ch", "ch+"],
            // Grey
            g: ["G", "g+"],
            // Dun
            d: ["D", "nd1", "nd2"],
            // KIT - only including W20
            kit: ["Kit^w", "Kit^rn", "Kit^tb", "Kit^sab1", "kit+"],
            // Splash - simplified, some SW are lethal
            spl: ["Spl", "spl+"],
            // Frame Overo
            o: ["O", "o+"],
            // Leopard complex
            lp: ["Lp", "lp+"],
            // Pattern 1
            patn1: ["Patn1", "patn1+"],
            // ? Pattern 2
            patn2: ["Patn2", "patn2+"],
            // Silver
            z: ["Z", "z+"],
        },
        mods: {
            splash: [1,5],
            sooty: [1,3],
            appy: [1,5],
            pangare: [1,3],
            flaxen: [1,3]
        },
        terms: ["horse", "horses", "herd", "stable", "foal", "foals", "stallion", "mare", "yearling colt", "yearling filly", "colt", "filly"]
    },
    
    // CAT
    
    cat: {
        loci: ["a", "b", "o"],
        wt: ["", "", "", "", "", "", "", "", "", "", "", "", "", ""],
        genome: {
            a: ["A", "a"],
            b: ["B", "b"],
            o: ["O", "o"]
        },
        mods: {
            tortie: [1,5]
        },
 ...