JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Colour/marking crossing.<br><br>

<b><u>Parent 1</u></b><br>
Base: <select id='m_base_sat'>
    <option value='3' selected>Sat 3</option>
    <option value='2'>Sat 2</option>
    <option value='1'>Sat 1</option>
</select>
<select id='m_base_col'>
    <option value='1' selected>Red</option>
    <option value='2'>Orange</option>
    <option value='3'>Yellow</option>
    <option value='4'>Olive</option>
    <option value='5'>Green</option>
    <option value='6'>Teal</option>
    <option value='7'>Blue</option>
    <option value='8'>Indigo</option>
    <option value='9'>Purple</option>
    <option value='0'>Magenta</option>
</select>
<select id='m_base_shade'>
    <option value='1'>Shade 1</option>
    <option value='2'>Shade 2</option>
    <option value='3' selected>Shade 3</option>
    <option value='4'>Shade 4</option>
    <option value='5'>Shade 5</option>
</select>
<br>
M1: <select id='m_m1_mod'>
    <option value='1'>Mod 1</option>
    <option value='2'>Mod 2</option>
</select> <select id='m_m1_shape'>
    <option value='1'>Points</option>
    <option value='2'>Pangare</option>
    <option value='3'>Sooty</option>
    <option value='4'>Snowy</option>
    <option value='5'>Dapple</option>
    <option value='6'>Leopard</option>
    <option value='7'>Spangle</option>
    <option value='8'>Mottle</option>
    <option value='9'>Banded</option>
    <option value='10'>Laced</option>
    <option value='11'>Tiger</option>
    <option value='12'>Cheetah</option>
    <option value='13'>Owl</option>
</select> <select id='m_m1_opa'>
    <option value='1'>Hidden</option>
    <option value='2'>Half</option>
    <option value='3'>Full</option>
</select> <select id='m_m1_pig'>
    <option value='1'>White</option>
    <option value='2'>Colour</option>
    <option value='3'>Black</option>
</select>
<br>
M1 colour: <select id='m_m1_sat'>
    <option value='3' selected>Sat 3</option>
    <option value='2'>Sat 2</option>
    <option value='1'>Sat 1</option>
</select>
<select...

CSS

div, img {box-sizing: border-box;}

.swatch {
    width: 100px;
    height: 30px;
    border: 1px solid black;
    border-radius: 5px;
    display: inline-block;
}

/* BRIGHT colours. Saturation 3. */

/* Red */
.colour_311 { background-color: #F7E1E2; }
.colour_312 { background-color: #E49799; }
.colour_313 { background-color: #C84246; }
.colour_314 { background-color: #902122; }
.colour_315 { background-color: #561213; }

/* Orange */
.colour_321 { background-color: #F9EAE0; }
.colour_322 { background-color: #EAB992; }
.colour_323 { background-color: #D27D39; }
.colour_324 { background-color: #995319; }
.colour_325 { background-color: #5C310D; }

/* Yellow */
.colour_331 { background-color: #FBF4DC; }
.colour_332 { background-color: #F1D789; }
.colour_333 { background-color: #E1B229; }
.colour_334 { background-color: #A57E0E; }
.colour_335 { background-color: #644C05; }

/* Olive */
.colour_341 { background-color: #F7F8E0; }
.colour_342 { background-color: #E3E794; }
.colour_343 { background-color: #C6CD3D; }
.colour_344 { background-color: #8F951E; }
.colour_345 { background-color: #565A10; }

/* Green */
.colour_351 { background-color: #EDF7E1; }
.colour_352 { background-color: #C3E398; }
.colour_353 { background-color: #8EC743; }
.colour_354 { background-color: #619023; }
.colour_355 { background-color: #3A5713; }

/* Teal */
.colour_361 { background-color: #E3F6F1; }
.colour_362 { background-color: #9BDFD0; }
.colour_363 { background-color: #4BBFA6; }
.colour_364 { background-color: #298973; }
.colour_365 { background-color: #175346; }

/* Blue */
.colour_371 { background-color: #E0F1F9; }
.colour_372 { background-color: #92CEEA; }
.colour_373 { background-color: #39A1D2; }
.colour_374 { background-color: #1A7199; }
.colour_375 { background-color: #0E435C; }

/* Indigo */
.colour_381 { background-color: #E2E5F6; }
.colour_382 { background-color: #9CA6DF; }
.colour_383 { background-color: #4A5CC0; }
.colour_384 { background-color: #29388A; }
.colour_385 {...

JavaScript

/*
       pig 1  pig 2  pig 3
opa 1   1     2      3
opa 2   4     5      6
opa 3   7     8      9

*/

$(function() {

  var m_base_sat, f_base_sat = 3;
  var m_base_col, f_base_col = 1;
  var m_base_shade, f_base_shade = 3;

  var m_addi_sat, f_addi_sat = 3;
  var m_addi_col, f_addi_col = 1;
  var m_addi_shade, f_addi_shade = 3;
  
  var m_m1_mod, f_m1_mod = 1;
  var m_m1_shape, f_m1_shape = 1;
  // Opacity and pigmentation are stored as 1 digit.
  var m_m1_pig, f_m1_pig = 1;
  
  var m_m1_sat, f_m1_sat = 2;
  var m_m1_col, f_m1_col = 5;
  var m_m1_shade, f_m1_shade = 2;

  // Split the parents' strings...
  // Show their colour name, CSS.
  $("select").change(function() {

    m_base_sat = Number( $("#m_base_sat").val() );
    m_base_col = Number( $("#m_base_col").val() );
    m_base_shade = Number( $("#m_base_shade").val() );

    f_base_sat = Number( $("#f_base_sat").val() );
    f_base_col = Number( $("#f_base_col").val() );
    f_base_shade = Number( $("#f_base_shade").val() );

    var m_base = m_base_sat + "" + m_base_col + "" + m_base_shade;
    var f_base = f_base_sat + "" + f_base_col + "" + f_base_shade;
    
    // Now the markings.
    m_m1_sat = Number( $("#m_m1_sat").val() );
    m_m1_col = Number( $("#m_m1_col").val() );
    m_m1_shade = Number( $("#m_m1_shade").val() );
    
    m_m1_mod = Number( $("#m_m1_mod").val() );
    m_m1_shape = Number( $("#m_m1_shape").val() );
    
    // In database, these are both in a single digit, 0-9.
    // So functions are used to splitting them.
    var opa = Number( $("#m_m1_opa").val() );
    var pig = Number( $("#m_m1_pig").val() );
    m_m1_pig = combinePigmentation(opa, pig);
    
    f_m1_sat = Number( $("#f_m1_sat").val() );
    f_m1_col = Number( $("#f_m1_col").val() );
    f_m1_shade = Number( $("#f_m1_shade").val() );
    
    f_m1_mod = Number( $("#f_m1_mod").val() );
    f_m1_shape = Number( $("#f_m1_shape").val() );
    opa = Number( $("#f_m1_opa").val() );
    pig = Number( $("#f_m1_pig").val()...