Skip to content

Commit 869a414

Browse files
mtran-codemtran-code
committed
Add localstorage logic
1 parent ae24e91 commit 869a414

9 files changed

Lines changed: 556 additions & 298 deletions

File tree

‎.DS_Store‎

6 KB
Binary file not shown.

‎assets/.DS_Store‎

8 KB
Binary file not shown.

‎index.html‎

Lines changed: 129 additions & 112 deletions
Large diffs are not rendered by default.

‎js/common.js‎

Lines changed: 57 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,63 +3,75 @@ function getRndInteger(min, max) {
33
return Math.floor(Math.random() * (max - min)) + min;
44
}
55

6-
var buffer = 0; // used in checkOff function
6+
// Encapsulate buffer variable in a function to create a closure
7+
function createCheckOffFunction() {
8+
var buffer = 0; // used in checkOff function
9+
return function checkOff(elid, skipAnimation = false) {
10+
const element = document.getElementById(elid);
11+
const image = document.getElementById("stamp_" + elid);
12+
const newState = !element.classList.contains("checked");
13+
storeButtonState(elid, newState);
714

8-
function checkOff(elid) {
9-
let element = document.getElementById(elid);
10-
let image = document.getElementById("stamp_" + elid);
15+
// if button is already stamped, reset it to unstamped and exit
16+
if (element.classList.contains("checked")) {
17+
resetButton(elid);
18+
return;
19+
}
1120

12-
// if button is already stamped, reset it to unstamped
13-
if (element.classList.contains("checked")) {
14-
resetButton(elid);
15-
}
16-
// if button is not stamped, stamp it
17-
else {
18-
element.classList.toggle("checked");
21+
// if button is not stamped, stamp it
22+
element.classList.add("checked");
1923
image.style.opacity = 1;
2024

2125
// ====== STAMP ANIMATION CODE ======
26+
if (skipAnimation) {
27+
return;
28+
}
2229

2330
let theta = getRndInteger(-60, 60) * Math.PI / 180; // randomly rotate stamp by theta radians
31+
2432
let newAnim = document.createElement("style");
25-
// buffer: store up to 5 numbered animations at once
26-
buffer += 1;
27-
if (buffer > 5) {
28-
buffer = 1;
33+
// insert animation css
34+
newAnim.innerHTML = `
35+
.stampInAnim${buffer} {
36+
animation: stampInAnim${buffer} 150ms forwards;
37+
opacity: 1;
38+
}
39+
@keyframes stampInAnim${buffer} {
40+
0% {
41+
transform: matrix(1.5, 0, 0, 1.5, 0, -32);
42+
opacity: 0;
43+
}
44+
100% {
45+
transform: matrix(${Math.cos(theta)}, ${Math.sin(theta)}, ${Math.sin(theta) * -1}, ${Math.cos(theta)}, 0, 0);
46+
opacity: 1;
47+
}
2948
}
30-
newAnim.id = "anim" + buffer;
31-
if (document.getElementById(newAnim.id)) { // overwrite older animations from buffer
32-
document.head.removeChild(document.getElementById(newAnim.id));
49+
`;
50+
// Remove older animations from the buffer
51+
if (document.getElementById(`anim${buffer}`)) {
52+
document.head.removeChild(document.getElementById(`anim${buffer}`));
3353
}
34-
// insert animation css
35-
newAnim.innerHTML = "\
36-
.stampInAnim" + buffer + " {\
37-
animation: stampInAnim" + buffer + " 150ms forwards;\
38-
opacity: 1;\
39-
}\
40-
@keyframes stampInAnim" + buffer + " {\
41-
0% {\
42-
transform: matrix(1.5, 0, 0, 1.5, 0, -32);\
43-
opacity: 0;\
44-
}\
45-
100% {\
46-
transform: matrix(" + Math.cos(theta) + ", " + Math.sin(theta) + ", " + Math.sin(theta) * -1 + ", " + Math.cos(theta) + ", 0, 0);\
47-
opacity: 1;\
48-
}\
49-
}\
50-
"
54+
55+
// Add the animation style element to the document head
5156
document.head.appendChild(newAnim);
52-
image.classList.remove(...image.classList); // clear residual classes
57+
58+
// Apply the animation class to the image
59+
image.classList.remove(...image.classList); // Clear residual classes
5360
void image.offsetWidth;
54-
image.classList.add("stampInAnim" + buffer);
55-
image.addEventListener("animationend",
56-
function () {
57-
image.classList.remove("stampInAnim" + buffer);
58-
image.style.transform = "matrix(" + Math.cos(theta) + ", " + Math.sin(theta) + ", " + Math.sin(theta) * -1 + ", " + Math.cos(theta) + ", 0, 0)";
59-
}
60-
) // set static image after animation ends
61-
}
61+
image.classList.add(`stampInAnim${buffer}`);
62+
63+
// Listen for the animationend event to set static image after animation ends
64+
image.addEventListener("animationend", function () {
65+
image.classList.remove(`stampInAnim${buffer}`);
66+
image.style.transform = `matrix(${Math.cos(theta)}, ${Math.sin(theta)}, ${Math.sin(theta) * -1}, ${Math.cos(theta)}, 0, 0)`;
67+
});
68+
69+
// Increment the buffer value
70+
buffer = (buffer + 1) % 30; // Limit buffer to values 0-5
71+
};
6272
}
73+
// Use function
74+
var checkOff = createCheckOffFunction();
6375

6476
// toggle quest bulb completion
6577
function turnIn(elid) {
@@ -70,9 +82,5 @@ function turnIn(elid) {
7082
// toggle dev buttons
7183
function showDev() {
7284
let element = document.getElementById("devButtons");
73-
if (element.style.display === "block") {
74-
element.style.display = "none";
75-
} else {
76-
element.style.display = "block";
77-
}
85+
element.style.display = (element.style.display === "block") ? "none" : "block";
7886
}

‎js/constants.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
const BOSS_DAILY = [
2+
"daily_zak",
3+
"daily_mag",
4+
"daily_hilla",
5+
"daily_ht",
6+
"daily_pap",
7+
"daily_vl",
8+
"daily_ark",
9+
"daily_pb",
10+
"daily_pierre",
11+
"daily_vb",
12+
"daily_cqueen",
13+
"daily_vell",
14+
"daily_ranmaru",
15+
"daily_omnicln",
16+
"daily_julietta",
17+
"daily_gollux",
18+
];
19+
20+
const BOSS_WEEKLY = [
21+
"weekly_hilla",
22+
"weekly_pb",
23+
"weekly_cyg",
24+
"weekly_zak",
25+
"weekly_pierre",
26+
"weekly_vb",
27+
"weekly_cqueen",
28+
"weekly_vell",
29+
"weekly_pno",
30+
"weekly_mag",
31+
"weekly_pap",
32+
"weekly_akechi",
33+
"weekly_lotus",
34+
"weekly_damien",
35+
"weekly_lucid",
36+
"weekly_will",
37+
"weekly_gloom",
38+
"weekly_dnell",
39+
"weekly_vhilla",
40+
"weekly_seren"
41+
];
42+
43+
const ARCANE = [
44+
"arcane_vj1",
45+
"arcane_vj2",
46+
"arcane_chuchu1",
47+
"arcane_chuchu2",
48+
"arcane_lach1",
49+
"arcane_lach2",
50+
"arcane_arcana1",
51+
"arcane_arcana2",
52+
"arcane_morass1",
53+
"arcane_morass2",
54+
"arcane_esfera1",
55+
"arcane_esfera2"
56+
];
57+
const QUEST_DAILY = [
58+
"bulb_fairybros",
59+
"bulb_legion",
60+
"bulb_ursus",
61+
"bulb_mapletour",
62+
"bulb_commerci",
63+
"bulb_monsterpark",
64+
"bulb_yugarden",
65+
"bulb_phantomforest"
66+
];
67+
const QUEST_WEEKLY = [
68+
"bulb_guild",
69+
"bulb_dojo",
70+
"bulb_scrapyard",
71+
"bulb_worldtree",
72+
"bulb_kritias"
73+
];

‎js/reset.js‎

Lines changed: 15 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -22,75 +22,25 @@ function resetQuest(elid) {
2222
// reset all buttons/quests within specified section
2323
function resetAll(type) {
2424
if (type == "daily_boss") {
25-
resetButton("dzak");
26-
resetButton("dmag");
27-
resetButton("dhilla");
28-
resetButton("dht");
29-
resetButton("dpap");
30-
resetButton("dvl");
31-
resetButton("dark");
32-
resetButton("dpb");
33-
resetButton("dpierre");
34-
resetButton("dvb");
35-
resetButton("dcqueen");
36-
resetButton("dvell");
37-
resetButton("dranmaru");
38-
resetButton("domnicln");
39-
resetButton("djulietta");
40-
resetButton("dgollux");
41-
25+
for (let i = 0; i < BOSS_DAILY.length; i++) {
26+
resetButton(BOSS_DAILY[i]);
27+
}
4228
} else if (type == "weekly_boss") {
43-
resetButton("whilla");
44-
resetButton("wpb");
45-
resetButton("wcyg");
46-
resetButton("wzak");
47-
resetButton("wpierre");
48-
resetButton("wvb");
49-
resetButton("wcqueen");
50-
resetButton("wvell");
51-
resetButton("wpno");
52-
resetButton("wmag");
53-
resetButton("wpap");
54-
resetButton("wakechi");
55-
resetButton("wlotus");
56-
resetButton("wdamien");
57-
resetButton("wlucid");
58-
resetButton("wwill");
59-
resetButton("wgloom");
60-
resetButton("wdnell");
61-
resetButton("wvhilla");
62-
resetButton("wseren");
63-
29+
for (let i = 0; i < BOSS_WEEKLY.length; i++) {
30+
resetButton(BOSS_WEEKLY[i]);
31+
}
6432
} else if (type == "arcane") {
65-
resetButton("vj");
66-
resetButton("vjpq");
67-
resetButton("chuchu");
68-
resetButton("chuchupq");
69-
resetButton("lach");
70-
resetButton("lachpq");
71-
resetButton("arcana");
72-
resetButton("arcanapq");
73-
resetButton("morass");
74-
resetButton("morasspq");
75-
resetButton("esfera");
76-
resetButton("esferapq");
77-
33+
for (let i = 0; i < ARCANE.length; i++) {
34+
resetButton(ARCANE[i]);
35+
}
7836
} else if (type == "daily_quest") {
79-
resetQuest("bulb_fairybros");
80-
resetQuest("bulb_legion");
81-
resetQuest("bulb_ursus");
82-
resetQuest("bulb_mapletour");
83-
resetQuest("bulb_commerci");
84-
resetQuest("bulb_monsterpark");
85-
resetQuest("bulb_yugarden");
86-
resetQuest("bulb_phantomforest");
87-
37+
for (let i = 0; i < QUEST_DAILY.length; i++) {
38+
resetButton(QUEST_DAILY[i]);
39+
}
8840
} else if (type == "weekly_quest") {
89-
resetQuest("bulb_guild");
90-
resetQuest("bulb_dojo");
91-
resetQuest("bulb_scrapyard");
92-
resetQuest("bulb_worldtree");
93-
resetQuest("bulb_kritias");
41+
for (let i = 0; i < QUEST_WEEKLY.length; i++) {
42+
resetButton(QUEST_WEEKLY[i]);
43+
}
9444
} else {
9545
return;
9646
}

‎js/state.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
function storeButtonState(elid, state) {
2+
const currentTime = new Date().getTime();
3+
const buttonData = {
4+
state: state,
5+
timestamp: currentTime
6+
};
7+
localStorage.setItem(elid, JSON.stringify(buttonData));
8+
}
9+
10+
// Retrieve button state and check if it's from a previous day
11+
function getButtonState(elid) {
12+
const storedData = localStorage.getItem(elid);
13+
if (storedData) {
14+
const buttonData = JSON.parse(storedData);
15+
const storedTime = buttonData.timestamp;
16+
const currentTime = new Date().getTime();
17+
const isPreviousDay = isDifferentDay(storedTime, currentTime);
18+
19+
if (isPreviousDay) {
20+
// Ignore the stored data from a previous day
21+
localStorage.removeItem(elid);
22+
return null;
23+
}
24+
25+
// Return the button state
26+
return buttonData.state;
27+
}
28+
29+
return null; // No stored data found
30+
}
31+
32+
// Check if two timestamps are from different days
33+
function isDifferentDay(timestamp1, timestamp2) {
34+
const date1 = new Date(timestamp1);
35+
const date2 = new Date(timestamp2);
36+
return (
37+
date1.getUTCFullYear() !== date2.getUTCFullYear() ||
38+
date1.getUTCMonth() !== date2.getUTCMonth() ||
39+
date1.getUTCDate() !== date2.getUTCDate()
40+
);
41+
}
42+
43+
function initializeButtonStates() {
44+
for (let i = 0; i < ARCANE.length; i++) {
45+
let elid = ARCANE[i];
46+
let element = document.getElementById(elid);
47+
48+
// Retrieve the button state from localStorage
49+
let state = localStorage.getItem(elid);
50+
51+
if (state === "checked") {
52+
element.classList.add("checked");
53+
let image = document.getElementById("stamp_" + elid);
54+
image.style.opacity = 1;
55+
}
56+
}
57+
}
58+
59+
function initializeButtonStates() {
60+
const buttonIds = [
61+
...ARCANE,
62+
...BOSS_DAILY,
63+
...BOSS_WEEKLY,
64+
...QUEST_DAILY,
65+
...QUEST_WEEKLY
66+
];
67+
68+
buttonIds.forEach((elid) => {
69+
const storedState = getButtonState(elid);
70+
if (storedState === null) {
71+
// No stored state or from a previous day, perform initial setup
72+
resetButton(elid);
73+
} else {
74+
// Use the stored state
75+
if (storedState) {
76+
checkOff(elid, true);
77+
}
78+
}
79+
});
80+
}
81+
82+
83+
// Call the initialization function on page load
84+
window.addEventListener("load", initializeButtonStates);

0 commit comments

Comments
 (0)