WIP: Saving game State

src/App.svelte

@@ -4,6 +4,7 @@
   import Debugger from "./Debugger.svelte";
   import type { Dialog } from "./types";
   import SavingComponent from "./SavingComponent.svelte";
+  import { hasContext } from "svelte";
 
   const gameStateServerBaseUrl = "http://localhost:4000/";
 
@@ -13,11 +14,11 @@
 
 <main>
   {#await dialogSetPromise then dialogSet}
+    <SavingComponent {gameStateServerBaseUrl} />
+    <br />
     <DialogSetComponent bind:currentDialog {...dialogSet} />
-
     <br />
     <Debugger {dialogSet} bind:currentDialog />
-    <SavingComponent {gameStateServerBaseUrl} />
   {:catch _error}
     <h3>Oh no :(</h3>
     <p>

src/SavingComponent.svelte

 <script lang="ts">
   import { identity } from "svelte/internal";
   import { gameFactsStore } from "./gameFacts";
+  import { finishedSyncSetup, gameStateId } from "./gameStateServerSyncService";
 
   import { GameStateServerClient } from "./gameStateServerClient";
   import type { GameState } from "./types";
 
   export let gameStateServerBaseUrl: string;
   $: gameStateServerClient = new GameStateServerClient(gameStateServerBaseUrl);
-  let pretixOrderCode: string = "XXXYYY";
 
-  async function handleSaveGameState(): Promise<void> {
-    const gameState: GameState = {
-      gameFacts: $gameFactsStore,
-    };
-    gameStateServerClient.saveState(pretixOrderCode, gameState);
-  }
-
-  async function handleLoadGameState(): Promise<void> {
-    const newGameState = await gameStateServerClient.loadState(pretixOrderCode);
-    $gameFactsStore = newGameState.gameFacts;
+  async function handleSyncState(): Promise<void> {
+    $finishedSyncSetup = true;
   }
 </script>
 
-<div>
-  <input
-    type="text"
-    placeholder="Your Pretix order code"
-    maxlength="5"
-    minlength="5"
-    bind:value={pretixOrderCode}
-  />
-  <button style="width: 10rem;" on:click|preventDefault={handleSaveGameState}>
-    💾 Save game
-  </button>
-  <button style="width: 10rem;" on:click|preventDefault={handleLoadGameState}>
-    ▶️ Load game
-  </button>
-</div>
+{#if !$finishedSyncSetup}
+  <div>
+    <p>
+      Dein Spielstand wird aktuell noch nicht synchronisiert, d.h. wenn du den
+      Browser schließt, kann es sein, dass du von vorne anfängst. Zum Speichern
+      gib bitte deinen "Order Code" ein. Deinen Order Code findest du in den
+      E-Mails, die wir dir zur O-Phase gesendet haben.
+    </p>
+    <br />
+    <input
+      type="text"
+      placeholder="Bsp: A1B2C3"
+      maxlength="5"
+      minlength="5"
+      bind:value={$gameStateId}
+    />
+    <button style="width: 20rem;" on:click|preventDefault={handleSyncState}>
+      Spielstand synchronisieren
+    </button>
+  </div>
+{/if}
 
 <style>
   div {

src/gameStateServerSyncService.ts

+import { gameFactsStore } from "./gameFacts";
+import { GameStateServerClient } from "./gameStateServerClient";
+import type { GameState } from "./types";
+
+import { writable } from "svelte/store";
+import type { Writable } from "svelte/store";
+export const finishedSyncSetup: Writable<boolean> = writable(false);
+export const gameStateId: Writable<string> = writable("");
+
+export class SyncService {
+  _client: GameStateServerClient;
+  _id: string;
+  constructor(stateServerBaseUrl: string, id: string) {
+    this._id = id;
+    this._client = new GameStateServerClient(stateServerBaseUrl);
+    gameFactsStore.subscribe(async (gameFacts: string[]) => {
+      const newGameState: GameState = {
+        gameFacts: gameFacts,
+      };
+      await this._client.saveState(this._id, newGameState);
+    });
+  }
+}

src/utils.ts

@@ -18,7 +18,7 @@ function isValidDialogSetName(input: unknown) {
   return !/[^a-zA-Z0-9\-\_]/i.test(input);
 }
 
-function getParamValue(paramName: string): string | null {
+export function getParamValue(paramName: string): string | null {
   return new URLSearchParams(window.location.search).get(paramName);
 }