JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mythscale: dragon randomiser. Here you can gaze into the crystal ball and see all kinds of dragon that are theoretically possible! Look a little closer and view their exact colour palette, description and genotype, if you want.

<p><div id='dragon_holder'></div></p>

Breed: <select id='select_breed'>
    <option value='0'>- General -</option>
    <option value='1'>Snowy</option>
    <option value='2'>Volcanic</option>
    <option value='3'>Axi</option>
    <option value='4'>Umbral</option>
    <option value='5'>Coatl</option>
    <option value='6'>Asian</option>
</select> <button class='randomise' data-type='natural'>Natural</button> or <button class='randomise' data-type='random'>Fully random!</button> <br>
<button class='show_spoiler' data-spoiler='random'>Reveal info!</button> 
Mutations: <span id='mutation_count'>?</span>

<span class='spoiler' id='spoiler_random'>
    <div class='palette_holder'>
        <div class='palette_piece'>
            <div class='colour_preview' id='palette_base'>
            </div>
            Base<br><span id='name_base'></span>
        </div> 
        <div class='palette_piece'>
            <div class='colour_preview' id='palette_accent'>
            </div>
            Accent<br><span id='name_accent'></span>
        </div>
        <div class='palette_piece'>
            <div class='colour_preview' id='palette_eyes'>
            </div>
            Eyes<br><span id='name_eyes'></span>
        </div>
        <div class='palette_piece'>
            <div class='colour_preview' id='palette_melanin'>
            </div>
            Melanin<br><span id='name_melanin'></span>
        </div>
        <div class='palette_piece'>
            <div class='colour_preview' id='palette_horns'>
            </div>
            Horns<br><span id='name_horns'></span>
        </div>
        <div class='palette_piece'>
            <div class='colour_preview' id='palette_sth'>
            </div>
            Something<br><span id='name_sth'></span>
       ...

CSS

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

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

.spoiler {
    display: none;
}

#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: #48486A;}
.c_black_b2 {background-color: #8686AC;}
.c_black_b3 {background-color: #C7C7D8;}
.c_black_bb1 {background-color: #20277D;}
.c_black_bb2 {background-color: #6871D9;}
.c_black_bb3...

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", "sdw+"],
	// Shadowback
	sb: ["Sb", "sb+"],
	
	// 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^u", "Lb^m", "Lb^f", "lb+"],
	// Blanket
	bk: ["Bk", "bk+"],
	// Spotting
	sp: ["Sp", "sp+"],
	// Paint
	p: ["P^tb", "P^sb", "P^spl", "p+"],
	
    // Eye
    ey: ["Ey^c","Ey^b","Ey^x","Ey^np","ey+"],
	// EyeRed
	er: ["Er", "er+"],
	// EyeBlue
	eb: ["Eb", "eb+"],
	// Eye Location
	e: ["E^w", "E^s", "E^b", "E^f", "e+"],
    
	// AccentGold
	ag: ["Ag+", "ag"],
	// AccentRed
	ar: ["Ar", "ar+"],
	// AccentBlue
	ab: ["Ab", "Ab^w", "ab+"],
	// AccentShade
	as: ["As^d", "As^l", "as+"],
	// Accent Location
	a: ["A^w", "A^s", "A^b", "A^f", "a+"],
    
	// Horn
	hrn: ["Hrn+", "Hrn^e", "hrn^m"],
	//...