svelte 5 upgrade (#2)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "wattastisch",
-    "version": "3.1.1",
+    "version": "3.2.0",
     "type": "module",
     "private": true,
     "scripts": {
@@ -13,14 +13,14 @@
     },
     "devDependencies": {
         "@sveltejs/adapter-static": "3.0.5",
-        "@sveltejs/kit": "2.6.4",
-        "@sveltejs/vite-plugin-svelte": "3.1.2",
+        "@sveltejs/kit": "2.7.0",
+        "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
         "@types/canvas-confetti": "1.6.4",
         "eslint": "9.12.0",
         "eslint-plugin-svelte": "2.44.1",
         "globals": "15.11.0",
-        "svelte": "4.2.19",
-        "svelte-check": "4.0.4",
+        "svelte": "5.0.0-next.264",
+        "svelte-check": "4.0.5",
         "typescript": "5.5.4",
         "typescript-eslint": "8.8.1",
         "vite": "5.4.8",

src/lib/components/ConfirmDialog.svelte

@@ -1,25 +1,28 @@
 <script lang="ts">
-    import { t } from '$lib/stores/settings';
+    import { self } from 'svelte/legacy';
+    import { t } from '$lib/stores/settings.svelte';
     import { fade, fly } from 'svelte/transition';
 
-    export let text: string;
-    export let onClose: (x: boolean) => unknown;
+    type Props = {
+        text: string;
+        onClose: (x: boolean) => void;
+    };
+
+    const { text, onClose }: Props = $props();
 </script>
 
 <div
     id="dialog-container"
     class="swiper-no-swiping"
-    on:click|self={() => onClose(false)}
+    onclick={self(() => onClose(false))}
     role="presentation"
     transition:fade={{ duration: 150 }}
 >
     <div class="box" transition:fly={{ y: 300, duration: 250 }}>
-        <div class="dialog-header">
-            {text}
-        </div>
+        <div class="dialog-header">{text}</div>
         <div class="box-content">
-            <button class="box-button" on:click={() => onClose(false)}>{$t('nein')}</button>
-            <button class="box-button" on:click={() => onClose(true)}>{$t('ja')}</button>
+            <button class="box-button" onclick={() => onClose(false)}>{t('nein')}</button>
+            <button class="box-button" onclick={() => onClose(true)}>{t('ja')}</button>
         </div>
     </div>
 </div>

src/lib/components/Header.svelte

@@ -1,16 +1,20 @@
 <script lang="ts">
-    import { swiper } from '$lib/stores/swiper';
+    import { uiStore } from '$lib/stores/swiper.svelte';
 
-    export let text: string;
-    export let buttonIcon: string | null = null;
-    export let onButtonClick: () => void = () => null;
+    interface Props {
+        text: string;
+        buttonIcon?: string;
+        onButtonClick?: () => void;
+    }
+
+    const { text, buttonIcon, onButtonClick = () => null }: Props = $props();
 </script>
 
 <header>
-    <button class="icon header-buttons" on:click={() => $swiper?.slideTo(0)}>menu</button>
+    <button class="icon header-buttons" onclick={() => uiStore.swiper?.slideTo(0)}>menu</button>
     <div id="header-text">{text}</div>
     {#if buttonIcon}
-        <button class="icon header-buttons" on:click={onButtonClick}>{buttonIcon}</button>
+        <button class="icon header-buttons" onclick={onButtonClick}>{buttonIcon}</button>
     {/if}
 </header>
 

src/lib/components/Menu.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { t } from '$lib/stores/settings';
+    import { t } from '$lib/stores/settings.svelte';
     import { page } from '$app/stores';
     import { browser, version } from '$app/environment';
     import type { MenuItem } from '$lib/types';
-    import { swiper } from '$lib/stores/swiper';
+    import { uiStore } from '$lib/stores/swiper.svelte';
     import { base } from '$app/paths';
 
     const items: MenuItem[] = [
@@ -16,40 +16,39 @@
     function shareApp() {
         navigator.share({
             title: 'Wattastisch',
-            text: $t('teilenText'),
+            text: t('teilenText'),
             url: '',
         });
     }
 </script>
 
 <div id="menu">
     <div id="menu-header">
-        <div id="app-logo" />
+        <div id="app-logo"></div>
         <div id="app-title">Wattastisch</div>
     </div>
     <div id="menu-content">
         {#each items as item}
             <a
                 class="menu-item"
                 href={base + item.path}
-                on:click={() => $swiper?.slideTo(1)}
+                onclick={() => uiStore.swiper?.slideTo(1)}
                 class:active={$page.url.pathname === item.path}
             >
                 <div class="icon menu-square-icon">{item.icon}</div>
-                <div class="menu-square-label">{$t(item.name)}</div>
+                <div class="menu-square-label">{t(item.name)}</div>
             </a>
         {/each}
         {#if browser && navigator}
-            <button class="menu-item" on:click={shareApp}>
+            <button class="menu-item" onclick={shareApp}>
                 <div class="icon menu-square-icon">share</div>
-                <div class="menu-square-label">{$t('teilen')}</div>
+                <div class="menu-square-label">{t('teilen')}</div>
             </button>
         {/if}
     </div>
     <div id="menu-footer">
         <div>Version {version}</div>
-        <div>Maximilian Rialto</div>
-        <div>[email protected]</div>
+        <div>Max Rialto</div>
     </div>
 </div>
 

src/lib/components/Popup.svelte

@@ -1,40 +1,45 @@
 <script lang="ts">
-    import { t } from '$lib/stores/settings';
-    import { getMatchScore, isMatchFinished, match } from '$lib/stores/match';
+    import { self } from 'svelte/legacy';
     import { fade, fly } from 'svelte/transition';
     import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
     import { tick } from 'svelte';
     import { base } from '$app/paths';
+    import { matchStore } from '$lib/stores/match.svelte';
+    import { t } from '$lib/stores/settings.svelte';
 
-    export let onClose: () => unknown;
+    interface Props {
+        onClose: () => void;
+    }
+
+    const { onClose }: Props = $props();
 
-    let confirmDialog = false;
+    let confirmDialog = $state(false);
 
     function oneBack() {
-        match.revertLastGame();
+        matchStore.revertLastGame();
         onClose();
     }
 
     function getHeaderText() {
-        if (!$isMatchFinished) {
-            return $t('headerText');
+        if (!matchStore.isFinished()) {
+            return t('headerText');
         }
-        if ($getMatchScore[0] > $getMatchScore[1]) {
-            return $t('spielFertigSie');
+        if (matchStore.getScore(0) > matchStore.getScore(1)) {
+            return t('spielFertigSie');
         }
-        return $t('spielFertigMir');
+        return t('spielFertigMir');
     }
 
     function newGame() {
-        if ($isMatchFinished) {
+        if (matchStore.isFinished()) {
             resetMatch();
-            return;
+        } else {
+            confirmDialog = true;
         }
-        confirmDialog = true;
     }
 
     function resetMatch() {
-        match.reset();
+        matchStore.reset();
         onClose();
     }
 
@@ -50,7 +55,7 @@
 <div
     id="popup-container"
     class="swiper-no-swiping"
-    on:click|self={onClose}
+    onclick={self(onClose)}
     role="presentation"
     transition:fade={{ duration: 150 }}
 >
@@ -59,27 +64,27 @@
             {getHeaderText()}
         </div>
         <div class="box-content">
-            <button class="box-button" on:click={newGame}>
+            <button class="box-button" onclick={newGame}>
                 <div class="box-button-icon icon">note_add</div>
-                <div class="box-button-text">{$t('neuesSpiel')}</div>
+                <div class="box-button-text">{t('neuesSpiel')}</div>
             </button>
-            {#if $isMatchFinished}
+            {#if matchStore.isFinished()}
                 <a class="box-button" href="{base}/stats">
                     <div class="box-button-icon icon">timeline</div>
-                    <div class="box-button-text">{$t('statistiken')}</div>
+                    <div class="box-button-text">{t('statistiken')}</div>
                 </a>
             {:else}
-                <button class="box-button" on:click={oneBack}>
+                <button class="box-button" onclick={oneBack}>
                     <div class="box-button-icon icon">fast_rewind</div>
-                    <div class="box-button-text">{$t('zugZurueck')}</div>
+                    <div class="box-button-text">{t('zugZurueck')}</div>
                 </button>
             {/if}
         </div>
     </div>
 </div>
 
 {#if confirmDialog}
-    <ConfirmDialog text={$t('neuesSpielConfirm')} onClose={onConfirmDialogClose} />
+    <ConfirmDialog text={t('neuesSpielConfirm')} onClose={onConfirmDialogClose} />
 {/if}
 
 <style>

src/lib/stores/history.svelte.ts

@@ -0,0 +1,27 @@
+import type { Match } from '$lib/types';
+import { getValueFromLocalStorage, setValueToLocalStorage } from '$lib/utils';
+
+const HISTORY_KEY = 'matchHistory';
+
+class HistoryStore {
+    private _history = $state(getValueFromLocalStorage<Match[]>(HISTORY_KEY, []));
+
+    get history() {
+        return this._history;
+    }
+
+    reset() {
+        this._history = [];
+        setValueToLocalStorage(HISTORY_KEY, []);
+    }
+
+    addMatch(match: Match) {
+        const historyMatch = this._history.find(m => m.id === match.id);
+        if (!historyMatch) {
+            this._history = [match, ...this._history];
+            setValueToLocalStorage(HISTORY_KEY, this._history);
+        }
+    }
+}
+
+export const historyStore = new HistoryStore();