JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

dragon coat test. <button id='randomise'>Random!</button><br>
Body colour: <select id='body_colour'>
  <option value='red'>Red</option>
  <option value='orange'>Orange</option>
  <option value='gold'>Gold</option>
  <option value='olive'>Olive</option>
  <option value='green'>Green</option>
  <option value='teal'>Teal</option>
  <option value='blue'>Blue</option>
  <option value='indigo'>Indigo</option>
  <option value='violet'>Violet</option>
  <option value='purple'>Purple</option>
  <option value='pink'>Pink</option>
  <option value='grey'>Grey</option>
</select>
Bright? <select id='body_bright'>
    <option value='b'>Bright</option>
    <option value='d'>Dull</option>
</select> 
Shade: <select id='body_shade'>
    <option value='1'>Light</option>
    <option value='2'>Pale</option>
    <option value='3'>Mid</option>
    <option value='4'>Deep</option>
    <option value='5'>Dark</option>
</select>
<br>
Mark colour: <select id='mark_colour'>
  <option value='red'>Red</option>
  <option value='orange'>Orange</option>
  <option value='gold'>Gold</option>
  <option value='olive'>Olive</option>
  <option value='green'>Green</option>
  <option value='teal'>Teal</option>
  <option value='blue'>Blue</option>
  <option value='indigo'>Indigo</option>
  <option value='violet'>Violet</option>
  <option value='purple'>Purple</option>
  <option value='pink'>Pink</option>
  <option value='grey'>Grey</option>
</select>
Bright? <select id='mark_bright'>
    <option value='b'>Bright</option>
    <option value='d'>Dull</option>
</select> 
Shade: <select id='mark_shade'>
    <option value='1'>Light</option>
    <option value='2'>Pale</option>
    <option value='3'>Mid</option>
    <option value='4'>Deep</option>
    <option value='5'>Dark</option>
</select>
<br>
Shape: <select id='mark_shape1'>
    <option value='none'>None</option>
    <option value='tiger'>Tiger</option>
    <option value='leopard'>Leopard</option>
    <option value='diamond'>Diamond</option>
    <option...

CSS

img, div {
    box-sizing: border-box;
}

#dragon_holder {
  width: 257px;
  height: 199px;
  position: relative;
}

#dragon_holder div, img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.colour_preview {
    width: 80px;
    height: 40px;
    display: inline-block;
    border: 1px solid black;
}

/*
    COLOUR PALETTE
    c = hex colour for div backgrounds.
    f = filter for black PNG images.
    b = bright. d = dull.
*/

.c_white { background-color: #FFFFFF; }
.f_white { filter: invert(100%); }

.c_grey_1 { background-color: #DFDFDF; }
.c_grey_2 { background-color: #B0B0B0; }
.c_grey_3 { background-color: #7E7E7E; }
.c_grey_4 { background-color: #4F4F4F; }
.c_grey_5 { background-color: #282828; }

.f_grey_1 { filter: invert(86%); }
.f_grey_2 { filter: invert(64%); }
.f_grey_3 { filter: invert(44%); }
.f_grey_4 { filter: invert(28%); }
.f_grey_5 { filter: invert(10%); }

.c_red_b1 { background-color: #F4CCCC; }
.c_red_b2 { background-color: #E48181; }
.c_red_b3 { background-color: #D52F2F; }
.c_red_b4 { background-color: #9B2020; }
.c_red_b5 { background-color: #681515; }

.c_red_d1 { background-color: #E9D7D7; }
.c_red_d2 { background-color: #C99999; }
.c_red_d3 { background-color: #A75B5B; }
.c_red_d4 { background-color: #7A4040; }
.c_red_d5 { background-color: #562C2C; }

.f_red_b1 { filter: invert(85%) sepia(10%) saturate(708%) hue-rotate(314deg) brightness(101%) contrast(91%); }
.f_red_b2 { filter: invert(66%) sepia(81%) saturate(1057%) hue-rotate(308deg) brightness(98%) contrast(81%); }
.f_red_b3 { filter: invert(18%) sepia(90%) saturate(2563%) hue-rotate(346deg) brightness(106%) contrast(87%); }
.f_red_b4 { filter: invert(14%) sepia(50%) saturate(4836%) hue-rotate(348deg) brightness(96%) contrast(91%); }
.f_red_b5 { filter: invert(11%) sepia(49%) saturate(3148%) hue-rotate(342deg) brightness(103%) contrast(99%); }

.f_red_d1 { filter: invert(100%) sepia(67%) saturate(650%) hue-rotate(291deg) brightness(94%) contrast(94%);...

JavaScript

var path = "http://mythstable.epizy.com/dragon/";

var body_colour, body_shade, body_bright;
var mark_colour, mark_shade, mark_bright;
// Tiger? Shadow? Hind? Marble?
var mark_shape1, mark_shape2, mark_area, mark_effect;
var shadow, black_colour, underside;
var outline, outline_colour;

var dragon = {
    body_colour: "", body_shade: "", body_bright: "",
    mark_colour: "", mark_shade: "", mark_bright: "",
    mark_shape1: "", mark_shape2: "",
    mark_area: "", mark_effect: "",
    outline: "", outline_colour: "",
    shadow: "", black_colour: "", underside: "",
    eye_colour: "", eye_shape: "",
    accent_colour: "", accent_shade: "", accent_bright: "",
    accent_shape: ""
}



var colours = ["red", "orange", "gold", "olive", "green", "teal", "blue", "indigo", "violet", "purple", "pink"];
var black_colours = ["black", "steel", "silver", "white"];
var outline_colours = ["black", "vlight", "light", "dark", "vdark"];
var mark_shapes = ["tiger", "leopard", "butterfly", "star", "diamond"];
var mark_areas = ["full", "fore", "hind", "tips"];
var mark_effects = ["none", "cascade", "marble"];
var undersides = ["none", "belly", "belly_ext"];


// Pick a random number between any two.
function randomNumber(n1, n2){
	if(n1 == n2){
        return n1;
    }
    var min = n1;
    var max = n2;
    if(n1 > n2){
        min = n2;
        max = n1;
    }
    return Math.floor(Math.random()*(max-min+1)+min);
}

// Pick a random value from an array.
function randomArray(array){
	return array[Math.floor(Math.random()*array.length)];
}



// Manually update.
$("select").change(function(){
    body_colour = $("#body_colour").val();
    body_bright = $("#body_bright").val();
    body_shade = Number( $("#body_shade").val() );
    
    mark_colour = $("#mark_colour").val();
    mark_bright = $("#mark_bright").val();
    mark_shade = Number( $("#mark_shade").val() );
    
    mark_shape1 = $("#mark_shape1").val();
    mark_shape2 = $("#mark_shape2").val();
    mark_area =...