JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Dragon colour calculator.

<div class='container'>

<div id='mum'>Mother: <div id='femalecol'>Bright gold</div><br>
<div id='mumimg'>
<img src='http://mythstable.epizy.com/dragon/images/base.png' class='f_gold_b3'>
</div>
<select id='f_g1'> 
    <option value='G+' selected>G+</option>
    <option value='g'>g</option>
</select>
<select id='f_g2'>
    <option value='G+'>G+</option>
    <option value='g' selected>g</option>
</select> 
<select id='f_r1'>
    <option value='R'>R</option>
    <option value='r+' selected>r+</option>
</select>
<select id='f_r2'>
    <option value='R'>R</option>
    <option value='r+' selected>r+</option>
</select>
<select id='f_b1'>
    <option value='B'>B</option>
    <option value='B^w'>B^w</option>
    <option value='b+' selected>b+</option>
</select>
<select id='f_b2'>
    <option value='B'>B</option>
    <option value='B^w'>B^w</option>
    <option value='b+' selected>b+</option>
</select>
</div> 
<div id='dad'>Father: <div id='malecol'>Bright orange</div><br>
<div id='dadimg'>
<img src='http://mythstable.epizy.com/dragon/images/base.png' class='f_orange_b3'>
</div>
<select id='m_g1'> 
    <option value='G+' selected>G+</option>
    <option value='g'>g</option>
</select>
<select id='m_g2'>
    <option value='G+'>G+</option>
    <option value='g' selected>g</option>
</select> 
<select id='m_r1'>
    <option value='R' selected>R</option>
    <option value='r+'>r+</option>
</select>
<select id='m_r2'>
    <option value='R'>R</option>
    <option value='r+' selected>r+</option>
</select>
<select id='m_b1'>
    <option value='B'>B</option>
    <option value='B^w'>B^w</option>
    <option value='b+' selected>b+</option>
</select>
<select id='m_b2'>
    <option value='B'>B</option>
    <option value='B^w'>B^w</option>
    <option value='b+' selected>b+</option>
</select>
</div>
<br><button id='cross'>Cross</button><br>Here are the coat colours of potential offspring.<br>

<table id='result_table'></table>

</div>

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 {font-size: 12px; border:1px solid black;border-radius:5px;padding:5px;text-align:center;}

/* 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: invert(11%) sepia(49%) saturate(3148%) hue-rotate(342deg) brightness(103%) contrast(99%); }

.f_red_d1 { filter: invert(100%) sepia(67%) saturate(650%) hue-rotate(291deg) brightness(94%) contrast(94%); }
.f_red_d2 { filter:...

JavaScript

var mother = {g1: "G+", g2: "g", r1: "r+", r2: "r+", b1: "b+", b2: "b+"};
var father = {g1: "G+", g2: "g", r1: "R", r2: "r+", b1: "b+", b2: "b+"};


function orderGenes(d){
    if(d.g1 == "g" && d.g2 == "G+"){ d.g1 = "G+"; d.g2 = "g"; }
    if(d.r1 == "r+" && d.r2 == "R"){ d.r1 = "R"; d.r2 = "r+"; }
    if(d.b1 == "b+" && d.b2 == "B"){ d.b1 = "B"; d.b2 = "b+"; }
    if(d.b1 == "b+" && d.b2 == "B^w"){ d.b1 = "B^w"; d.b2 = "b+"; }
    if(d.b1 == "B^w" && d.b2 == "B"){ d.b1 = "B"; d.b2 = "B^w"; }
    return d;
}

// hhhhhhh
function getBodyBright(d){
	if(d.g1 == "g" && d.g2 == "g"){
		return {name: "Dull", css: "d"};
	}else{
		return {name: "Bright", css: "b"};
	}
}

// hhhhhhh
function getBodyColour(d){
	
	var palette = [
	    ["gold", "olive", "green", "teal", "blue"],
		["orange", "pink", "purple", "violet", "indigo"],
		["red", "pink", "purple", "violet", "indigo"]
	];
	
	var red = 0; var blue = 0;
	if(d.r1 == "R"){ red++; }
	if(d.r2 == "R"){ red++; }
	if(d.b1 == "B^w"){ blue++; }
	if(d.b1 == "B"){ blue += 2; }
	if(d.b2 == "B^w"){ blue++; }
	if(d.b2 == "B"){ blue += 2; }
	
	// Now should have red 0-2 and blue 0-4.
	return palette[red][blue];
	
}

// when any of the 8 dropdowns are changed, get the values...
// and update parents' eye colour names
$("select").change(function(){
    mother.g1 = $('#f_g1').val(); mother.g2 = $('#f_g2').val();
    mother.r1 = $('#f_r1').val(); mother.r2 = $('#f_r2').val();
    mother.b1 = $('#f_b1').val(); mother.b2 = $('#f_b2').val();
    father.g1 = $('#m_g1').val(); father.g2 = $('#m_g2').val();
    father.r1 = $('#m_r1').val(); father.r2 = $('#m_r2').val();
    father.b1 = $('#m_b1').val(); father.b2 = $('#m_b2').val();

    updateParent(father,'malecol','dadimg','dad');
    updateParent(mother,'femalecol','mumimg','mum');

});

function updateParent(d,namediv,img,who){

    d = orderGenes(d);
    var colour = getBodyColour(d);
    var bright = getBodyBright(d);
    var css = colour + "_" + bright.css + "3";
    var name =...