SavingComponent.svelte

<script lang="ts">
  import { identity } from "svelte/internal";
  import { gameFactsStore } from "./gameFacts";

  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;
  }
</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>

<style>
  div {
    border: 1px solid;
    padding: 10px;
    padding-bottom: 0px;
    margin: 5px;
  }
</style>