JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

dynamic griff body thing.

<br>Ears: <select class='select_ears'>
    <option value='0'>None</option>
    <option value='1'>Horse</option>
    <option value='2'>Backpoint</option>
    <option value='3'>Spread</option>
</select>
<br>Forelegs: <select class='select_legs'>
    <option value='1'>Eagle</option>
    <option value='2'>Lion</option>
</select>
<br>Neck <select class='select_neck'>
    <option value='0'>Plain</option>
    <option value='1'>Lion mane</option>
    <option value='2'>Peafowl scales</option>
</select>
<br>Fore/hind split? <select class='select_fore'>
    <option value='0'>No</option>
    <option value='1'>Yes</option>
</select>
<br>Feather elbows? <select class='select_elbow'>
    <option value='0'>No</option>
    <option value='1'>Yes</option>
</select>
<br>Feather hocks? <select class='select_hock'>
    <option value='0'>No</option>
    <option value='1'>Yes</option>
</select>
<br>Back: <select class='select_wings'>
    <option value='0'>None</option>
    <option value='1'>Eagle wings</option>
    <option value='2'>Plumes</option>
    <option value='3'>Scythian wings</option>
    <option value='4'>Minoan wings</option>
    <option value='5'>Marlik wings</option>
    <option value='6'>Achaemenid wings</option>
    <option value='7'>Keythong spikes</option>
    <option value='8'>Armour ridges</option>
</select>
<br>Tail: <select class='select_tail'>
    <option value='0'>None (rumpless)</option>
    <option value='1'>Lion</option>
    <option value='2'>Persian</option>
    <option value='3'>Deer</option>
    <option value='4'>Feathers</option>
    <option value='5'>Peafowl</option>
    <option value='6'>Feathers + lion</option>
    <option value='7'>Feathers + persian</option>
</select>

<div class='coat_holder'>
    <div class='layer_body_colour'></div>
    <div class='layer_body_line'></div>
    
    <div class='layer_legs_colour'></div>
    <div class='layer_legs_line'></div>
    
    <div class='layer_fore_colour'></div>
    <div...

CSS

.coat_holder {
  margin: 20px auto;
  position: relative;
  width: 600px;
  height: 450px;
  border: 1px solid green;
}

.coat_holder div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.colour1 {
  filter: invert(86%) sepia(20%) saturate(609%) hue-rotate(320deg) brightness(94%) contrast(93%);
}
.colour2 {
  filter: invert(54%) sepia(22%) saturate(1039%) hue-rotate(333deg) brightness(93%) contrast(90%);
}
.colour3 {
  filter: invert(27%) sepia(49%) saturate(629%) hue-rotate(333deg) brightness(93%) contrast(93%);
}
.colour4 {
  filter: invert(53%) sepia(34%) saturate(3679%) hue-rotate(1deg) brightness(96%) contrast(104%);
}
.colour5 {
  filter: invert(56%) sepia(19%) saturate(715%) hue-rotate(356deg) brightness(97%) contrast(91%);
}
.colour65 {
  filter: invert(100%) sepia(34%) saturate(2703%) hue-rotate(13deg) brightness(89%) contrast(91%);
}
.colour7 {
  filter: invert(84%) sepia(29%) saturate(5255%) hue-rotate(136deg) brightness(96%) contrast(95%);
}

JavaScript

var url = "http://mythstable.epizy.com/griff/";



$('select').change(function(){
    
    ears = $('.select_ears').val();
    legs = $('.select_legs').val();
    neck = $('.select_neck').val();
    back = $('.select_back').val();
    fore = $('.select_fore').val();
    elbow = $('.select_elbow').val();
    hock = $('.select_hock').val();
    tail = $('.select_tail').val();
    
    updateImage('f');
    //updateImage('m');
});


function updateImage(sex){

    // got any ears, or none?
    if(ears != 0){
        $('.layer_ears_colour').html("<img src='"+url+"ears/"+ears+".png' class='colour1'>");
        $('.layer_ears_line').html("<img src='"+url+"ears/"+ears+"-line.png'>");
    }else{
        $('.layer_ears_colour, .layer_ears_line').html("");
    }
    
    // eagle or lion legs work the same.
    $('.layer_legs_colour').html("<img src='"+url+"legs/"+legs+".png' class='colour1'>");
        $('.layer_legs_line').html("<img src='"+url+"legs/"+legs+"-line.png'>");
    

}