JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<h2>Unicorn/Griffin Generator</h2> 
<p>This was made a few years ago as a demo for my game Mythsun. The art is now much larger and the genetic system is different, so I no longer need these images/code. Still, quite fond of it so am sharing for anyone to play with.</p>
<p>(I didn't get around to drawing full sets of markings for the Qilin or Hippalectryon. So they're a bit limited. Maybe you can still generate something pretty)</p>

<p><div id='myth-canvas'></div></p>

<button class='randomise-btn' data-part='all'>Randomise All!</button>
Breed: <select id='select-breed'>
    <option value='1'>Unicorn</option>
    <option value='2'>Griffin</option>
    <option value='3'>Hippalectryon</option>
    <option value='4'>Qilin</option>
</select>
<br>
<button class='randomise-btn' data-part='base'>Random!</button>
Base colour: <select id='select-baseColour' class='select-colour'></select> 
<select id='select-baseShade' class='select-shade'></select>
<br>
<button class='randomise-btn' data-part='body'>Random!</button>
Body marks: <select id='select-body1' class='select-body'></select>
<select id='select-body2' class='select-body'></select>
<select id='select-body3' class='select-body'></select>
<select id='select-body4' class='select-body'></select>
<select id='select-body5' class='select-body'></select>
<br>
<button class='randomise-btn' data-part='mark1'>Random!</button>
Mark 1: <select id='select-mark1Shape' class='select-mark-shape'></select>
<select id='select-mark1Size' class='select-mark-size'></select>
 - 
<select id='select-mark1Colour' class='select-colour'></select> 
<select id='select-mark1Shade' class='select-shade'></select>
<br>
<button class='randomise-btn' data-part='mark2'>Random!</button>
Mark 2: <select id='select-mark2Shape' class='select-mark-shape'></select>
<select id='select-mark2Size' class='select-mark-size'></select>
 - 
<select id='select-mark2Colour' class='select-colour'></select> 
<select id='select-mark2Shade'...

CSS

.randomise-btn {
    background-color: gold;
}
.randomise-btn:hover {
    cursor: pointer;
    background-color: #fff;
}

JavaScript

const imagePath = "http://griffusion.elementfx.com/images/";

const db = {

    // Five layers, may have 1 image each.
    bodymarks: [
        ["roan", "Roan"],
	    ["darkpoints", "Dark Points"],
	    ["pangare", "Pangare"],
		["urajiro", "Urajiro"],
	    ["baypoints", "Bay Points"],
	    ["dun", "Dun"],
	    ["palepoints", "Pale Points"],
	    ["flaxen", "Flaxen"],
	    ["dapples", "Dapples"],
	    ["sooty", "Sooty"]
    ],
 
    colours: ["Red", "Brown", "Orange", "Yellow", "Olive", "Green", "Turquoise", "Blue", "Indigo", "Slate", "Grey", "Lavender", "Purple", "Magenta", "Pink"],
 
    shades: ["Lightest", "Pale", "Medium", "Deep", "Darkest"],
	
	// Fancy names and hex codes for colour/shade combos.
	palette: [
	    {
		    name: "Red",
	        hexes: ["FFDDDD", "FCA2A2", "E54242", "AF0E0E", "680000"],
			names: ["Salmon", "Coral", "Carnelian", "Blood", "Mahogany"]
		},{
		    name: "Brown",
	        hexes: ["F6E2DA", "E2AE98", "C77755", "8C4526", "542713"],
			names: ["Almond", "Coffee", "Toast", "Cinnamon", "Chocolate"]
		},{
		    name: "Orange",
	        hexes: ["FFE8CF", "FDC688", "F69209", "BE6E00", "764300"],
			names: ["Shell", "Peach", "Tangerine", "Copper", "Sienna"]
		},{
		    name: "Yellow",
	        hexes: ["FDF7E0", "FEE78B", "FFCF00", "CB9900", "795B00"],
			names: ["Vanilla", "Lemon", "Gold", "Goldenrod", "Mustard"]
		},{
		    name: "Olive",
	        hexes: ["F9FFD8", "DFF78B", "AEDB0F", "739401", "405300"],
			names: ["Gooseberry", "Olive", "Lime", "Fern", "Moss"]
		},{
		    name: "Green",
	        hexes: ["CDFFCE", "86EE89", "20CE24", "019906", "005002"],
			names: ["Mint", "Jade", "Leaf", "Emerald", "Forest"]
		},{
		    name: "Turquoise",
	        hexes: ["DFF5EF", "ADDFD5", "4AB29C", "2A7F6F", "194B42"],
			names: ["Seafoam", "Duck Egg", "Persian", "Myrtle", "Peacock"]
		},{
		    name: "Blue",
	        hexes: ["E0FCFF", "8EECF6", "0FD8EE", "009DAE", "005F6A"],
			names: ["Ice", "Aquamarine", "Sky", "Ocean", "Indicolite"]
		},{
		   ...