-
Notifications
You must be signed in to change notification settings - Fork 1
/
app.js
190 lines (159 loc) · 5.88 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
document.addEventListener("DOMContentLoaded", function () {
const loadingScreen = document.getElementById("loading-screen");
const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
const countdownElement = document.createElement("div");
countdownElement.id = "countdown-timer";
document.querySelector(".content").appendChild(countdownElement);
function updateProgress(percentage) {
progressBar.style.width = percentage + "%";
progressText.textContent = percentage + "%";
}
function startCountdown(endTimestamp) {
function updateCountdown() {
const now = Math.floor(Date.now() / 1000);
const secondsLeft = endTimestamp - now;
if (secondsLeft <= 0) {
countdownElement.textContent = "Event has ended.";
clearInterval(countdownInterval);
return;
}
const hours = Math.floor(secondsLeft / 3600);
const minutes = Math.floor((secondsLeft % 3600) / 60);
const seconds = secondsLeft % 60;
countdownElement.textContent = `Time left: ${hours}h ${minutes}m ${seconds}s`;
}
updateCountdown();
const countdownInterval = setInterval(updateCountdown, 100);
}
async function fetchAndDisplayLangs() {
try {
// Step 1: Fetch the events JSON
const eventsResponse = await fetch("/events", {
method: "GET",
mode: "cors", // Enable CORS
headers: {
Accept: "application/json", // Set headers if needed
},
});
if (!eventsResponse.ok) {
throw new Error(`HTTP error! status: ${eventsResponse.status}`);
}
const eventsData = await eventsResponse.json();
// Debugging the response structure
console.log("Events API Response:", eventsData);
// Access the CID and end timestamp from the first event in the 'events' array
const { cid, end } = eventsData.events[0];
if (!cid) throw new Error("CID not found");
console.log("CID found:", cid);
console.log("End timestamp found:", end);
// Start the countdown timer
startCountdown(end);
// Step 2: Fetch the zip file using the CID
const blobResponse = await fetch(`/blob?cid=${cid}`, {
method: "GET",
mode: "cors", // Enable CORS
headers: {
Accept: "application/zip", // Set headers if needed
},
});
if (!blobResponse.ok) {
console.log("Blob response:", blobResponse);
throw new Error(`HTTP error! status: ${blobResponse.status}`);
}
const reader = blobResponse.body.getReader();
const contentLength = +blobResponse.headers.get("Content-Length");
let receivedLength = 0;
const chunks = [];
while (true) {
const { done, value } = await reader.read();
if (done) break;
chunks.push(value);
receivedLength += value.length;
const percentage = Math.round((receivedLength / contentLength) * 100);
updateProgress(percentage);
}
const blob = new Blob(chunks);
// Step 3: Unzip the file using JSZip
const zip = await JSZip.loadAsync(blob);
// Fetch langs.json
const langsJson = await zip.file("langs.json").async("string");
const langsArray = JSON.parse(langsJson);
// Fetch meta.json
const metaJson = await zip.file("meta.json").async("string");
const metaData = JSON.parse(metaJson);
// Set background based on the state.glade value
setBackground(metaData.state.glade);
// Initialize the language dropdown and display
setupLanguageSelector(langsArray);
// Hide the loading screen
loadingScreen.style.display = "none";
} catch (error) {
console.error("Error fetching or processing data:", error);
}
}
function setBackground(gladeState) {
const body = document.body;
let backgroundImage = "";
// Set the background image based on the glade state
switch (gladeState) {
case "Summer":
backgroundImage = 'url("assets/summer.jpg")';
break;
case "Winter":
backgroundImage = 'url("assets/winter.jpg")';
break;
case "Flowery":
backgroundImage = 'url("assets/flowery.jpg")';
break;
case "Autumn":
backgroundImage = 'url("assets/autumn.jpg")';
break;
case "Olden":
backgroundImage = 'url("assets/olden.jpg")';
break;
default:
backgroundImage = 'url("assets/default.jpg")'; // Fallback image
}
// Apply the background image to the body
body.style.backgroundImage = backgroundImage;
body.style.height = "100%";
}
function setupLanguageSelector(langsArray) {
const selectElement = document.getElementById("lang-select");
const outputElement = document.getElementById("langs-output");
// List of language options (you can adjust these names as needed)
const languageOptions = [
"English",
"German",
"Spanish",
"French",
"Italian",
"Japanese",
"Korean",
"Polish",
"Portuguese",
"Russian",
"Swedish",
"Turkish",
"Ukrainian",
"Chinese",
];
// Populate the dropdown with language options
languageOptions.forEach((language, index) => {
const option = document.createElement("option");
option.value = index; // Use the index to reference the language in the array
option.textContent = language;
selectElement.appendChild(option);
});
// Display the default language (English, first item in array)
outputElement.textContent = langsArray[0];
// Add event listener to update the text when language changes
selectElement.addEventListener("change", function () {
const selectedLangIndex = selectElement.value;
outputElement.textContent = langsArray[selectedLangIndex];
});
}
// Call the function to fetch data and initialize the page
fetchAndDisplayLangs();
});