JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Loci: <span id='total-loci'></span> - Alleles: <span id='total-alleles'></span>

<div id='locus-dropdowns'></div>
<hr>
<button id='create-genotype'>Randomise</button>
<br><b>Geno:</b> <div id='json-geno'></div>
<br><b>Mods:</b> <div id='json-mods'></div>
<br><b>Traits:</b> <div id='json-traits'></div>
<hr>
<b>Colours:</b>
<br><b>Eu:</b> <span id='pigment-eu'></span>
<br><b>Phaeo:</b> <span id='pigment-phaeo'></span>
<hr>
<b>Image layers etc</b>
<br><b>Eu:</b> <div id='json-eu'></div>
<br><b>Phaeo:</b> <div id='json-phaeo'></div>
<br><b>Desc:</b> <div id='json-desc'></div>
<hr>
<div id='locus-list'></div>

CSS

div, img, canvas, button, p, select {
    box-sizing: border-box;
}

#locus-dropdowns {
    width: 900px;
    display: flex;
    flex-flow: row wrap;
}
#locus-dropdowns select {
    width: 50px;
}

#locus-dropdowns .dropdown {
    width: 25%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid silver;
    padding: 2px 5px;
}

#locus-dropdowns select {
    width: 70px;
}

.pigment-swatch {
    display: inline-block;
    width: 40px;
    height: 20px;
    box-shadow: inset 0 0 0 1px #000;
}

JavaScript

const db = {
    // Names, descs, alleles in them.
    loci: [
        {
            name: "Extension", symbol: "e",
            wt: "e+",
            desc: "",
            alleles: [
                {
                    name: "Dominant Black", symbol: "E^d",
                    desc: "Dominant. Eumelanin covers the whole body."
                },{
                    name: "Tortoiseshell", symbol: "E^t",
                    desc: "Inc-dom. One copy creates patchy tortie pattern. Two copies will cover the whole body in eumelanin."
                },{
                    name: "Wildtype", symbol: "E+",
                    desc: "Normal agouti pattern, a mix of eumelanin and phaeomelanin."
                },{
                    name: "Birchen", symbol: "E^b",
                    desc: "Recessive. Most of the body is covered in eumelanin, except the head and neck. There may be streaking on the hackles and breast."
                },{
                    name: "Wheaten", symbol: "e^wh",
                    desc: "Recessive."
                },{
                    name: "Recessive Red", symbol: "e",
                    desc: "Recessive. No eumelanin is produced."
                }
            ]
        },
        {
            name: "Violet", symbol: "v",
            wt: "v+",
            desc: "",
            alleles: [
                {
                    name: "Violet", symbol: "V",
                    desc: "Dominant. One copy dilutes eumelanin to steel blue-grey colour. Two copies are lethal."
                },{
                    name: "Wildtype", symbol: "v+",
                    desc: "No effect."
                }
            ]
        },
        {
            name: "Colour", symbol: "c",
            wt: "C+",
            desc: "",
            alleles: [
                {
                    name: "Wildtype", symbol: "C+",
                    desc: "No effect."
                },{
                    name: "Burmese", symbol: "c^b",
                   ...