Improve website loading behavior

dylanlangston · Dec 9, 2023 · 53cf2d5 · 53cf2d5
1 parent 9918cd1
commit 53cf2d5
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 30 deletions.
diff --git a/src/asteroids-website/src/app.html b/src/asteroids-website/src/app.html
@@ -2,7 +2,6 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<title>Asteroids</title>
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<noscript><style> .jsonly { display: none } </style></noscript>

diff --git a/src/asteroids-website/src/lib/localizer.ts b/src/asteroids-website/src/lib/localizer.ts
@@ -55,9 +55,13 @@ export class Localizer {
 
     private static Locale: LocaleGroup | undefined = undefined;
     private static LoadLocale(): LocaleGroup | undefined {
-        const allLocales = Object.entries(Locales).map((_, locale) => new LocaleGroup(locale));
-        const sortedLocales = allLocales.filter(l => l.Index > -1).sort((a, b) => a.Index - b.Index);
-        return sortedLocales.at(0);
+        if (Localizer.Locale == undefined)
+        {
+            const allLocales = Object.entries(Locales).map((_, locale) => new LocaleGroup(locale));
+            const sortedLocales = allLocales.filter(l => l.Index > -1).sort((a, b) => a.Index - b.Index);
+            Localizer.Locale = sortedLocales.at(0);
+        }
+        return Localizer.Locale;
     }
 
     public static GetLocale(): Locales {
@@ -71,5 +75,19 @@ export class Localizer {
         if (locale == undefined) return "en";
         return locale.Prefix;
     }
+
+    public static GetLocalInitText(): string {
+        const locale = Localizer.LoadLocale();
+        switch (locale?.Locale) {
+            case Locales.english:
+            case Locales.unknown:
+            default:
+                return "Starting...";
+            case Locales.french:
+                return "Démarrage en cours...";
+            case Locales.spanish:
+                return "Iniciando...";
+        }
+    }
 }
 
diff --git a/src/asteroids-website/src/lib/module.ts b/src/asteroids-website/src/lib/module.ts
@@ -1,4 +1,5 @@
 import { Localizer } from "./localizer"
+import { writable, get } from 'svelte/store';
 
 export interface CustomEmscriptenModule extends Module, EmscriptenModule {}
 
@@ -10,6 +11,8 @@ export interface ICustomModule {
 
     forcedAspectRatio: number;
     elementPointerLock: boolean;
+    statusMessage: string;
+    setStatus(e: string): void;
 
     onRuntimeInitialized: { (): void };
     wasmBinary: ArrayBuffer;
@@ -38,7 +41,8 @@ export class Module implements ICustomModule {
     }
 
     private static wasmBinaryFile: string = new URL('../import/asteroids.wasm', import.meta.url).href;
-    public static async Init(): Promise<Module> {
+    public static async Init(message: string): Promise<Module> {
+        this.setStatus(message);
         const wasmFile = await fetch(this.wasmBinaryFile, { 
             cache: "default",
         });
@@ -65,7 +69,8 @@ export class Module implements ICustomModule {
             console.log('wasm instantiation succeeded');
             successCallback(output.instance);
         }).catch((e) => {
-            Module.setStatus('wasm instantiation failed! ' + e);
+            console.log('wasm instantiation failed! ' + e);
+            this.setStatus('wasm instantiation failed! ' + e);
         });
         return {};
     }
@@ -84,13 +89,24 @@ export class Module implements ICustomModule {
         return e;
     }
 
+    public get statusMessage(): string {
+        return get(Module.statusMessage);
+    }
     public setStatus(e: string): void {
         Module.setStatus(e);
     }
+
+    public static readonly statusMessage = writable("⏳", () => {
+        this.statusMessage.set(Localizer.GetLocalInitText());
+        return () => {};
+    });
     public static setStatus(e: string): void {
-        const statusElement = <HTMLElement>document.getElementById("status");
-        const statusContainerElement = document.getElementById("status-container");
-        statusContainerElement!.hidden = (e.length == 0 || e == null || e == undefined);
-        statusElement.innerText = e;
+        // "Running..." is from emscripten.js and isn't localized so just return"
+        if (e == "Running...")
+        {
+            return;
+        }
+        Module.statusMessage.set(e);
+        console.log(e);
     }
 }
diff --git a/src/asteroids-website/src/locales/en.json b/src/asteroids-website/src/locales/en.json
@@ -1,6 +1,5 @@
 {
     "page": {
-        "Starting": "Starting...",
         "Downloading": "Downloading...",
         "View_Source": "View Source",
         "Fullscreen": "Fullscreen",

diff --git a/src/asteroids-website/src/locales/es.json b/src/asteroids-website/src/locales/es.json
@@ -1,6 +1,5 @@
 {
     "page": {
-        "Starting": "Iniciando...",
         "Downloading": "Descargando...",
         "View_Source": "Ver código fuente",
         "Fullscreen": "Pantalla completa",

diff --git a/src/asteroids-website/src/locales/fr.json b/src/asteroids-website/src/locales/fr.json
@@ -1,6 +1,5 @@
 {
     "page": {
-        "Starting": "Démarrage en cours...",
         "Downloading": "Téléchargement en cours...",
         "View_Source": "Voir le code source",
         "Fullscreen": "Plein écran",

diff --git a/src/asteroids-website/src/routes/+error.svelte b/src/asteroids-website/src/routes/+error.svelte
@@ -1,18 +1,23 @@
 <script>
-    import { page } from '$app/stores'
-</script>
+  import { page } from '$app/stores'
+  import { onMount} from "svelte";
+  import { get } from 'svelte/store';
 
+  onMount(() => {
+    document.title = "Error" + ($page.error?.message ? " - " + $page.error.message : "");
+  });
+</script>
 <style lang="postcss">
-    :global(html) {
-      background-color: theme(colors.neutral.800);
-      overflow: hidden;
-    }
-  </style>
+  :global(html) {
+    background-color: theme(colors.neutral.800);
+    overflow: hidden;
+  }
+</style>
 
 <div class="absolute flex top-0 bottom-0 left-0 right-0 items-center justify-center pointer-events-none -z-50">
     <div id="status-container" class="rounded-lg bg-slate-50 shadow-xl p-8 m-8">
       <div class="emscripten select-none text-center text-2xl lg:text-6xl font-bold" id="status">
-        <h1>¯\_(ツ)_/¯<br/>An error has occured, sorry!</h1>
+        <h1>¯\_(ツ)_/¯<br/>An error has occurred, sorry!</h1>
         {#if $page.error}
           <hr class="h-0.5 lg:h-1 bg-black rounded-lg"/>
           <div class="text-xl lg:text-3xl font-normal text-left px-4 pt-2">

diff --git a/src/asteroids-website/src/routes/+page.svelte b/src/asteroids-website/src/routes/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { Module, type CustomEmscriptenModule } from "$lib/module";
-  import { onMount} from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import { BrowserDetector } from "browser-dtector";
   import GameController from "./controls.svelte";
 	import { Button } from "$lib/gameController";
-  import { _, isLoading} from "svelte-i18n";
+  import { _, isLoading, waitLocale } from "svelte-i18n";
   import { Localizer } from "$lib/localizer"
   import emscriptenModuleFactory from "../import/emscripten";
 	import { Settings } from "$lib/settings";
@@ -106,10 +106,11 @@
   $: manifestJson  = "en.manifest.json";
 
   let emscripten: CustomEmscriptenModule | undefined;
-  onMount(() => {
+  onMount(async () => {
     isItchZone = window.location?.host?.endsWith("itch.zone");
     fullscreenEnabled = document.fullscreenEnabled;
     manifestJson = Localizer.GetLocalePrefix() + ".manifest.json";
+    Module.statusMessage.subscribe(s => status = s);
     
     window.onerror = (e: any) => {
       document.getElementById("canvas")!.style.display = 'none';
@@ -124,12 +125,19 @@
       window.location.search = "";
     }
     else {
-      Module.Init().then(async (mod) => {
+      await waitLocale();
+      Module.Init($_('page.Downloading')).then(async (mod) => {
         emscripten = await (<EmscriptenModuleFactory<CustomEmscriptenModule>>emscriptenModuleFactory)(mod);
         UpdateSize(null);
       });
     }
   })
+
+  let status: string = "⏳";
+  const unsubscribeStatus = Module.statusMessage.subscribe(s => status = s);
+  onDestroy(() => {
+    unsubscribeStatus();
+  });
 </script>
 
 <style lang="postcss">
@@ -163,12 +171,15 @@
 <svelte:window
   on:orientationchange={(e) => UpdateSize(e)} 
   on:resize={(e) => UpdateSize(e)} 
-  on:blur={(e) => requestPause()} />
+  on:blur={(e) => requestPause()}/>
 
 {#if $isLoading}
   <div class="absolute flex top-0 bottom-0 left-0 right-0 items-center justify-center pointer-events-none -z-50">
     <div id="status-container" class="rounded-lg bg-slate-50 shadow-xl p-8 m-8">
-      <div class="emscripten select-none text-center text-2xl lg:text-6xl font-bold" id="status"><div class="jsonly">Starting...</div><noscript>Please enable Javascript to play.</noscript></div>
+      <div class="emscripten select-none text-center text-2xl lg:text-6xl font-bold" id="status">
+        {status}
+        <noscript>Please enable Javascript to play.</noscript>
+      </div>
     </div>
   </div>
 {:else}
@@ -195,7 +206,9 @@
     </div>
     <div class="absolute flex top-0 bottom-0 left-0 right-0 items-center justify-center pointer-events-none -z-50">
       <div id="status-container" class="rounded-lg bg-slate-50 shadow-xl p-8 m-8">
-        <div class="emscripten select-none text-center text-2xl lg:text-6xl font-bold" id="status">{$_('page.Starting')}</div>
+        <div class="emscripten select-none text-center text-2xl lg:text-6xl font-bold" id="status">
+          {status}
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/asteroids-website/src/types/emscripten.d.ts b/src/asteroids-website/src/types/emscripten.d.ts
@@ -34,8 +34,8 @@ interface EmscriptenModule {
     filePackagePrefixURL: string;
     wasmBinary: ArrayBuffer;
 
-    forcedAspectRatio: number?;
-    elementPointerLock: boolean?;
+    forcedAspectRatio: number;
+    elementPointerLock: boolean;
 
     destroy(object: object): void;
     getPreloadedPackage(remotePackageName: string, remotePackageSize: number): ArrayBuffer;