JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

OotG thingy.

<p>
<ul>
    <li>I can't remember nor find any info about shades. Base, faded, bright, cream? I had to make up some alleles.</li>
    <li>No idea about the 3 paint types either. Or the fact that some Bandits didn't have white boots...</li>
    <li>Did markings use alleles for realistic mixing and display (dominant/recessive/co-dominant)? Or were they just numbers passed down? How many slots? At least 3, to allow Sunset + one other...</li>
    <li>Very little info on teen stage. Just guessing what they looked like.</li>
</ul>
</p>

can have at once:
- tiger + leopard
- tiger + dusky
- leopard + dusky
- tiger + leopard + dusky

- sunny doesn't change marking shape, it's on own layer beneath.
- likewise for snowy, it's on own layer above.
- likewise for bandit, unsure if above or below marking.

fairbelly was separate? can always show. beneath spots, tiger, bandit but above dusky.

tortie is definitely separate, caused by black gene. seems to overwrite other markings.

teens did show sunny, bandit, fairbelly, paint.

JavaScript

// Black. Dominant in males, co/inc in females.
var k1, k2 = 'K';

// White, recessive.
var w1, w2 = 'W';

// Exotic. Dominant in males, co/inc in females.
// Only used if 2x white is carried.
var e1, e2 = 'e';

// Red and green. Co-dominant.
// Eye colour, and rest of body if meet rainbow criteria.
// If sunny, exotic but no white, shown in sunny parts.
var r1, r2 = 'r';
var g1, g2 = 'g';


// For image display purposes.

// If rainbow, use base shade. Else match adult shade.
var egg_shade = 1;

// Used for chicks, then eye colour in cubs/teens.
// Maybe sunny/whole body in adults.
var eye_colour = "rrgg";

var adult_shade = 1;





var rainbow, exotic, white, sunny = false;

if(w1 == "w" && w2 == "w"){
    white = true;
}
if(sex == "m" && (e1 == "E" || e2 == "E")){
    exotic = true;
}
if(sex == "f" && e1 == "E" && e2 == "E"){
    exotic = true;
}

// To show rainbow colour, need 2x recessive white...
// And 1 or 2 copies of exotic (1 male, 2 female).
if(exotic && white){
    rainbow = true;
}else{
    // Sunny points, perhaps? If exotic but no white.
    if(sunny && exotic && !white){
        sunny = true;
    }
}

var eye_colour = redGreenToColour(r1, r2, g1, g2);
var body_colour = getNaturalColour();

if(rainbow){
    body_colour = eye_colour;
}
if(sunny){
    sunny_colour = eye_colour;
}

// Take the 4 letters, return colour number.
function redGreenToColour(r1, r2, g1, g2){
    var red, green = 1;
    if(r1 == "R" || r2 == "R"){red = 2;}
    if(r1 == "R" && r2 == "R"){red = 3;}
    if(g1 == "G" || g2 == "G"){green = 2;}
    if(g1 == "G" && g2 == "G"){green = 3;}
    
    var colours = [
       [6, 7, 1], // blue, purple, red
       [5, 3, 2], // teal, amber, orange
       [4, 8, 9]  // green, brown, oily
    ];
    
    return colours[green - 1][red - 1];
}

// hh
function getColourName(colour, shade){

    var names = [
        ["Red", "Salmon", "Amaranth", "Pink"],
        ["Orange", "Tan", "Gold", "Cream"],
        ["Amber", "Khaki", "Chiffon",...