JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Random creature generator. Within wild/natural colour and marking ranges, or entirely random.<button id='wild_generate'>Wild</button> <button id='random_generate'>Random</button><br><br>
<span id='result_info'></span>
<div id='result_coat'></div>

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

var breed, sex, eyes, base_col, addi_col, addi_shape, m1_col, m1;

// This is a FULL RANDOM generator.
// Any colours, any markings, regardless of breed.
$("#random_generate").click(function(){
    breed = randomArray(breeds);
    sex = randomNumber(1,2);

    var base_sat = randomNumber(1,3);
    base_col = randomNumber(0,9);
    var base_shade = randomNumber(1,5);
    base_col = base_sat +""+ base_col +""+ base_shade;
    
    var addi_sat = randomNumber(1,3);
    addi_col = randomNumber(0,9);
    var addi_shade = randomNumber(1,5);
    addi_col = addi_sat +""+ addi_col +""+ addi_shade;
    
    // Light eyes look weird. Minimum shade 2.
    var eye_sat = randomNumber(1,3);
    eyes = randomNumber(0,9);
    var eye_shade = randomNumber(2,5);
    eyes = eye_sat +""+ eyes +""+ eye_shade;
    
    var m1_sat = randomNumber(1,3);
    m1_col = randomNumber(0,9);
    var m1_shade = randomNumber(1,5);
    m1_col = m1_sat +""+ m1_col +""+ m1_shade;
    
    var m1_mod = randomNumber(1,2);
    var m1_shape = randomNumber(1,13);
    var m1_pig = randomNumber(1,9);
    m1 = m1_mod +""+ m1_shape +""+ m1_pig;
    
    // Show the result.
    generateCoat();
});

// This is a WILD generator.
// Natural colours and markings for each breed.
$("#wild_generate").click(function(){
    // Pick a random breed.
    breed = randomArray(breeds);
    sex = randomNumber(1,2);
    
    base_col = randomArray(breed.basecols);
    addi_col = randomArray(breed.addicols);
    m1_col = randomArray(breed.markcols);
    eyes = randomArray(breed.eyes);
    
    // These 3 digits include mod, shape, opa/pig.
    // Easiest just to pick from premade exact options.
    m1 = randomArray(breed.marks);
    
    // Show the result.
    generateCoat();
});

// Use globals to fill info span and render coat.
function generateCoat(){

    var base_info = getColourInfo(base_col);
    var addi_info = getColourInfo(addi_col);
    var m1_col_info = getColourInfo(m1_col);
    var eye_info =...