JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

cats. http://catiators.ocicat.com/abtcolors.htm
<br>

A: <ul>
    <li></li>
    <li>A^pb - Charcoal (patterned blackish) - Generally darker, more eu.</li>
    <li></li>
    <li></li>
</ul>

B: <ul>
    <li>B+</li>
    <li>b - Brown/chocolate</li>
</ul>

C: <ul>
    <li>C+</li>
    <li>c^m - Mocha</li>
    <li>c^b - Burmese</li>
    <li>c^s - Siamese</li>
    <li>c1 - White with pigmented eyes</li>
    <li>c2 - Actual albino</li>
</ul>

c^b/c^s have intermediate look, called Mink or Tonkinese.<br>

D: <ul>
    <li>D+</li>
    <li>d - Dilute</li>
</ul>

DiluteMod is not proven yet. Blue/lilac/lav/fawn becomes caramel, cream becomes apricot.<ul>
    <li>Dm</li>
    <li>dm+</li>
</ul>

Intensity: <ul>
    <li>I - Silver. Removes phaeo</li>
    <li>i+</li>
</ul>



charcoal seems to vary, like sootiness. it can just darken the spine, or go down the sides too. it doesn't affect the chest, underside etc, or at least not as much.
<img src='https://zhsvyhsunc1viu3bpzjiy13y-wpengine.netdna-ssl.com/wp-content/uploads/2018/07/g_charcoal_9.jpg'>
<img src='https://www.leopardsrealm.com/uploads/5/2/0/3/52033991/diva-oct3-2017_orig.jpg'>
<img src='https://en.wikipedia.org/wiki/File:Charcoal_Bengal.jpg'>
<img src='http://www.charcoalbengalcats.info/uploads/1/9/2/0/19202953/6218841_orig.jpg'>
<img src='https://zhsvyhsunc1viu3bpzjiy13y-wpengine.netdna-ssl.com/wp-content/uploads/2018/07/CharcoalRond.png'>
<img src='https://i.pinimg.com/originals/53/65/3d/53653d0ade9fc4d625055cd5c45b8d5c.jpg'>
<img src='https://s-media-cache-ak0.pinimg.com/originals/db/12/e7/db12e73a123a804ef74a18f133304a86.jpg'>
<img src='http://www.pets4homes.co.uk/images/classifieds/2017/01/30/1505820/large/large-beautiful-bengal-boy-mink-charcoal-588f8ed2e6a76.jpg'>
<img src='https://i.pinimg.com/originals/ef/ba/06/efba060b1de6651abee08fbdbe186f05.jpg'>
<img src='https://zhsvyhsunc1viu3bpzjiy13y-wpengine.netdna-ssl.com/wp-content/uploads/2018/07/g_charcoal_8.jpg'>
<img...

CSS

img {display:block;width:auto;height:auto;max-width:500px;max-height:300px;}

JavaScript

let g = {s1: "s", s2: "s", b1: "B", b2: "b", d1: "d", d2: "d", dm1: "Dm", dm2: "dm", c1: "c^s", c2: "c", o1: "O", o2: "O"};

let aa = {

    // What to call the property?
    // Which locus to check, for which allele?
    // Is the trait dominant, recessive, other...?
    traits: [
        ["silver", "s", "S", "dom"],
        ["choc", "b", "b", "rec"],
        ["dilute", "d", "d", "rec"],
        ["dmod", "dm", "Dm", "dom"],
        ["cs", "c", "c^s", "inc"],
        ["cb", "c", "c^b", "inc"],
        ["c", "c", "c", "rec"],
        ["orange", "o", "O", "inc"]
    ],
    
    // above goes in animal constant.
    // these funcs go in animal class.
    
    /*
    * Loop through, assign animal's list of traits.
    * Such as: {silver: false, merle: 2, choc: true}
    */
    getTraits: function(geno){
        let muts = {};
        for(let t of this.traits){
            muts[t[0]] = this.getTrait(t[1], t[2], t[3], geno) || false;
        }
        return muts;
    },
    
    /*
    * Return boolean for dom/rec traits.
    * Return 2, 1 or false for inc dom and others.
    */
    getTrait: function(locus, allele, inh, g){
        if(inh == "dom" && (g[locus + "1"] == allele || g[locus + "2"] == allele)){ return true; }
        if(inh == "rec" && (g[locus + "1"] == allele && g[locus + "2"] == allele)){ return true; }
        if(inh == "inc"){
            if(g[locus + "1"] == allele && g[locus + "2"] == allele){ return 2; }
            if(g[locus + "1"] == allele || g[locus + "2"] == allele){ return 1; }
        }
    }
    
}

let mut = aa.getTraits(g);
console.log(mut);

let euCol = "black",
    euName = "Black",
    phaCol = "tan",
    phaName = "Brown";

if(mut.choc){
    euCol = "choc";
    euName = "Chocolate";
    if(mut.dilute){
        euCol = "uh";
        euName = "uh";
        if(mut.dmod){
            euCol = "caramel";
            euName = "Caramel";
        }
    }
}else if(mut.dilute){
    euCol = "uh";
    euName = "uh";
    if(mut.dmod){
       ...