Initial backend

frontend/scripts/index.js

@@ -0,0 +1,69 @@
+let pages = null;
+const loadPages = () => {	
+	pages = document.querySelectorAll(".page");
+}
+
+const connectNavbar = () => {
+	const navItems = document.querySelectorAll(".navbar-item");
+
+	for (let item of navItems) {
+		item.addEventListener("click", (clickEvent) => {
+			const navItemPageId = item.dataset.pageName + "-page"
+			for (page of pages) {
+				if (page.id === navItemPageId) {
+					page.style.display = "block";
+				} else {
+					page.style.display = "none";
+				}
+			}
+		});
+	}
+};
+
+const connectProfile = () => {
+	const games        = document.querySelector("#profile-games");
+	const achievements = document.querySelector("#profile-achievements");
+
+	games.children[0].addEventListener("click", (clickEvent) => {
+		for (page of pages) {
+			if (page.id === "games-page") {
+				page.style.display = "block";
+			} else {
+				page.style.display = "none";
+			}
+		}
+	});
+
+	console.log(achievements.firstElement);
+	achievements.children[0].addEventListener("click", (clickEvent) => {
+		for (page of pages) {
+			if (page.id === "achievements-page") {
+				page.style.display = "block";
+			} else {
+				page.style.display = "none";
+			}
+		}
+	});
+}
+
+const loadFilters = () => {
+	const filters = document.querySelectorAll(".list-page-filter");
+	for (let filter of filters) {
+		filter.addEventListener("click", (clickEvent) => {
+			if (filter.classList.contains("selected")) {
+				filter.classList.remove("selected");
+			} else {
+				filter.classList.add("selected");
+			}
+		});
+	}
+}
+
+window.addEventListener("load", (loadEvent) => {
+	loadPages();
+
+	connectNavbar();
+	connectProfile();
+
+	loadFilters();
+});