|
1 | | -document.addEventListener("DOMContentLoaded", () => { |
2 | | - const loadingBar = document.getElementById("loading-bar"); |
3 | | - loadingBar.style.width = "100%"; |
4 | | - setTimeout(() => { |
5 | | - loadingBar.style.opacity = 0; |
6 | | - setTimeout(() => (loadingBar.style.display = "none"), 500); |
7 | | - }, 500); |
8 | | - |
9 | | - const goToTopButton = document.getElementById("go-to-top-button"); |
10 | | - if (goToTopButton) { |
11 | | - goToTopButton.addEventListener("click", () => { |
12 | | - window.scroll({ top: 0, behavior: "smooth" }); |
13 | | - }); |
14 | | - } |
15 | | - |
16 | | - window.addEventListener("scroll", () => { |
17 | | - const progress = document.getElementById("progress"); |
18 | | - const value = document.getElementById("progress-value"); |
19 | | - const pos = document.documentElement.scrollTop; |
20 | | - const calcHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; |
21 | | - const scrollValue = Math.round((pos * 100) / calcHeight); |
22 | | - progress.style.background = `conic-gradient(#A61414 ${scrollValue}%, #3D3D3D ${scrollValue}%)`; |
23 | | - }); |
24 | | - |
25 | | - window.dispatchEvent(new Event("scroll")); |
26 | | - |
27 | | - filterSelection("all"); |
| 1 | +const getById = (id) => document.getElementById(id); |
| 2 | +const querySelectorAll = (selector) => document.querySelectorAll(selector); |
28 | 3 |
|
29 | | - const buttons = document.getElementsByClassName("selectable"); |
30 | | - const games = document.getElementsByClassName("gameDiv"); |
31 | | - |
32 | | - function filterSelection(c) { |
33 | | - const x = document.getElementsByClassName("column"); |
34 | | - const category = c === "all" ? "" : c; |
35 | | - for (let i = 0; i < x.length; i++) { |
36 | | - w3RemoveClass(x[i], "show"); |
37 | | - if (x[i].className.indexOf(category) > -1) w3AddClass(x[i], "show"); |
38 | | - } |
39 | | - } |
40 | | - |
41 | | - function w3AddClass(element, name) { |
42 | | - const arr1 = element.className.split(" "); |
43 | | - const arr2 = name.split(" "); |
44 | | - for (let i = 0; i < arr2.length; i++) { |
45 | | - if (!arr1.includes(arr2[i])) { |
46 | | - element.className += " " + arr2[i]; |
47 | | - } |
48 | | - } |
49 | | - } |
50 | | - |
51 | | - function w3RemoveClass(element, name) { |
52 | | - let arr1 = element.className.split(" "); |
53 | | - const arr2 = name.split(" "); |
54 | | - arr1 = arr1.filter((cls) => !arr2.includes(cls)); |
55 | | - element.className = arr1.join(" "); |
| 4 | +document.addEventListener("DOMContentLoaded", () => { |
| 5 | + const loadingBar = getById("loading-bar"); |
| 6 | + if (loadingBar) { |
| 7 | + loadingBar.style.width = "100%"; |
| 8 | + setTimeout(() => { |
| 9 | + loadingBar.style.opacity = 0; |
| 10 | + setTimeout(() => (loadingBar.style.display = "none"), 500); |
| 11 | + }, 500); |
56 | 12 | } |
57 | 13 |
|
58 | | - let selectedTopic = "all"; |
| 14 | + getById("go-to-top-button")?.addEventListener("click", () => window.scroll({ top: 0, behavior: "smooth" })); |
59 | 15 |
|
60 | | - window.switchGame = function (x) { |
61 | | - selectedTopic = x; |
62 | | - for (let i = 0; i < buttons.length; i++) { |
63 | | - const buttonName = buttons[i].getAttribute("name"); |
64 | | - if (selectedTopic === buttonName) { |
65 | | - buttons[i].classList.add("selectedButton"); |
66 | | - buttons[i].classList.remove("selectButton"); |
67 | | - } else { |
68 | | - buttons[i].classList.remove("selectedButton"); |
69 | | - buttons[i].classList.add("selectButton"); |
70 | | - } |
71 | | - } |
72 | | - |
73 | | - for (let i = 0; i < games.length; i++) { |
74 | | - games[i].style.display = games[i].classList.contains(selectedTopic) ? "" : "none"; |
75 | | - } |
| 16 | + const progressIndicator = getById("progress"); |
| 17 | + const updateProgress = () => { |
| 18 | + if (!progressIndicator) return; |
| 19 | + const { scrollTop, scrollHeight, clientHeight } = document.documentElement; |
| 20 | + const scrollPercentage = Math.round((scrollTop * 100) / (scrollHeight - clientHeight)) || 0; |
| 21 | + progressIndicator.style.background = `conic-gradient(#A61414 ${scrollPercentage}%, #3D3D3D ${scrollPercentage}%)`; |
76 | 22 | }; |
77 | | - |
78 | | - window.searchFunction = function () { |
79 | | - const input = document.getElementById("myinput"); |
80 | | - const filter = input.value.toUpperCase(); |
81 | | - const li = document.getElementsByClassName("gameDiv"); |
82 | | - for (let i = 0; i < li.length; i++) { |
83 | | - const gameName = li[i].getAttribute("name").toUpperCase(); |
84 | | - if (gameName.includes(filter) && li[i].classList.contains(selectedTopic)) { |
85 | | - li[i].style.display = ""; |
86 | | - } else { |
87 | | - li[i].style.display = "none"; |
88 | | - } |
89 | | - } |
| 23 | + window.addEventListener("scroll", updateProgress); |
| 24 | + updateProgress(); |
| 25 | + |
| 26 | + const categoryButtons = querySelectorAll(".selectable"); |
| 27 | + const gameElements = querySelectorAll(".gameDiv"); |
| 28 | + let selectedCategory = "all"; |
| 29 | + |
| 30 | + window.switchGame = (category) => { |
| 31 | + selectedCategory = category; |
| 32 | + categoryButtons.forEach((button) => { |
| 33 | + const isMatch = button.getAttribute("name") === selectedCategory; |
| 34 | + button.classList.toggle("selectedButton", isMatch); |
| 35 | + button.classList.toggle("selectButton", !isMatch); |
| 36 | + }); |
| 37 | + gameElements.forEach((game) => (game.style.display = selectedCategory === "all" || game.classList.contains(selectedCategory) ? "" : "none")); |
90 | 38 | }; |
91 | 39 |
|
92 | | - const mySong = document.getElementById("mySong"); |
93 | | - const icon = document.getElementById("icon"); |
| 40 | + window.searchFunction = () => { |
| 41 | + const searchFilter = (getById("myinput")?.value || "").trim().toUpperCase(); |
| 42 | + gameElements.forEach((game) => { |
| 43 | + const gameName = (game.getAttribute("name") || "").toUpperCase(); |
| 44 | + game.style.display = gameName.includes(searchFilter) && (selectedCategory === "all" || game.classList.contains(selectedCategory)) ? "" : "none"; |
| 45 | + }); |
| 46 | + }; |
94 | 47 |
|
95 | | - if (mySong && icon) { |
96 | | - icon.addEventListener("click", () => { |
97 | | - if (mySong.paused) { |
98 | | - mySong.play(); |
99 | | - icon.src = "img/pause.png"; |
100 | | - } else { |
101 | | - mySong.pause(); |
102 | | - icon.src = "img/play.png"; |
103 | | - } |
| 48 | + const [audioPlayer, playPauseIcon] = [getById("mySong"), getById("icon")]; |
| 49 | + if (audioPlayer && playPauseIcon) { |
| 50 | + playPauseIcon.addEventListener("click", () => { |
| 51 | + audioPlayer.paused ? audioPlayer.play() : audioPlayer.pause(); |
| 52 | + playPauseIcon.src = `img/${audioPlayer.paused ? "play" : "pause"}.png`; |
104 | 53 | }); |
105 | 54 | } |
| 55 | + |
| 56 | + window.switchGame("all"); |
106 | 57 | }); |
107 | 58 |
|
108 | 59 | async function fetchQuotes() { |
| 60 | + const quoteElement = getById("random-quote"); |
| 61 | + if (!quoteElement) return; |
109 | 62 | try { |
110 | | - const response = await fetch("../media/quotes.json"); |
111 | | - if (!response.ok) { |
112 | | - throw new Error(`HTTP error! status: ${response.status}`); |
113 | | - } |
114 | | - |
115 | | - const quotes = await response.json(); |
116 | | - const randomQuoteObj = quotes[Math.floor(Math.random() * quotes.length)]; |
117 | | - const fullQuote = `"${randomQuoteObj.quote}" - ${randomQuoteObj.author}`; |
118 | | - typeEffect(fullQuote, "random-quote", 50); |
119 | | - } catch (error) { |
120 | | - console.error("Error fetching quotes:", error); |
121 | | - document.getElementById("random-quote").innerHTML = `"Error loading quote."`; |
122 | | - } |
123 | | -} |
124 | | - |
125 | | -function typeEffect(text, elementId, delay) { |
126 | | - const element = document.getElementById(elementId); |
127 | | - element.innerHTML = ""; |
128 | | - let i = 0; |
129 | | - |
130 | | - function type() { |
131 | | - if (i < text.length) { |
132 | | - element.innerHTML += text.charAt(i); |
133 | | - i++; |
134 | | - setTimeout(type, delay); |
135 | | - } |
| 63 | + const quotes = await (await fetch("../media/quotes.json")).json(); |
| 64 | + const { quote, author } = quotes[Math.floor(Math.random() * quotes.length)] || {}; |
| 65 | + const quoteText = quote ? `"${quote}" - ${author || "Unknown"}` : "No quotes found."; |
| 66 | + quoteElement.textContent = ""; |
| 67 | + let charIndex = 0; |
| 68 | + const typewriterTimer = setInterval(() => { |
| 69 | + quoteElement.textContent += quoteText[charIndex++]; |
| 70 | + if (charIndex >= quoteText.length) clearInterval(typewriterTimer); |
| 71 | + }, 50); |
| 72 | + } catch { |
| 73 | + quoteElement.textContent = "Error loading quote."; |
136 | 74 | } |
137 | | - |
138 | | - type(); |
139 | 75 | } |
140 | 76 |
|
141 | 77 | fetchQuotes(); |
0 commit comments