Cleanup site code, update color scheme and add animations

dylanlangston · Dec 10, 2023 · 0465278 · 0465278
1 parent e8b74f0
commit 0465278
Show file tree

Hide file tree

Showing 18 changed files with 702 additions and 524 deletions.
diff --git a/src/Zig-JS_Bridge.js b/src/Zig-JS_Bridge.js
@@ -1,14 +1,14 @@
 mergeInto(LibraryManager.library, {
-  WASMSave: function(pointer, length) {
+  WASMSave: function (pointer, length) {
     const settings = UTF8ToString(pointer, length);
     Settings.save(settings);
   },
-  WASMLoad: function() {
+  WASMLoad: function () {
     const settings = Settings.get();
     const ptr = allocateUTF8(settings);
     return ptr;
   },
-  WASMLoaded: function(ptr) {
+  WASMLoaded: function (ptr) {
     Module._free(ptr);
   }
 });
diff --git a/src/asteroids-website/src/app.d.ts b/src/asteroids-website/src/app.d.ts
@@ -1,3 +1,5 @@
+import type { MiniAudio } from "./types/miniaudio";
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
@@ -7,7 +9,8 @@ declare global {
 		// interface PageData {}
 		// interface Platform {}
 	}
-	declare interface Window {
+	interface Window extends Window {
 		Settings: Settings;
+		miniaudio: MiniAudio | undefined = undefined;
 	}
 }
diff --git a/src/asteroids-website/src/app.html b/src/asteroids-website/src/app.html
@@ -1,14 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<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>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover" class="h-screen touch-none">
-		<div style="display: contents">%sveltekit.body%</div>
-		<script async src="fixes.js"></script>
-	</body>
-</html>
+
+<head>
+	<meta charset="utf-8" />
+	<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>
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" class="h-screen touch-none">
+	<div style="display: contents">%sveltekit.body%</div>
+	<script async src="fixes.js"></script>
+</body>
+
+</html>
diff --git a/src/asteroids-website/src/app.postcss b/src/asteroids-website/src/app.postcss
@@ -9,4 +9,14 @@ button,
 select,
 a {
     -webkit-tap-highlight-color: transparent;
-}
+}
+
+html {
+    background-color: theme(colors.blue-dark);
+    background-repeat: repeat;
+    overflow: hidden;
+}
+
+* {
+  @apply text-yellow-light;
+}
diff --git a/src/asteroids-website/src/lib/index.ts b/src/asteroids-website/src/lib/index.ts
diff --git a/src/asteroids-website/src/lib/localizer.ts b/src/asteroids-website/src/lib/localizer.ts
@@ -1,10 +1,8 @@
 import {
     _,
     getLocaleFromNavigator,
-    isLoading,
     register,
     init,
-    locale
 } from "svelte-i18n";
 
 export enum Locales {
@@ -25,8 +23,7 @@ class LocaleGroup {
     }
 
     private GetLocalePrefix(locale: Locales): string {
-        switch (locale) 
-        {
+        switch (locale) {
             case Locales.english:
                 return "en";
             case Locales.spanish:
@@ -46,7 +43,7 @@ export class Localizer {
         register("en", () => import("../locales/en.json"));
         register("es", () => import("../locales/es.json"));
         register("fr", () => import("../locales/fr.json"));
-        
+
         init({
             fallbackLocale: "en",
             initialLocale: getLocaleFromNavigator()
@@ -55,8 +52,7 @@ export class Localizer {
 
     private static Locale: LocaleGroup | undefined = undefined;
     private static LoadLocale(): LocaleGroup | undefined {
-        if (Localizer.Locale == undefined)
-        {
+        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);
@@ -75,19 +71,5 @@ 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.spanish:
-                return "Iniciando... ⌛";
-            case Locales.french:
-                return "Démarrage en cours... ⌛";
-        }
-    }
 }
 
diff --git a/src/asteroids-website/src/lib/module.ts b/src/asteroids-website/src/lib/module.ts
@@ -1,7 +1,7 @@
 import { Localizer } from "./localizer"
 import { writable, get } from 'svelte/store';
 
-export interface CustomEmscriptenModule extends Module, EmscriptenModule {}
+export interface CustomEmscriptenModule extends Module, EmscriptenModule { }
 
 export interface ICustomModule {
     requestFullscreen?: (lockPointer: boolean, resizeCanvas: boolean) => void;
@@ -43,35 +43,33 @@ export class Module implements ICustomModule {
     private static wasmBinaryFile: string = new URL('../import/asteroids.wasm', import.meta.url).href;
     public static async Init(message: string): Promise<Module> {
         this.setStatus(message);
-        const wasmFile = await fetch(this.wasmBinaryFile, { 
+        const wasmFile = await fetch(this.wasmBinaryFile, {
             cache: "default",
         });
         console.log('wasm download finished');
         return new Module(await wasmFile.arrayBuffer());
     }
 
-    public onRuntimeInitialized(): void {        
+    public onRuntimeInitialized(): void {
         document.getElementById("controls")?.classList.remove("hidden");
 
         // Set Locale
-        if (this._updateWasmLocale)
-        {
+        if (this._updateWasmLocale) {
             this._updateWasmLocale(Localizer.GetLocale());
         }
     }
 
     public instantiateWasm(
-        imports: WebAssembly.Imports, 
-        successCallback: (module: WebAssembly.Instance) => void): WebAssembly.Exports 
-    {
+        imports: WebAssembly.Imports,
+        successCallback: (module: WebAssembly.Instance) => void): WebAssembly.Exports {
         WebAssembly.instantiate(new Uint8Array(this.wasmBinary), imports)
-        .then((output) => {
-            console.log('wasm instantiation succeeded');
-            successCallback(output.instance);
-        }).catch((e) => {
-            console.log('wasm instantiation failed! ' + e);
-            this.setStatus('wasm instantiation failed! ' + e);
-        });
+            .then((output) => {
+                console.log('wasm instantiation succeeded');
+                successCallback(output.instance);
+            }).catch((e) => {
+                console.log('wasm instantiation failed! ' + e);
+                this.setStatus('wasm instantiation failed! ' + e);
+            });
         return {};
     }
 
@@ -83,11 +81,12 @@ export class Module implements ICustomModule {
         text = Array.prototype.slice.call(arguments).join(' ');
         globalThis.console.error(text);
     }
-
-    public get canvas(): HTMLCanvasElement {
-        const e = <HTMLCanvasElement>document.getElementById("canvas");
-        return e;
-    }
+
+    public canvas: HTMLCanvasElement = (() => {
+        const c = document.createElement('canvas');
+        c.classList.add("rounded-lg");
+        return c;
+    })();
 
     public get statusMessage(): string {
         return get(Module.statusMessage);
@@ -99,8 +98,7 @@ export class Module implements ICustomModule {
     public static readonly statusMessage = writable("⏳");
     public static setStatus(e: string): void {
         // "Running..." is from emscripten.js and isn't localized so just return"
-        if (e == "Running...")
-        {
+        if (e == "Running...") {
             return;
         }
         Module.statusMessage.set(e);

diff --git a/src/asteroids-website/src/lib/settings.ts b/src/asteroids-website/src/lib/settings.ts
@@ -20,8 +20,7 @@ export class Settings {
         const oldSettings = Settings.get();
         if (window.location.search.length == 0) return false;
 
-        try
-        {
+        try {
             Module.setStatus("Updating Settings...");
             const settings = JSON.parse(oldSettings);
             const settingsKeys = Object.keys(settings);
@@ -34,19 +33,19 @@ export class Settings {
                     return v;
                 }
             };
-    
+
             Array.from(urlParams)
                 .map(e => { return { key: e[0], value: e[1] } })
                 .filter((e) => settingsKeys.includes(e.key))
                 .forEach((e) => {
                     settings[e.key] = getValue(e.value);
                 });
-    
+
             const newSettings = JSON.stringify(settings);
             window.localStorage.setItem("settings", newSettings);
             return true;
         }
-        catch 
+        catch
         {
             return false;
         }

diff --git a/src/asteroids-website/src/locales/es.json b/src/asteroids-website/src/locales/es.json
@@ -16,4 +16,4 @@
         "Right": "Derecha",
         "A": "A"
     }
-}
+}
diff --git a/src/asteroids-website/src/locales/fr.json b/src/asteroids-website/src/locales/fr.json
@@ -16,4 +16,4 @@
         "Right": "Droite",
         "A": "A"
     }
-}
+}
diff --git a/src/asteroids-website/src/routes/+error.svelte b/src/asteroids-website/src/routes/+error.svelte
@@ -1,34 +1,26 @@
 <script>
-  import { page } from '$app/stores'
-  import { onMount} from "svelte";
-  import { get } from 'svelte/store';
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import StatusContainer from './status-container.svelte';
 
-  onMount(() => {
-    document.title = "Error" + ($page.error?.message ? " - " + $page.error.message : "");
-  });
+	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>
 
-<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 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">
-            {#if $page?.status}
-              <p><i class="italic">Status:</i> {$page?.status}</p>
-            {/if}
-            {#if $page?.error?.message}
-              <p><i class="italic">Error Message:</i> {$page?.error?.message}</p>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
-</div>
+<StatusContainer>
+	<svelte:fragment slot="status-slot">
+		<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">
+				{#if $page?.status}
+					<p><i class="italic">Status:</i> {$page?.status}</p>
+				{/if}
+				{#if $page?.error?.message}
+					<p><i class="italic">Error Message:</i> {$page?.error?.message}</p>
+				{/if}
+			</div>
+		{/if}
+	</svelte:fragment>
+</StatusContainer>