Added error text to the game loading screen

Infinite-Chess · Dec 14, 2024 · 3d5976e · 3d5976e
1 parent 30f51f7
commit 3d5976e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 1 deletion.
diff --git a/src/client/css/play.css b/src/client/css/play.css
@@ -40,7 +40,7 @@ button {
 
 
 
-/* Loading Page */
+/* Loading Page. A COUPLE OF THSEE CLASSES are also used for the game's loading animation page! */
 
 .animation-container {
     display: flex;

diff --git a/src/client/scripts/esm/game/gui/loadingscreen.ts b/src/client/scripts/esm/game/gui/loadingscreen.ts
@@ -19,6 +19,10 @@ const darknessLevel = 0.22;
 /** Percentage of the viewport minimum. 0-100 */
 const widthOfTiles = 16;
 
+const element_spinnyPawn = document.querySelector('.game-loading-screen .spinny-pawn');
+const element_loadingError = document.querySelector('.game-loading-screen .loading-error');
+const element_loadingErrorText = document.querySelector('.game-loading-screen .loading-error-text');
+
 
 (function init() {
 
@@ -51,8 +55,25 @@ function close() {
 	loadingScreen.classList.add('transparent');
 }
 
+function callback_LoadingError(event: Event) {
+	// const type = event.type; // Event type: "error"/"abort"
+	// const target = event.target; // Element that triggered the event
+	// const elementType = target?.tagName.toLowerCase();
+	// const sourceURL = target?.src || target?.href; // URL of the resource that failed to load
+	// console.error(`Event ${type} ocurred loading ${elementType} at ${sourceURL}.`);
+
+
+	// Hide the "LOADING" text
+	element_spinnyPawn!.classList.add('hidden');
+
+	// Show the ERROR text
+	const lostNetwork = !navigator.onLine;
+	element_loadingError!.classList.remove('hidden');
+	element_loadingErrorText!.textContent = lostNetwork ? translations['lost_network'] : translations['failed_to_load'];
+}
 
 export default {
 	open,
 	close,
+	callback_LoadingError,
 };
diff --git a/src/client/views/play.ejs b/src/client/views/play.ejs
@@ -47,6 +47,10 @@
             whil the svgs are being requested and spritesheet generated -->
             <div class="game-loading-screen transparent">
                 <svg class="svg-pawn spinny-pawn"><use href="#svg-pawn"></use></svg>
+                <div class="loading-error hidden">
+                    <h1><%=t('play.error')%></h1>
+                    <p class="loading-error-text"></p>
+                </div>
             </div>
 
             <div id="overlay" class="overlay">