JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<canvas id='griffin_canvas'></canvas>
<br>
<button id='randomise'>Randomise</button>
<hr>
Base: <input type='color' id='select_base' value='#cccccc'>
Eyes: <input type='color' id='select_eye' value='#666666'>
Beak: <input type='color' id='select_beak' value='#ccff33'>
<hr>
Covert feathers: <input type='color' id='select_coverts' value='#ccff33'>
<input type='checkbox' id='select_mottled1'>
<label for='select_mottled1'>Mottled?</label>
<input type='checkbox' id='select_spangled1'>
<label for='select_spangled1'>Spangled?</label>
<input type='color' id='select_spangled1_colour' value='#ccff33'>
<br>
Flight feathers: <input type='color' id='select_flights' value='#ccff33'>
<input type='checkbox' id='select_mottled2'>
<label for='select_mottled2'>Mottled?</label>
<input type='checkbox' id='select_spangled2'>
<label for='select_spangled2'>Spangled?</label>
<input type='color' id='select_spangled2_colour' value='#ccff33'>
<hr>
Marking 1: <select id='select_mark1'>
    <option value='none'>None</option>
    <option value='tiger'>Tiger</option>
    <option value='leopard'>Leopard</option>
    <option value='tigard'>Tigard</option>
    <option value='cheetah'>Cheetah</option>
    <option value='clouded'>Clouded L.</option>
    <option value='tortie'>Tortie</option>
    <option value='points'>Points</option>
    <option value='laced'>Laced</option>
</select>
<input type='color' id='select_mark1_colour' value='#ffcc33'> 
Opacity: <input type='range' id='select_mark1_opacity' value='0' min='0' max='10' step='1'>
<br>
Marking 2: <select id='select_mark2'>
    <option value='none'>None</option>
    <option value='tiger'>Tiger</option>
    <option value='leopard'>Leopard</option>
    <option value='tigard'>Tigard</option>
    <option value='cheetah'>Cheetah</option>
    <option value='clouded'>Clouded L.</option>
    <option value='tortie'>Tortie</option>
    <option value='points'>Points</option>
    <option value='laced'>Laced</option>
</select>
<input type='color'...

CSS

div, img, canvas, p, input {
    box-sizing: border-box;
}

#griffin_canvas {
    width: 150px;
    height: 150px;
    border: 0px solid silver;
}

JavaScript

const width = 150,
      height = 150,
      url = "http://milcote.net/images/griffin_spritesheet.png",
      markArray = ["none","tiger","leopard","tigard","cheetah","clouded","points","tortie","laced"],
      whiteArray = ["none","dutch","spotted","tobiano","roan","pangare","urajiro"];

const pieces = [
    [
        // First row is basic body parts
        "base", "line", "eye", "beak", "coverts", "flights"
    ],[
        // 6 pigmented markings
        "cheetah", "leopard", "tiger", "tigard", "clouded", "points",
    ],[
        // 6 white splash markings
        "splash1", "splash2", "splash3", "splash4", "splash5", "splash6"
    ],[
        // 6 other white-based markings
        "pangare", "urajiro", "roan", "spotted", "dutch", "tobiano"
    ],[
        // And 6 other things...
        "tortie", "laced", "spangled1", "mottled1", "spangled2", "mottled2",
    ],[
        // Scarf wearable, basic parts
        "scarf_base", "scarf_line",
        "scarf_tassel_base", "scarf_tassel_line",
        "scarf_trim_base", "scarf_trim_line"
    ],[
        // 6 kinds of patterns
        "scarf_spots", "scarf_spots2",
        "scarf_stripes", "scarf_stripes2",
        "scarf_diamonds", "scarf_diamonds2"
    ],[
        // Same for other 2 wearables... 
        "socks_base", "socks_line",
        "socks_tassel_base", "socks_tassel_line",
        "socks_trim_base", "socks_trim_line"
    ],[
        "socks_spots", "socks_spots2",
        "socks_stripes", "socks_stripes2",
        "socks_diamonds", "socks_diamonds2"
    ],[
        "cloak_base", "cloak_line",
        "cloak_tassel_base", "cloak_tassel_line",
        "cloak_trim_base", "cloak_trim_line"
    ],[
        "cloak_spots", "cloak_spots2",
        "cloak_stripes", "cloak_stripes2",
        "cloak_diamonds", "cloak_diamonds2"
    ]
];


const inputs =...