Skip to content

Commit d541939

Browse files
om3ga6400om3ga6400
authored
Some JS simplification
1 parent 039f5f2 commit d541939

5 files changed

Lines changed: 69 additions & 198 deletions

File tree

‎js/christmas.js‎

Lines changed: 12 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,38 @@
11
(async () => {
22
await loadFull(tsParticles);
3-
43
await tsParticles.load({
54
id: "tsparticles",
65
options: {
7-
background: {
8-
color: "#00873E",
9-
},
6+
background: { color: "#00873E" },
107
particles: {
11-
number: {
12-
value: 150,
13-
density: {
14-
enable: true,
15-
area: 1000,
16-
},
17-
},
18-
color: {
19-
value: "#fff",
20-
},
8+
number: { value: 150, density: { enable: true, area: 1000 } },
9+
color: { value: "#fff" },
2110
shape: {
2211
type: "circle",
2312
options: {
24-
image: {
25-
src: "img/github.svg",
26-
width: 100,
27-
height: 100,
28-
},
29-
polygon: {
30-
sides: 5,
31-
},
13+
image: { src: "img/github.svg", width: 100, height: 100 },
14+
polygon: { sides: 5 },
3215
},
3316
},
3417
opacity: {
3518
value: 0.5,
3619
random: false,
37-
animation: {
38-
enable: true,
39-
speed: 0.5,
40-
minimumValue: 0.016,
41-
sync: false,
42-
},
43-
},
44-
size: {
45-
value: 5,
46-
random: {
47-
enable: true,
48-
minimumValue: 0.1,
49-
},
50-
},
51-
move: {
52-
enable: true,
53-
speed: 0.5,
54-
direction: "bottom",
55-
random: true,
20+
animation: { enable: true, speed: 0.5, minimumValue: 0.016, sync: false },
5621
},
22+
size: { value: 5, random: { enable: true, minimumValue: 0.1 } },
23+
move: { enable: true, speed: 0.5, direction: "bottom", random: true },
5724
},
5825
interactivity: {
5926
events: {
60-
onHover: {
61-
enable: false,
62-
mode: "grab",
63-
},
64-
onClick: {
65-
enable: false,
66-
mode: "push",
67-
},
27+
onHover: { enable: false, mode: "grab" },
28+
onClick: { enable: false, mode: "push" },
6829
resize: true,
6930
},
7031
modes: {
71-
grab: {
72-
distance: 400,
73-
links: {
74-
opacity: 1,
75-
},
76-
},
77-
bubble: {
78-
distance: 400,
79-
size: 40,
80-
duration: 2,
81-
opacity: 8,
82-
speed: 3,
83-
},
32+
grab: { distance: 400, links: { opacity: 1 } },
33+
bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
8434
},
8535
},
8636
},
8737
});
8838
})();
89-
90-
console.log("callback - tsparticles.js config loaded");

‎js/disguise.js‎

