JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Mythscale: dragon randomiser. Here you can gaze into the crystal ball and see all kinds of dragon that are theoretically possible! Look a little closer and view their exact colour palette, description and genotype, if you want.

<div class='tab_button_container'>
    <div class='tab_button active_tab' data-tab='1'>Random</div>
    <div class='tab_button' data-tab='2'>Design</div>
    <div class='tab_button' data-tab='3'>Load</div>
    <div class='tab_button' data-tab='4'>About</div>
</div>
<div class='tab_content_container'>
    <div class='tab_content tab_1'>
    
        <h2>Generate a new dragon</h2>
        
        <p>Create a 'natural' genotype and modifier set that follows the rules of a certain breed. Or click "Random!" for a fully randomised genotype, in which any allele may picked from each locus.</p>
        Breed: <select id='make_breed'>
            <option value='1'>Snowy</option>
            <option value='2'>Volcanic</option>
            <option value='3'>Axi</option>
            <option value='4'>Umbral</option>
            <option value='5'>Coatl</option>
            <option value='6'>Asian</option>
        </select>  
        <button id='make_btn'>Use this breed</button> 
        <button id='random_btn'>Random!</button>
    
    </div>
    <div class='tab_content hidden tab_2'>
     
        <h2>Design a dragon</h2>
        <p>Whoooo boy... this needs its own page. A few dropdowns should automatically load below, with wildtype alleles selected.</p>
        <div id='select_container'></div>
    
    </div>
    <div class='tab_content hidden tab_3'>
    
        <h2>Load a dragon</h2>
        
        <p>Paste the genotype and modifier strings of a dragon created earlier. Genotype is 42 letters, modifiers are 12 digits.</p>
        Genotype: <input id='load_geno' type='text' minlength='40' maxlength='50' size='50'>
        <br>Modifiers: <input id='load_mods' type='text' minlength='10' maxlength='12' size='15'> 
        <button...

CSS

img, div {
    box-sizing: border-box;
}

.hidden { display: none; }


/*
* First set of tabs.
*/
.tab_button_container {
    margin: 20px auto 0px auto;
}

.tab_button_container .tab_button {
    display: inline-block;
    border: 1px solid grey;
    border-radius: 5px 5px 0px 0px;
    background-color: silver;
    padding: 10px 15px;
    margin-left: 10px;
    position: relative;
    top: 1px;
    transition: 0.2s;
}

.tab_button_container .tab_button:hover {
    cursor: pointer;
    background-color: white;
    transition: 0.2s;
}

.tab_button_container .active_tab {
    border-bottom: 1px solid white;
    background-color: white;
    transition: 0.2s;
}

.tab_content_container {
    border: 1px solid grey;
    padding: 10px;
}



/*
* Alternative set of tabs.
*/
.tab2_button_container {
    margin: 0px auto 20px auto;
}

.tab2_button_container .tab_button {
    display: inline-block;
    border: 1px solid grey;
    background-color: skyblue;
    padding: 10px 15px;
    margin-left: 10px;
    position: relative;
    top: -1px;
    transition: 0.2s;
}

.tab2_button_container .tab_button:hover {
    cursor: pointer;
    background-color: white;
    transition: 0.2s;
}

.tab2_button_container .active_tab {
    border-top: 1px solid white;
    background-color: white;
    transition: 0.2s;
}

.tab2_content_container {
    border: 1px solid grey;
    padding: 10px;
}





#make_result {
    word-wrap: break-word;
}

.section {
     border: 1px solid grey;
     padding: 10px;
     margin: 5px;
}

.spoiler {
    display: none;
}

#dragon_holder {
  width: 257px;
  height: 199px;
  position: relative;
}

#dragon_holder div, img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.palette_holder {
    border: 1px solid grey;
    padding: 10px 5px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
}

.palette_holder .palette_piece {
    padding: 5px;
    text-align: center;
    min-width: 80px;
    width:...

JavaScript

// JS for Mythscale game, by Gwyn Milcote.

// Image directory.
const path = "http://mythstable.epizy.com/dragon/images/";

/*
* All loci and alleles in order of dominance.
*/
const genome = {
	g: {
        name: "Gold", wt: "g+",
        alleles: ["G^s", "G^b", "G^a", "g+"],
    },
	r: {
        name: "Red", wt: "r+",
        alleles: ["R", "r+"],
    },
	b: {
        name: "Blue", wt: "b+",
        alleles: ["B", "B^w", "b+"]
    },
	s: {
        name: "Shade", wt: "s+",
        alleles:["S^d", "S^l", "s+"]
        // s^w? gradual whitening of all but mel...
    },
	k: {
        name: "Black", wt: "k+", sl: "x",
        alleles: ["K", "K^m", "K^p", "k+", "k^a"]
    },
	d: {
        name: "Dilute", wt: "d+",
        alleles: ["D^w", "D", "d+"]
    },
    cs: {
        name: "ColourShift", wt: "cs+",
        alleles: ["Cs^r", "Cs^b", "cs+"]
    },
	sdw: {
        name: "Shadow", wt: "sdw+",
        alleles: ["Sdw^b", "Sdw", "sdw+"]
    },
	fp: {
        name: "FeatherPattern", wt: "fp+",
        alleles: ["Fp^m", "Fp^s", "Fp^l", "fp+"]
    },
	swl: {
        name: "Swirl", wt: "Swl+",
        alleles: ["Swl+", "swl"]
    },
	mk: {
        name: "Marking", wt: "mk+",
        alleles: ["Mk^t", "Mk^l", "Mk^p", "Mk^s", "mk+"]
    },
	ma: {
        name: "MarkArea", wt: "ma+",
        alleles: ["Ma^f", "Ma^h", "ma+"]
        // wt is neither? to show fullbody, need both muts.
        // poss add Ma^w for wings, Ma^l for legs only?
    },
	mbl: {
        name: "Marble", wt: "mbl+",
        alleles: ["Mbl^f", "Mbl", "Mbl^c", "mbl+"]
    },
    mc: {
        name: "MarkColour", wt: "Mc+",
        alleles: ["Mc^e", "Mc+", "mc^a", "mc^b"]
    },
    ms: {
        name: "MarkShade", wt: "Ms+",
        alleles: ["Ms^d", "Ms^l", "Ms+", "ms^w"]
    },
	oc: {
        name: "OutlineColour", wt: "Oc+",
        alleles: ["Oc^e", "Oc+", "oc^m", "oc^a", "oc^b"]
    },
	os: {
        name: "OutlineShade", wt: "Os+",
        alleles: ["Os^d", "Os^l", "Os+", "os^w"]
    },
	uc: {
     ...