JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

griffgen redo. 
<button id='output_string'>Output string</button>
<span id='griffgen_string'></span><br>

<div class='option'>
    Body
    <button class='randomise_layer' data-layer='body'>Random</button>
    <button class='toggle_layer' id='toggle_body' data-layer='body'>Off</button>
</div>
<div class='option'>
    Tortie
    <button class='randomise_layer' data-layer='tortie'>Random</button>
    <button class='toggle_layer' id='toggle_tortie' data-layer='tortie'>Off</button>
</div>
<div class='option'>
    Paint
    <button class='randomise_layer' data-layer='paint'>Random</button>
    <button class='toggle_layer' id='toggle_paint' data-layer='paint'>Off</button>
</div>
<div class='option'>
    Millefleur
    <button class='randomise_colour' data-layer='mf'>Colours</button>
    <button class='randomise_shape' data-layer='mf'>Shapes</button>
    <button class='toggle_layer' id='toggle_mf' data-layer='mf'>Off</button>
</div>

<div id='griffin_container'>
    <img id='layer_body' class='layer_body' src='http://mythstable.epizy.com/dragon/images/base.png' style='opacity:0.5'>
    
    <img id='layer_bodyMark' class='layer_bodyMark'>
    <img id='layer_underside' class='layer_underside'>
    
    <img id='layer_tortie1' class='layer_tortie' src='http://mythstable.epizy.com/dragon/images/pangare.png'>
    <img id='layer_tortie2' class='layer_tortie' src='http://mythstable.epizy.com/dragon/images/urajiro.png'>
    
    <img id='layer_paint1' class='layer_paint' src='http://mythstable.epizy.com/dragon/images/snow_hetero.png'>
    <img id='layer_paint2' class='layer_paint' src='http://mythstable.epizy.com/dragon/images/merle.png'>
    <img id='layer_paint3' class='layer_paint' src='http://mythstable.epizy.com/dragon/images/blanket_hetero.png'>
    
    <img id='layer_beak' class='layer_beak'>
    <img id='layer_eye' src='http://mythstable.epizy.com/dragon/images/eyes.png'>
    <img id='layer_line' src='http://mythstable.epizy.com/dragon/images/line.png'>
</div>

CSS

#griffin_container {
  position: relative;
  height: 300px;
  width: 400px;
}
#griffin_container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* Tiny images, for efficiency. */
#layer_eye {
  top: 200px;
  left: 250px;
}

JavaScript

const settings = {
    body: {visible: true, colour: 0},
    bodyMarks: {visible: true, colours: 0, shapes: 0},
    underside: {visible: true, shape: 0},
    tortie: {visible: true, shapes: 0},
    paint: {visible: true, shapes: 0},
    mf: {visible: true, colours: 0, shapes: 0},
    lace: {visible: true, colour: 0, shape: 0}
};

const layerNames = ["body","bodyMarks","underside","tortie","paint","mf","lace"];

const options = {
    colours: "rayogtbipvm".split(""),
    bright: ["b","d"],
    mf: ["tip","tip2","tip3","tip4"],
    tortie: [1,5],
    paint: [1,9]
};


class GriffGen {
    
    constructor(design = ""){
        if(design != ""){
            this.loadGriffin(design);
        }
    }
    
    loadGriffin(design){
        
    }
    
    randomColour(){
        let col = randomArray(options.colours);
        let shade = randomNumber(1,5);
        let bright = randomArray(options.bright);
        return col +"_"+ bright +""+ shade;
    }
    
    outputString(){
        let parts = [];
        
        for(let i = 0; i < layerNames.length; i++){
            let layerName = layerNames[i];
            let v = "";
            
            if(settings[layerName].visible){ v = "v"; }
            else{ v = "h"; }
            
            v += settings[layerName].colour;
            v += settings[layerName].shape;
            
            parts.push(v);
        }
        
        $("#griffgen_string").html(parts.join("-"));
    }


    randomiseColour(layer){
        if(!settings[layer].visible){
            return;
        }
    }

    randomiseShape(layer){
        if(!settings[layer].visible){
            return;
        }
        
        let newValue = 6;
        
        settings[layer].value = newValue;
    }

    toggleLayer(layer){
        let vis = settings[layer].visible;
        let button = $("#toggle_" + layer);
        let images = $(".layer_" + layer);
        if(vis){
            settings[layer].visible = false;
           ...