JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

horse tool.<br>
<b>Missing traits</b><br>
Unfortunately many popular traits such as pangare, sootiness and different shades (dark vs pale buckskin, liver chestnut, chocolate palomino) are still a complete genetic mystery, so it would be wrong to include them. Others such as flaxen, seal brown and wild bay are partially understood, or widely theorised, so I will include them for now.<br>
<b>Modifier numbers</b><br>There are several sliders which can enable those traits, and also change the shapes/size of white markings. We have no idea what the actual genes are, or how they're inherited; they are just here for your viewing pleasure, so show what horses can potentially look like. So don't take these numbers as gospel!<br>For the sake of accuracy, I haven't made any of these modifiers heritable. Sootiness, pangare and dark shades can be manually enabled on your foal if you want to see them. A foal can inherit a Tobiano or Overo allele and have the <b>potential</b> for white markings, but its modifier number will be random. Even if the parents are both 0 or 1 with no or minimal white, the foal could be 5, with huge areas of white. Or vice versa. It happens in real life sometimes! We just don't know what genes are involved yet - except that carrying certain alleles gives the potential to have white markings.

JavaScript

var path = "";

var horse = {};

/*
* All possible alleles, ordered by dominance.
* Used for reference, ordering and random picking.
*/
var genome = {
    // Extension
    e: ["E", "e+"],
    // Agouti
    a: ["A", "A+", "A^t", "a+"],
    // Cream
    cr: ["Cr", "prl", "cr+"],
    // Champagne
    ch: ["Ch", "ch+"],
    // Grey
    g: ["G", "g+"],
    // KIT
    kit: ["Kit^rn", "Kit^tb", "Kit^sa", "kit+"],
    // Overo
    o: ["O", "o+"],
    // Splash
    spl: ["Spl", "spl"],
    // Flaxen
    f: ["F+", "f"],
    // Silver
    z: ["Z", "z+"],
    // Leopard complex
    lp: ["Lp", "lp+"],
    // Pattern 1
    patn: ["Patn", "patn+"],
    // Mushroom
    msh: ["Msh+", "msh"],
    // Tiger eye
    te: ["Te+", "te^a", "te^b"]
};

var loci = ["e", "a", "cr", "ch", "g", "kit", "o", "spl", "f", "z", "lp", "patn", "msh", "te"];


// Pick a random number between any two.
function randomNumber(n1, n2){
	if(n1 == n2){
        return n1;
    }
    var min = n1;
    var max = n2;
    if(n1 > n2){
        min = n2;
        max = n1;
    }
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Pick a random value from an array.
function randomArray(array){
	return array[Math.floor(Math.random()*array.length)];
}

/*
* Clicked button. Generate a random animal!
*/
$("#randomise").click(function(){
    
    for(var i = 0; i < loci.length; i++){
        var locus_name = loci[i];
        var locus = genome[locus_name];
        
        var a1 = randomArray(locus);
        var a2 = randomArray(locus);
        
        // Re-order by dominance.
        if(locus.indexOf(a1) > locus.indexOf(a2)){
            animal[locus_name + "1"] = a2;
            animal[locus_name + "2"] = a1;
        }else{
            animal[locus_name + "1"] = a2;
            animal[locus_name + "2"] = a1;
        }
    }
    
    // Remove alleles here, if sex-linked.
    animal.sex = "f";
    if(Math.random() > 0.5){
        animal.sex = "m";
       // animal.k2 = "-";
       // animal.e2 = "-";
    }
   ...