From da79d0d5eb958ef3129675ef1118b85ba17271a0 Mon Sep 17 00:00:00 2001 From: Ahmed Date: Sat, 16 Mar 2024 10:42:22 -0600 Subject: [PATCH 1/4] Clean up useGameState.ts --- client/src/App.tsx | 5 +++-- client/src/hooks/useGameState.ts | 14 ++------------ 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/client/src/App.tsx b/client/src/App.tsx index cf9bc91..b74235c 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -48,8 +48,9 @@ export default function App() { )); React.useEffect(() => { - if (!isTestingPhase) return; - gameState.startTestingPhaseTimer(); + if (isTestingPhase) { + gameState.startTestingPhaseTimer(); + } }, [isTestingPhase, gameState.startTestingPhaseTimer, gameState]); if (gameState.isRandomUsersLoading) { diff --git a/client/src/hooks/useGameState.ts b/client/src/hooks/useGameState.ts index 99bca12..f027008 100644 --- a/client/src/hooks/useGameState.ts +++ b/client/src/hooks/useGameState.ts @@ -59,13 +59,13 @@ export const useGameState = () => { isLoading: isRandomUsersLoading, setIsLoading } = useRandomUsers(numOfRandomUsers, isLearningPhase, startLearningPhaseTimer); - const saveGameState = (currentLevel: number) => { + const saveGameStateToBrowserStorage = (currentLevel: number) => { sessionStorage.setItem('currentLevel', String(currentLevel)); }; const updateCurrentLevel = (level: number) => { setCurrentLevel(level); - saveGameState(level); + saveGameStateToBrowserStorage(level); }; function handleGameRestart() { @@ -144,25 +144,15 @@ export const useGameState = () => { return { currentLevel, - setCurrentLevel, numOfRandomUsers, - setNumOfRandomUsers, - enteredNames, - setEnteredNames, isLevelOver, - setIsLevelOver, isLearningPhase, - setIsLearningPhase, isWaitingTestStart, - setIsWaitingTestStart, learningPhaseTimeRemainingInSeconds, testingPhaseTimeRemainingInSeconds, startTestingPhaseTimer, randomUsers, - setRandomUsers, isRandomUsersLoading, - saveGameState, - updateCurrentLevel, handleGameRestart, handleTestCountdown, handleTestStart, From 750fddfb75ba463be88d7425869f3b778ac7c11f Mon Sep 17 00:00:00 2001 From: Ahmed Date: Sat, 16 Mar 2024 11:42:32 -0600 Subject: [PATCH 2/4] Save game state to browser storage --- client/src/hooks/useGameState.ts | 23 +++++++++++++---- client/src/routes/Profile.tsx | 44 +++++++++++++++++++++++--------- 2 files changed, 50 insertions(+), 17 deletions(-) diff --git a/client/src/hooks/useGameState.ts b/client/src/hooks/useGameState.ts index f027008..59b12b7 100644 --- a/client/src/hooks/useGameState.ts +++ b/client/src/hooks/useGameState.ts @@ -23,6 +23,10 @@ interface UserType { }; } +type GameState = { + currentLevel: number; +}; + const STARTING_LEVEL = 1; const LEARNING_PHASE_DURATION_IN_SECONDS = 180; const TESTING_PHASE_DURATION_IN_SECONDS = 180; @@ -34,8 +38,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([]); @@ -59,13 +64,21 @@ export const useGameState = () => { isLoading: isRandomUsersLoading, setIsLoading } = useRandomUsers(numOfRandomUsers, isLearningPhase, startLearningPhaseTimer); - const saveGameStateToBrowserStorage = (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); - saveGameStateToBrowserStorage(level); + saveGameStateToBrowserStorage({ currentLevel: level }); }; function handleGameRestart() { diff --git a/client/src/routes/Profile.tsx b/client/src/routes/Profile.tsx index 0ce2acb..9560401 100644 --- a/client/src/routes/Profile.tsx +++ b/client/src/routes/Profile.tsx @@ -3,6 +3,7 @@ import React from 'react'; import styled from 'styled-components'; import Navbar from '../components/Navbar.tsx'; +import { useAuthState } from '../hooks/useAuthState.ts'; const ProfileWrapper = styled.div` font-family: 'Arial', sans-serif; @@ -41,14 +42,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 ( @@ -58,10 +77,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}*/} From fe9c748171167c624a428cb6b0f47b47810ef1fb Mon Sep 17 00:00:00 2001 From: Ahmed Date: Mon, 18 Mar 2024 20:58:13 -0600 Subject: [PATCH 3/4] Format tsconfig.json --- client/package.json | 2 +- client/tsconfig.json | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/client/package.json b/client/package.json index dd2828d..219d27c 100644 --- a/client/package.json +++ b/client/package.json @@ -23,7 +23,7 @@ "lint-staged": { "*.{js,jsx,ts,tsx,json}": [ "eslint --fix", - "prettier --write" + "prettier --cache --write" ] }, "dependencies": { diff --git a/client/tsconfig.json b/client/tsconfig.json index 2262381..84ac446 100644 --- a/client/tsconfig.json +++ b/client/tsconfig.json @@ -28,8 +28,5 @@ "strictFunctionTypes": true, "strictNullChecks": true }, - "exclude": [ - "./cypress.config.cjs", - "cypress" - ] + "exclude": ["./cypress.config.cjs", "cypress"] } From 6fc37babae80e9ad7ad31ca1a35d3e3f204ab53c Mon Sep 17 00:00:00 2001 From: Ahmed Date: Fri, 22 Mar 2024 17:11:47 -0600 Subject: [PATCH 4/4] Fix cypress tsconfig --- client/cypress/tsconfig.json | 3 ++- client/tsconfig.json | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/client/cypress/tsconfig.json b/client/cypress/tsconfig.json index d51529e..9750e99 100644 --- a/client/cypress/tsconfig.json +++ b/client/cypress/tsconfig.json @@ -3,5 +3,6 @@ "compilerOptions": { "types": ["cypress", "node", "@4tw/cypress-drag-drop"] }, - "include": ["**/*.ts"] + "include": ["../cypress.config.cjs", "**/*.ts"], + "exclude": [] } 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}"] }