update: Mon 22 Jul 2024 16:32:31 CEST

cophilot · Jul 22, 2024 · db5bb53 · db5bb53
1 parent 1ff116f
commit db5bb53
Show file tree

Hide file tree

Showing 33 changed files with 367 additions and 50 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,11 @@
 import './App.scss';
+import CookieMessage from './components/CookieMessage/CookieMessage';
 import Routes from './Routes';
 
 function App() {
     return (
         <>
+            <CookieMessage />
             <Routes />
         </>
     );

diff --git a/src/Routes.tsx b/src/Routes.tsx
@@ -4,11 +4,16 @@ import HarmoniesView from './games/harmonies/View';
 import SevenWondersDuelView from './games/seven-wonders-duel/View';
 import DorfromatikDuelView from './games/dorfromatik-duel/View';
 import EverdellView from './games/everdell/View';
+import ExpandableTable from './views/ExpandableTable';
 function Routes() {
     return (
         <>
             <HashRouter>
                 <ReactRoutes>
+                    <Route
+                        path="/general-table/expandable"
+                        Component={ExpandableTable}
+                    />
                     <Route path="/game/everdell" Component={EverdellView} />
                     <Route
                         path="/game/dorfromatik-duel"

diff --git a/src/allGames.ts b/src/allGames.ts
@@ -0,0 +1,8 @@
+export default function getAllGames() {
+    return [
+        'Harmonies',
+        'Seven Wonders: Duel',
+        'Dorfromatik: Duel',
+        'Everdell',
+    ];
+}
diff --git a/src/api/BoardScorePage/BoardScorePage.tsx b/src/api/BoardScorePage/BoardScorePage.tsx
@@ -10,6 +10,7 @@ import { useNavigate } from 'react-router-dom';
 interface BoardScoreTableProps {
     definition: any;
     children?: any;
+    onCellChange?: (rowIndex: number, playerIndex: number, value: any) => void;
 }
 
 /**
@@ -21,17 +22,29 @@ interface BoardScoreTableProps {
 export default function BoardScorePage({
     definition,
     children,
+    onCellChange,
 }: BoardScoreTableProps): JSX.Element {
     const navigate = useNavigate();
+
     const [playerSize, setPlayerSize] = useState<number>(
         GameStorage.getPlayerSize(definition.title, definition.playerSizes[0])
     );
+    const [settings, setSettings] = useState(
+        GameStorage.getGameSettings(definition.title, {
+            showHelp: false,
+        })
+    );
 
     const onPlayerSizeChange = (size: number) => {
         setPlayerSize(size);
         GameStorage.setPlayerSize(definition.title, size);
     };
 
+    const applySettings = (newSettings: any) => {
+        setSettings(newSettings);
+        GameStorage.setGameSettings(definition.title, newSettings);
+    };
+
     useEffect(() => {
         setInitialAttributes(definition);
     }, [definition]);
@@ -49,8 +62,21 @@ export default function BoardScorePage({
                 initPlayerSize={playerSize}
                 onPlayerSizeChange={onPlayerSizeChange}></PlayerSwitch>
             <BoardScoreTable
+                onCellChange={onCellChange}
                 definition={definition}
+                gameSettings={settings}
                 playerSize={playerSize}></BoardScoreTable>
+            <button
+                className="btn selected nav-btn print-hide"
+                onClick={() => {
+                    const newSettings = {
+                        ...settings,
+                        showHelp: !settings.showHelp,
+                    };
+                    applySettings(newSettings);
+                }}>
+                {settings.showHelp ? 'Hide Help' : 'Help'}
+            </button>
             <button className="btn selected nav-btn print-hide" onClick={print}>
                 Export
             </button>
@@ -88,17 +114,20 @@ function print() {
         const element = showElements[i] as HTMLElement;
         element.style.display = 'block';
     }
+    setTimeout(() => {
+        window.print();
+        setTimeout(() => {
+            for (let i = 0; i < hideElements.length; i++) {
+                const element = hideElements[i] as HTMLElement;
+                element.style.display = 'block';
+            }
 
-    window.print();
-    for (let i = 0; i < hideElements.length; i++) {
-        const element = hideElements[i] as HTMLElement;
-        element.style.display = 'block';
-    }
-
-    for (let i = 0; i < showElements.length; i++) {
-        const element = showElements[i] as HTMLElement;
-        element.style.display = 'none';
-    }
+            for (let i = 0; i < showElements.length; i++) {
+                const element = showElements[i] as HTMLElement;
+                element.style.display = 'none';
+            }
+        }, 100);
+    }, 100);
 }
 
 function setInitialAttributes(definition: any) {

diff --git a/src/api/BoardScoreTable/BoardScoreTable.scss b/src/api/BoardScoreTable/BoardScoreTable.scss
@@ -13,6 +13,7 @@
         color: var(--bg-color);
         position: sticky;
         top: -3px;
+        z-index: 10000;
     }
 
     th,
@@ -40,6 +41,10 @@
         background-color: var(--primary-color);
         color: var(--bg-color);
     }
+    .row-help {
+        font-size: 16px;
+        opacity: 0.7;
+    }
 }
 
 @media (max-width: 600px) {
@@ -52,16 +57,15 @@
             font-size: 16px;
         }
         .row-icon {
-            height: 50px;
+            height: 60px;
         }
         input {
             font-size: 16px;
             max-width: 30px;
         }
-        th {
-            input {
-                font-size: 16px;
-            }
+        .row-help {
+            font-size: 11px;
+            opacity: 0.7;
         }
     }
 }
diff --git a/src/api/BoardScoreTable/BoardScoreTable.tsx b/src/api/BoardScoreTable/BoardScoreTable.tsx
@@ -2,10 +2,13 @@
 import { useEffect, useState } from 'react';
 import './BoardScoreTable.scss';
 import GameStorage from '../utils/GameStorage';
+import { getFunctionForWinMode, WinMode } from '../types/WinMode';
 
 interface BoardScoreTableProps {
     definition: any;
     playerSize: number;
+    gameSettings: any;
+    onCellChange?: (rowIndex: number, playerIndex: number, value: any) => void;
 }
 
 /**
@@ -14,7 +17,12 @@ interface BoardScoreTableProps {
  * @version 1.0.0
  * @created 2024-7-21
  */
-function BoardScoreTable({ definition, playerSize }: BoardScoreTableProps) {
+function BoardScoreTable({
+    definition,
+    playerSize,
+    gameSettings,
+    onCellChange,
+}: BoardScoreTableProps) {
     const playerSizes = Array.from(Array(playerSize).keys());
     const rows = definition.rows || [];
 
@@ -40,7 +48,11 @@ function BoardScoreTable({ definition, playerSize }: BoardScoreTableProps) {
     }, [playerSize, tableMatrix]);
 
     const getTableValue = (rowIndex: number, playerIndex: number) => {
-        return tableMatrix[rowIndex][playerIndex];
+        const row = tableMatrix[rowIndex];
+        if (!row) {
+            return 0;
+        }
+        return tableMatrix[rowIndex][playerIndex] || 0;
     };
 
     const setTableValue = (
@@ -52,16 +64,31 @@ function BoardScoreTable({ definition, playerSize }: BoardScoreTableProps) {
         if (isNaN(value)) {
             return;
         }
+
+        let couldBeAdded = false;
         const newTableMatrix = tableMatrix.map(
             (row: number[], index: number) => {
                 if (index === rowIndex) {
                     row[playerIndex] = Number(value);
+                    couldBeAdded = true;
                 }
                 return row;
             }
         );
+
+        if (!couldBeAdded) {
+            newTableMatrix.push(
+                Array.from(Array(playerSize).keys()).map(() => 0)
+            );
+            newTableMatrix[newTableMatrix.length - 1][playerIndex] =
+                Number(value);
+        }
+
         setTableMatrix(newTableMatrix);
         GameStorage.setGameMatrix(definition.title, newTableMatrix);
+        if (onCellChange) {
+            onCellChange(rowIndex, playerIndex, value);
+        }
     };
 
     const getColumnTotal = (playerIndex: number) => {
@@ -74,8 +101,8 @@ function BoardScoreTable({ definition, playerSize }: BoardScoreTableProps) {
     };
 
     const getWinningScore = () => {
-        const winMode = definition.winMode || 'most';
-        const winFn = winMode === 'most' ? Math.max : Math.min;
+        const winMode = definition.winMode || WinMode.MOST;
+        const winFn = getFunctionForWinMode(winMode);
         const value = winFn(...totalRow);
         // check if all values are the same
         if (totalRow.every((val) => val === value)) {
@@ -111,8 +138,11 @@ function BoardScoreTable({ definition, playerSize }: BoardScoreTableProps) {
             </thead>
             <tbody>
                 {rows.map((row: any, index: number) => (
-                    <tr key={index}>
-                        <FirstRowCell row={row} />
+                    <tr key={index} style={getStyleFromRow(row)}>
+                        <FirstRowCell
+                            row={row}
+                            helpOn={gameSettings.showHelp}
+                        />
                         {playerSizes.map((playerIndex) => (
                             <InputCell
                                 key={playerIndex}
@@ -125,7 +155,10 @@ function BoardScoreTable({ definition, playerSize }: BoardScoreTableProps) {
                     </tr>
                 ))}
                 <tr key="total" className="total-row">
-                    <FirstRowCell row={{ name: 'Total' }} />
+                    <FirstRowCell
+                        row={{ name: 'Total' }}
+                        helpOn={gameSettings.showHelp}
+                    />
                     {totalRow.map((value, playerIndex) => (
                         <td
                             key={playerIndex}
@@ -180,16 +213,36 @@ function InputCell({
 
 type FirstRowCellProps = {
     row: any;
+    helpOn?: boolean;
 };
 
-function FirstRowCell({ row }: FirstRowCellProps) {
+function FirstRowCell({ row, helpOn }: FirstRowCellProps) {
     let inner = row.name;
     if (row.icon) {
         inner = <img src={row.icon} alt={row.name} className="row-icon" />;
+        if (helpOn) {
+            inner = (
+                <>
+                    {inner}
+                    <p className="row-help">{row.name}</p>
+                </>
+            );
+        }
     }
     return <td style={{ fontWeight: 'bold' }}>{inner}</td>;
 }
 
+function getStyleFromRow(row: any) {
+    const style: any = {};
+    if (row.bgColor) {
+        style.backgroundColor = row.bgColor;
+    }
+    if (row.fontColor) {
+        style.color = row.fontColor;
+    }
+    return style;
+}
+
 function getEmptyTbaleMatrix(rows: number, cols: number) {
     return Array.from(Array(rows).keys()).map(() =>
         Array.from(Array(cols).keys()).map(() => 0)

diff --git a/src/api/types/WinMode.ts b/src/api/types/WinMode.ts
@@ -0,0 +1,16 @@
+export enum WinMode {
+    MOST = 'most',
+    LEAST = 'least',
+    NONE = 'none',
+}
+
+export function getFunctionForWinMode(mode: WinMode) {
+    switch (mode) {
+        case WinMode.MOST:
+            return Math.max;
+        case WinMode.LEAST:
+            return Math.min;
+        case WinMode.NONE:
+            return () => undefined;
+    }
+}
diff --git a/src/api/utils/GameStorage.ts b/src/api/utils/GameStorage.ts
@@ -68,4 +68,21 @@ export default class GameStorage {
             JSON.stringify(matrix)
         );
     }
+
+    static setGameSettings(gameTitle: string, settings: unknown) {
+        localStorage.setItem(
+            GameStorage.getStorageKeyFromTitle(gameTitle, 'settings'),
+            JSON.stringify(settings)
+        );
+    }
+
+    static getGameSettings(gameTitle: string, fallback: unknown = {}) {
+        const settings = localStorage.getItem(
+            GameStorage.getStorageKeyFromTitle(gameTitle, 'settings')
+        );
+        if (settings === null) {
+            return fallback;
+        }
+        return JSON.parse(settings);
+    }
 }
diff --git a/src/components/CookieMessage/CookieMessage.scss b/src/components/CookieMessage/CookieMessage.scss
@@ -0,0 +1,12 @@
+.cookie-message {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: var(--primary-color);
+    color: var(--bg-color);
+    padding-top: 10px;
+    padding-bottom: 20px;
+    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.4);
+    z-index: 1000000;
+}