JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mythscale: dragon viewer. Here you can choose all genes and see exactly how they'll look, for any dragon breed, sex or stage.<br>

<button class='tab_button' data-tab='colour'>Colour</button>
<button class='tab_button' data-tab='black'>Black</button>
<button class='tab_button' data-tab='markings'>Markings</button>
<button class='tab_button' data-tab='white'>White</button>
<button class='tab_button' data-tab='eyes'>Eyes</button>
<button class='tab_button' data-tab='accent'>Accent</button>
<button class='tab_button' data-tab='misc'>Misc</button>
<button class='tab_button' data-tab='mods'>Modifiers</button>

<!-- Enclose in form, so JS can grab all inputs? -->
<form id='tool_preview' name='tool_preview'>

<div class='section tab' id='tab_colour'>
    <h3>Colour Pigmentation</h3><br>
    <div class='select_holder'>
    <div class='select_div'>
        Gold: <select id='select_g1'>
            <option value='1' selected>G+</option>
            <option value='2'>g</option>
        </select><select id='select_g2'>
            <option value='1' selected>G+</option>
            <option value='2'>g</option>
        </select> 
    </div>
    <div class='select_div'>
        Red: <select id='select_r1'>
            <option value='1'>R</option>
            <option value='2' selected>r+</option>
        </select><select id='select_r2'>
            <option value='1'>R</option>
            <option value='2' selected>r+</option>
        </select>
    </div>
    <div class='select_div'>
        Blue: <select id='select_b1'>
            <option value='1'>B</option>
            <option value='2'>B^w</option>
            <option value='3' selected>b+</option>
        </select><select id='select_b2'>
            <option value='1'>B</option>
            <option value='2'>B^w</option>
            <option value='3' selected>b+</option>
        </select>
    </div>
    <div class='select_div'>
        Shade: <select id='select_s1'>
            <option value='1'>S^d</option>
           ...

CSS

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

.section {
     border: 1px solid grey;
     padding: 10px;
     margin: 5px;
}

.hidden {
    display: none;
}

.section h3 {
    margin: 0;
}

/* Trying to lay out these dropdown pairs... */
.select_holder {
    display: flex;
    flex-flow: row wrap;
}
.select_holder .select_div {
    width: 50%;
}

#dragon_holder {
  width: 257px;
  height: 199px;
  position: relative;
}

#dragon_holder div, img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.palette_holder {
    border: 1px solid grey;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.palette_holder .palette_piece {
    padding: 5px;
    text-align: center;
    min-width: 80px;
    width: 16%;
}

.palette_piece .colour_preview {
    width: 100%;
    height: 40px;
    border: 1px solid black;
}

/*
    COLOUR PALETTE
    c = hex colour for div backgrounds.
    f = filter for black PNG images.
    _
    y = yellow (gold). o = olive.
    t = teal. b = blue. p = purple.
    v = violet. i = indigo. g = green.
    a = amber (orange). m = magenta (pink).
    _
    b = bright. d = dull.
    1-5 = shade, lightest to darkest.
*/

.c_white { background-color: #FFFFFF; }
.f_white { filter: invert(100%); }

.c_black_1 { background-color: #DFDFDF; }
.c_black_2 { background-color: #B0B0B0; }
.c_black_3 { background-color: #7E7E7E; }
.c_black_4 { background-color: #4F4F4F; }
.c_black_5 { background-color: #282828; }

.f_black_1 { filter: invert(86%); }
.f_black_2 { filter: invert(64%); }
.f_black_3 { filter: invert(44%); }
.f_black_4 { filter: invert(28%); }
.f_black_5 { filter: invert(10%); }

/* Colour-shifted melanin */
.c_black_r1 {background-color: #5B453C;}
.c_black_r2 {background-color: #A6887D;}
.c_black_r3 {background-color: #DCCFCB;}
.c_black_rr1 {background-color: #76211D;}
.c_black_rr2 {background-color: #D35F58;}
.c_black_rr3 {background-color: #F2D0CE;}
.c_black_b1 {background-color:...

JavaScript

// JS for Mythscale game, by Gwyn Milcote.

// Image directory.
const path = "http://mythstable.epizy.com/dragon/images/";

/*
* ALL POSSIBLE ALLELES, in order of dominance.
* Used for referencing and randomly picking.
*/
const genome = {
	// Gold
	g: ["G", "g+"],
	// Red
	r: ["R", "r+"],
	// Blue
	b: ["B", "B^w", "b+"],
	// Shade
	s: ["S^d", "S^l", "s+"],
    
	// Melanism
	mel: ["Mel^f", "Mel^p", "mel+", "mel^a"],
	// Dilute
	d: ["D^w", "D", "d+"],
    // ColourShift
    cs: ["Cs^r", "Cs^b", "cs+"],
	// Shadow
	sdw: ["Sdw^b", "Sdw", "sdw+"],
	
	// FeatherPattern
	fp: ["Fp^m", "Fp^s", "Fp^l", "fp+"],
	// Swirl
	swl: ["Swl+", "swl"],
	// Marking
	mk: ["Mk^t", "Mk^l", "Mk^p", "Mk^s", "mk+"],
	// MarkArea
	ma: ["Ma^f", "Ma^h", "ma+"],
	// Marble
	mbl: ["Mbl+", "mbl", "mbl^c"],
	// MarkOpacity
	mo: ["Mo^h", "Mo^q", "mo+"],
    
    // MarkColour
    mc: ["Mc^e", "Mc+", "mc^a", "mc^b"],
    // MarkShade
    ms: ["Ms^d", "Ms^l", "Ms+", "ms^w"],
	// OutlineColour
	oc: ["Oc^e", "Oc+", "oc^m", "oc^a", "oc^b"],
	// OutlineShade
	os: ["Os^d", "Os^l", "Os+", "os^w"],
	// UnderColour
	uc: ["Uc^e", "Uc+", "uc^m", "uc^a", "uc^b"],
	// UnderShade
	us: ["Us^d", "Us^l", "Us+", "us^w"],
	
	// White
	w: ["W^c", "W^b", "W+", "w"],
	// Merle
	mrl: ["Mrl", "mrl+"],
	// Snow
	sn: ["Sn", "sn+"],
	// SnowMod
	sm: ["Sm^s", "Sm^b", "Sm^x", "sm+"],
	// Lightbelly
	lb: ["Lb", "lb+"],
	// Blanket
	bk: ["Bk", "bk+"],
	// Spotting
	sp: ["Sp", "sp+"],
	// Pied/Paint
	p: ["P^ls", "P^sb", "P^spl", "p+"],
	
    // Eye
    e: ["E^c","E^b","E^i","E^x","E^np","E^ns","e+"],
	// EyeRed
	er: ["Er", "er+"],
	// EyeBlue
	eb: ["Eb", "eb+"],
	// EyeLocation
	el: ["El", "el+"],
    
	// AccentGold
	ag: ["Ag", "ag+"],
	// AccentRed
	ar: ["Ar", "ar+"],
	// AccentBlue
	ab: ["Ab", "Ab^w", "ab+"],
	// AccentShade
	as: ["As^d", "As^l", "as+"],
	// AccentLocation
	al: ["Al","al+"],
    
	// Horn
	hrn: ["Hrn+", "Hrn^e", "hrn^m"],
	// Pearl
	prl: ["Prl^s", "Prl+", "prl"],
	// Lame
	la: ["La^l", "La^d", "La+", "la^f",...