diff --git a/client/cypress/tsconfig.json b/client/cypress/tsconfig.json index 9878584..9750e99 100644 --- a/client/cypress/tsconfig.json +++ b/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": [] } diff --git a/client/src/hooks/useGameState.ts b/client/src/hooks/useGameState.ts index 487c0d1..4836a98 100644 --- a/client/src/hooks/useGameState.ts +++ b/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([]); @@ -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, diff --git a/client/src/routes/Profile.tsx b/client/src/routes/Profile.tsx index 938e584..9c89f79 100644 --- a/client/src/routes/Profile.tsx +++ b/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 ( @@ -57,10 +78,11 @@ export default function Profile() { User Profile Username: {profileData.username} - Total Levels Played: {profileData.totalLevels} - Highest Score: {profileData.highestScore} - Play Time: {profileData.playTime} - Accuracy: {profileData.accuracy} + Total Levels Played: {profileData.totalLevelsPlayed} + Highest Level Achieved: {profileData.highestLevel} + {/*Highest Score: {profileData.highestScore}*/} + {/*Play Time: {profileData.playTime}*/} + {/*Accuracy: {profileData.accuracy}*/} diff --git a/client/tsconfig.json b/client/tsconfig.json index 84ac446..83549af 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -28,5 +28,5 @@ "strictFunctionTypes": true, "strictNullChecks": true }, - "exclude": ["./cypress.config.cjs", "cypress"] + "include": ["src/**/*.{js,ts,jsx,tsx,json}"] }