JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link rel='stylesheet' type='text/css' href='http://griffusion.elementfx.com/css/colours.css'>
Click on a parent to edit their genes. Hippa/Qilin don't have any markings yet though, only colours and body types.<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_basecol2'><option value='3'>Bright (GG)</option><option value='2'>Normal (Gg)</option><option value='1'>Normal (gg)</option></select> <select class='f_basecol1'><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> 
<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 value='4'>Dun</option><option value='5'>Pale Points</option><option value='6'>Flaxen</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 f_bases2 = 2; var f_bases2 = 2; var b_bases2 = 2; // sn
// 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_m1v = 2; var f_m1v = 2; var b_m1v = 2; // visibility
var m_m1c1 = 4; var f_m1c1 = 4; var b_m1c1 = 4; // colour g
var m_m1c2 = 4; var f_m1c2 = 4; var b_m1c2 = 4; // colour rb
var m_m1s1 = 2; var f_m1s1 = 2; var b_m1s1 = 2; // shade pd
var m_m1s2 = 2; var f_m1s2 = 2; var b_m1s2 = 2; // shade sn

var m_m1p1 = 0; var f_m1p1 = 0; var b_m1p1 = 0; // ?
var m_m1p2 = 0; var f_m1p2 = 0; var b_m1p2 = 0; // forgot
var m_m1p3 = 0; var f_m1p3 = 0; var b_m1p3 = 0; // what
var m_m1p4 = 0; var f_m1p4 = 0; var b_m1p4 = 0; // these
var m_m1p5 = 0; var f_m1p5 = 0; var b_m1p5 = 0; // are
var m_m1p6 = 0; var f_m1p6 = 0; var b_m1p6 = 0; // for

// 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
var num_breed = Math.random();
if(num_breed < 0.5){b_breed = m_breed;}else{b_breed = f_breed;}

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