JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Breed: <select class='select_breed'>
<option value='1'>Unicorn</option><option value='2'>Griffin</option><option value='3'>Qilin</option><option value='4'>Hippalectryon</option></select> 
<br>Base col: <select class='base_colour'><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> 
Base s1: <select class='base_s1'>
<option value='PP'>PP</option><option value='Pn'>Pn</option><option value='nn'>nn/PD</option><option value='Dn'>Dn</option><option value='DD'>DD</option>
</select> 
Base s2: <select class='base_s2'>
<option value='SS'>SS</option><option value='Sn'>Sn</option><option value='nn'>nn</option>
</select>
<br><br>
Body: <select class='select_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='select_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='select_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...

CSS

.prev_holder {width:400px;height:300px;margin:30px auto;border:0px dashed grey;position:relative;}
.prev_layer {position:absolute;top:0px;left:0px;}
.multiply {mix-blend-mode:multiply;} .overlay {mix-blend-mode:overlay;}

JavaScript

function getOverlay(s1,s2){
var part = 3; var op = 1; // default medium colour
if(s1 == 'PP' && s2 == 'SS'){part = 1; op = 1;}
if(s1 == 'PP' && s2 == 'Sn'){part = 1; op = 0.84;}
if(s1 == 'PP' && s2 == 'nn'){part = 1; op = 0.67;}
if(s1 == 'Pn' && s2 == 'SS'){part = 1; op = 0.5;}
if(s1 == 'Pn' && s2 == 'Sn'){part = 1; op = 0.34;}
if(s1 == 'Pn' && s2 == 'nn'){part = 1; op = 0.16;}
if(s1 == 'Dn' && s2 == 'SS'){part = 5; op = 0.5;}
if(s1 == 'Dn' && s2 == 'Sn'){part = 5; op = 0.34;}
if(s1 == 'Dn' && s2 == 'nn'){part = 5; op = 0.16;}
if(s1 == 'DD' && s2 == 'SS'){part = 5; op = 1;}
if(s1 == 'DD' && s2 == 'Sn'){part = 5; op = 0.84;}
if(s1 == 'DD' && s2 == 'nn'){part = 5; op = 0.67;}
var bits = [part,op]; return bits;
}

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

var breed = $('.select_breed').val();
var b1 = $('.select_b1').val();
var b2 = $('.select_b2').val();
var b3 = $('.select_b3').val();
var b4 = $('.select_b4').val();
var b5 = $('.select_b5').val();

var bcolour = $('.base_colour').val();
var m1colour = $('.m1_colour').val();
// I was silly and named colour images 01, 02 etc...
if(breed < 3){
if(bcolour < 10){bcolour = '0'+bcolour;}
if(m1colour < 10){m1colour = '0'+m1colour;}
}else{
if(bcolour < 10){bcolour = '9'+bcolour;}
if(m1colour < 10){m1colour = '9'+m1colour;}
}
var bs1 = $('.base_s1').val();
var bs2 = $('.base_s2').val();
var m1s1 = $('.m1_s1').val();
var m1s2 = $('.m1_s2').val();
var m1t = $('.select_m1t').val();
var m1p = $('.select_m1p').val();

// get shade layer url number and opacity
var bbits = getOverlay(bs1,bs2);
var bpart = bbits[0]; var bop = bbits[1];
var m1bits = getOverlay(m1s1,m1s2);
var m1part = m1bits[0]; var m1op = m1bits[1];

// changing breed base
$(".prev_highlight").html("<img src='http://griffusion.elementfx.com/mythnest/art/breed"+breed+"/highlight.png'>");
  $(".prev_overlay").html("<img src='http://griffusion.elementfx.com/mythnest/art/breed"+breed+"/overlay.png'>");
  $(".prev_shade").html("<img...