feat(web): create html error handling

Author: bill-h4rper

apps/web/src/cache/cache.ts

@@ -38,7 +38,7 @@ export class GameCache {
     const res = [];
     setLoadingTotalFiles(files.length);
     for (const [i, file] of files.entries()) {
-      setLoadingStatus(file.path, i);
+      setLoadingStatus(`Download: ${file.path.replace(/^\/+/, "")}`, i);
       res.push(await this._updateCacheFile(file));
     }
     return res;

apps/web/src/ids.ts

@@ -1,6 +1,11 @@
 export const IDS = {
   canvas: "nanoforge-canvas",
   loader: "nanoforge-loader",
-  loaderStatus: "nanoforge-loader-status",
+
+  loadingStatus: "loading-status",
+  loadingStep: "loading-step",
   loadingBar: "loading-bar-fill",
+
+  loaderError: "loader-error",
+  loaderErrorMessage: "loader-error-message",
 };

apps/web/src/index.html

@@ -9,10 +9,16 @@
     <script type="module" src="index.ts"></script>
     <div id="nanoforge-loader">
       <img id="loader-logo" src="assets/logo.png" alt="logo" />
-      <div id="loading-progress">
-        <div id="nanoforge-loader-status"></div>
-        <div id="loading-bar">
-          <div id="loading-bar-fill"></div>
+      <div>
+        <div id="loader-error" hidden="">
+          <div id="loader-error-message"></div>
+          <a id="back-home" href="/"> Back home </a>
+        </div>
+        <div id="loading-status">
+          <div id="loading-step"></div>
+          <div id="loading-bar">
+            <div id="loading-bar-fill"></div>
+          </div>
         </div>
       </div>
     </div>

apps/web/src/index.ts

@@ -3,15 +3,18 @@ import { runGame } from "./game";
 import { loadGameFiles } from "./loader";
 import { getManifest } from "./manifest";
 import { Logger } from "./utils/logger.utils";
+import { setError, setLoadingStatus } from "./window";
 
 const logger = new Logger("Loader");
 
 const runLoad = async () => {
   logger.info("Starting loading game");
+
   const manifest = await getManifest();
   const cache = new GameCache();
   const extendedManifest = await cache.updateCache(manifest, true);
   const [files, mainModule] = await loadGameFiles(extendedManifest);
+  setLoadingStatus("Starting game");
   runGame(mainModule, { files });
 };
 
@@ -20,5 +23,6 @@ runLoad()
     logger.info("Game loaded !");
   })
   .catch((e) => {
+    setError(e);
     logger.error(`Failed to load game : ${e}`);
   });

apps/web/src/style.css

@@ -4,6 +4,7 @@
   left: 0;
   top: 0;
   background-color: oklch(0.21 0.034 264.665);
+  font-weight: bold;
   color: white;
   position: absolute;
   display: flex;
@@ -18,14 +19,18 @@
   width: 125px;
 }
 
-#loading-progress {
+#loading-status {
   width: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
 }
 
+#loading-status[hidden] {
+  display: none !important;
+}
+
 #loading-bar {
   height: 12px;
   width: 500px;
@@ -42,6 +47,28 @@
   transition: width 0.3s ease-in-out;
 }
 
+#loader-error {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+#loader-error[hidden] {
+  display: none !important;
+}
+
+#back-home {
+  background-color: rgba(151, 63, 255, 0.8);
+  text-decoration: none;
+  border-radius: 5px;
+  font-weight: bold;
+  font-size: large;
+  color: white;
+  padding: 10px;
+}
+
 .fade-out {
   opacity: 0;
   transition: opacity 1s ease-out;

apps/web/src/window.ts

@@ -22,7 +22,7 @@ export const changeWindowToLoader = async () => {
 };
 
 export const setLoadingStatus = (filename: string, index?: number | null) => {
-  const loaderFilename = document.getElementById(IDS.loaderStatus);
+  const loaderFilename = document.getElementById(IDS.loadingStep);
   const loadingBarFill = document.getElementById(IDS.loadingBar);
 
   if (loaderFilename) loaderFilename.innerText = filename;
@@ -36,3 +36,13 @@ export const setLoadingStatus = (filename: string, index?: number | null) => {
 export const setLoadingTotalFiles = (total: number) => {
   totalFiles = total;
 };
+
+export const setError = (error: string) => {
+  const loaderErrorMessage = document.getElementById(IDS.loaderErrorMessage);
+
+  if (!loaderErrorMessage) return;
+  loaderErrorMessage.innerText = error;
+
+  setHiddenStatusOnId(IDS.loadingStatus, true);
+  setHiddenStatusOnId(IDS.loaderError, false);
+};