Lines changed: 11 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,26 @@
11
document.addEventListener("DOMContentLoaded", () => {
22
const checkbox = document.getElementById("gc-disguise-toggle");
33

4-
const enableDisguise = () => {
5-
document.title = "Google Classroom";
6-
4+
const updateDisguise = (enable) => {
5+
document.title = enable ? "Google Classroom" : "Jet Yeh's";
76
let link = document.querySelector("link[rel~='icon']");
87
if (!link) {
98
link = document.createElement("link");
109
link.rel = "icon";
1110
document.head.appendChild(link);
1211
}
13-
link.href = "/img/favicon-gc-16x16.png";
14-
};
15-
16-
const disableDisguise = () => {
17-
document.title = "Jet Yeh's";
18-
19-
let link = document.querySelector("link[rel~='icon']");
20-
if (link) {
21-
link.href = "/img/favicon-32x32.png";
22-
}
12+
link.href = enable ? "/img/favicon-gc-16x16.png" : "/img/favicon-32x32.png";
2313
};
2414

25-
if (localStorage.getItem("gcDisguise") === "true") {
26-
enableDisguise();
15+
const isEnabled = localStorage.getItem("gcDisguise") === "true";
16+
if (isEnabled) {
17+
updateDisguise(true);
2718
if (checkbox) checkbox.checked = true;
2819
}
2920

30-
if (checkbox) {
31-
checkbox.addEventListener("change", () => {
32-
if (checkbox.checked) {
33-
localStorage.setItem("gcDisguise", "true");
34-
enableDisguise();
35-
} else {
36-
localStorage.setItem("gcDisguise", "false");
37-
disableDisguise();
38-
}
39-
});
40-
} else {
41-
if (localStorage.getItem("gcDisguise") === "true") {
42-
enableDisguise();
43-
}
44-
}
21+
checkbox?.addEventListener("change", () => {
22+
const isChecked = checkbox.checked;
23+
localStorage.setItem("gcDisguise", isChecked);
24+
updateDisguise(isChecked);
25+
});
4526
});

‎js/renderGames.js‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,26 @@
11
const container = document.getElementById("game-container");
22

3-
games.forEach((game, index) => {
4-
const div = document.createElement("div");
5-
div.className = `column gameDiv ${game.classes}`;
6-
div.setAttribute("name", game.name);
7-
div.style.opacity = 0;
8-
div.style.transform = "translateY(30px)";
9-
div.style.transition = "opacity 0.8s ease, transform 0.8s ease";
3+
if (container && Array.isArray(games)) {
4+
games.forEach((game, i) => {
5+
const div = document.createElement("div");
6+
div.className = `column gameDiv ${game.classes}`;
7+
div.setAttribute("name", game.name);
8+
div.innerHTML = `<a href="${game.link}"><div class="content"><img loading="lazy" src="${game.img}" alt="${game.name}" style="width:100%"><h4>${game.name}</h4></div></a>`;
109

11-
const delay = index < 8 ? index * 220 : 8 * 220 + (index - 8) * 60;
12-
div.style.transitionDelay = delay + "ms";
10+
Object.assign(div.style, {
11+
opacity: "0",
12+
transform: "translateY(30px)",
13+
transition: "opacity 0.8s ease, transform 0.8s ease",
14+
});
1315

14-
div.innerHTML = `
15-
<a href="${game.link}">
16-
<div class="content">
17-
<img loading="lazy" src="${game.img}" alt="${game.name}" style="width:100%">
18-
<h4>${game.name}</h4>
19-
</div>
20-
</a>
21-
`;
22-
container.appendChild(div);
23-
});
16+
container.appendChild(div);
2417

25-
requestAnimationFrame(() => {
26-
const allGames = document.querySelectorAll(".gameDiv");
27-
allGames.forEach((el) => {
28-
el.style.opacity = 1;
29-
el.style.transform = "translateY(0)";
18+
setTimeout(
19+
() => {
20+
div.style.opacity = "1";
21+
div.style.transform = "translateY(0)";
22+
},
23+
i < 8 ? i * 220 : 1760 + (i - 8) * 60,
24+
);
3025
});
31-
});
26+
}

‎js/seasonal.js‎

Lines changed: 22 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,40 @@
11
document.addEventListener("DOMContentLoaded", () => {
2-
console.log("Seasonal script initialized");
2+
const isChristmas = new Date().getMonth() === 11;
3+
const checkbox = document.getElementById("christmas-theme-toggle");
34

4-
const isWithinChristmasPeriod = () => {
5-
const today = new Date();
6-
const currentMonth = today.getMonth();
7-
return currentMonth === 11;
5+
const setIcon = (christmas) => {
6+
const icon = document.querySelector('.sidebar img[title="icon"]');
7+
if (icon) icon.src = `/img/icon${christmas ? "-christmas" : ""}.png`;
88
};
99

10-
const updateIcon = () => {
11-
const iconElement = document.querySelector('.sidebar img[title="icon"]');
12-
if (!iconElement) return;
13-
const basePath = "/img/";
14-
const enabled = localStorage.getItem("christmasThemePreference") === "enabled";
15-
if (enabled && isWithinChristmasPeriod()) {
16-
iconElement.src = `${basePath}icon-christmas.png`;
17-
} else {
18-
iconElement.src = `${basePath}icon.png`;
19-
}
20-
};
21-
22-
const loadThemeScript = (scriptPath) => {
23-
const existingScript = document.getElementById("dynamic-theme-script");
24-
if (existingScript) existingScript.remove();
10+
const loadScript = (src) => {
11+
const id = "dynamic-theme-script";
12+
document.getElementById(id)?.remove();
2513
const script = document.createElement("script");
26-
script.id = "dynamic-theme-script";
27-
script.src = scriptPath;
28-
script.async = true;
14+
Object.assign(script, { id, src, async: true });
2915
document.head.appendChild(script);
3016
};
3117

32-
const applyChristmasTheme = () => {
33-
console.log("Applying Christmas theme");
34-
document.body.classList.add("christmas-theme");
35-
updateIcon();
36-
loadThemeScript("/js/christmas.js");
37-
};
18+
const updateTheme = () => {
19+
const enabled = localStorage.getItem("christmasThemePreference") === "enabled";
20+
const active = enabled && isChristmas;
3821

39-
const removeChristmasTheme = () => {
40-
console.log("Removing Christmas theme");
41-
document.body.classList.remove("christmas-theme");
42-
updateIcon();
43-
loadThemeScript("/js/usual.js");
22+
document.body.classList.toggle("christmas-theme", active);
23+
setIcon(active);
24+
loadScript(active ? "/js/christmas.js" : "/js/usual.js");
4425
};
4526

46-
const toggleCheckbox = document.getElementById("christmas-theme-toggle");
47-
48-
let preference = localStorage.getItem("christmasThemePreference");
49-
if (!preference) {
50-
preference = "enabled";
27+
if (!localStorage.getItem("christmasThemePreference")) {
5128
localStorage.setItem("christmasThemePreference", "enabled");
5229
}
5330

54-
if (preference === "enabled" && isWithinChristmasPeriod()) {
55-
applyChristmasTheme();
56-
} else {
57-
removeChristmasTheme();
58-
}
59-
60-
if (toggleCheckbox) {
61-
toggleCheckbox.checked = preference === "enabled";
62-
63-
toggleCheckbox.addEventListener("change", () => {
64-
const newPref = toggleCheckbox.checked ? "enabled" : "disabled";
65-
localStorage.setItem("christmasThemePreference", newPref);
66-
67-
if (newPref === "enabled" && isWithinChristmasPeriod()) {
68-
applyChristmasTheme();
69-
} else {
70-
removeChristmasTheme();
71-
}
31+
if (checkbox) {
32+
checkbox.checked = localStorage.getItem("christmasThemePreference") === "enabled";
33+
checkbox.addEventListener("change", () => {
34+
localStorage.setItem("christmasThemePreference", checkbox.checked ? "enabled" : "disabled");
35+
updateTheme();
7236
});
7337
}
7438

75-
updateIcon();
39+
updateTheme();
7640
});

‎js/usual.js‎

Lines changed: 4 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,14 @@
11
(async () => {
22
await loadFull(tsParticles);
3-
43
await tsParticles.load({
54
id: "tsparticles",
65
options: {
76
particles: {
8-
number: {
9-
value: 100,
10-
},
11-
size: {
12-
value: 1,
13-
},
14-
links: {
15-
enable: true,
16-
distance: 115,
17-
opacity: 0.25,
18-
},
19-
move: {
20-
enable: true,
21-
speed: 1.75,
22-
outModes: {
23-
default: "bounce",
24-
},
25-
},
7+
number: { value: 100 },
8+
size: { value: 1 },
9+
links: { enable: true, distance: 115, opacity: 0.25 },
10+
move: { enable: true, speed: 1.75, outModes: { default: "bounce" } },
2611
},
2712
},
2813
});
2914
})();
30-
31-
console.log("callback - tsparticles.js config loaded");

0 commit comments

Comments
 (0)