From 9f9970b20849578f6270a08ab54177f2da7bcd17 Mon Sep 17 00:00:00 2001 From: FallBackITA27 Date: Sun, 9 Jun 2024 09:34:10 +0200 Subject: [PATCH] moved map style settings to a different script --- gtav-interactive-map/index.html | 4 ++ .../menus/settings/mapStyle.js | 43 +++++++++++++++ gtav-interactive-map/script.js | 54 ++----------------- 3 files changed, 51 insertions(+), 50 deletions(-) create mode 100644 gtav-interactive-map/menus/settings/mapStyle.js diff --git a/gtav-interactive-map/index.html b/gtav-interactive-map/index.html index 9a7cb0b..ecdd16b 100644 --- a/gtav-interactive-map/index.html +++ b/gtav-interactive-map/index.html @@ -41,11 +41,14 @@ + + + @@ -67,6 +70,7 @@ + diff --git a/gtav-interactive-map/menus/settings/mapStyle.js b/gtav-interactive-map/menus/settings/mapStyle.js new file mode 100644 index 0000000..9d2a47a --- /dev/null +++ b/gtav-interactive-map/menus/settings/mapStyle.js @@ -0,0 +1,43 @@ +function mapStyleSettings() { + resetContentPart2(); + const names = ["game", "render", "print"]; + const namesDisp = ["In Game", "Satellite", "Game Manual"]; + + let optionDiv = document.createElement("div"); + optionDiv.innerHTML = "Map Style"; + + let interactiveDiv = document.createElement("div"); + + let img1 = document.createElement("img"); + img1.src = "./websiteIcons/small_arr_left.svg"; + interactiveDiv.appendChild(img1); + + interactiveDiv.innerHTML += `

${ + namesDisp[names.indexOf(saveData.selectedTileLayer)] + }

`; + + let img2 = document.createElement("img"); + img2.src = "./websiteIcons/small_arr_right.svg"; + interactiveDiv.appendChild(img2); + + interactiveDiv.style = "display: flex; align-items: center;"; + optionDiv.appendChild(interactiveDiv); + + contentPart2.append(optionDiv); + + function refreshMap(idx) { + interactiveDiv.children[1].innerHTML = namesDisp[idx]; + constantData.tileLayers.mainMap[saveData.selectedTileLayer].remove(); + saveData.selectedTileLayer = names[idx]; + saveDataSave(); + constantData.tileLayers.mainMap[saveData.selectedTileLayer].addTo(map); + document.getElementById("map").style.background = + constantData.oceanColors.mainMap[saveData.selectedTileLayer]; + } + + optionDiv.addEventListener("click", function () { + let idx = names.indexOf(saveData.selectedTileLayer) + 1; + if (idx === 3) idx = 0; + refreshMap(idx); + }); +} diff --git a/gtav-interactive-map/script.js b/gtav-interactive-map/script.js index e2a8c0b..1c97685 100644 --- a/gtav-interactive-map/script.js +++ b/gtav-interactive-map/script.js @@ -233,56 +233,10 @@ Array.from(document.getElementById("menuScroll").children).forEach((r) => mainContent.classList.add("styleClassic"); /* Map Style Options */ - let mapStyleButton = addToContentPart1List("Map Style"); - mapStyleButton.addEventListener("click", function () { - resetContentPart2(); - const names = ["game", "render", "print"]; - const namesDisp = ["In Game", "Satellite", "Game Manual"]; - - let optionDiv = document.createElement("div"); - optionDiv.innerHTML = "Map Style"; - - let interactiveDiv = document.createElement("div"); - - let img1 = document.createElement("img"); - img1.src = "./websiteIcons/small_arr_left.svg"; - interactiveDiv.appendChild(img1); - - interactiveDiv.innerHTML += `

${ - namesDisp[names.indexOf(saveData.selectedTileLayer)] - }

`; - - let img2 = document.createElement("img"); - img2.src = "./websiteIcons/small_arr_right.svg"; - interactiveDiv.appendChild(img2); - - interactiveDiv.style = "display: flex; align-items: center;"; - optionDiv.appendChild(interactiveDiv); - - contentPart2.append(optionDiv); - - function refreshMap(idx) { - interactiveDiv.children[1].innerHTML = namesDisp[idx]; - constantData.tileLayers.mainMap[ - saveData.selectedTileLayer - ].remove(); - saveData.selectedTileLayer = names[idx]; - saveDataSave(); - constantData.tileLayers.mainMap[ - saveData.selectedTileLayer - ].addTo(map); - document.getElementById("map").style.background = - constantData.oceanColors.mainMap[ - saveData.selectedTileLayer - ]; - } - - optionDiv.addEventListener("click", function () { - let idx = names.indexOf(saveData.selectedTileLayer) + 1; - if (idx === 3) idx = 0; - refreshMap(idx); - }); - }); + addToContentPart1List("Map Style").addEventListener( + "click", + mapStyleSettings + ); /* Debug Options */ addToContentPart1List("Debug").addEventListener(