JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<p>...</p>
<div id='egg-canvas'></div>
<div id='egg-geno'></div>
<button id='random-egg-btn'>Random egg</button>
<div id='palette-pn'></div>
<div id='palette-en'></div>
<div id='palette-pe'></div>
<div id='palette-ee'></div>



<div id='canvas-container'></div>

<div id='parts-container'>[generate]</div>
<br>
<button id='random-part-btn'>Random body parts</button>
<br>


<p>
Eyes: <select id='select-eye-style'></select> - 
Pupil: <select id='select-pupil-style'>
    <option value='pupil'>Normal</option>
    <option value='cat'>Cat</option>
    <option value='snake'>Snake</option>
    <option value='horse'>Horse</option>
</select> - 
<select id='select-pupil-opacity'>
    <option value='100'>Visible</option>
    <option value='50'>Faint</option>
    <option value='0'>Hidden</option>
</select> - 
Iris colours: <input id='select-iris-colour' type='color' value='#aa0000'> <input id='select-inner-colour' type='color' value='#ffcc33'> - 
Sclera: <select id='select-sclera-colour'>
    <option value='white'>White</option>
    <option value='black'>Black</option>
    <option value='none'>Hidden</option>
</select> - 
Invert pupil/iris colours? [y/n]

</p>





<b>Loci:</b><br>
<div id='demo-loci' class='locus-container'></div>


<p>
Image size: <select id='select-size'>
    <option value='full'>Full</option>
    <option value='half' selected>Half</option>
    <option value='sprite' disabled>Sprite</option>
</select>
</p>

<div id='test'></div>

<br>Image layers, in order from top to bottom:<br>
<div id='demo-images-used'></div>

<ul id='locus-info'></ul>

CSS

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

.hex {
    width: 240px;
    height: 30px;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5),
                inset 0 0 0 1px #000;
    display: flex;
    justify-content: center;
    align-items: center;
}


#egg-canvas {
    background-color: #eee;
    width: 250px;
    height: 300px;
}


#canvas-container {
    width: 820px;
    height: 720px;
    background-color: silver;
    padding: 10px;
    margin: 20px auto;
    border: 1px solid black;
    /* for canvas? */
    text-align: center;
}


.locus-container {
    width: 900px;
    display: flex;
    flex-flow: row wrap;
    background-color: #eee;
    padding: 5px;
}
.locus-container .locus {
    width: calc(25% - 6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border: 1px solid silver;
    padding: 3px 5px;
    margin: 2px 3px;
}
.locus-container .locus-sl {
    background-color: lavender;
    border: 1px solid purple;
}
.locus-container select {
    width: 50px;
}


#parts-container {
    width: 800px;
    display: flex;
    flex-flow: row wrap;
}
#parts-container .part-select {
    width: 20%;
    padding: 5px;
    text-align: center;
    border: 1px solid silver;
}

JavaScript

const db = {
    
    imagePath: "http://griffusion.elementfx.com/griffusion/",
    
    alphabet: "abcdefghijklmnopqrstuvwxyz".split(""),
    
    eggLayers: [
        "base","line","colour2","patch","patch2",
        "shade","highlight","highlight2","shiny",
        "crack1","crack2","crack3",
        "appy","tobiano","overo","splash","whitespot",
        "overo_reverse","snowyowl","snowyowl_reverse",
        "dapple","dapple_reverse",
        "merle","snow","pangare","pearl","pearl2",
        "tiger","leopard","leopard2","zebra","stripe",
        "tortie","tortiecrack","darkblob","darkcircle",
        "speckle","speckleband","sooty"
    ],
    
    /*
    * Top/Left/Width/Height numbers for all
    * pieces on sprite sheets. All Traditional
    * breeds have same layout.
    * Most pieces are same W/H; specify if different.
    * Designer breed has this data elsewhere
    * (see db.bodyPartStyles)
    */
    spriteSheet: {
        base: {t: 50, l: 50},
        line: {t: 50, l: 50},
        shade: {t: 50, l: 50},
        overlay: {t: 50, l: 50},
        smallThing: {t: 50, l: 50, w: 50, h: 50}
    },
    
	/*
	* Loci and alleles.
	*/
    loci: [
        {
            symbol: "e", name: "Extension",
            wt: "e+",
            /*alleles: [
                {symbol: "E^d", name: "Extended Black"},
                {symbol: "E^t", name: "Tortoiseshell"},
                {symbol: "E+", name: "Wildtype"},
                {symbol: "e^b", name: "Birchen"},
                {symbol: "e", name: "Recessive Red"}
            ],*/
            alleles: ["E^d", "E^t", "E+", "e^b", "e"],
        },
        {
            symbol: "a", name: "Agouti",
            wt: "A+",
            /*alleles: [
                {symbol: "A^y", name: "Yellow"},
                {symbol: "A+", name: "Wildtype"},
                {symbol: "a^t", name: "Tan"},
                {symbol: "a", name: "Non-agouti"}
            ]*/
            alleles: ["A^y", "A+", "a^t", "a"]
        },
        {
    ...