JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='container'>

<h2>Loci and Alleles</h2>
<p>Beasts have 5 genetic loci on which pairs of alleles are carried. Four of these loci influence abilities, while the fifth controls appearance. Yes, even mechanical Beasts that you craft in a workshop will have variation here.</p>
<p>Some alleles have positive effects, enhancing a Beast's strength or accuracy in battle, or giving interesting bonuses outside battle. Other alleles are negative and weaken the Beast. A few can be considered good or bad, depending on what exactly you want for a Beast.</p>
<p>Wild-caught Beasts have mixes of random alleles. When buying Beasts from official breeders, some have reputations for better quality genes than others. To create an optimal Beast with the best alleles for your project, you'll have to selectively breed. Inbreeding will cause negative mutations, as well as reducing fertility, so make sure your planned parents-to-be are not related.</p>
<p>All alleles on a locus are part of a hidden hierarchy. Generally (unfortunately!) negative alleles are the most <b>dominant</b>. You'll need to carefully breed-out all traces of them, to allow any other traits to show up. The most desirable alleles are often the weakest, <b>recessive</b>; those traits won't be expressed unless both alleles match. <b>Incompletely-dominant</b> alleles have stronger effects if there are two of them, rather than just one. Finally, two different <b>co-dominant</b> alleles can work at the same time, with both traits being fully expressed.</p>

<!--<div id='sprites'></div>-->

<div id='tab-buttons'>
    <div class='tab-button' data-tab='locus' data-locus='1'>Attack</div>
    <div class='tab-button' data-tab='locus' data-locus='2'>Defence</div>
    <div class='tab-button' data-tab='locus' data-locus='3'>Ability</div>
    <div class='tab-button' data-tab='locus' data-locus='4'>Colour</div>
    <div class='tab-button' data-tab='locus' data-locus='5'>Pattern</div>
    <div class='tab-button' data-tab='locus'...

CSS

div, img, button, p, ul, li, select, input, table, tr, th, td {
    box-sizing: border-box;
}

body {
    background-color: silver;
}

#container {
    width: 1000px;
    margin: auto;
}


/* temp */
#sprites {
    border: 1px dashed grey;
    padding: 15px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
#sprites .sprite {
    text-align: center;
}
#sprites .sprite .image {
    border: 1px solid grey;
    background-color: #fff;
    margin-bottom: 5px;
}


#tab-buttons {
    display: flex;
    flex-flow: row;
    position: relative;
    top: 1px;
}
#tab-buttons .tab-button {
    padding: 5px 10px;
    margin: 0 5px;
    border: 1px solid grey;
    background-color: #eee;
    
}
#tab-buttons .tab-button:hover{
    cursor: pointer;
    background-color: #fff;
}
#tab-buttons .active-button {
    background-color: #fff;
    border-bottom: 1px solid #fff;
}


.tab-content {
    background-color: #fff;
    border: 1px solid grey;
    padding: 15px;
}

.tab-content-title {
    font-size: 26px;
    text-align: center;
    border-bottom: 1px solid silver;
    padding-bottom: 5px;
}
.tab-content-desc {
    margin: 15px auto;
}
.tab-content-table {
    width: 900px;
    margin: 20px auto;
    padding: 10px;
}
.tab-content-table table {
    border-collapse: collapse;
    width: 100%;
}
table td {
    padding: 2px 5px;
    border: 1px solid silver;
}
table tr:nth-child(even) {
    background-color: #eee;
}
table th {
    padding: 5px;
    background-color: silver;
    border: 1px solid grey;
}

JavaScript

const db = {

    loci: [
        {
            id: 1, name: "Attack",
            desc: "Enhancer alleles strengthen certain body parts, making attacks more effective. On the other hand, if your Beast has been poorly bred, they may carry a negative allele that weakens attacks."
        },
        {
            id: 2, name: "Defence",
            desc: "These passive traits may help protect against enemy attacks, reflect damage back at them, or inflict nasty status effects - without you doing a thing. Convenient, eh?"
        },
        {
            id: 3, name: "Ability",
            desc: "Beasts have all sorts of interesting physical and mental quirks. Some are useful in battle, others out of battle."
        },
        {
            id: 4, name: "Colour",
            desc: "These alleles determine the colour scheme of a beast's body."
        },
        {
            id: 5, name: "Pattern",
            desc: "These alleles determine the shapes of markings."
        },
        {
            id: 6, name: "Effect",
            desc: "These alleles add white patterns etc..."
        }
    ],
    
    alleles: [
        // ATTACK
        
        {
            id: 1, locus: 1,
            name: "Explosive Breath",
            desc: "WHOA! Watch where you're aiming that! Dragon breath attacks are 80% more powerful than usual.",
            mode: "Recessive"
        },
        {
            id: 2, locus: 1,
            name: "Super Breath",
            desc: "An impressive blast of fire! Or ice! Whatever's coming our of your dragon's throat, it will be 20% more damaging. Two alleles boost this to 50%.",
            mode: "Inc-dom"
        },
        {
            id: 3, locus: 1, isNegative: true,
            name: "Cough",
            desc: "Kh-kh... you alright, draggie? ... you're struggling to get that fire out, huh? No, don't cough it on me! Breath attacks have a 30% chance of failure.",
            mode: "Dominant"
        },
        {
            id: 4,...