JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
Dragon designer. Mythscale.
<button id='randomise'>Random!</button><br>
<div class='section'>
Gold: <select id='select_g1'>
<option value='1' selected>G+</option>
<option value='2'>g</option>
</select><select id='select_g2'>
<option value='1' selected>G+</option>
<option value='2'>g</option>
</select>
Red: <select id='select_r1'>
<option value='1'>R</option>
<option value='2' selected>r+</option>
</select><select id='select_r2'>
<option value='1'>R</option>
<option value='2' selected>r+</option>
</select>
Blue: <select id='select_b1'>
<option value='1'>B</option>
<option value='2'>B^w</option>
<option value='3' selected>b+</option>
</select><select id='select_b2'>
<option value='1'>B</option>
<option value='2'>B^w</option>
<option value='3' selected>b+</option>
</select>
Shade: <select id='select_s1'>
<option value='1'>S^d</option>
<option value='2'>S^l</option>
<option value='3' selected>s+</option>
</select><select id='select_s2'>
<option value='1'>S^d</option>
<option value='2'>S^l</option>
<option value='3' selected>s+</option>
</select>
<br>
Eyes: <select id='select_or1'>
<option value='1'>Or</option>
<option value='2' selected>or+</option>
</select><select id='select_or2'>
<option value='1'>Or</option>
<option value='2' selected>or+</option>
</select> <select id='select_ob1'>
<option value='1'>Ob</option>
<option value='2' selected>ob+</option>
</select><select id='select_ob2'>
<option value='1'>Ob</option>
<option value='2' selected>ob+</option>
</select>
</div>
<div class='section'>
Accents: <select id='select_a1'>
<option value='1'>A</option>
<option value='2'>A^e</option>
<option value='3' selected>a+</option>
</select><select id='select_a2'>
<option value='1'>A</option>
<option value='2'>A^e</option>
<option value='3' selected>a+</option>
</select>
AccentLocation: <select id='select_al1'>
<option...CSS
img, div {
box-sizing: border-box;
}
.section {
border: 1px solid grey;
padding: 10px;
margin: 5px;
}
#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:...JavaScript
// JS for Mythscale game, by Gwyn Milcote.
/* Image directory. */
var path = "http://mythstable.epizy.com/dragon/images/";
/*
* ALL POSSIBLE ALLELES, in order of dominance.
* Used for referencing and randomly picking from.
*/
var genome = {
// Gold
g: ["G+", "g"],
// Red
r: ["R", "r+"],
// Blue
b: ["B", "B^w", "b+"],
// Shade
s: ["S^d", "S^l", "s+"],
// AccentGold
ag: ["Ag+", "ag"],
// AccentRed
ar: ["Ar", "ar+"],
// AccentBlue
ab: ["Ab", "Ab^w", "ab+"],
// AccentShade
as: ["As^d", "As^l", "as+"],
// OcularRed
er: ["Or", "or+"],
// OcularBlue
eb: ["Eb", "ob+"],
// Accent
a: ["A^a", "A^e", "a+"],
// AccentLocation
al: ["Al", "al+"],
// EyeLocation
el: ["El", "el+"],
// Black
bl: ["Bl^i", "Bl^d", "bl+"],
// Melanism
mel: ["Mel^f", "Mel^p", "mel+", "mel^a"],
// ColourShift
cs: ["Cs^r", "Cs^b", "cs+"],
// Shadowback
sb: ["sb", "sb+"],
// Shadow
sdw: ["Sdw", "sdw+"],
// FeatherPattern
fp: ["Fp^m", "Fp^s", "Fp^l", "fp+"],
// Swirl
swl: ["Swl+", "swl"],
// UnderMark
//um: ["Um^e", "Um^a", "um+", "um^m"],
// Marking
mk: ["Mk^t", "Mk^l", "Mk^p", "Mk^s", "mk+"],
// MarkArea
ma: ["Ma^f", "Ma^h", "ma+"],
// Marble
mbl: ["Mbl+", "mbl", "mbl^c"],
// MarkOpacity
mo: ["Mo^h", "Mo^s", "mo+"],
// Outline
ou: ["Ou+", "Ou^b", "Ou^a", "ou^e"],
// OutlineColour
oc: ["Oc^m", "Oc^d", "Oc^p", "oc+"],
// White
w: ["W", "W+", "w^b", "w"],
// Merle
mrl: ["Mrl", "mrl+"],
// Snow
sn: ["Sn", "sn+"],
// SnowMod
sm: ["Sm^s", "Sm^b", "Sm^x", "sm+"],
// Lightbelly
lb: ["Lb", "lb+"],
// Blanket
bk: ["Bk", "bk+"],
// Spotting
sp: ["Sp", "sp+"],
// Pied/Paint
p: ["P^ls", "P^sb", "P^spl", "p+"],
// Horn
hrn: ["Hrn+", "Hrn^e", "hrn^m"],
// Pearl
prl: ["Prl+", "prl"],
// Lame
la: ["La^l", "La^d", "La+", "la^f", "la^s", "la^o"],
// Dust
dst: ["Dst+", "dst", "dst^s"],
// Grey
gr: ["Gr", "gr+"],
// Pastel
pa: ["Pa", "pa+"]
};
/*
* And these are just the names of the arrays above.
* Useful for looping, through...