Fix Deploys: Move all Logic from load to onMount (#80)

Builds are currently failing with this error message

Accessing url.searchParams during prerendering is forbidden. If you need to use it, ensure you are only doing so in the browser (for example in onMount).

It was introduced in #79

This error is because we are trying to access url.searchParams in the load function and ALSO have preloading enabled.
Since load gets called on the server to pre-render, it doesn't allow us to access url.searchParams since that can only be known in the browser

But this must be new behavior, since it was working for us previously. I think it was working previously is because load was acting as a 'universal` loader and running both in the 'server' when preloading, and also in the client when mounting for the first time.

kit.svelte.dev/docs/load#universal-vs-server-when-does-which-load-function-run

I imagine the server load was getting an empty searchSet, but continuing to work. And then the client load correctly filled in the query param values

But from reading the Changelog I can't find anything that seems obviously like it would have broken this behavior

I do think this is a good change to prepare for v2, since it seems required there as well!

.github/workflows/tests.yaml

@@ -32,3 +32,12 @@ jobs:
       - uses: actions/checkout@v3
       - run: npm ci
       - run: npm run test:unit
+
+  build:
+    name: npm run build
+    needs: [check]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - run: npm ci
+      - run: npm run build

.node-version

@@ -1 +1 @@
-18
+18.17.1

src/routes/(iframed)/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { onMount } from "svelte";
+
   import { beforeNavigate, goto } from "$app/navigation";
 
   import { keybind } from "$lib/actions/keybind";
   import { tooltip } from "$lib/actions/tooltip";
   import { resize } from "$lib/actions/resize";
-  import { sendResizeMessage } from "$lib/playback/messages";
+  import { initWindowMessages, sendResizeMessage } from "$lib/playback/messages";
   import { playbackError, playbackState } from "$lib/playback/stores";
 
   import Gameboard from "$lib/components/Gameboard.svelte";
@@ -17,9 +19,8 @@
   import IconCog from "~icons/heroicons/cog-8-tooth";
   import IconHelp from "~icons/heroicons/question-mark-circle";
 
-  import type { PageData } from "./$types";
-
-  export let data: PageData;
+  import { getDefaultSettings, loadSettingsWithURLOverrides } from "$lib/settings/stores";
+  import { setTheme } from "$lib/theme";
 
   const helpTooltipOptions = {
     templateId: "hotkeysTooltip",
@@ -49,6 +50,22 @@
   function onResize(width: number, height: number) {
     sendResizeMessage(width, height);
   }
+
+  let settings = getDefaultSettings();
+  let settingError = true;
+
+  onMount(() => {
+    const url = new URL(window.location.href);
+    settings = loadSettingsWithURLOverrides(url);
+
+    setTheme(settings.theme);
+
+    if (settings.game.length > 0 && settings.engine.length > 0) {
+      settingError = false;
+      playbackState.load(fetch, settings);
+      initWindowMessages();
+    }
+  });
 </script>
 
 <svelte:window
@@ -63,7 +80,7 @@
 />
 
 <div use:resize={{ f: onResize }} class="h-full w-full flex flex-col items-center justify-center">
-  {#if data.settingError}
+  {#if settingError}
     <p class="p-4 font-bold text-lg text-center">
       To display a game you need to specify the ID in the URL.
     </p>
@@ -76,15 +93,15 @@
     </p>
   {:else if $playbackState}
     <TooltipTemplateHotkeys id={helpTooltipOptions.templateId} />
-    <TooltipTemplateSettings id={settingsTooltipOptions.templateId} settings={data.settings} />
+    <TooltipTemplateSettings id={settingsTooltipOptions.templateId} {settings} />
     <div class="w-full h-full flex flex-col md:flex-row">
       <div class="flex flex-col grow">
-        {#if data.settings.title}
-          <h1 class="text-center font-bold pt-2 text-lg">{data.settings.title}</h1>
+        {#if settings.title}
+          <h1 class="text-center font-bold pt-2 text-lg">{settings.title}</h1>
         {/if}
-        <Gameboard showCoordinates={data.settings.showCoords} />
-        {#if data.settings.showControls}
-          {#if data.settings.showScrubber}
+        <Gameboard showCoordinates={settings.showCoords} />
+        {#if settings.showControls}
+          {#if settings.showScrubber}
             <div class="w-full px-[7.5%]">
               <Scrubber />
             </div>
@@ -102,7 +119,7 @@
           </div>
         {/if}
       </div>
-      {#if data.settings.showScoreboard}
+      {#if settings.showScoreboard}
         <div class="basis-full md:basis-[45%] order-first p-2 md:order-last">
           <Scoreboard />
         </div>

src/routes/(iframed)/settings/+page.svelte

@@ -7,7 +7,9 @@
     { value: 18, text: "Fast" }
   ];
 
-  function navigateBack() {
+  function navigateBack(e: MouseEvent) {
+    e.preventDefault();
+
     history.back();
   }
 </script>