JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<button id='randomise-btn'>Randomise</button>
<div id='json-dragon'></div>

JavaScript

/*
* One individual dragon.
*/
let dragon = {
    colours: {
        base: "ffcc33",
        dorsal: "b3b3b3",
        ventral: "ffffff"
    },
    lengths: {
        belly: 1,
        neck: 1,
        tail: 1,
        head: 1,
        leg: 1
    },
    // Additional body parts.
    wings: {
        visible: true,
        style: "feather",
        spokes: 4
    },
    horns: {
        visible: false,
        style: "ram",
        colour: "b3b3b3",
    },
    spikes: {
        visible: true,
        style: "regular",
        colour: "b3b3b3"
    }
    
};

/*
* Template to follow when creating.
* Values must be within certain ranges.
*/
let dragonParams = {
    colours: {
        base: "hex",
        dorsal: "hex",
        ventral: "hex"
    },
    lengths: {
        belly: [0.5, 1.5],
        neck: [0.2, 1.5],
        tail: [0.1, 2],
        head: [0.6, 1.4],
        leg: [0.6, 1.3]
    },
    wings: {
        visible: "boolean",
        style: [
            {id: 1, name: "Classic", desc: ""},
            {id: 2, name: "Feather", desc: ""},
            {id: 3, name: "Bat", desc: ""}
        ],
        spokes: [1, 10]
    },
    horns: {
        visible: "boolean",
        style: [
            {id: 1, name: "Ram", desc: ""},
            {id: 2, name: "Gazelle", desc: ""},
            {id: 3, name: "Antler", desc: ""}
        ],
        colour: "hex"
    },
    spikes: {
        visible: "boolean",
        style: [
            {id: 1, name: "Regular", desc: ""},
            {id: 2, name: "Rump", desc: ""},
            {id: 3, name: "Crest", desc: ""}
        ],
        colour: "hex"
    }
};

/*
* Few ways to create dragon objects.
*/
function createRandomDragon(){
    let d = {};
    for(let groupName of Object.keys(dragonParams)){
        let group = dragonParams[groupName];
        d[groupName] = {};
        for(let propName of Object.keys(group)){
            let prop = group[propName],
                value;
            if(prop == "hex"){
                value...