Merge pull request #681 from Codixer/imskyyc-patch-1

Add view toggle buttons

web/_js/main.js

@@ -136,6 +136,33 @@ async function init(){
 		}
 	}
 	
+	function changeOverlapMode(){
+		console.log(mode)
+		switch(mode){
+			case "overlap":
+				window.location.href = "?mode=explore"
+				break;
+			case "explore":
+				window.location.href = "?"
+				break;
+			default:
+				window.location.href = "?mode=overlap"
+				break;
+		}
+
+		return false;
+	}
+
+	const modeMap = {
+		"view": "Overlap",
+		"overlap": "Explore",
+		"explore": "Atlas"
+	}
+
+	const toggleMode = document.getElementById("toggleMode");
+	toggleMode.onclick = changeOverlapMode;
+	toggleMode.innerHTML = modeMap[mode];
+
 	document.getElementById("loading").style.display = "none";
 
 	document.getElementById("zoomInButton").addEventListener("click", function(e){

web/index.html

@@ -106,8 +106,8 @@ <h1 id="title">The /r/place Atlas</h1>
 			<div id="entriesListContainer">
 				<nav>
 					<a id="aboutLink" href="./about.html">About</a>
-					<a id="drawLink" href="./index.html?mode=draw">Contribute</a>
+					<a id="drawLink" href="./index.html?mode=draw">Draw</a>
-					<a id="overlapLink" href="./index.html?mode=overlap">Overlap</a>
+					<a id="toggleMode" onclick="return changeOverlapMode()">Overlap</a>
 					<button title="Discord" onclick="window.location.href='https://discord.gg/pJkm23b2nA'">
 						<img class="Discord" alt="Discord Logo" src="./_img/discord.svg">
 					</button>