JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Testing coat class.
<p><div id='coat1' class='dragon_holder'></div></p>
<div id='coat2' class='dragon_holder'></div>

CSS

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

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

/* Colour-shifted melanin */
.c_black_r1 {background-color: #5B453C;}
.c_black_r2 {background-color: #A6887D;}
.c_black_r3 {background-color: #DCCFCB;}
.c_black_rr1 {background-color: #76211D;}
.c_black_rr2 {background-color: #D35F58;}
.c_black_rr3 {background-color: #F2D0CE;}
.c_black_b1 {background-color: #48486A;}
.c_black_b2 {background-color: #8686AC;}
.c_black_b3 {background-color: #C7C7D8;}
.c_black_bb1 {background-color: #20277D;}
.c_black_bb2 {background-color: #6871D9;}
.c_black_bb3 {background-color: #D1D3F3;}
.c_black_rb1 {background-color: #3F1686;}
.c_black_rb2 {background-color: #8762D5;}
.c_black_rb3 {background-color: #D3C6F0;}

.f_black_r1 {filter: invert(24%) sepia(45%) saturate(300%) hue-rotate(333deg) brightness(98%) contrast(88%);}
.f_black_r2 {filter: invert(58%) sepia(5%) saturate(1496%) hue-rotate(330deg) brightness(97%) contrast(86%);}
.f_black_r3 {filter: invert(93%) sepia(10%) saturate(245%) hue-rotate(326deg) brightness(94%) contrast(82%);}
.f_black_rr1 {filter: invert(15%) sepia(66%) saturate(2006%) hue-rotate(339deg) brightness(93%) contrast(94%);}
.f_black_rr2 {filter: invert(55%) sepia(28%) saturate(4269%) hue-rotate(325deg) brightness(89%) contrast(84%);}
.f_black_rr3 {filter: invert(90%) sepia(3%) saturate(2268%) hue-rotate(314deg) brightness(99%) contrast(91%);}
.f_black_b1 {filter: invert(27%) sepia(19%) saturate(1009%) hue-rotate(201deg) brightness(89%) contrast(84%);}
.f_black_b2 {filter: invert(59%) sepia(9%) saturate(1060%) hue-rotate(202deg) brightness(90%) contrast(85%);}
.f_black_b3 {filter: invert(91%) sepia(4%) saturate(819%) hue-rotate(202deg) brightness(92%) contrast(83%);}
.f_black_bb1 {filter: invert(14%) sepia(25%) saturate(6751%) hue-rotate(228deg) brightness(91%) contrast(99%);}
.f_black_bb2 {filter: invert(62%) sepia(40%)...

JavaScript

/* 
    For generating a single dragon's image.
	Pass data, assemble the HTML here. Reuseable.
	
	Also include description?
*/
class CoatImage {
	
	// Base directory never changes.
	constructor(path){
		this.imagePath = path;
	}
	
    // 'return this' needed for chaining?
	setBreed(breed){
		this.breed = breed;
        return this;
	}
	setSex(sex){
		this.sex = sex;
        return this;
	}
	setStage(stage){
		this.stage = stage;
        return this;
	}
    
    // For main coat images, and also wearables.
	setPath(){
	//	this.path += this.imagePath + this.breed + "/" + this.sex + "/" + this.stage + "/";
        this.path = this.imagePath;
        this.attirePath = this.imagePath + this.breed + "/" + this.sex + "/";
	}
	
	// Begin new HTML. Shadow under dragon.
	startCoat(){
		this.setPath();
	//	this.html = "<img src='" + this.path + "ground.png'>";
        this.html = "";
	}
	
	// A simple fixed image.
	addImage(url, opacity = 1){
        this.html += "<img src='" + this.path + url + ".png' style='opacity:" + opacity + "'>\n";
	}
	
	// A black PNG image with CSS filter applied.
	addFilter(url, filter, opacity = 1){
		this.html += "<img src='" + this.path + url + ".png' class='f_" + filter + "' style='opacity:" + opacity + "'>\n";
	}
    
    // Similar functions, but for wearables.
    // These layers are added after main HTML.
	addAttireImage(url){
        this.html += "<img src='" + this.attirePath + url + ".png'>\n";
	}
	
	addAttireFilter(url, filter){
		this.html += "<img src='" + this.attirePath + url + ".png' class='f_" + filter + "'>\n";
	}
	
	// End the main HTML. Outline, shading.
	endCoat(){
	//	this.html += "<img src='" + this.path + "shading.png'>\n";
	//	this.html += "<img src='" + this.path + "highlight.png'>\n";
		this.html += "<img src='" + this.path + "line.png'>\n";
	}
    
}

// Testing the CoatImage class.
// Generate 2 dragons, one after the other.

let path = "http://mythstable.epizy.com/dragon/images/";
/*
let coat = new...