JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Much simpler version! Click on a parent to edit their genes.<br>
<div class='edit_parent edit_female'>
<h3>Design Mother</h3>
Breed: <select class='f_breed'><option value='1'>Unicorn</option><option value='2'>Griffin</option></select>
<br>Base colour: <select class='f_bc'><option value='1'>Pink</option><option value='2'>Red</option><option value='3'>Orange</option><option value='4'>Yellow</option><option value='5'>Green</option><option value='6'>Blue</option><option value='7'>Indigo</option><option value='8'>Grey</option><option value='9'>Purple</option></select>
 Scheme: <select class='f_ba'><option value='1'>Basic</option><option value='2'>Alt</option></select> Shade: <select class='f_bs'>
<option value='1'>1</option><option value='2'>2</option><option value='3'>3</option><option value='4'>4</option><option value='5'>5</option><option value='6'>6</option><option value='7'>7</option><option value='8'>8</option><option value='9'>9</option><option value='10'>10</option><option value='11'>11</option><option value='12'>12</option><option value='13'>13</option></select> 
<br>Body: <select class='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='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='f_b3'>
<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...

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;} 

/* pink */
.col110 {background-image: linear-gradient(to right, #ffe7f2,#e44b97,#560132);}
.col111 {background-color:#ffe7f2;}
.col112 {background-color:#ed80b6;}
.col113 {background-color:#e44b97;}
.col114 {background-color:#b43275;}
.col115 {background-color:#560132;}
/* violet */
.col120 {background-image: linear-gradient(to right, #f9e3ff,#b744f3,#350061);}
.col121 {background-color:#f9e3ff;}
.col122 {background-color:#d992fb;}
.col123 {background-color:#b744f3;}
.col124 {background-color:#831dae;}
.col125 {background-color:#4a0060;}
/* red */
.col210 {background-image: linear-gradient(to right, #ffdddd,#e54242,#680000);}
.col211 {background-color:#ffdddd;}
.col212 {background-color:#f29090;}
.col213 {background-color:#e54242;}
.col214 {background-color:#a62121;}
.col215 {background-color:#680000;}
/* brown */
.col220 {background-image: linear-gradient(to right, #f6e2da,#c77755,#542713);}
.col221 {background-color:#f6e2da;}
.col222 {background-color:#dfad98;}
.col223 {background-color:#c77755;}
.col224 {background-color:#8d4f34;}
.col225 {background-color:#542713;}
/* orange */
.col310 {background-image: linear-gradient(to right, #ffe8cf,#f58d00,#633800);}
.col311 {background-color:#ffe8cf;}
.col312 {background-color:#fabb68;}
.col313 {background-color:#f58d00;}
.col314 {background-color:#ac6200;}
.col315 {background-color:#633800;}
/* peach */
.col320 {background-image: linear-gradient(to right, #fde7dd,#fcab88,#cb6640);}
.col321 {background-color:#fde7dd;}
.col322 {background-color:#fdc9b3;}
.col323...

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; // 5 body marks
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_bc = 4; var f_bc = 4; var b_bc = 4; // base colour
var m_bs = 7; var f_bs = 7; var b_bs = 7; // base shade
var m_ba = 1; var f_ba = 1; var b_ba = 1; // base scheme/alt
// 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_m1s = 7; var f_m1s = 7; var b_m1s = 7; // shade
var m_m1a = 1; var f_m1a = 1; var b_m1s = 1; // scheme/alt
var m_m1g = 0; var f_m1g = 0; var b_m1g = 0; // gradient
var m_m1v = 1; var f_m1v = 1; var b_m1v = 1; // visibility

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

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

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

// body marks, very simple
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 = f_b5;}
var b_b1n = getBodyname(b_b1); var b_b2n = getBodyname(b_b2);
var b_b3n = getBodyname(b_b3); var b_b4n = getBodyname(b_b4);
var b_b5n = getBodyname(b_b5);

// use 'wheel' for colours, shades
b_bc = numberBetween(m_bc,f_bc,'col');
var num_ba = Math.random();
// colour version is from either parent
if(num_ba < 0.5){b_ba = m_ba;}else{b_ba = f_ba;}
b_bs = numberBetween(m_bs,f_bs,'shade');
var b_basecol = b_bc+''+b_ba; // should be 2...