JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Dragon marking calculator.

<div class='container'>

<div id='mum'>Mother: <div id='femalecol'>uhhh</div><br>
<div id='mumimg' class='dragon_coat coat_large'>
<img src='http://griffusion.elementfx.com/pics/critters/Midnight.png'>
</div>
<select id='f_mk1'>
    <option value='Mk^t' selected>Mk^t</option>
    <option value='Mk^l'>Mk^l</option>
    <option value='Mk^p'>Mk^p</option>
    <option value='Mk^s'>Mk^s</option>
    <option value='mk+'>mk+</option>
</select>
<select id='f_mk2'>
    <option value='Mk^t'>Mk^t</option>
    <option value='Mk^l'>Mk^l</option>
    <option value='Mk^p'>Mk^p</option>
    <option value='Mk^s'>Mk^s</option>
    <option value='mk+' selected>mk+</option>
</select> 
<select id='f_sdw1'>
    <option value='Sdw'>Sdw</option>
    <option value='sdw+' selected>sdw+</option>
</select>
<select id='f_sdw2'>
    <option value='Sdw'>Sdw</option>
    <option value='sdw+' selected>sdw+</option>
</select>
<select id='f_swl1'>
    <option value='Swl+' selected>Swl+</option>
    <option value='swl'>swl</option>
</select>
<select id='f_swl2'>
    <option value='Swl+' selected>Swl+</option>
    <option value='swl'>swl</option>
</select>
</div> 
<div id='dad'>Father: <div id='malecol'>yyy</div><br>
<div id='dadimg' class='dragon_coat coat_large'>
<img src='http://griffusion.elementfx.com/pics/critters/Midnight.png'>
</div>
<select id='m_mk1'> 
    <option value='Mk^t' selected>Mk^t</option>
    <option value='Mk^l'>Mk^l</option>
    <option value='Mk^p'>Mk^p</option>
    <option value='Mk^s'>Mk^s</option>
    <option value='mk+'>mk+</option>
</select>
<select id='m_mk2'>
    <option value='Mk^t'>Mk^t</option>
    <option value='Mk^l'>Mk^l</option>
    <option value='Mk^p'>Mk^p</option>
    <option value='Mk^s'>Mk^s</option>
    <option value='mk+' selected>mk+</option>
</select> 
<select id='m_sdw1'>
    <option value='Sdw'>Sdw</option>
    <option value='sdw+' selected>sdw+</option>
</select>
<select id='m_sdw2'>
    <option value='Sdw'>Sdw</option>
  ...

CSS

.container {text-align:center;}
#malecol,#femalecol {display:inline-block}
#mum, #dad {border:1px solid black;padding:10px;margin:5px;border-radius:5px;display:inline-block;vertical-align:top;}
#muming, #dadimg {padding:5px;}

#result_table {width:100%;margin-top:10px;border-spacing:5px;}
#result_table td {border:1px solid black;border-radius:5px;padding:5px;text-align:center;}

.coat_large {
  width: 257px;
  height: 199px;
}
.coat_thumb {
    width: 100px;
    height: 70px;
}


.dragon_coat {
  position: relative;
}

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


/* classes for each coat colour */

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

.c_grey_1 { background-color: #DFDFDF; }
.c_grey_2 { background-color: #B0B0B0; }
.c_grey_3 { background-color: #7E7E7E; }
.c_grey_4 { background-color: #4F4F4F; }
.c_grey_5 { background-color: #282828; }

.f_grey_1 { filter: invert(86%); }
.f_grey_2 { filter: invert(64%); }
.f_grey_3 { filter: invert(44%); }
.f_grey_4 { filter: invert(28%); }
.f_grey_5 { filter: invert(10%); }

.c_red_b1 { background-color: #F4CCCC; }
.c_red_b2 { background-color: #E48181; }
.c_red_b3 { background-color: #D52F2F; }
.c_red_b4 { background-color: #9B2020; }
.c_red_b5 { background-color: #681515; }

.c_red_d1 { background-color: #E9D7D7; }
.c_red_d2 { background-color: #C99999; }
.c_red_d3 { background-color: #A75B5B; }
.c_red_d4 { background-color: #7A4040; }
.c_red_d5 { background-color: #562C2C; }

.f_red_b1 { filter: invert(85%) sepia(10%) saturate(708%) hue-rotate(314deg) brightness(101%) contrast(91%); }
.f_red_b2 { filter: invert(66%) sepia(81%) saturate(1057%) hue-rotate(308deg) brightness(98%) contrast(81%); }
.f_red_b3 { filter: invert(18%) sepia(90%) saturate(2563%) hue-rotate(346deg) brightness(106%) contrast(87%); }
.f_red_b4 { filter: invert(14%) sepia(50%) saturate(4836%) hue-rotate(348deg) brightness(96%) contrast(91%); }
.f_red_b5 { filter:...

JavaScript

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

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", "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"],
	// Pearl
	prl: ["Prl+", "prl"],
	// Lame
	la: ["La^l", "La^d", "La+", "la^f", "la^s"],
	// Dust
	dst: ["Dst^o", "Dst+", "dst", "dst^s"],
	// Grey
	gr: ["Gr", "gr+"],
	// Pastel
	pa: ["Pa",...