JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mythscale - Eye Designer
<p>
    Dragons have 3 loci that directly control the appearance of their eyes. Here you can play with these alleles and see how they interact to create eyes.
</p>

<div class='section'>
    Eye: <select id='select_e1'>
        <option value='1'>E^c (Cat's eye)</option>
        <option value='2'>E^b (Black sclera)</option>
        <option value='3'>E^i (Bicolour iris)</option>
        <option value='4'>E^x (Crossover)</option>
        <option value='5'>E^np (No pupil)</option>
        <option value='6'>E^ns (No sclera)</option>
        <option value='7' selected>e+ (Normal)</option>
    </select>
    <select id='select_e2'>
        <option value='1'>E^c (Cat's eye)</option>
        <option value='2'>E^b (Black sclera)</option>
        <option value='3'>E^i (Bicolour iris)</option>
        <option value='4'>E^x (Crossover)</option>
        <option value='5'>E^np (No pupil)</option>
        <option value='6'>E^ns (No sclera)</option>
        <option value='7' selected>e+ (Normal)</option>
    </select>
    <br>
    EyeRed: <select id='select_er1'>
        <option value='1'>Er (Red)</option>
        <option value='2' selected>er+ (No red)</option>
    </select>
    <select id='select_er2'>
        <option value='1'>Er (Red)</option>
        <option value='2' selected>er+ (No red)</option>
    </select>
    <br>
    EyeBlue: <select id='select_eb1'>
        <option value='1'>Eb (Blue)</option>
       <option value='2' selected>eb+ (No blue)</option>
    </select>
    <select id='select_eb2'>
        <option value='1'>Eb (Blue)</option>
        <option value='2' selected>eb+ (No blue)</option>
    </select>
    
    
    <div id='result_eye'></div>
</div>

<p>Those eye genes often have effects on other parts of the body, however - and there are several other gene mutations that can affect eyes, 'overruling' the main eye genes. Here, let's use a very plain-looking grey dragon as a model, so you can try out all the possible effects. Have...

CSS

#result_eye {
    width: 150px;
    height: 120px;
    border: 1px solid grey;
    position: relative;
}

#result_eye img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#result_full {
    width: 600px;
    height: 450px;
    border: 1px solid grey;
    position: relative;
}

#result_full img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript

let dragon = new Dragon(1,1);
dragon.makeGenotype("wildtype");

// Set up dummy for this tool.
// Eye colour can affect markings, horns, dust...
dragon.gr1 = "G";
dragon.mk1 = "Mk^t";
dragon.mk2 = "Mk^t";


// Only needed for this tool.
let toolLoci = ["e", "er", "eb", "mel", "el", "dst", "hrn"];


$("select").change(function(){
    
    // Loop and grab all dropdown values.
    // Add alleles to the dummy dragon object.
    for(let i = 0; i < toolLoci.length; i++){
        let locusName = toolLoci[i];
        let a1 = $("#select_" + locusName + "1").val();
        let a2 = $("#select_" + locusName + "1").val();
        
        dragon[locusName + "1"] = a1;
        dragon[locusName + "2"] = a2;
    }
    
    //dragon.tidy();
    
    $("#result_eye").html("eye");
    $("#result_full").html("body");
});