JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='locus-list'></div>

JavaScript

const loci = [
    {
        symbol: "Ac", name: "Accent",
        desc: "This locus controls where (if anywhere) the accent colour may be produced on the body.",
        alleles: [
            {
                symbol: "Ac+", name: "Wildtype",
                desc: "The wildtype allele. No accent develops."
            }
        ]
    },
    // 4 copies of this, called Pattern A/B/C/D
    {
        symbol: "Pa", name: "Pattern",
        desc: "This locus was magically duplicated; now the Mythic genome contains 4 copies of it, named Pattern A/B/C/D. Each one has the same list of alleles available, and works independently, producing its own pattern in a distinct colour. Many different alleles can combine with each other to create mixed-looking patterns.",
        alleles: [
            {
                symbol: "Pa^tg", name: "Tiger",
                desc: "."
            },{
                symbol: "Pa^ta", name: "Tabby",
                desc: "."
                // reduce to abyssinian, extend to blotched
            },{
                symbol: "Pa^lp", name: "Leopard", // rosette?
                desc: "."
                // reduce to cheetah? extend to cloudy/ocelot
            },{
                symbol: "Pa^ba", name: "Wing Barring",
                desc: "."
                // reduce to snowy owl, extend to ?
            },{
                symbol: "Pa^o", name: "Outline",
                desc: "this is a modifier allele that increases the size of a pattern, but removes the pigment inside it, leaving an outline around the edge. it has no effect by itself. it is epistatic to Marbled, Extended and Reduced."
            },{
                symbol: "Pa^mbl", name: "Marbled",
                desc: "this is a modifier allele that increases the size and fades the inner areas of a pattern. it has no effect by itself. it is epistatic to Extended and Reduced."
            },{
                symbol: "Pa^ex", name: "Extended",
                desc: "this is a modifier...