Game state

client/cypress/tsconfig.json

@@ -1,31 +1,8 @@
 {
-    "$schema": "https://json.schemastore.org/tsconfig",
-    "display": "Vite React",
-    "_version": "3.0.0",
-
+    "extends": "../tsconfig.json",
     "compilerOptions": {
-        "types": ["cypress", "node", "@4tw/cypress-drag-drop"],
-        "target": "ES2020",
-        "useDefineForClassFields": true,
-        "lib": ["ES2020", "DOM", "DOM.Iterable"],
-        "module": "ESNext",
-        "skipLibCheck": true,
-        /* Bundler mode */
-        "moduleResolution": "bundler",
-        "allowImportingTsExtensions": true,
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "noEmit": true,
-        "jsx": "react-jsx",
-        /* Linting */
-        "strict": true,
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "noFallthroughCasesInSwitch": true,
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "strictFunctionTypes": true,
-        "strictNullChecks": true
+        "types": ["cypress", "node", "@4tw/cypress-drag-drop"]
     },
-    "include": ["**/*.ts"]
+    "include": ["../cypress.config.cjs", "**/*.ts"],
+    "exclude": []
 }

client/src/hooks/useGameState.ts

@@ -11,6 +11,10 @@ interface EnteredNamesType {
     isCorrect?: boolean;
 }
 
+type GameState = {
+    currentLevel: number;
+};
+
 const STARTING_LEVEL = 1;
 const LEARNING_PHASE_DURATION_IN_SECONDS = 180;
 const TESTING_PHASE_DURATION_IN_SECONDS = 180;
@@ -22,8 +26,9 @@ const NUM_OF_USERS_TO_SHOW = NUM_OF_USERS_TO_ADD_PER_LEVEL + STARTING_LEVEL;
    In the learning phase, the player will memorize the faces and names.
  */
 export const useGameState = () => {
-    const storedCurrentLevel = sessionStorage.getItem('currentLevel');
-    const parsedCurrentLevel = storedCurrentLevel ? parseInt(storedCurrentLevel) : STARTING_LEVEL;
+    const storedGameState = sessionStorage.getItem('game_state');
+    const parsedGameState = storedGameState ? JSON.parse(storedGameState) : { currentLevel: STARTING_LEVEL };
+    const parsedCurrentLevel = parsedGameState.currentLevel;
     const [currentLevel, setCurrentLevel] = React.useState(parsedCurrentLevel);
     const [numOfRandomUsers, setNumOfRandomUsers] = React.useState(2 * currentLevel + 1);
     const [enteredNames, setEnteredNames] = React.useState<EnteredNamesType[]>([]);
@@ -54,13 +59,20 @@ export const useGameState = () => {
         startTestingPhaseTimer();
     }, [isTestingPhase, startTestingPhaseTimer]);
 
-    const saveGameState = (currentLevel: number) => {
-        sessionStorage.setItem('currentLevel', String(currentLevel));
+    React.useEffect(() => {
+        saveGameStateToBrowserStorage({
+            currentLevel
+        });
+    }, [currentLevel]);
+
+    const saveGameStateToBrowserStorage = (gameState: GameState) => {
+        const gameStateStr = JSON.stringify(gameState);
+        sessionStorage.setItem('game_state', gameStateStr);
     };
 
     const updateCurrentLevel = (level: number) => {
         setCurrentLevel(level);
-        saveGameState(level);
+        saveGameStateToBrowserStorage({ currentLevel: level });
     };
 
     function handleGameRestart() {
@@ -141,27 +153,17 @@ export const useGameState = () => {
 
     return {
         currentLevel,
-        setCurrentLevel,
         numOfRandomUsers,
-        setNumOfRandomUsers,
-        enteredNames,
-        setEnteredNames,
         userNames,
         isLevelOver,
-        setIsLevelOver,
         isLearningPhase,
-        setIsLearningPhase,
         isWaitingTestStart,
-        setIsWaitingTestStart,
-        isTestingPhase,
         learningPhaseTimeRemainingInSeconds,
         testingPhaseTimeRemainingInSeconds,
+        isTestingPhase,
         startTestingPhaseTimer,
         randomUsers,
-        setRandomUsers,
         isRandomUsersLoading,
-        saveGameState,
-        updateCurrentLevel,
         handleGameRestart,
         handleTestCountdown,
         handleTestStart,

client/src/routes/Profile.tsx

@@ -1,6 +1,9 @@
+import React from 'react';
+
 import styled from 'styled-components';
 
 import Navbar from '../components/Navbar.tsx';
+import { useAuthState } from '../hooks/useAuthState.ts';
 import { ThemedAppContainer } from '../components/ThemedAppContainer.tsx';
 
 const ProfileWrapper = styled.div`
@@ -40,14 +43,32 @@ const InfoItem = styled.div`
 `;
 
 export default function Profile() {
-    // Dummy profile data.
-    const profileData = {
-        username: 'John Wick',
-        totalLevels: 20,
-        highestScore: 1500,
-        playTime: '10 hours',
-        accuracy: '80%'
-    };
+    const { user } = useAuthState();
+    const [profileData, setProfileData] = React.useState({
+        username: user,
+        currentLevel: 1,
+        totalLevelsPlayed: 0,
+        highestLevel: 0
+    });
+
+    React.useEffect(() => {
+        const loadGameStateFromBrowserStorage = () => {
+            const gameStateStr = sessionStorage.getItem('game_state');
+            if (gameStateStr) {
+                return JSON.parse(gameStateStr);
+            }
+        };
+
+        const loadedGameState = loadGameStateFromBrowserStorage();
+        setProfileData(prevProfileData => ({
+            ...prevProfileData,
+            totalLevelsPlayed: prevProfileData.totalLevelsPlayed + 1,
+            highestLevel:
+                loadedGameState.currentLevel > prevProfileData.currentLevel
+                    ? loadedGameState.currentLevel
+                    : prevProfileData.currentLevel
+        }));
+    }, []);
 
     return (
         <ThemedAppContainer>
@@ -57,10 +78,11 @@ export default function Profile() {
                     <Title>User Profile</Title>
                     <ProfileInfo>
                         <InfoItem>Username: {profileData.username}</InfoItem>
-                        <InfoItem>Total Levels Played: {profileData.totalLevels}</InfoItem>
-                        <InfoItem>Highest Score: {profileData.highestScore}</InfoItem>
-                        <InfoItem>Play Time: {profileData.playTime}</InfoItem>
-                        <InfoItem>Accuracy: {profileData.accuracy}</InfoItem>
+                        <InfoItem>Total Levels Played: {profileData.totalLevelsPlayed}</InfoItem>
+                        <InfoItem>Highest Level Achieved: {profileData.highestLevel}</InfoItem>
+                        {/*<InfoItem>Highest Score: {profileData.highestScore}</InfoItem>*/}
+                        {/*<InfoItem>Play Time: {profileData.playTime}</InfoItem>*/}
+                        {/*<InfoItem>Accuracy: {profileData.accuracy}</InfoItem>*/}
                     </ProfileInfo>
                 </ProfileContainer>
             </ProfileWrapper>

client/tsconfig.json

@@ -28,5 +28,5 @@
         "strictFunctionTypes": true,
         "strictNullChecks": true
     },
-    "exclude": ["./cypress.config.cjs", "cypress"]
+    "include": ["src/**/*.{js,ts,jsx,tsx,json}"]
 }