JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h1>Dragon Genes</h1>
<p>Quick cheat sheet for every locus and the possible alleles that can be carried. Also modifiers and incubation-related traits.</p>

<div id='overview_container'></div>

<h2>Warnings</h2>
<p>Some traits are damaging or lethal, if homozygous or expressed at the same time as other traits.</p>

<ul>
    <li><b>Merle</b>: Double merle (Mrl/Mrl) has high chance of death between hatching and adulthood. Dragons that do reach adulthood will either have low fertility or be infertile. Psuedo-double merle (mrl^p and pa^m) is much less risky.</li>
    <li><b>Fullbody Pearl</b>: Caused by the dominant Prl gene, or recessive prl/prl plus full Lame, la^f/la^f. Fullbody pearl is lethal when combined with colour/silver dusting (dst^c or dst^s). Opaline (Dst) is safe though.</li>
    <li><b>Metallicism</b>: Lethal if combined with any form of Pearl or Dust.</li>
</ul>


<div id='modifier_container'></div>

CSS

td .hoverable {margin: 0px 10px; color: green;}
td .hoverable:hover {cursor:pointer;}

.hoverable {
    position: relative;
    cursor: pointer;
}
.hoverbox {
    min-width: 300px;
    max-width: 500px;
	position: absolute;
    top: 200%;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 10px;
	background: white;
	border: 2px solid silver;
	border-radius: 5px;
	font-size: 14px;
	z-index: 40;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
}
.hoverable:hover .hoverbox {
    visibility: visible;
    opacity: 1;
}
.hoverbox: after, .hoverbox: before {
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.hoverbox: after {
    border-color: rgba(255, 250, 235, 0);
    border-bottom-color: white;
    border-width: 10px;
    margin-left: -10px;
}
.hoverbox: before {
    border-color: rgba(230, 187, 112, 0);
    border-bottom-color: silver;
    border-width: 13px;
    margin-left: -13px;
}

table .short {
    width: 10%;
    max-width: 80px;
}
table {
    border-collapse: collapse;
    width: 100%;
}
table td {
    border: 1px solid silver;
    padding: 5px;
}

JavaScript

/*
* Overview page
*/
const ovSections = [
    {
        name: "Colour Pigmentation",
        desc: "Three types of chromatophore combine to give dragon scales and irises the illusion of colour: golden xanthophores, red erythrophores and blue cyanophores. This primary colour is called the Base colour.",
        loci: ["g","r","b","s"]
    },{
        name: "Black Pigmentation",
        desc: "Melanophores are responsible for black, grey or silver colouration.",
        loci: ["k","d","cs","sdw"]
    },{
        name: "Markings",
        desc:"Many dragons display vibrant patterns such as stripes, spotting, reticulation. These can cover various parts of the body and may be solid, faded, marbled, have contrasting outlines, or be multi-coloured.",
        loci: ["fp","swl","mk","ma","mbl","mc","ms","oc","os","uc","us"]
    },{
        name: "White Markings",
        desc: "White areas are caused by a lack of pigmentation, so the dragon's plain skin, horn or scale colour becomes visible.",
        loci: ["w","png","mrl","sn","sm","bk","sp","p"]
    },{
        name: "Eyes",
        desc: "Dragon eyes are complex structures. Eye colour can appear elsewhere on the body, and several other traits are influenced by these genes.",
        loci: ["ey","er","eb","b"]
    },{
        name: "Accent",
        desc: "Many dragons produce a secondary colour, somewhere on their body. The skin and scale cells follow a different set of genes. This colour is called the Accent.",
        loci: ["ag","ar","ab","as","a"]
    },{
        name: "Miscellaneous",
        desc: "Various other mutations can cause unusual-looking effects.",
        loci: ["i","mtl","gal","prl","la","dst","pa","hrn"]
    }
];

const ovLoci = {
    g:{
        name: "Gold",
        alleles: [
            {a: "G", desc: "Incompletely dominant mutation, 'silver'. One copy reduces the amount of gold pigment produced, causing an overall duller colour. Two copies stops it entirely, causing a grey colour."},
         ...