JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div id='event-bg'></div>






		    
<div>
    Custom background: 
    <select name='bg' id='select-bg' class='multi-lang'>
	    <option value='0' class='en'>None</option>
        <option value='0' class='fr'>Aucun</option>
        <option value='desert' class='en'>Desert</option>
        <option value='desert' class='fr'>Désert</option>
        <option value='plain' class='en'>Plain</option>
        <option value='plain' class='fr'>Plaines</option>
        <option value='swamp' class='en'>Swamp</option>
        <option value='swamp' class='fr'>Marais</option>
        <option value='woods' class='en'>Woods</option>
        <option value='woods' class='fr'>Forêt</option>
        <option value='sunny' class='en'>Sunny</option>
        <option value='sunny' class='fr'>Ensoleillé</option>
        <option value='night' class='en'>Night</option>
        <option value='night' class='fr'>Nuit</option>	
    </select>
</div>
		
<table id=''>
    <tr>
        <th>Overlay</th>
	    <th>Size %</th>
		<th>Top</th>
	    <th>Left</th>
		<th>Flip?</th>
	</tr>
	<tr>
        <td>
            <select id='select-overlay1' class='multi-lang input-overlay'>
            <option value='0' class='en'>None</option>
            <option value='0' class='fr'>Aucun</option>
            <option value='aquila_swoop_tan' class='en' data-w='300' data-h='300'>Aquila Swoop, Tan</option>
            <option value='aquila_swoop_tan' class='fr' data-w='300' data-h='300'>Aquila Envolée, Brun</option>
            <option value='aquila_swoop_white' class='en' data-w='300' data-h='300'>Aquila Swoop, White</option>
            <option value='aquila_swoop_white' class='fr' data-w='300' data-h='300'>Aquila Envolée, Blanc</option>
            <option value='aquila_swoop_grey' class='en' data-w='300' data-h='300'>Aquila Swoop, Grey</option>
            <option value='aquila_swoop_grey' class='fr' data-w='300' data-h='300'>Aquila Envolée, Gris</option>
            <option value='aquila_swoop_black' class='en'...

CSS

#event-bg {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: skyblue;
    background-size: cover;
}

#event-bg .event-overlay {
   position: absolute;
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
#event-bg .event-overlay img {
   width: 100%;
   height: 100%;
}


input {
    width: 40px;
}

JavaScript

/*const db = {
    bgs: [
        ["plain", "Plain"],
        ["woods", "Woods"],
        ["sunny", "Sunny"],
        ["swamp", "Swamp"],
        ["night", "Night"],
    ],
    
    overlays: [
        ["aquila_swoop", "Aquila - Swoop - Orange", 340, 340],
        ["aquila_swoop_white", "Aquila - Swoop - White", 340, 340],
        ["aquila_swoop_grey", "Aquila - Swoop - Grey", 340, 340],
        ["aquila_swoop_black", "Aquila - Swoop - Black", 340, 340],
        ["uni_side", "Unicorn - Side - Orange", 300, 200],
        ["uni_side_white", "Unicorn - Side - White", 300, 200],
        ["uni_side_grey", "Unicorn - Side - Grey", 300, 200],
        ["uni_side_black", "Unicorn - Side - Black", 300, 200],
        ["horse_flee", "Horse - Flee - Orange", 200, 200],
        ["horse_flee_white", "Horse - Flee - White", 200, 200],
        ["horse_flee_grey", "Horse - Flee - Grey", 200, 200],
        ["horse_flee_black", "Horse - Flee - Black", 200, 200]
    ]
};

const imagePath = "aaa";



let html = "";
for(let bg of db.bgs){
    html += "<option value='" + bg[0] + "'>" + bg[1] + "</option>";
}
$("#select-bg").html(html);

html = "<option value='0'>None</option>";
for(let overlay of db.overlays){
    html += "<option value='" + overlay[0] + "'>" + overlay[1] + "</option>";
}
$(".select-overlay").html(html);




class ExplorePreview {

    constructor(){
        this.bg = "plain";
        this.overlay1 = {url: 0};
        this.overlay2 = {url: 0};
        this.overlay3 = {url: 0};
    }

    preview(){
        this.bg = $("#select-bg").val(); 
        let bg = "";
        $("#event-bg").css({"background-image": "url(" + bg + ")"});
        
        let html = "";
        for(let i = 1; i <= 3; i++){
            let overlay = {
                url: $("#select-overlay" + i).val(),
                size: $("#size-overlay" + i).val(),
                top: $("#top-overlay" + i).val(),
                left: $("#left-overlay" + i).val(),
                flip: $("#flip-overlay" +...