From 451a7142dd0b420a9b0991bbf40aa1a7333535d9 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Sun, 9 Mar 2025 22:34:02 -0400
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20basic=20toast=20c?=
 =?UTF-8?q?omponent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Toasts.svelte              | 37 ++++++++++++++++++++++++++++++
 src/routes/+layout.svelte          |  3 +++
 src/routes/toast-test/+page.svelte | 19 +++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 src/lib/Toasts.svelte
 create mode 100644 src/routes/toast-test/+page.svelte

diff --git a/src/lib/Toasts.svelte b/src/lib/Toasts.svelte
new file mode 100644
index 0000000..b40da7d
--- /dev/null
+++ b/src/lib/Toasts.svelte
@@ -0,0 +1,37 @@
+<script lang="ts" module>
+  export type Toast = {
+    message: string;
+  };
+
+  let toasts: (Toast & { expiration: number })[] = $state([]);
+
+  export function showToast(toast: Toast) {
+    const expiration = Date.now() + 5_000;
+
+    toasts.push({ ...toast, expiration });
+    setTimeout(() => {
+      toasts = toasts.filter((toast) => toast.expiration > Date.now());
+    }, 5_000);
+  }
+</script>
+
+<script lang="ts">
+  import "$lib/hexagons.css";
+  $inspect(toasts);
+</script>
+
+<div class="wrapper">
+  {#each toasts as toast, i (i)}
+    <div class="toast">
+      <div class="background clip-hexagon"></div>
+      <span class="message">{toast.message}</span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .wrapper {
+    position: fixed;
+    bottom: 0;
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ce9bd52..849879a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,6 +13,7 @@
   import Modal from "$lib/Modal.svelte";
   import EditNameForm from "$lib/EditNameForm.svelte";
   import AccountModal from "$lib/AccountModal.svelte";
+  import Toasts from "$lib/Toasts.svelte";
 
   let { data, children } = $props();
   let { supabase, session, user, profilePromise, lightModeCookie } = $derived(data);
@@ -78,6 +79,8 @@
   <AccountModal {supabase} {user} {profilePromise} bind:open={showAccountModal} />
 {/if}
 
+<Toasts />
+
 <style>
   header {
     padding: 12px;
diff --git a/src/routes/toast-test/+page.svelte b/src/routes/toast-test/+page.svelte
new file mode 100644
index 0000000..42789f0
--- /dev/null
+++ b/src/routes/toast-test/+page.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Button from "$lib/Button.svelte";
+  import { showToast } from "$lib/Toasts.svelte";
+
+  let message = "";
+</script>
+
+<form
+  onsubmit={(event) => {
+    event.preventDefault();
+
+    showToast({ message });
+
+    message = "";
+  }}
+>
+  <label>Message <input type="text" bind:value={message} required /></label><br />
+  <Button type="submit">Show toast</Button>
+</form>

From 0642437807f134fad64f7e993daa378a19bcf736 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Mon, 10 Mar 2025 12:50:52 -0400
Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=F0=9F=A5=85=20show=20error=20toast?=
 =?UTF-8?q?s=20for=20uncaught=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Toasts.svelte                   |  8 +++--
 src/lib/errors.test.ts                  | 12 +++++++
 src/lib/errors.ts                       | 42 +++++++++++++++++++++++++
 src/routes/+layout.svelte               |  6 ++++
 src/routes/games/[game_id]/+page.svelte | 10 ++++--
 5 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/errors.test.ts
 create mode 100644 src/lib/errors.ts

diff --git a/src/lib/Toasts.svelte b/src/lib/Toasts.svelte
index b40da7d..1f20ccd 100644
--- a/src/lib/Toasts.svelte
+++ b/src/lib/Toasts.svelte
@@ -1,6 +1,7 @@
 <script lang="ts" module>
   export type Toast = {
     message: string;
+    style?: "error";
   };
 
   let toasts: (Toast & { expiration: number })[] = $state([]);
@@ -17,12 +18,11 @@
 
 <script lang="ts">
   import "$lib/hexagons.css";
-  $inspect(toasts);
 </script>
 
 <div class="wrapper">
   {#each toasts as toast, i (i)}
-    <div class="toast">
+    <div class="toast {toast.style}">
       <div class="background clip-hexagon"></div>
       <span class="message">{toast.message}</span>
     </div>
@@ -34,4 +34,8 @@
     position: fixed;
     bottom: 0;
   }
+
+  .toast.error {
+    color: red;
+  }
 </style>
diff --git a/src/lib/errors.test.ts b/src/lib/errors.test.ts
new file mode 100644
index 0000000..ad09d9e
--- /dev/null
+++ b/src/lib/errors.test.ts
@@ -0,0 +1,12 @@
+import { describe, expect, it } from "vitest";
+import { getErrorMessage } from "./errors";
+
+describe("getErrorMessage", () => {
+  it("should return string unchanged", () => {
+    expect(getErrorMessage("example string")).toBe("example string");
+  });
+
+  it("should get message from error", () => {
+    expect(getErrorMessage(new Error("example message"))).toBe("example message");
+  });
+});
diff --git a/src/lib/errors.ts b/src/lib/errors.ts
new file mode 100644
index 0000000..bfb4753
--- /dev/null
+++ b/src/lib/errors.ts
@@ -0,0 +1,42 @@
+import { showToast } from "./Toasts.svelte";
+
+export function getErrorMessage(error: unknown): string {
+  if (typeof error == "string") {
+    return error;
+  }
+
+  if (
+    typeof error == "object" &&
+    error != null &&
+    "message" in error &&
+    typeof error.message == "string"
+  ) {
+    return error.message;
+  }
+
+  console.error("unknown error", error);
+  return String(error);
+}
+
+export function toastError(error: unknown) {
+  console.error(error);
+
+  const message = getErrorMessage(error);
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- this is just eslint getting confused by svelte
+  showToast({ message, style: "error" });
+}
+
+export async function assertOk(response: Response | Promise<Response>): Promise<Response> {
+  response = await response;
+
+  if (response.ok) {
+    return response;
+  }
+
+  if (response.headers.get("Content-Type")?.startsWith("application/json")) {
+    throw await response.json();
+  } else {
+    throw await response.text();
+  }
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 849879a..e7cc81b 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,6 +14,7 @@
   import EditNameForm from "$lib/EditNameForm.svelte";
   import AccountModal from "$lib/AccountModal.svelte";
   import Toasts from "$lib/Toasts.svelte";
+  import { toastError } from "$lib/errors.js";
 
   let { data, children } = $props();
   let { supabase, session, user, profilePromise, lightModeCookie } = $derived(data);
@@ -55,6 +56,11 @@
   <link rel="preconnect" href={PUBLIC_SUPABASE_URL} />
 </svelte:head>
 
+<svelte:window
+  onerror={(event) => toastError(event instanceof ErrorEvent ? event.error : event)}
+  onunhandledrejection={(event) => toastError(event.reason)}
+/>
+
 <header>
   <h1><a href="/">Connexagon</a></h1>
 
diff --git a/src/routes/games/[game_id]/+page.svelte b/src/routes/games/[game_id]/+page.svelte
index 0094270..6c9c7fd 100644
--- a/src/routes/games/[game_id]/+page.svelte
+++ b/src/routes/games/[game_id]/+page.svelte
@@ -6,6 +6,7 @@
   import Board from "$lib/Board.svelte";
   import Button from "$lib/Button.svelte";
   import type { Tables } from "$lib/database-types";
+  import { assertOk } from "$lib/errors.js";
 
   const { data } = $props();
   const { supabase, user } = $derived(data);
@@ -99,11 +100,16 @@
   let selection: number[] = $state([]);
 
   async function startGame() {
-    await fetch(`/games/${game.id}/start`, { method: "POST" });
+    await assertOk(fetch(`/games/${game.id}/start`, { method: "POST" }));
   }
 
   async function makeTurn() {
-    await fetch(`/games/${game.id}/turns`, { method: "POST", body: JSON.stringify(selection) });
+    await assertOk(
+      fetch(`/games/${game.id}/turns`, {
+        method: "POST",
+        body: JSON.stringify(selection),
+      }),
+    );
     selection = [];
   }
 

From 8a494f653131b54639180df5bbb25234a6d81606 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:13:57 -0400
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=E2=9C=A8=20add=20styling=20to=20to?=
 =?UTF-8?q?asts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Toasts.svelte | 65 ++++++++++++++++++++++++++++++++-----------
 src/lib/themes.css    |  6 ++--
 2 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/lib/Toasts.svelte b/src/lib/Toasts.svelte
index 1f20ccd..42d2b57 100644
--- a/src/lib/Toasts.svelte
+++ b/src/lib/Toasts.svelte
@@ -4,38 +4,69 @@
     style?: "error";
   };
 
-  let toasts: (Toast & { expiration: number })[] = $state([]);
-
   export function showToast(toast: Toast) {
-    const expiration = Date.now() + 5_000;
+    toastQueue.push(toast);
+    mainLoop();
+  }
+
+  let toastQueue: Toast[] = [];
+  let currentToast: Toast | undefined = $state();
+
+  let active = false;
+  async function mainLoop() {
+    if (active) {
+      return;
+    }
+
+    active = true;
 
-    toasts.push({ ...toast, expiration });
-    setTimeout(() => {
-      toasts = toasts.filter((toast) => toast.expiration > Date.now());
-    }, 5_000);
+    while (toastQueue.length > 0) {
+      currentToast = toastQueue.shift();
+      await wait(5_000);
+
+      currentToast = undefined;
+      await wait(1_000);
+    }
+
+    active = false;
+  }
+
+  function wait(ms: number): Promise<void> {
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
 </script>
 
 <script lang="ts">
   import "$lib/hexagons.css";
+  import { fade, fly } from "svelte/transition";
 </script>
 
-<div class="wrapper">
-  {#each toasts as toast, i (i)}
-    <div class="toast {toast.style}">
-      <div class="background clip-hexagon"></div>
-      <span class="message">{toast.message}</span>
-    </div>
-  {/each}
-</div>
+{#if currentToast != undefined}
+  <div class="toast clip-hexagon {currentToast.style}" in:fly={{ y: "100%" }} out:fade>
+    <div class="background clip-hexagon"></div>
+    <span class="message">{currentToast.message}</span>
+  </div>
+{/if}
 
 <style>
-  .wrapper {
+  .toast {
+    color: var(--background-color);
+    background-color: var(--foreground-color);
+    font-size: 14pt;
+    font-weight: 400;
     position: fixed;
     bottom: 0;
+    margin: 24px;
+    height: var(--height);
+    padding: 0 calc(var(--height) / 2);
+    display: grid;
+    place-content: center;
+
+    --height: 48px;
   }
 
   .toast.error {
-    color: red;
+    background-color: var(--red);
+    color: white;
   }
 </style>
diff --git a/src/lib/themes.css b/src/lib/themes.css
index 5fba398..6ac48ab 100644
--- a/src/lib/themes.css
+++ b/src/lib/themes.css
@@ -1,7 +1,7 @@
 :root {
   color-scheme: light dark;
-  background-color: light-dark(white, #121212);
-  color: light-dark(black, white);
+  background-color: var(--background-color);
+  color: var(--foreground-color);
   accent-color: var(--primary);
 
   --red: oklch(57% 0.26 28deg);
@@ -12,4 +12,6 @@
   --purple: oklch(48% 0.24 311deg);
   --pink: oklch(77% 0.19 356deg);
   --primary: light-dark(var(--blue), var(--aqua));
+  --background-color: light-dark(white, #121212);
+  --foreground-color: light-dark(black, white);
 }

From 49b29526fc334a20df5e32f0b91cf0e2788870f3 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:22:35 -0400
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB?=
 =?UTF-8?q?=20add=20error=20checkbox=20to=20toast=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/toast-test/+page.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/toast-test/+page.svelte b/src/routes/toast-test/+page.svelte
index 42789f0..862ef8c 100644
--- a/src/routes/toast-test/+page.svelte
+++ b/src/routes/toast-test/+page.svelte
@@ -3,17 +3,19 @@
   import { showToast } from "$lib/Toasts.svelte";
 
   let message = "";
+  let error = false;
 </script>
 
 <form
   onsubmit={(event) => {
     event.preventDefault();
 
-    showToast({ message });
+    showToast({ message, style: error ? "error" : undefined });
 
     message = "";
   }}
 >
   <label>Message <input type="text" bind:value={message} required /></label><br />
+  <label>Error <input type="checkbox" bind:checked={error} /></label><br />
   <Button type="submit">Show toast</Button>
 </form>

From e6d972e55498f40c876d431cc95b56cb480ae549 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Mon, 14 Apr 2025 15:54:06 -0400
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=E2=9C=A8=20allow=20multi-line=20to?=
 =?UTF-8?q?asts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/Toasts.svelte | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/lib/Toasts.svelte b/src/lib/Toasts.svelte
index 42d2b57..e7f33e0 100644
--- a/src/lib/Toasts.svelte
+++ b/src/lib/Toasts.svelte
@@ -39,12 +39,19 @@
 <script lang="ts">
   import "$lib/hexagons.css";
   import { fade, fly } from "svelte/transition";
+
+  let height: number = $state(48);
 </script>
 
 {#if currentToast != undefined}
-  <div class="toast clip-hexagon {currentToast.style}" in:fly={{ y: "100%" }} out:fade>
-    <div class="background clip-hexagon"></div>
-    <span class="message">{currentToast.message}</span>
+  <div
+    class="toast clip-hexagon {currentToast.style}"
+    in:fly={{ y: "100%" }}
+    out:fade
+    bind:clientHeight={height}
+    style:--height="{height}px"
+  >
+    {currentToast.message}
   </div>
 {/if}
 
@@ -55,18 +62,23 @@
     font-size: 14pt;
     font-weight: 400;
     position: fixed;
+    left: 0;
     bottom: 0;
     margin: 24px;
-    height: var(--height);
-    padding: 0 calc(var(--height) / 2);
+    min-height: 48px;
+    padding: 12px calc(var(--height) / 3.4641 + 6px);
     display: grid;
     place-content: center;
-
-    --height: 48px;
   }
 
   .toast.error {
     background-color: var(--red);
     color: white;
   }
+
+  @media (width < 600px) {
+    .toast {
+      right: 0;
+    }
+  }
 </style>

From 9d15eaf53ce6bc7fa13d9ec05b0faa7781d96093 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Mon, 14 Apr 2025 16:11:09 -0400
Subject: [PATCH 6/7] =?UTF-8?q?build:=20=E2=AC=86=EF=B8=8F=20update=20brow?=
 =?UTF-8?q?serlist=20data?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index c6a082f..be1aa15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2720,9 +2720,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001702",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001702.tgz",
-      "integrity": "sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==",
+      "version": "1.0.30001757",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001757.tgz",
+      "integrity": "sha512-r0nnL/I28Zi/yjk1el6ilj27tKcdjLsNqAOZr0yVjWPrSQyHgKI2INaEWw21bAQSv2LXRt1XuCS/GomNpWOxsQ==",
       "dev": true,
       "funding": [
         {

From 133c586cac55ec6c362fe3430b5452fcabd7bdb3 Mon Sep 17 00:00:00 2001
From: Nate Stringham <44071655+nstringham@users.noreply.github.com>
Date: Tue, 15 Apr 2025 15:32:14 -0400
Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20=F0=9F=94=A5=20remove=20toast?=
 =?UTF-8?q?=20test=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/toast-test/+page.svelte | 21 ---------------------
 1 file changed, 21 deletions(-)
 delete mode 100644 src/routes/toast-test/+page.svelte

diff --git a/src/routes/toast-test/+page.svelte b/src/routes/toast-test/+page.svelte
deleted file mode 100644
index 862ef8c..0000000
--- a/src/routes/toast-test/+page.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-  import Button from "$lib/Button.svelte";
-  import { showToast } from "$lib/Toasts.svelte";
-
-  let message = "";
-  let error = false;
-</script>
-
-<form
-  onsubmit={(event) => {
-    event.preventDefault();
-
-    showToast({ message, style: error ? "error" : undefined });
-
-    message = "";
-  }}
->
-  <label>Message <input type="text" bind:value={message} required /></label><br />
-  <label>Error <input type="checkbox" bind:checked={error} /></label><br />
-  <Button type="submit">Show toast</Button>
-</form>