JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Click on a parent to edit their genes.<br>
<div class='edit_parent edit_female'>
<h3>Design Mother</h3>
Breed: <select class='fselect f_breed'><option value='1'>Unicorn</option><option value='2'>Griffin</option></select>
<br>Base colour: <select class='fselect f_basecol'><option value='1'>Red</option><option value='2'>Brown</option><option value='3'>Orange</option><option value='4'>Yellow</option><option value='5'>Olive</option><option value='6'>Green</option><option value='7'>Turquoise</option><option value='8'>Blue</option><option value='9'>Indigo</option><option value='10'>Slate</option><option value='11'>Grey</option><option value='12'>Lavender</option><option value='13'>Purple</option><option value='14'>Magenta</option><option value='15'>Pink</option><option value='16'>Pearl</option></select>
<br>Base shade1: <select class='fselect f_bases1'>
<option value='1'>PP</option><option value='2'>Pn</option><option value='3'>nn</option><option value='4'>Dn</option><option value='5'>DD</option><option value='6'>PD</option></select> 
Base shade2: <select class='fselect f_bases2'>
<option value='3'>SS</option><option value='2'>Sn</option><option value='1'>nn</option></select>
<br>Body: <select class='fselect f_b1'>
<option value='0'>None</option><option value='1'>Roan</option><option value='2'>Points</option><option value='3'>Pangare</option><option value='4'>Dun</option><option value='5'>Pale Points</option><option value='6'>Flaxen</option><option value='7'>Dapple</option><option value='8'>Sooty</option>
</select> <select class='fselect f_b2'>
<option value='0'>None</option><option value='1'>Roan</option><option value='2'>Points</option><option value='3'>Pangare</option><option value='4'>Dun</option><option value='5'>Pale Points</option><option value='6'>Flaxen</option><option value='7'>Dapple</option><option value='8'>Sooty</option>
</select> <select class='fselect f_b3'>
<option value='0'>None</option><option value='1'>Roan</option><option...

CSS

.edit_parent {border: 2px solid grey;border-radius: 10px;padding: 0px 10px 10px 10px;margin-bottom: 10px;}
.coats {display:inline-block;text-align:center;}
.coat_holder {width:200px;height:150px;margin:5px;border:1px dashed grey;position:relative;cursor:pointer;}
.coat_layer {position:absolute;top:0px;left:0px;}
.coat_layer img {width:200px;height:150px;}
.multiply {mix-blend-mode:multiply;} .overlay {mix-blend-mode:overlay;}

JavaScript

// globals for functions
var m_breed = 1; var f_breed = 1; var b_breed = 1;
var m_b1 = 0; var f_b1 = 0; var b_b1 = 0;
var m_b2 = 0; var f_b2 = 0; var b_b2 = 0;
var m_b3 = 0; var f_b3 = 0; var b_b3 = 0;
var m_b4 = 0; var f_b4 = 0; var b_b4 = 0;
var m_b5 = 0; var f_b5 = 0; var b_b5 = 0;
var m_basecol = 4; var f_basecol = 4; var b_basecol = 4;
var m_bases1 = 2; var f_bases1 = 2; var b_bases1 = 2;
var f_bases2 = 2; var f_bases2 = 2; var b_bases2 = 2;
// now marking 1
var m_m1t = 1; var f_m1t = 1; var b_m1t = 1; // type
var m_m1p = 2; var f_m1p = 2; var b_m1p = 2; // pattern
var m_m1c = 4; var f_m1c = 4; var b_m1c = 4; // colour
var m_m1v = 2; var f_m1v = 2; var b_m1v = 2; // visibility
var m_m1s1 = 2; var f_m1s1 = 2; var b_m1s1 = 2;
var m_m1s2 = 2; var f_m1s2 = 2; var b_m1s2 = 2;
var m_m1p1 = 0; var f_m1p1 = 0; var b_m1p1 = 0; // alleles
var m_m1p2 = 0; var f_m1p2 = 0; var b_m1p2 = 0;
var m_m1p3 = 0; var f_m1p3 = 0; var b_m1p3 = 0;
var m_m1p4 = 0; var f_m1p4 = 0; var b_m1p4 = 0;
var m_m1p5 = 0; var f_m1p5 = 0; var b_m1p5 = 0;
var m_m1p6 = 0; var f_m1p6 = 0; var b_m1p6 = 0;

// tabs
$(".coat_holder").click(function(){
  var tab = $(this).data('tab'); $('.edit_parent').hide();
  $('.edit_'+tab).show();
});

$(".mix").click(function(){

var b_bs = getShade(m_bases1,m_bases2,f_bases1,f_bases2);
b_bases1 = b_bs[0]; b_bases2 = b_bs[1];
var b_bsn = getShadeAlleles(b_bases1,b_bases2);
var bsn1 = b_bsn[0]; var bsn2 = b_bsn[1];
var bsn3 = b_bsn[2]; var bsn4 = b_bsn[3];

var num_breed = Math.random();
if(num_breed < 0.5){b_breed = m_breed;}else{b_breed = f_breed;}

b_basecol = getColour(m_basecol,f_basecol);

var num_b1 = Math.random();
if(num_b1 < 0.5){b_b1 = m_b1;}else{b_b1 = f_b1;}
var num_b2 = Math.random();
if(num_b2 < 0.5){b_b2 = m_b2;}else{b_b2 = f_b2;}
var num_b3 = Math.random();
if(num_b3 < 0.5){b_b3 = m_b3;}else{b_b3 = f_b3;}
var num_b4 = Math.random();
if(num_b4 < 0.5){b_b4 = m_b4;}else{b_b4 = f_b4;}
var num_b5 = Math.random();
if(num_b5 < 0.5){b_b5 = m_b5;}else{b_b5...