History (#1)

gurumaxi · May 22, 2024 · 23c9bc2 · 23c9bc2
1 parent 1c0452b
commit 23c9bc2
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "wattastisch",
-    "version": "3.0.0",
+    "version": "3.1.0",
     "type": "module",
     "private": true,
     "scripts": {

diff --git a/src/global.css b/src/global.css
@@ -4,6 +4,7 @@
     --textColor: #343434;
     --backgroundColor: #e5e5e5;
     --fontFamily: Roboto, sans-serif;
+    --kalam: Kalam, cursive;
 }
 
 @font-face {
@@ -40,7 +41,7 @@
 html,
 body,
 #app,
-#app>div {
+#app > div {
     width: 100%;
     height: 100%;
     overflow: hidden;
@@ -142,7 +143,6 @@ select {
 }
 
 .box-header-text {
-    width: calc(100% - 40px);
     font-size: 16px;
     font-weight: 500;
     padding-left: 10px;

diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -2,13 +2,16 @@
     import { swiper } from '$lib/stores/swiper';
 
     export let text: string;
+    export let buttonIcon: string | null = null;
+    export let onButtonClick: () => void = () => null;
 </script>
 
 <header>
-    <div class="header-padding">
-        <button class="icon header-buttons" on:click={() => $swiper?.slideTo(0)}>menu</button>
-        <div id="header-text">{text}</div>
-    </div>
+    <button class="icon header-buttons" on:click={() => $swiper?.slideTo(0)}>menu</button>
+    <div id="header-text">{text}</div>
+    {#if buttonIcon}
+        <button class="icon header-buttons" on:click={onButtonClick}>{buttonIcon}</button>
+    {/if}
 </header>
 
 <style>
@@ -17,26 +20,21 @@
         height: 60px;
         background-color: var(--primaryColor);
         color: white;
-    }
-
-    .header-padding {
-        width: 100%;
-        margin: auto;
-        overflow: hidden;
+        display: flex;
+        justify-content: center;
     }
 
     .header-buttons {
         width: 60px;
         height: 60px;
-        float: left;
+        flex-shrink: 0;
     }
 
     #header-text {
-        width: calc(100% - 60px);
+        width: 100%;
         height: 60px;
         line-height: 60px;
         font-size: 18px;
         font-weight: 500;
-        float: left;
     }
 </style>
diff --git a/src/lib/components/Menu.svelte b/src/lib/components/Menu.svelte
@@ -9,6 +9,7 @@
     const items: MenuItem[] = [
         { icon: 'assignment', name: 'zumBlock', path: '/' },
         { icon: 'timeline', name: 'statistiken', path: '/stats' },
+        { icon: 'history', name: 'vergangenePartien', path: '/history' },
         { icon: 'settings', name: 'einstellungen', path: '/settings' },
     ];
 

diff --git a/src/lib/stores/history.ts b/src/lib/stores/history.ts
@@ -0,0 +1,19 @@
+import type { Match } from '$lib/types';
+import { persistentWritable } from '$lib/utils';
+
+function createHistoryStore() {
+    const { subscribe, update, set } = persistentWritable<Match[]>('matchHistory', []);
+
+    return {
+        subscribe,
+        delete: () => set([]),
+        addMatch: (match: Match) => {
+            update(history => {
+                const matchIndex = history.findIndex(m => m.id === match.id);
+                return matchIndex >= 0 ? history : [match, ...history];
+            });
+        },
+    };
+}
+
+export const matchHistory = createHistoryStore();
diff --git a/src/lib/stores/match.ts b/src/lib/stores/match.ts
@@ -4,37 +4,52 @@ import { leadingZero, persistentWritable } from '$lib/utils';
 import { derived, get } from 'svelte/store';
 
 function createMatchStore() {
-    const { subscribe, set, update } = persistentWritable<Match>('match', []);
+    const getNewMatch = () => ({ id: new Date().getTime(), games: [] });
+
+    const { subscribe, set, update } = persistentWritable<Match>('match', getNewMatch());
+
     return {
         subscribe,
-        addGame: (teamIndex: 0 | 1, points: number) => update(match => [...match, {
-            team: teamIndex,
-            points,
-            time: new Date().getTime(),
-        }]),
-        revertLastGame: () => update(match => match.filter((_, index) => index + 1 < match.length)),
-        reset: () => set([]),
+        reset: () => set(getNewMatch()),
+        revertLastGame: () => {
+            update(match => ({
+                id: match.id,
+                games: match.games.filter((_, index) => index + 1 < match.games.length),
+            }));
+        },
+        addGame: (teamIndex: 0 | 1, points: number) => {
+            update(match => ({
+                id: match.id,
+                games: [...match.games, {
+                    team: teamIndex,
+                    points,
+                    time: new Date().getTime(),
+                }],
+            }));
+        },
     };
 }
 
 export const match = createMatchStore();
 
-export const getMatchScore = derived(match, $match => {
+export function computeMatchScore(match: Match) {
     const score = [0, 0];
-    $match.forEach(game => (score[game.team] += game.points));
+    match.games.forEach(game => (score[game.team] += game.points));
     return score;
-});
+}
+
+export const getMatchScore = derived(match, $match => computeMatchScore($match));
 
 export const isMatchFinished = derived([getMatchScore, pointGoal], ([$getMatchScore, $pointGoal]) => {
     return $getMatchScore.some(score => score >= $pointGoal);
 });
 
 export const averageGameTime = derived(match, $match => {
-    if ($match.length > 1) {
+    if ($match.games.length > 1) {
         let result = 0;
         let counter = 0;
-        for (let i = 1; i < $match.length; i++) {
-            const secondsDiff = Math.round(($match[i].time - $match[i - 1].time) / 1000);
+        for (let i = 1; i < $match.games.length; i++) {
+            const secondsDiff = Math.round(($match.games[i].time - $match.games[i - 1].time) / 1000);
             if (secondsDiff <= 900) {
                 result += secondsDiff;
                 counter++;
@@ -54,7 +69,7 @@ export function getChartData() {
 
     const matchData = get(match);
 
-    for (const game of matchData) {
+    for (const game of matchData.games) {
         if (game.team === 0) {
             data1.push(data1[data1.length - 1] + game.points);
             data2.push(data2[data2.length - 1]);

diff --git a/src/lib/translations.ts b/src/lib/translations.ts
@@ -23,6 +23,9 @@ export const translations: Record<Language, TranslationKeys> = {
         mir: 'Wir',
         ja: 'Ja',
         nein: 'Nein',
+        vergangenePartien: 'Vergangene Partien',
+        noHistory: 'Abgeschlossene Partien werden hier angezeigt.',
+        confirmHistoryDeletion: 'Möchtest du wirklich den gesamten Verlauf löschen?',
     },
     [Language.UNTERLOND]: {
         zumBlock: 'Zum Wattblock',
@@ -46,6 +49,9 @@ export const translations: Record<Language, TranslationKeys> = {
         mir: 'Mir',
         ja: 'Jo',
         nein: 'Na',
+        vergangenePartien: 'Olte Partien',
+        noHistory: 'Ogschlossene Partien werden do ungezoag.',
+        confirmHistoryDeletion: 'Willsch wirklich in gonzn Verlauf löschn?',
     },
     [Language.LAIVESOTT]: {
         zumBlock: 'al blocchet de watten',
@@ -69,6 +75,9 @@ export const translations: Record<Language, TranslationKeys> = {
         mir: 'Noi',
         ja: 'Si',
         nein: 'No',
+        vergangenePartien: 'Olte Partien',
+        noHistory: 'Ogschlossene Partien werden do ungezoag.',
+        confirmHistoryDeletion: 'Willsch wirklich in gonzn Verlauf löschn?',
     },
     [Language.PUSTOTOL]: {
         zumBlock: 'Zin Wattblock',
@@ -92,6 +101,9 @@ export const translations: Record<Language, TranslationKeys> = {
         mir: 'Mir',
         ja: 'Jo',
         nein: 'Na',
+        vergangenePartien: 'Olta Partien',
+        noHistory: 'Fertiga Partein wern do ungizuag.',
+        confirmHistoryDeletion: 'Willsch wirklich in gonzn Volauf löschn?',
     },
     [Language.TELDRARISCH]: {
         zumBlock: 'Zin Wattblöck',
@@ -115,6 +127,9 @@ export const translations: Record<Language, TranslationKeys> = {
         mir: 'Wiu',
         ja: 'Jo',
         nein: 'Na',
+        vergangenePartien: 'Olta Partien',
+        noHistory: 'Ougschlössna Partien weng dou ohgizoag.',
+        confirmHistoryDeletion: 'Willsche wirklich in gonzn Volaf leschn?',
     },
     [Language.LADIN]: {
         zumBlock: 'Al bloch de batadù',
@@ -138,5 +153,8 @@ export const translations: Record<Language, TranslationKeys> = {
         mir: 'nos',
         ja: 'ê',
         nein: 'no',
+        vergangenePartien: 'Vedles partides',
+        noHistory: 'Partides ruvades gnará mostrades chiló.',
+        confirmHistoryDeletion: 'Oste bagn straiché demez düta la cronologia?',
     },
 };
diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -29,6 +29,9 @@ export type TranslationKeys = {
     mir: string;
     ja: string;
     nein: string;
+    vergangenePartien: string;
+    noHistory: string;
+    confirmHistoryDeletion: string;
 };
 
 export type MenuItem = {
@@ -37,7 +40,10 @@ export type MenuItem = {
     path: string;
 };
 
-export type Match = Win[];
+export type Match = {
+    id: number;
+    games: Win[];
+};
 
 export type Win = {
     team: 0 | 1;

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -10,9 +10,9 @@ export function persistentWritable<T>(localStorageKey: string, defaultValue: T):
         return writable(defaultValue);
     }
 
-    const localStorageValue = localStorage.getItem('wattastisch_' + localStorageKey);
+    const localStorageValue = localStorage.getItem(localStorageKey);
     const initialValue = localStorageValue ? JSON.parse(localStorageValue) : defaultValue;
     const store = writable(initialValue);
-    store.subscribe(value => localStorage.setItem('wattastisch_' + localStorageKey, JSON.stringify(value)));
+    store.subscribe(value => localStorage.setItem(localStorageKey, JSON.stringify(value)));
     return store;
 }