JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

ootg tool.
<br>Sex: <select class='sex'>
    <option value='1'>Male</option>
    <option value='2'>Female</option>
</select>
<br>Colour: <select class='base_colour'>
    <option value='1'>Red</option>
    <option value='2'>Orange</option>
    <option value='3'>Amber</option>
    <option value='4'>Green</option>
    <option value='5'>Teal</option>
    <option value='6'>Blue</option>
    <option value='7'>Purple</option>
    <option value='8'>Bronze</option>
    <option value='9'>Oilspill</option>
    <option value='10'>Black</option>
</select> Shade: <select class='base_shade'>
    <option value='1'>Normal</option>
    <option value='2'>Faded</option>
    <option value='3'>Bright</option>
    <option value='4'>Cream</option>
</select> White? <select class='base_white'>
    <option value='0'>No</option>
    <option value='1'>Yes</option>
</select>
<br>Marking: <select class='mark_shape'>
    <option value='0'>None</option>
    <option value='1'>Tiger</option>
    <option value='2'>Leopard</option>
    <option value='3'>Tigard</option>
    <option value='4'>Dusky</option>
    <option value='5'>DuskyTiger</option>
    <option value='6'>DuskyLeopard</option>
    <option value='7'>DuskyTigard</option>
    <option value='8'>Tortie</option>
</select> Opacity: <select class='mark_opacity'>
    <option value='1'>Full</option>
    <option value='2'>Faded</option>
</select> White? <select class='mark_white'>
    <option value='0'>No</option>
    <option value='1'>Yes</option>
</select>
<br>Eye colour: <select class='eye_colour'>
    <option value='1'>Red</option>
    <option value='2'>Orange</option>
    <option value='3'>Amber</option>
    <option value='4'>Green</option>
    <option value='5'>Teal</option>
    <option value='6'>Blue</option>
    <option value='7'>Purple</option>
    <option value='8'>Bronze</option>
    <option value='9'>Black</option>
</select> Sunny? <select class='eye_extra'>
    <option value='0'>No</option>
    <option...

CSS

.mark_btn {border-radius:5px;padding:5px;}
.mark_off {background-color:red;}
.mark_on {background-color:green;}

.coat_adult {width:710px;height:480px;position:relative;}
.coat_adult div {width:100%;height:100%;position:absolute;top:0px;left:0px;}


/* 1-4 are shades: Base, Faded, Bright, Cream. */

/* red, salmon, amaranth, pink */
.colour1_1 {filter: invert(13%) sepia(59%) saturate(5042%) hue-rotate(354deg) brightness(81%) contrast(90%);}
.colour1_2 {filter: invert(41%) sepia(14%) saturate(6118%) hue-rotate(337deg) brightness(92%) contrast(85%);}
.colour1_3 {filter: invert(58%) sepia(73%) saturate(483%) hue-rotate(308deg) brightness(100%) contrast(108%);}
.colour1_4 {filter: invert(86%) sepia(68%) saturate(1606%) hue-rotate(289deg) brightness(121%) contrast(102%);}

/* orange, tan, gold, cream */
.colour2_1 {filter: invert(38%) sepia(72%) saturate(1254%) hue-rotate(358deg) brightness(87%) contrast(98%);}
.colour2_2 {filter: invert(60%) sepia(44%) saturate(658%) hue-rotate(340deg) brightness(90%) contrast(78%);}
.colour2_3 {filter: invert(77%) sepia(9%) saturate(2816%) hue-rotate(340deg) brightness(97%) contrast(89%);}
.colour2_4 {filter: invert(89%) sepia(17%) saturate(824%) hue-rotate(330deg) brightness(97%) contrast(104%);}

/* amber, khaki, chiffon, ivory */
.colour3_1 {filter: invert(70%) sepia(95%) saturate(586%) hue-rotate(335deg) brightness(100%) contrast(94%);}
.colour3_2 {filter: invert(85%) sepia(34%) saturate(494%) hue-rotate(323deg) brightness(93%) contrast(88%);}
.colour3_3 {filter: invert(99%) sepia(97%) saturate(1026%) hue-rotate(314deg) brightness(102%) contrast(98%);}
.colour3_4 {filter: invert(88%) sepia(90%) saturate(286%) hue-rotate(312deg) brightness(102%) contrast(101%);}

/* green, olive, lime, celadon */
.colour4_1 {filter: invert(37%) sepia(18%) saturate(3196%) hue-rotate(56deg) brightness(96%) contrast(95%);}
.colour4_2 {filter: invert(73%) sepia(28%) saturate(337%) hue-rotate(46deg) brightness(92%) contrast(86%);}
.colour4_3 {filter:...

JavaScript

var site = 'http://griffusion.elementfx.com/mysite/images/ootg/adult/';

// all five stages will be generated.
var sex = 1;
// eye colour, and does it show on body too?
var eye_colour = 1;
var eye_extra = 0;
// the main colour.
var base_colour = 1;
var base_shade = 1; 
var base_white = 0;
// the main marking, like tiger or leopard.
var mark_shape = 0;
var mark_opacity = 1;
var mark_white = 0;
// other markings, all on/off.
var mark_belly = 0;
var mark_bandit = 0;
var mark_socks = 0;
var mark_snowy = 0;
var mark_paint = 0;
var mark_splash = 0;
var mark_dip = 0;

// these could be handled so much better...
$('.mark_btn').click(function(){
    var which = $(this).data('mark');
    var old_css = ''; var new_css = '';
    
    if(which == 'belly'){
        if(mark_belly == 1){
            mark_belly = 0; new_value = 0;
        }else{
            mark_belly = 1; new_value = 1;
        }
    }
    if(which == 'bandit'){
        if(mark_bandit == 1){
            mark_bandit = 0; new_value = 0;
        }else{
            mark_bandit = 1; new_value = 1;
        }
    }
    if(which == 'socks'){
        if(mark_socks == 1){
            mark_socks = 0; new_value = 0;
        }else{
            mark_socks = 1; new_value = 1;
        }
    }
    if(which == 'snowy'){
        if(mark_snowy == 1){
            mark_snowy = 0; new_value = 0;
        }else{
            mark_snowy = 1; new_value = 1;
        }
    }
    if(which == 'paint'){
        if(mark_paint == 1){
            mark_paint = 0; new_value = 0;
        }else{
            mark_paint = 1; new_value = 1;
        }
    }
    if(which == 'splash'){
        if(mark_splash == 1){
            mark_splash = 0; new_value = 0;
        }else{
            mark_splash = 1; new_value = 1;
        }
    }
    if(which == 'dip'){
        if(mark_dip == 1){
            mark_dip = 0; new_value = 0;
        }else{
            mark_dip = 1; new_value = 1;
        }
    }
    
    if(new_value == 1){
        old_css = 'mark_off';...