JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Breeding generator. DB needs to store the pairs of G, R/B, P/D/N and S/n alleles. Some combos look the same, such as all the PD and NN shades. It was silly to have dozens of identical images and CSS classes, so the numbers are converted. But now that CSS filters can be used for 'free', it might not be a problem...<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><option value='3'>Qilin</option><option value='4'>Hippalectryon</option></select>
<br>Base colour: <select class='f_basec1'><option value='1'>Pink (RRBb)</option><option value='2'>Red (RRbb)</option><option value='3'>Orange (Rrbb)</option><option value='4'>Yellow (rrbb)</option><option value='5'>Green (rrBb)</option><option value='6'>Blue (rrBB)</option><option value='7'>Indigo (RrBB)</option><option value='8'>Purple (RRBB)</option><option value='9'>Rainbow (RrBb)</option></select> <select class='f_basec2'><option value='3'>Bright (GG)</option><option value='2'>Normal (Gg)</option><option value='1'>Normal (gg)</option></select> 
<br>Base shade1: <select class='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='f_bases2'>
<option value='3'>SS</option><option value='2'>Sn</option><option value='1'>nn</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...

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

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; // 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_basec1 = 3; var f_basec1 = 7; var b_basec1 = 2; // g
var m_basec2 = 1; var f_basec2 = 2; var b_basec2 = 2; // rb
var m_bases1 = 2; var f_bases1 = 2; var b_bases1 = 2; // pd
var m_bases2 = 2; var f_bases2 = 2; var b_bases2 = 2; // sn

// bring up selected parent's panel
$(".coat_holder").click(function(){
  var tab = $(this).data('tab'); $('.edit_parent').hide();
  $('.edit_'+tab).show();
});

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

// determine baby breed
if(Math.random() < 0.5){b_breed = m_breed;}else{b_breed = f_breed;}

// inherit 5 basic mark slots
if(Math.random() < 0.5){b_b1 = m_b1;}else{b_b1 = f_b1;}
if(Math.random() < 0.5){b_b2 = m_b2;}else{b_b2 = f_b2;}
if(Math.random() < 0.5){b_b3 = m_b3;}else{b_b3 = f_b3;}
if(Math.random() < 0.5){b_b4 = m_b4;}else{b_b4 = f_b4;}
if(Math.random() < 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);

// turn parent base colour numbers into genos
var mbasegeno = getColourAlleles(m_basec1,m_basec2);
var mbg1 = mbasegeno[0]; var mbg2 = mbasegeno[1];
var mbr1 = mbasegeno[2]; var mbr2 = mbasegeno[3];
var mbb1 = mbasegeno[4]; var mbb2 = mbasegeno[5];
var fbasegeno = getColourAlleles(f_basec1,f_basec2);
var fbg1 = fbasegeno[0]; var fbg2 = fbasegeno[1];
var fbr1 = fbasegeno[2]; var fbr2 = fbasegeno[3];
var fbb1 = fbasegeno[4]; var fbb2 = fbasegeno[5];
// mix to get baby numbers
var bbase = getColour(mbasegeno,fbasegeno);
b_basec1 = bbase[0]; b_basec2 = bbase[1];
// and also get baby colour geno for display
var bbasegeno = getColourAlleles(b_basec1,b_basec2);
var bbg1 = bbasegeno[0]; var bbg2 = bbasegeno[1];
var bbr1 =...