JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Medaka genes.<br><span class='info'></span>

CSS

/* Normal melanophore spackles. */
.black {}

/* Very pale black, caused by ci mutation. */
.blue {}

/* Normal xanthophore colour. Orange. */
.orange {}

JavaScript

// Red, controls xanthophores.
// Alleles: R ? r
var r1, r2 = 'R';

// Brown, controls melanophores.
// Alleles: B > bv > bd > B′ > bdl > b > bp ... bd = bd8?
var b1, b2 = 'B';

// Colour interferer, dulls other 'phores.
// Alleles: Ci > ci
var ci1, ci2 = 'Ci';

// Guanineless, removes shine and light belly.
// Alleles: Gu > gu
var gu1, gu2 = 'Gu';

// Albino locus. Various recessive types.
// Alleles: i > i1  > i4 > i5 ?
// i1 is full albino, with pink eyes and speckles (leu).
// i4 is partial, still got dark red eyes.
// i5 is 'weak', just smaller black speckles ?
var i1, i2 = 'i';

// Hikari, or double-anal, recessive fin shape mutation.
// Alleles: Da > da
var da1, da2 = 'Da';

// Leucophore-free, removes white leucophores.
// Sex linked, on X chromosome. Males can't be homozygous.
// Recessive. Alleles: Lf > lf
var lf1, lf2 = 'Lf';

// White leucophores. Instead of orange, look white when baby.
// No xanthophores either. Both return to normal when adult.
// Recessive. Alleles: Wl > wl
var wl1, wl2 = 'Wl';

// Few melanophores. Removes nearly all black/white specks.
// Recessive. Alleles: Fm > fm
var fm1, fm2 = 'Fm';


// SPECULATION
// These mutations are not well understood yet.
// Where are the genes/loci? Are they dominant or recessive?

// Tol-1 tyrosinase. If missing, i albino is partially undone.
// Unknown inheritance. For game, making this recessive.
// Alleles: TYR > tyr^t
var tyr1, tyr2 = 'TYR';

// Lame, adds shiny back/side scales.
// Rainbow if scales are translucent, monochrome if solid.
// For game, making this recessive. La > la
var la1, la2 = 'La';

// Translucent scales. I can't find any info.
// For game, making this recessive. Sc > sc
var sc1, sc2 = 'Sc';

// 'Orochi' complete black. Apparently dominant.
// Alleles: Or > or
var or1, or2 = 'or';




// Wildtype has black red, white and shiny by default.
var melano = 'black';
var young_xantho = 'yellow';
var adult_xantho = 'red';
var young_leuco = 'orange';
var adult_leuco = 'white';
var...