MediaWiki
Common.js: Difference between revisions
From Grouse House Wiki
No edit summary |
No edit summary |
||
(149 intermediate revisions by the same user not shown) | |||
Line 20: | Line 20: | ||
/* Dropdown menus */ | /* Dropdown menus */ | ||
function selectVariant(enemy, variant1, variant2, variant3, variant4) { | function selectVariant(enemy, variant1, variant2, variant3, variant4, variant5, variant6, variant7, variant8, variant9, variant10, variant11, variant12) { | ||
var dropdownName = enemy + 'Variants'; | var dropdownName = enemy + 'Variants'; | ||
var resultName = enemy + 'ChosenVariant'; | var resultName = enemy + 'ChosenVariant'; | ||
Line 27: | Line 27: | ||
var enemyVariant3 = enemy + variant3; | var enemyVariant3 = enemy + variant3; | ||
var enemyVariant4 = enemy + variant4; | var enemyVariant4 = enemy + variant4; | ||
var enemyVariant5 = enemy + variant5; | |||
var enemyVariant6 = enemy + variant6; | |||
var enemyVariant7 = enemy + variant7; | |||
var enemyVariant8 = enemy + variant8; | |||
var enemyVariant9 = enemy + variant9; | |||
var enemyVariant10 = enemy + variant10; | |||
var enemyVariant11 = enemy + variant11; | |||
var enemyVariant12 = enemy + variant12; | |||
var variant1div = document.getElementById(enemyVariant1); | var variant1div = document.getElementById(enemyVariant1); | ||
var variant2div = document.getElementById(enemyVariant2); | var variant2div = document.getElementById(enemyVariant2); | ||
var variant3div = document.getElementById(enemyVariant3); | var variant3div = document.getElementById(enemyVariant3); | ||
var variant4div = document.getElementById(enemyVariant4); | var variant4div = document.getElementById(enemyVariant4); | ||
var variant5div = document.getElementById(enemyVariant5); | |||
var variant6div = document.getElementById(enemyVariant6); | |||
var variant7div = document.getElementById(enemyVariant7); | |||
var variant8div = document.getElementById(enemyVariant8); | |||
var variant9div = document.getElementById(enemyVariant9); | |||
var variant10div = document.getElementById(enemyVariant10); | |||
var variant11div = document.getElementById(enemyVariant11); | |||
var variant12div = document.getElementById(enemyVariant12); | |||
var dropdown = document.getElementById(dropdownName); | var dropdown = document.getElementById(dropdownName); | ||
Line 39: | Line 55: | ||
variant3div.style.display = "none"; | variant3div.style.display = "none"; | ||
variant4div.style.display = "none"; | variant4div.style.display = "none"; | ||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant2) { | } else if(dropdown.options[dropdown.selectedIndex].text === variant2) { | ||
document.getElementById(resultName).value = enemyVariant2; | document.getElementById(resultName).value = enemyVariant2; | ||
Line 45: | Line 69: | ||
variant3div.style.display = "none"; | variant3div.style.display = "none"; | ||
variant4div.style.display = "none"; | variant4div.style.display = "none"; | ||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant3) { | } else if(dropdown.options[dropdown.selectedIndex].text === variant3) { | ||
document.getElementById(resultName).value = enemyVariant3; | document.getElementById(resultName).value = enemyVariant3; | ||
Line 51: | Line 83: | ||
variant3div.style.display = "block"; | variant3div.style.display = "block"; | ||
variant4div.style.display = "none"; | variant4div.style.display = "none"; | ||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant4) { | } else if(dropdown.options[dropdown.selectedIndex].text === variant4) { | ||
document.getElementById(resultName).value = enemyVariant4; | document.getElementById(resultName).value = enemyVariant4; | ||
Line 57: | Line 97: | ||
variant3div.style.display = "none"; | variant3div.style.display = "none"; | ||
variant4div.style.display = "block"; | variant4div.style.display = "block"; | ||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant5) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "block"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant6) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "block"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant7) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "block"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant8) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "block"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant9) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "block"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant10) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "block"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant11) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "block"; | |||
variant12div.style.display = "none"; | |||
} else if(dropdown.options[dropdown.selectedIndex].text === variant12) { | |||
document.getElementById(resultName).value = enemyVariant4; | |||
variant1div.style.display = "none"; | |||
variant2div.style.display = "none"; | |||
variant3div.style.display = "none"; | |||
variant4div.style.display = "none"; | |||
variant5div.style.display = "none"; | |||
variant6div.style.display = "none"; | |||
variant7div.style.display = "none"; | |||
variant8div.style.display = "none"; | |||
variant9div.style.display = "none"; | |||
variant10div.style.display = "none"; | |||
variant11div.style.display = "none"; | |||
variant12div.style.display = "block"; | |||
} | } | ||
} | } | ||
Line 146: | Line 306: | ||
/* Decor Previewer Garbage */ | /* Decor Previewer Garbage */ | ||
var modal = document.getElementById(' | /* Establish Variables */ | ||
var modal = document.getElementById('decorModalV1'); | |||
var modalclose = document.getElementsByClassName('modalclose')[0]; | var modalclose = document.getElementsByClassName('modalclose')[0]; | ||
var modaldropdown = document.getElementById('previewoptions'); | var modaldropdown = document.getElementById('previewoptions'); | ||
var modalpreview = document.getElementById('decorpreviewimg'); | var modalpreview = document.getElementById('decorpreviewimg'); | ||
var decorpreview = document.getElementById('decorpreview'); | var decorpreview = document.getElementById('decorpreview'); | ||
var previewinput = document.getElementById('previewinput'); | var previewinput = document.getElementById('previewinput'); | ||
var basewolf = document.getElementById('previewbasewolf'); | var basewolf = document.getElementById('previewbasewolf'); | ||
var decortitle = document.getElementById('decorname'); | var decortitle = document.getElementById('decorname'); | ||
Line 161: | Line 318: | ||
var checkboxes = document.getElementById('checkboxes'); | var checkboxes = document.getElementById('checkboxes'); | ||
var backgroundtoggle = document.getElementById('backgroundtoggle'); | var backgroundtoggle = document.getElementById('backgroundtoggle'); | ||
var lightbasetoggle = document.getElementById('lightbasetoggle'); | |||
var darkbasetoggle = document.getElementById('darkbasetoggle'); | var darkbasetoggle = document.getElementById('darkbasetoggle'); | ||
var wolftoggle = document.getElementById('wolftoggle'); | |||
var previewbackground = document.getElementById('previewbackground'); | var previewbackground = document.getElementById('previewbackground'); | ||
/* Image Variables */ | |||
var backgroundimage = "/images/d/dd/Default_Daytime.png"; | |||
var backgroundnone = "/images/d/d8/Previewbackground_none.png"; | |||
var adultlight = "/images/4/47/Basewolf_adult.png"; | |||
var adultdark = "/images/e/e2/Basewolfdark_adult.png"; | |||
var motherlylight = "/images/d/d7/Basewolf_motherly.png"; | |||
var motherlydark = "/images/e/e9/Basewolfdark_motherly.png"; | |||
var relaxedlight = "/images/6/67/Basewolf_relaxed.png"; | |||
var relaxeddark = "/images/d/de/Basewolfdark_relaxed.png"; | |||
var sentinellight = "/images/e/e0/Basewolf_sentinel.png"; | |||
var sentineldark = "/images/c/c7/Basewolfdark_sentinel.png"; | |||
var adollight = "/images/7/78/Basewolf_adolescent.png"; | |||
var adoldark = "/images/4/48/Basewolfdark_adolescent.png"; | |||
var puplight = "/images/0/09/Basewolf_puppy.png"; | |||
var pupdark = "/images/2/29/Basewolfdark_pup.png"; | |||
var brachylight = "/images/3/31/Basewolf_brachy.png"; | |||
var brachydark = "/images/f/f1/Basewolfdark_brachycephaly.png"; | |||
var conjoinedlight = "/images/4/46/Basewolf_conjoinedtwins.png"; | |||
var conjoineddark = "/images/3/3a/Basewolfdark_conjoined.png"; | |||
var pupnewbornlight = "/images/7/7f/Basewolf_newbornpuppy.png"; | |||
var pupnewborndark = "/images/b/b6/Basewolfdark_pupnewborn.png"; | |||
var polyclight = "/images/b/b5/Basewolf_polycephaly.png"; | |||
var polycdark = "/images/e/e0/Basewolfdark_polycephaly.png"; | |||
var polymlight = "/images/6/6a/Basewolf_polymelia.png"; | |||
var polymdark = "/images/a/a4/Basewolfdark_polymelia.png"; | |||
var sirenlight = "/images/3/39/Basewolf_sirenomelia.png"; | |||
var sirendark = "/images/c/c6/Basewolfdark_siren.png"; | |||
var pupyounglight = "/images/0/0c/Basewolf_youngpuppy.png"; | |||
var pupyoungdark = "/images/2/25/Basewolfdark_pupyoung.png"; | |||
var nowolf = "/images/d/d8/Previewbackground_none.png"; | |||
/* Create Canvas */ | |||
var canvas = document.getElementById("decorpreview"); | |||
var ctx = canvas.getContext("2d"); | |||
var decorImage = new Image(); | |||
var wolfImage = new Image(); | |||
var backgroundImage = new Image(); | |||
function decorModalV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) { | |||
/* Display all content when modal is opened */ | |||
modal.style.display = "block"; | |||
previewinput.style.display = "block"; | previewinput.style.display = "block"; | ||
decorpreview.style.display = "block"; | decorpreview.style.display = "block"; | ||
togglemenu.style.display = "block"; | togglemenu.style.display = "block"; | ||
decortitle.innerHTML = decorname; /* Insert decor name */ | |||
/* Input default image */ | |||
backgroundImage.src = backgroundimage; | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.src = adultlight; | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adulturl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
function toggleReload() { | |||
if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = adultdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = adultlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adulturl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = motherlydark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = motherlylight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = motherlyurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = adultdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = adultlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adulturl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = relaxeddark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = relaxedlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = relaxedurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = sentineldark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = sentinellight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = sentinelurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = adoldark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = adollight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adolurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = pupdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = puplight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = brachydark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = brachylight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupbrachyurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = conjoineddark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = conjoinedlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupconjoinedurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = pupnewborndark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = pupnewbornlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupnewbornurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = polycdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = polyclight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = puppolycurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = polymdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = polymlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = puppolymurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = sirendark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = sirenlight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupsirenurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") { | } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") { | ||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = pupyoungdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = pupyounglight; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupyoungurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} | } | ||
} | |||
modaldropdown.addEventListener("change", function() { | |||
toggleReload(); | |||
}); | |||
lightbasetoggle.addEventListener("click", function() { | |||
toggleReload(); | |||
}); | |||
function | darkbasetoggle.addEventListener("click", function() { | ||
toggleReload(); | |||
}); | |||
wolftoggle.addEventListener("click", function() { | |||
toggleReload(); | |||
}); | |||
backgroundtoggle.addEventListener("click", function() { | |||
toggleReload(); | |||
}); | |||
checkboxesbutton.addEventListener("click", function() { | |||
if (checkboxes.style.display === "none") { | |||
checkboxes.style.display = "block"; | |||
} else { | |||
checkboxes.style.display = "none"; | |||
} | |||
}); | |||
}; | |||
function decorModalBehindV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) { | |||
/* Display all content when modal is opened */ | |||
modal.style.display = "block"; | |||
previewinput.style.display = "block"; | |||
decorpreview.style.display = "block"; | |||
togglemenu.style.display = "block"; | |||
decortitle.innerHTML = decorname; /* Insert decor name */ | |||
/* Input default image */ | |||
backgroundImage.src = backgroundimage; | |||
backgroundImage.onload = function() { | |||
canvas.style.width = '100%'; | |||
canvas.width = this.naturalWidth; | |||
canvas.height = this.naturalHeight; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adulturl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
wolfImage.src = "/images/4/47/Basewolf_adult.png"; | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
/* Check dropdown and checkboxes and remake canvas */ | |||
function toggleReloadBehind() { | |||
if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adulturl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
console.log("loaded wolf dark"); | |||
wolfImage.src = adultdark; | |||
} else if (wolftoggle.checked) { | |||
console.log("loaded no wolf"); | |||
wolfImage.src = nowolf; | |||
} else { | |||
console.log("loaded light wolf"); | |||
wolfImage.src = adultlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adulturl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = adultdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = adultlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = motherlyurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
console.log("loaded motherly dark"); | |||
wolfImage.src = motherlydark; | |||
} else if (wolftoggle.checked) { | |||
console.log("loaded motherly no wolf"); | |||
wolfImage.src = nowolf; | |||
} else { | |||
console.log("loaded motherly light"); | |||
wolfImage.src = motherlylight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = relaxedurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = relaxeddark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = relaxedlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = sentinelurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = sentineldark; | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} else { | |||
wolfImage.src = sentinellight; | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = adolurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = adoldark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = adollight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = pupdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = puplight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupbrachyurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = brachydark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = brachylight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupconjoinedurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = conjoineddark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = conjoinedlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupnewbornurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = pupnewborndark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = pupnewbornlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = puppolycurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = polycdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = polyclight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = puppolymurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = polymdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = polymlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupsirenurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = sirendark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = sirenlight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") { | |||
if (backgroundtoggle.checked) { | |||
backgroundImage.src = backgroundnone; | |||
} else { | |||
backgroundImage.src = backgroundimage; | |||
} | |||
backgroundImage.onload = function() { | |||
canvas.width = backgroundImage.width; | |||
canvas.height = backgroundImage.height; | |||
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); | |||
decorImage.src = pupyoungurl; | |||
decorImage.onload = function() { | |||
ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); | |||
if (darkbasetoggle.checked) { | |||
wolfImage.src = pupyoungdark; | |||
} else if (wolftoggle.checked) { | |||
wolfImage.src = nowolf; | |||
} else { | |||
wolfImage.src = pupyounglight; | |||
} | |||
wolfImage.onload = function() { | |||
ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); | |||
var img = canvas.toDataURL("image/png"); | |||
} | |||
} | |||
} | |||
} | |||
} | |||
modaldropdown.addEventListener("change", function() { | |||
toggleReloadBehind(); | |||
}); | |||
lightbasetoggle.addEventListener("click", function() { | |||
toggleReloadBehind(); | |||
}); | |||
darkbasetoggle.addEventListener("click", function() { | |||
toggleReloadBehind(); | |||
}); | |||
wolftoggle.addEventListener("click", function() { | |||
toggleReloadBehind(); | |||
}); | |||
backgroundtoggle.addEventListener("click", function() { | |||
toggleReloadBehind(); | |||
}); | |||
checkboxesbutton.addEventListener("click", function() { | |||
if (checkboxes.style.display === "none") { | |||
checkboxes.style.display = "block"; | |||
} else { | |||
checkboxes.style.display = "none"; | |||
} | |||
}); | |||
}; | |||
Line 606: | Line 1,280: | ||
modal.style.display = "none"; | modal.style.display = "none"; | ||
modaldropdown.selectedIndex = 0; | modaldropdown.selectedIndex = 0; | ||
decorpreview.style.display = "none"; | decorpreview.style.display = "none"; | ||
previewinput.style.display = "none"; | previewinput.style.display = "none"; | ||
togglemenu.style.display = "none"; | togglemenu.style.display = "none"; | ||
checkboxes.style.display = "none"; | checkboxes.style.display = "none"; | ||
backgroundtoggle.checked = false; | |||
lightbasetoggle.checked = true; | |||
darkbasetoggle.checked = false; | |||
wolftoggle.checked = false; | |||
} else if (event.target == modalclose) { | } else if (event.target == modalclose) { | ||
modal.style.display = "none"; | modal.style.display = "none"; | ||
modaldropdown.selectedIndex = 0; | modaldropdown.selectedIndex = 0; | ||
decorpreview.style.display = "none"; | decorpreview.style.display = "none"; | ||
previewinput.style.display = "none"; | previewinput.style.display = "none"; | ||
togglemenu.style.display = "none"; | togglemenu.style.display = "none"; | ||
checkboxes.style.display = "none"; | checkboxes.style.display = "none"; | ||
backgroundtoggle.checked = false; | |||
lightbasetoggle.checked = true; | |||
darkbasetoggle.checked = false; | |||
wolftoggle.checked = false; | |||
} | } | ||
} | } |
Latest revision as of 04:32, 24 November 2024
/* Any JavaScript here will be loaded for all users on every page load. */ /* Spoiler buttons */ var spoilersc = document.getElementsByClassName('spoilerButton'); var j; for (j = 0; j < spoilersc.length; j++) { spoilersc[j].addEventListener("click", function() { this.classList.toggle("active"); var spoilercontent = this.nextElementSibling; if (spoilercontent.style.display === "block") { spoilercontent.style.display = "none"; } else { spoilercontent.style.display = "block"; } }); } /* Dropdown menus */ function selectVariant(enemy, variant1, variant2, variant3, variant4, variant5, variant6, variant7, variant8, variant9, variant10, variant11, variant12) { var dropdownName = enemy + 'Variants'; var resultName = enemy + 'ChosenVariant'; var enemyVariant1 = enemy + variant1; var enemyVariant2 = enemy + variant2; var enemyVariant3 = enemy + variant3; var enemyVariant4 = enemy + variant4; var enemyVariant5 = enemy + variant5; var enemyVariant6 = enemy + variant6; var enemyVariant7 = enemy + variant7; var enemyVariant8 = enemy + variant8; var enemyVariant9 = enemy + variant9; var enemyVariant10 = enemy + variant10; var enemyVariant11 = enemy + variant11; var enemyVariant12 = enemy + variant12; var variant1div = document.getElementById(enemyVariant1); var variant2div = document.getElementById(enemyVariant2); var variant3div = document.getElementById(enemyVariant3); var variant4div = document.getElementById(enemyVariant4); var variant5div = document.getElementById(enemyVariant5); var variant6div = document.getElementById(enemyVariant6); var variant7div = document.getElementById(enemyVariant7); var variant8div = document.getElementById(enemyVariant8); var variant9div = document.getElementById(enemyVariant9); var variant10div = document.getElementById(enemyVariant10); var variant11div = document.getElementById(enemyVariant11); var variant12div = document.getElementById(enemyVariant12); var dropdown = document.getElementById(dropdownName); if(dropdown.options[dropdown.selectedIndex].text === variant1) { document.getElementById(resultName).value = enemyVariant1; variant1div.style.display = "block"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant2) { document.getElementById(resultName).value = enemyVariant2; variant1div.style.display = "none"; variant2div.style.display = "block"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant3) { document.getElementById(resultName).value = enemyVariant3; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "block"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant4) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "block"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant5) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "block"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant6) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "block"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant7) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "block"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant8) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "block"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant9) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "block"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant10) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "block"; variant11div.style.display = "none"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant11) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "block"; variant12div.style.display = "none"; } else if(dropdown.options[dropdown.selectedIndex].text === variant12) { document.getElementById(resultName).value = enemyVariant4; variant1div.style.display = "none"; variant2div.style.display = "none"; variant3div.style.display = "none"; variant4div.style.display = "none"; variant5div.style.display = "none"; variant6div.style.display = "none"; variant7div.style.display = "none"; variant8div.style.display = "none"; variant9div.style.display = "none"; variant10div.style.display = "none"; variant11div.style.display = "none"; variant12div.style.display = "block"; } } /* Adding link to discussion button $(function() { $('h1#firstHeading').each(function () { var $header = $(this).children('span').html(); $pagetitle = $header.split(' ').join('_'); $url = $(location).attr('href'); $spliturl = $url.split(':').join(' '); var main = $spliturl.indexOf("Main"); var mediawiki = $spliturl.indexOf("MediaWiki"); var special = $spliturl.indexOf("Special"); var edit = $spliturl.indexOf("edit"); if(main !== -1){ $(this).children('div').children('a').css("display", "none"); } else if(mediawiki !== -1){ $(this).children('div').children('a').css("display", "none"); } else if(special !== -1){ $(this).children('div').children('a').css("display", "none"); } else if(edit !== -1){ $(this).children('div').children('a').css("display", "none"); } else{ $talklink = "https://grousehouse.wiki/Talk:" + $pagetitle; $link = $(this).children('div').children('a'); $link.attr("href", $talklink); } }); }); */ /* Section toggles */ function toggleSectionsOn() { var sections = document.getElementsByClassName("c-header"), len = sections !== null ? sections.length : 0, i = 0; for(i; i < len; i++) { var content = sections[i].nextElementSibling; content.style.display = "block"; sections[i].classList.remove("hidden"); sections[i].classList.add("active") } } function toggleSectionsOff() { var sections = document.getElementsByClassName("c-header"), len = sections !== null ? sections.length : 0, i = 0; for(i; i < len; i++) { var content = sections[i].nextElementSibling; content.style.display = "none"; sections[i].classList.remove("active"); sections[i].classList.add("hidden") } } /* Spoiler toggles */ function toggleSpoilersOn() { var sections = document.getElementsByClassName("spoilerButton"), len = sections !== null ? sections.length : 0, i = 0; for(i; i < len; i++) { var content = sections[i].nextElementSibling; content.style.display = "block"; sections[i].classList.remove("hidden"); sections[i].classList.add("active") } } function toggleSpoilersOff() { var sections = document.getElementsByClassName("spoilerButton"), len = sections !== null ? sections.length : 0, i = 0; for(i; i < len; i++) { var content = sections[i].nextElementSibling; content.style.display = "none"; sections[i].classList.remove("active"); sections[i].classList.add("hidden") } } /* Decor Previewer Garbage */ /* Establish Variables */ var modal = document.getElementById('decorModalV1'); var modalclose = document.getElementsByClassName('modalclose')[0]; var modaldropdown = document.getElementById('previewoptions'); var modalpreview = document.getElementById('decorpreviewimg'); var decorpreview = document.getElementById('decorpreview'); var previewinput = document.getElementById('previewinput'); var basewolf = document.getElementById('previewbasewolf'); var decortitle = document.getElementById('decorname'); var togglemenu = document.getElementById('checkboxesbutton'); var checkboxes = document.getElementById('checkboxes'); var backgroundtoggle = document.getElementById('backgroundtoggle'); var lightbasetoggle = document.getElementById('lightbasetoggle'); var darkbasetoggle = document.getElementById('darkbasetoggle'); var wolftoggle = document.getElementById('wolftoggle'); var previewbackground = document.getElementById('previewbackground'); /* Image Variables */ var backgroundimage = "/images/d/dd/Default_Daytime.png"; var backgroundnone = "/images/d/d8/Previewbackground_none.png"; var adultlight = "/images/4/47/Basewolf_adult.png"; var adultdark = "/images/e/e2/Basewolfdark_adult.png"; var motherlylight = "/images/d/d7/Basewolf_motherly.png"; var motherlydark = "/images/e/e9/Basewolfdark_motherly.png"; var relaxedlight = "/images/6/67/Basewolf_relaxed.png"; var relaxeddark = "/images/d/de/Basewolfdark_relaxed.png"; var sentinellight = "/images/e/e0/Basewolf_sentinel.png"; var sentineldark = "/images/c/c7/Basewolfdark_sentinel.png"; var adollight = "/images/7/78/Basewolf_adolescent.png"; var adoldark = "/images/4/48/Basewolfdark_adolescent.png"; var puplight = "/images/0/09/Basewolf_puppy.png"; var pupdark = "/images/2/29/Basewolfdark_pup.png"; var brachylight = "/images/3/31/Basewolf_brachy.png"; var brachydark = "/images/f/f1/Basewolfdark_brachycephaly.png"; var conjoinedlight = "/images/4/46/Basewolf_conjoinedtwins.png"; var conjoineddark = "/images/3/3a/Basewolfdark_conjoined.png"; var pupnewbornlight = "/images/7/7f/Basewolf_newbornpuppy.png"; var pupnewborndark = "/images/b/b6/Basewolfdark_pupnewborn.png"; var polyclight = "/images/b/b5/Basewolf_polycephaly.png"; var polycdark = "/images/e/e0/Basewolfdark_polycephaly.png"; var polymlight = "/images/6/6a/Basewolf_polymelia.png"; var polymdark = "/images/a/a4/Basewolfdark_polymelia.png"; var sirenlight = "/images/3/39/Basewolf_sirenomelia.png"; var sirendark = "/images/c/c6/Basewolfdark_siren.png"; var pupyounglight = "/images/0/0c/Basewolf_youngpuppy.png"; var pupyoungdark = "/images/2/25/Basewolfdark_pupyoung.png"; var nowolf = "/images/d/d8/Previewbackground_none.png"; /* Create Canvas */ var canvas = document.getElementById("decorpreview"); var ctx = canvas.getContext("2d"); var decorImage = new Image(); var wolfImage = new Image(); var backgroundImage = new Image(); function decorModalV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) { /* Display all content when modal is opened */ modal.style.display = "block"; previewinput.style.display = "block"; decorpreview.style.display = "block"; togglemenu.style.display = "block"; decortitle.innerHTML = decorname; /* Insert decor name */ /* Input default image */ backgroundImage.src = backgroundimage; backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.src = adultlight; wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = adulturl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } function toggleReload() { if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = adultdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = adultlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = adulturl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = motherlydark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = motherlylight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = motherlyurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = adultdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = adultlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = adulturl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = relaxeddark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = relaxedlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = relaxedurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = sentineldark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = sentinellight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = sentinelurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = adoldark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = adollight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = adolurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = pupdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = puplight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = brachydark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = brachylight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupbrachyurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = conjoineddark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = conjoinedlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupconjoinedurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = pupnewborndark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = pupnewbornlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupnewbornurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = polycdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = polyclight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = puppolycurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = polymdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = polymlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = puppolymurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = sirendark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = sirenlight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupsirenurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } if (darkbasetoggle.checked) { wolfImage.src = pupyoungdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = pupyounglight; } backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupyoungurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } } modaldropdown.addEventListener("change", function() { toggleReload(); }); lightbasetoggle.addEventListener("click", function() { toggleReload(); }); darkbasetoggle.addEventListener("click", function() { toggleReload(); }); wolftoggle.addEventListener("click", function() { toggleReload(); }); backgroundtoggle.addEventListener("click", function() { toggleReload(); }); checkboxesbutton.addEventListener("click", function() { if (checkboxes.style.display === "none") { checkboxes.style.display = "block"; } else { checkboxes.style.display = "none"; } }); }; function decorModalBehindV1(decorname, adulturl, motherlyurl, relaxedurl, sentinelurl, adolurl, pupurl, pupbrachyurl, pupconjoinedurl, pupnewbornurl, puppolycurl, puppolymurl, pupsirenurl, pupyoungurl) { /* Display all content when modal is opened */ modal.style.display = "block"; previewinput.style.display = "block"; decorpreview.style.display = "block"; togglemenu.style.display = "block"; decortitle.innerHTML = decorname; /* Insert decor name */ /* Input default image */ backgroundImage.src = backgroundimage; backgroundImage.onload = function() { canvas.style.width = '100%'; canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = adulturl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); wolfImage.src = "/images/4/47/Basewolf_adult.png"; wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } /* Check dropdown and checkboxes and remake canvas */ function toggleReloadBehind() { if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = adulturl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { console.log("loaded wolf dark"); wolfImage.src = adultdark; } else if (wolftoggle.checked) { console.log("loaded no wolf"); wolfImage.src = nowolf; } else { console.log("loaded light wolf"); wolfImage.src = adultlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Select a stage from the options below") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = adulturl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = adultdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = adultlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Motherly]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = motherlyurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { console.log("loaded motherly dark"); wolfImage.src = motherlydark; } else if (wolftoggle.checked) { console.log("loaded motherly no wolf"); wolfImage.src = nowolf; } else { console.log("loaded motherly light"); wolfImage.src = motherlylight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Relaxed]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = relaxedurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = relaxeddark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = relaxedlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adult [Sentinel]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = sentinelurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = sentineldark; wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } else if (wolftoggle.checked) { wolfImage.src = nowolf; wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } else { wolfImage.src = sentinellight; wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Adolescent") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = adolurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = adoldark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = adollight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = pupdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = puplight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupbrachyurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = brachydark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = brachylight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupconjoinedurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = conjoineddark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = conjoinedlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Newborn]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupnewbornurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = pupnewborndark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = pupnewbornlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = puppolycurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = polycdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = polyclight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Polymelia]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = puppolymurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = polymdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = polymlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupsirenurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = sirendark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = sirenlight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } else if (modaldropdown.options[modaldropdown.selectedIndex].text === "Puppy [Young]") { if (backgroundtoggle.checked) { backgroundImage.src = backgroundnone; } else { backgroundImage.src = backgroundimage; } backgroundImage.onload = function() { canvas.width = backgroundImage.width; canvas.height = backgroundImage.height; ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height); decorImage.src = pupyoungurl; decorImage.onload = function() { ctx.drawImage(decorImage, 0, 0, canvas.width, canvas.height); if (darkbasetoggle.checked) { wolfImage.src = pupyoungdark; } else if (wolftoggle.checked) { wolfImage.src = nowolf; } else { wolfImage.src = pupyounglight; } wolfImage.onload = function() { ctx.drawImage(wolfImage, 0, 0, canvas.width, canvas.height); var img = canvas.toDataURL("image/png"); } } } } } modaldropdown.addEventListener("change", function() { toggleReloadBehind(); }); lightbasetoggle.addEventListener("click", function() { toggleReloadBehind(); }); darkbasetoggle.addEventListener("click", function() { toggleReloadBehind(); }); wolftoggle.addEventListener("click", function() { toggleReloadBehind(); }); backgroundtoggle.addEventListener("click", function() { toggleReloadBehind(); }); checkboxesbutton.addEventListener("click", function() { if (checkboxes.style.display === "none") { checkboxes.style.display = "block"; } else { checkboxes.style.display = "none"; } }); }; window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; modaldropdown.selectedIndex = 0; decorpreview.style.display = "none"; previewinput.style.display = "none"; togglemenu.style.display = "none"; checkboxes.style.display = "none"; backgroundtoggle.checked = false; lightbasetoggle.checked = true; darkbasetoggle.checked = false; wolftoggle.checked = false; } else if (event.target == modalclose) { modal.style.display = "none"; modaldropdown.selectedIndex = 0; decorpreview.style.display = "none"; previewinput.style.display = "none"; togglemenu.style.display = "none"; checkboxes.style.display = "none"; backgroundtoggle.checked = false; lightbasetoggle.checked = true; darkbasetoggle.checked = false; wolftoggle.checked = false; } } /* Disaster tables */ function generateDisaster(disaster) { var biomeDropdownName = disaster + 'Biomes'; var seasonDropdownName = disaster + 'Seasons'; var timeDropdownName = disaster + 'Times'; var biomeResultName = disaster + 'ChosenBiome'; var seasonResultName = disaster + 'ChosenSeason'; var timeResultName = disaster + 'ChosenTime'; var biomeDropdown = document.getElementById(biomeDropdownName); var seasonDropdown = document.getElementById(seasonDropdownName); var timeDropdown = document.getElementById(timeDropdownName); var selectedBiome = biomeDropdown.options[biomeDropdown.selectedIndex].text; var selectedSeason = seasonDropdown.options[seasonDropdown.selectedIndex].text; var selectedTime = timeDropdown.options[timeDropdown.selectedIndex].text; var biomeClasses = selectedBiome + '_' + selectedSeason + '_' + selectedTime; biomeClasses = biomeClasses.toLowerCase().replace(/\s+/g, ''); var imageClasses = disaster + '_' + selectedBiome + '_' + selectedTime; imageClasses = imageClasses.toLowerCase().replace(/\s+/g, ''); var biomeResultName = disaster + 'BiomeImage'; var biomeImageResult = document.getElementById(biomeResultName); var biomeImageName = "/images/4/44/" + biomeClasses + ".png"; var weatherImageName = "/images/8/88/" + imageClasses + ".png"; biomeImageResult.style.background = 'url(' + biomeImageName + ')'; var weatherResultName = disaster + 'WeatherImage'; var weatherImageResult = document.getElementById(weatherResultName); weatherImageResult.src = weatherImageName; } /* Stage and variant tables */ function updateStage(constant) { var stageDropdownName = constant + 'Stage'; var stageImage = constant + 'Image'; stageImage = document.getElementById(stageImage); var stageDropdown = document.getElementById(stageDropdownName); var selectedStage = stageDropdown.options[stageDropdown.selectedIndex].text; selectedStage = selectedStage.toLowerCase().replace(/\s+/g, '').replace('[', '').replace(']', ''); var stageImageName = constant + "_" + selectedStage; var stageImageResult = "/images/5/55/" + stageImageName + ".png"; stageImage.src = stageImageResult; }