MediaWiki
Common.js: Difference between revisions
From Grouse House Wiki
No edit summary |
No edit summary |
||
(70 intermediate revisions by the same user not shown) | |||
Line 1,272: | Line 1,272: | ||
} | } | ||
}); | }); | ||
}; | |||
/* Background Previewers */ | |||
var bkgmodal = document.getElementById('backgroundModal'); | |||
var bkgmodalclose = document.getElementsByClassName('bkgmodalclose')[0]; | |||
var bkgmodaldropdown = document.getElementById('bkgpreviewoptions'); | |||
var bkgpreview = document.getElementById('bkgpreview'); | |||
var bkgpreviewinput = document.getElementById('bkgpreviewinput'); | |||
var bkgtitle = document.getElementById('bkgname'); | |||
var bkgtogglemenu = document.getElementById('bkgcheckboxesbutton'); | |||
var bkgcheckboxes = document.getElementById('bkgcheckboxes'); | |||
var bkglightbasetoggle = document.getElementById('bkglightbasetoggle'); | |||
var bkgdarkbasetoggle = document.getElementById('bkgdarkbasetoggle'); | |||
var bkgwolftoggle = document.getElementById('bkgwolftoggle'); | |||
/* Create Canvas */ | |||
var bkgcanvas = document.getElementById("bkgpreview"); | |||
var bkgctx = bkgcanvas.getContext("2d"); | |||
var bkgWolfImage = new Image(); | |||
var bkgBackgroundImage = new Image(); | |||
function backgroundModal(backgroundname, backgroundurl) { | |||
function backgroundModal(backgroundname,backgroundurl) { | |||
/* Display all content when modal is opened */ | /* Display all content when modal is opened */ | ||
bkgmodal.style.display = "block"; | bkgmodal.style.display = "block"; | ||
bkgpreviewinput.style.display = "block"; | |||
bkgpreview.style.display = "block"; | |||
bkgtogglemenu.style.display = "block"; | |||
bkgtitle.innerHTML = backgroundname; /* Insert decor name */ | |||
/* Input default image */ | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.style.width = '100%'; | |||
bkgcanvas.width = this.naturalWidth; | |||
bkgcanvas.height = this.naturalHeight; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
bkgWolfImage.src = "/images/4/47/Basewolf_adult.png"; | |||
var img = | bkgWolfImage.onload = function() { | ||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | |||
} | } | ||
/* Check dropdown and checkboxes and remake canvas */ | |||
function toggleBkgReloadBehind() { | |||
if ( | if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult") { | ||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = adultdark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = adultlight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | |||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Select a stage from the options below") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
var img = | bkgBackgroundImage.onload = function() { | ||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = adultdark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = adultlight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | } | ||
} | } | ||
} else if ( | } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult [Motherly]") { | ||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = motherlydark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = motherlylight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | |||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult [Relaxed]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
var img = | bkgBackgroundImage.onload = function() { | ||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = relaxeddark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = relaxedlight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult [Sentinel]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = sentineldark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = sentinellight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | |||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adolescent") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
var img = | bkgBackgroundImage.onload = function() { | ||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = adoldark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = adollight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = pupdark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = puplight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | |||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
var img = | bkgBackgroundImage.onload = function() { | ||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = brachydark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = brachylight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = conjoineddark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = conjoinedlight; | |||
} | |||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
} | |||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Newborn]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = pupnewborndark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = pupnewbornlight; | |||
} | } | ||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
var img = | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = polycdark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = polyclight; | |||
} | } | ||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
var img = | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Polymelia]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = polymdark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = polymlight; | |||
} | } | ||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
var img = | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = sirendark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = sirenlight; | |||
} | } | ||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
var img = | |||
} | } | ||
} | } | ||
} else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Young]") { | |||
bkgBackgroundImage.src = backgroundurl; | |||
bkgBackgroundImage.onload = function() { | |||
bkgcanvas.width = bkgBackgroundImage.width; | |||
bkgcanvas.height = bkgBackgroundImage.height; | |||
bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
if (bkgdarkbasetoggle.checked) { | |||
bkgWolfImage.src = pupyoungdark; | |||
} else if (bkgwolftoggle.checked) { | |||
bkgWolfImage.src = nowolf; | |||
} else { | |||
bkgWolfImage.src = pupyounglight; | |||
} | } | ||
bkgWolfImage.onload = function() { | |||
bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); | |||
var img = bkgcanvas.toDataURL("image/png"); | |||
var img = | |||
} | } | ||
} | } | ||
} | |||
} | } | ||
bkgmodaldropdown.addEventListener("change", function() { | |||
toggleBkgReloadBehind(); | |||
}); | }); | ||
bkglightbasetoggle.addEventListener("click", function() { | |||
toggleBkgReloadBehind(); | |||
}); | }); | ||
bkgdarkbasetoggle.addEventListener("click", function() { | |||
toggleBkgReloadBehind(); | |||
}); | }); | ||
bkgwolftoggle.addEventListener("click", function() { | |||
toggleBkgReloadBehind(); | |||
}); | }); | ||
bkgcheckboxesbutton.addEventListener("click", function() { | |||
if (bkgcheckboxes.style.display === "none") { | |||
bkgcheckboxes.style.display = "block"; | |||
} else { | |||
bkgcheckboxes.style.display = "none"; | |||
} | |||
}); | |||
}; | |||
window.onclick = function(event) { | |||
if (event.target == modal) { | |||
modal.style.display = "none"; | |||
bkgmodaldropdown.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"; | |||
bkgmodaldropdown.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 == bkgmodal) { | |||
bkgmodal.style.display = "none"; | |||
bkgmodaldropdown.selectedIndex = 0; | |||
bkgpreview.style.display = "none"; | |||
bkgpreviewinput.style.display = "none"; | |||
bkgtogglemenu.style.display = "none"; | |||
bkgcheckboxes.style.display = "none"; | |||
bkglightbasetoggle.checked = true; | |||
bkgdarkbasetoggle.checked = false; | |||
bkgwolftoggle.checked = false; | |||
} else if (event.target == bkgmodalclose) { | |||
bkgmodal.style.display = "none"; | |||
bkgmodaldropdown.selectedIndex = 0; | |||
bkgpreview.style.display = "none"; | |||
bkgpreviewinput.style.display = "none"; | |||
bkgtogglemenu.style.display = "none"; | |||
bkgcheckboxes.style.display = "none"; | |||
bkglightbasetoggle.checked = true; | |||
bkgdarkbasetoggle.checked = false; | |||
bkgwolftoggle.checked = false; | |||
} | |||
} | |||
/* Disaster tables */ | /* Disaster tables */ |
Latest revision as of 19:37, 9 December 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"; } }); }; /* Background Previewers */ var bkgmodal = document.getElementById('backgroundModal'); var bkgmodalclose = document.getElementsByClassName('bkgmodalclose')[0]; var bkgmodaldropdown = document.getElementById('bkgpreviewoptions'); var bkgpreview = document.getElementById('bkgpreview'); var bkgpreviewinput = document.getElementById('bkgpreviewinput'); var bkgtitle = document.getElementById('bkgname'); var bkgtogglemenu = document.getElementById('bkgcheckboxesbutton'); var bkgcheckboxes = document.getElementById('bkgcheckboxes'); var bkglightbasetoggle = document.getElementById('bkglightbasetoggle'); var bkgdarkbasetoggle = document.getElementById('bkgdarkbasetoggle'); var bkgwolftoggle = document.getElementById('bkgwolftoggle'); /* Create Canvas */ var bkgcanvas = document.getElementById("bkgpreview"); var bkgctx = bkgcanvas.getContext("2d"); var bkgWolfImage = new Image(); var bkgBackgroundImage = new Image(); function backgroundModal(backgroundname, backgroundurl) { /* Display all content when modal is opened */ bkgmodal.style.display = "block"; bkgpreviewinput.style.display = "block"; bkgpreview.style.display = "block"; bkgtogglemenu.style.display = "block"; bkgtitle.innerHTML = backgroundname; /* Insert decor name */ /* Input default image */ bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.style.width = '100%'; bkgcanvas.width = this.naturalWidth; bkgcanvas.height = this.naturalHeight; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); bkgWolfImage.src = "/images/4/47/Basewolf_adult.png"; bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } /* Check dropdown and checkboxes and remake canvas */ function toggleBkgReloadBehind() { if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = adultdark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = adultlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Select a stage from the options below") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = adultdark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = adultlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult [Motherly]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = motherlydark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = motherlylight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult [Relaxed]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = relaxeddark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = relaxedlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adult [Sentinel]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = sentineldark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = sentinellight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Adolescent") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = adoldark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = adollight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = pupdark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = puplight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Brachycephaly]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = brachydark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = brachylight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Conjoined Twins]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = conjoineddark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = conjoinedlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Newborn]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = pupnewborndark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = pupnewbornlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Polycephaly]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = polycdark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = polyclight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Polymelia]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = polymdark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = polymlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Sirenomelia]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = sirendark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = sirenlight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } else if (bkgmodaldropdown.options[bkgmodaldropdown.selectedIndex].text === "Puppy [Young]") { bkgBackgroundImage.src = backgroundurl; bkgBackgroundImage.onload = function() { bkgcanvas.width = bkgBackgroundImage.width; bkgcanvas.height = bkgBackgroundImage.height; bkgctx.drawImage(bkgBackgroundImage, 0, 0, bkgcanvas.width, bkgcanvas.height); if (bkgdarkbasetoggle.checked) { bkgWolfImage.src = pupyoungdark; } else if (bkgwolftoggle.checked) { bkgWolfImage.src = nowolf; } else { bkgWolfImage.src = pupyounglight; } bkgWolfImage.onload = function() { bkgctx.drawImage(bkgWolfImage, 0, 0, bkgcanvas.width, bkgcanvas.height); var img = bkgcanvas.toDataURL("image/png"); } } } } bkgmodaldropdown.addEventListener("change", function() { toggleBkgReloadBehind(); }); bkglightbasetoggle.addEventListener("click", function() { toggleBkgReloadBehind(); }); bkgdarkbasetoggle.addEventListener("click", function() { toggleBkgReloadBehind(); }); bkgwolftoggle.addEventListener("click", function() { toggleBkgReloadBehind(); }); bkgcheckboxesbutton.addEventListener("click", function() { if (bkgcheckboxes.style.display === "none") { bkgcheckboxes.style.display = "block"; } else { bkgcheckboxes.style.display = "none"; } }); }; window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; bkgmodaldropdown.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"; bkgmodaldropdown.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 == bkgmodal) { bkgmodal.style.display = "none"; bkgmodaldropdown.selectedIndex = 0; bkgpreview.style.display = "none"; bkgpreviewinput.style.display = "none"; bkgtogglemenu.style.display = "none"; bkgcheckboxes.style.display = "none"; bkglightbasetoggle.checked = true; bkgdarkbasetoggle.checked = false; bkgwolftoggle.checked = false; } else if (event.target == bkgmodalclose) { bkgmodal.style.display = "none"; bkgmodaldropdown.selectedIndex = 0; bkgpreview.style.display = "none"; bkgpreviewinput.style.display = "none"; bkgtogglemenu.style.display = "none"; bkgcheckboxes.style.display = "none"; bkglightbasetoggle.checked = true; bkgdarkbasetoggle.checked = false; bkgwolftoggle.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; }