refactor(webapp): use map game context to props in user panel

ocftw · Jul 21, 2024 · 29d06ec · 29d06ec
1 parent dab7515
commit 29d06ec
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/packages/webapp/src/components/BoardGame.tsx b/packages/webapp/src/components/BoardGame.tsx
@@ -5,9 +5,6 @@ import Table from '@/components/Table/Table';
 import DevActions from '@/components/DevActions/DevActions';
 import ActionBar from './ActionBoard/ActionBar';
 import GameHeader from './GameHeader/GameHeader';
-import { playerNameMap } from './playerNameMap';
-import { PlayersSelector } from '@/game/store/slice/players';
-import { ScoreBoardSelector } from '@/game/store/slice/scoreBoard';
 import UserPanel from './UserPanel/UserPanel';
 import { Box } from '@mui/material';
 import { GameContext } from './GameContextHelpers';
@@ -18,13 +15,7 @@ const Board: React.FC<GameContext> = (gameContext) => {
   return (
     <Box sx={{ display: 'flex' }}>
       {!!playerID &&
-        <UserPanel
-          userName={playerNameMap[playerID]}
-          actionTokens={PlayersSelector.getNumActionTokens(G.players, playerID)}
-          workerTokens={PlayersSelector.getNumWorkerTokens(G.players, playerID)}
-          score={ScoreBoardSelector.getPlayerPoints(G.table.scoreBoard, playerID)}
-          projectCards={PlayersSelector.getProjectCards(G.players, playerID)}
-        />
+        <UserPanel gameContext={gameContext}/>
       }
       <Box sx={{ flex: 1, padding: '16px', marginLeft: { xs: 0 } }}>
         <GameHeader players={G.players} scoreBoard={G.table.scoreBoard}  />

diff --git a/packages/webapp/src/components/UserPanel/UserPanel.tsx b/packages/webapp/src/components/UserPanel/UserPanel.tsx
@@ -7,6 +7,10 @@ import { styled } from '@mui/material/styles';
 import { ProjectCard } from '@/game';
 import { getSelectedHandProjectCards, toggleHandProjectCardSelection } from '@/lib/reducers/handProjectCardSlice';
 import { Chip } from '@mui/material';
+import { GameContext, connectGameContext } from '../GameContextHelpers';
+import { playerNameMap } from '../playerNameMap';
+import { PlayersSelector } from '@/game/store/slice/players';
+import { ScoreBoardSelector } from '@/game/store/slice/scoreBoard';
 
 type UserPanelProps = {
   userName: string;
@@ -93,4 +97,23 @@ const UserPanel: React.FC<UserPanelProps> = ({ userName, workerTokens, actionTok
   );
 };
 
-export default UserPanel;
+const mapGameContextToProps = ({ G, playerID }: GameContext): UserPanelProps => {
+  // only player will see user panel
+  playerID = playerID!;
+
+  const userName = playerNameMap[playerID];
+  const actionTokens = PlayersSelector.getNumActionTokens(G.players, playerID);
+  const workerTokens=PlayersSelector.getNumWorkerTokens(G.players, playerID);
+  const score=ScoreBoardSelector.getPlayerPoints(G.table.scoreBoard, playerID);
+  const projectCards= PlayersSelector.getProjectCards(G.players, playerID);
+
+  return {
+    userName,
+    workerTokens,
+    actionTokens,
+    score,
+    projectCards,
+  };
+}
+
+export default connectGameContext(mapGameContextToProps)(UserPanel);