feat(client): add createProject move

client/src/BoardGame.tsx

@@ -3,15 +3,15 @@ import { Client, BoardProps } from 'boardgame.io/react';
 import { Local } from 'boardgame.io/multiplayer';
 import { OpenStarTerVillageType } from 'packages/game/src/types';
 import Table from './features/Table/Table';
-import Players from './Players/Players';
-import CurrentPlayer from './CurrentPlayer/CurrentPlayer';
+import ActionBoard from './features/ActionBoard/ActionBoard';
+import PlayerHand from './features/PlayerHand/PlayerHand';
 
 const Board: React.FC<BoardProps<OpenStarTerVillageType.State.Root>> = (props) => {
   return (
     <div className='Board'>
+      <ActionBoard {...props} />
       <Table {...props} />
-      <Players {...props} />
-      <CurrentPlayer {...props} />
+      <PlayerHand  {...props} />
     </div>
   );
 }

client/src/app/hooks.ts

@@ -0,0 +1,7 @@
+import { useDispatch, useSelector } from 'react-redux'
+import type { TypedUseSelectorHook } from 'react-redux'
+import type { RootState, AppDispatch } from './store'
+
+export const useAppDispatch: () => AppDispatch = useDispatch
+
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

client/src/app/store.ts

@@ -0,0 +1,12 @@
+import { configureStore } from '@reduxjs/toolkit'
+import actionBoardSlice from '../features/ActionBoard/actionBoardSlice';
+
+export const store = configureStore({
+  reducer: {
+    actionBoard: actionBoardSlice.reducer
+  },
+})
+
+export type RootState = ReturnType<typeof store.getState>
+
+export type AppDispatch = typeof store.dispatch

client/src/features/ActionBoard/ActionBoard.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useEffect } from 'react';
+import { BoardProps } from 'boardgame.io/react';
+import { OpenStarTerVillageType as Type } from 'packages/game/src/types';
+import { Box, Heading, ButtonGroup, Button } from '@chakra-ui/react'
+import { useAppDispatch, useAppSelector } from '../../app/hooks';
+import ActionBoardSlice from './actionBoardSlice';
+
+const ActionBoard: React.FC<BoardProps<Type.State.Root>> = (props) => {
+  const dispatch = useAppDispatch();
+  const playerID = props.playerID;
+  const currentPlayer = props.ctx.currentPlayer;
+  const currentMove = useAppSelector(state =>
+    state.actionBoard.moves.length
+      ? state.actionBoard.moves[state.actionBoard.moves.length - 1]
+      : null
+  );
+  const isCreateProjectMoveActive = currentMove?.move === 'createProject';
+
+  useEffect(() => {
+    if (playerID === currentPlayer) {
+      dispatch(ActionBoardSlice.actions.playerTurnInited(currentPlayer));
+    }
+  }, [playerID, currentPlayer, dispatch]);
+
+  const handleCreateProjectButtonClick = useCallback(() => {
+    if (isCreateProjectMoveActive) {
+      return;
+    }
+
+    dispatch(ActionBoardSlice.actions.moveInited({ moveType: 'createProject' }));
+  }, [isCreateProjectMoveActive, dispatch]);
+
+  return (
+    <>
+      <Box m="4" p="4" border="1px" borderRadius="lg" borderColor="gray.100">
+        <Heading size="xs">Current Player: {currentPlayer}</Heading>
+      </Box>
+      <Box m="4" p="4" border="1px" borderRadius="lg" borderColor="gray.100">
+        {playerID === currentPlayer && (
+          <ButtonGroup size='sm' spacing='6'>
+            <Button
+              onClick={handleCreateProjectButtonClick}
+              colorScheme={isCreateProjectMoveActive ? "red" : "gray"}
+            >
+              Create Project
+            </Button>
+            <Button disabled>Move 2</Button>
+            <Button disabled>Move 3</Button>
+          </ButtonGroup>
+        )}
+      </Box>
+    </>
+  );
+};
+
+export default ActionBoard;

client/src/features/ActionBoard/ActionBoard.types.ts

@@ -0,0 +1,13 @@
+import { OpenStarTerVillageType as Type } from 'packages/game/src/types';
+
+export type MoveType = keyof Type.Move.AllMoves;
+
+export interface Move {
+  move: MoveType;
+  selections: {
+    tableProject: boolean[];
+    tableJobs: boolean[];
+    handProjects: boolean[];
+    handForces: boolean[];
+  };
+}

client/src/features/ActionBoard/actionBoardSlice.tsx

@@ -0,0 +1,69 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { PlayerID } from 'boardgame.io';
+import { MoveType, Move } from './ActionBoard.types';
+
+export interface ActionBoardState {
+  currentPlayer: PlayerID | null;
+  moves: Move[];
+}
+
+const initialState: ActionBoardState = {
+  currentPlayer: null,
+  moves: []
+}
+
+export const ActionBoardSlice = createSlice({
+  name: 'actionBoard',
+  initialState,
+  reducers: {
+    playerTurnInited: (state, action: PayloadAction<PlayerID>) => {
+      const playerId = action.payload;
+
+      state.currentPlayer = playerId;
+      state.moves = [];
+    },
+    moveInited: (state, action: PayloadAction<{ moveType: MoveType }>) => {
+      const { moveType } = action.payload;
+
+      state.moves.push({
+        move: moveType,
+        selections: {
+          tableProject: [],
+          tableJobs: [],
+          handProjects: [],
+          handForces: [],
+        }
+      });
+    },
+    tableProjectToggled: (state, action: PayloadAction<{ moveIndex: number, tableProjectIndex: number }>) => {
+      const { moveIndex, tableProjectIndex } = action.payload;
+
+      state.moves[moveIndex].selections.tableProject[tableProjectIndex] =
+        !state.moves[moveIndex].selections.tableProject[tableProjectIndex];
+    },
+    tableJobsToggled: (state, action: PayloadAction<{ moveIndex: number, tableJobsIndex: number }>) => {
+      const { moveIndex, tableJobsIndex } = action.payload;
+
+      state.moves[moveIndex].selections.tableJobs[tableJobsIndex] =
+        !state.moves[moveIndex].selections.tableJobs[tableJobsIndex];
+    },
+    handProjectsToggled: (state, action: PayloadAction<{ moveIndex: number, handProjectsIndex: number }>) => {
+      const { moveIndex, handProjectsIndex } = action.payload;
+
+      state.moves[moveIndex].selections.handProjects[handProjectsIndex] =
+        !state.moves[moveIndex].selections.handProjects[handProjectsIndex];
+    },
+    handForcesToggled: (state, action: PayloadAction<{ moveIndex: number, handForcesIndex: number }>) => {
+      const { moveIndex, handForcesIndex } = action.payload;
+
+      state.moves[moveIndex].selections.handForces[handForcesIndex] =
+        !state.moves[moveIndex].selections.handForces[handForcesIndex];
+    },
+    moveSubmitted: (state, action: PayloadAction<{ moveIndex: number }>) => {
+      // TODO: call api
+    }
+  }
+})
+
+export default ActionBoardSlice

client/src/features/Job/ActiveJob.tsx

@@ -0,0 +1,26 @@
+import { useCallback } from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import { OpenStarTerVillageType as Type } from 'packages/game/src/types';
+
+export interface IActiveJobProps {
+  job: Type.Card.Job;
+  jobIndex: number;
+  onClick: (e: { job: IActiveJobProps['job'], jobIndex: IActiveJobProps['jobIndex'] }) => void;
+  selected?: boolean;
+}
+
+const ActiveJob: React.FC<IActiveJobProps> = (props) => {
+  const { job, jobIndex, onClick, selected } = props;
+  const boarderColor = selected ? "red.300" : "gray.100";
+  const handleClick = useCallback(() => {
+    onClick({ job, jobIndex });
+  }, [job, jobIndex, onClick])
+
+  return (
+    <Box m="4" p="4" border="1px" borderRadius="lg" borderColor={boarderColor} onClick={handleClick}>
+      <Text fontSize='sm'>{job.name}</Text>
+    </Box>
+  );
+}
+
+export default ActiveJob;

client/src/features/PlayerHand/PlayerHand.tsx

@@ -0,0 +1,56 @@
+import { BoardProps } from 'boardgame.io/react';
+import { OpenStarTerVillageType as Type } from 'packages/game/src/types';
+import { Box, Heading, HStack, Table, TableCaption, TableContainer, Tbody, Td, Tfoot, Th, Thead, Tr } from '@chakra-ui/react';
+
+const PlayerHand: React.FC<BoardProps<Type.State.Root>> = (props) => {
+  const { G, playerID } = props;
+
+  const headRow = (
+    <Tr h="6">
+      <Th w="60%">職業</Th>
+      <Th w="40%">貢獻</Th>
+    </Tr>
+  );
+
+  const requirementRows = (requirements: Record<string, number>) => {
+    return Object.entries(requirements).map(([jobName, contribution]) => {
+      return (
+        <Tr h="9">
+          <Td>{jobName}</Td>
+          <Td>{contribution}</Td>
+        </Tr>
+      )
+    })
+  };
+
+  const renderHandProjectCards = () => (
+    <HStack w={['100%', '100%', '20%']}>
+      {
+        playerID && G.players[playerID].hand.projects.map((project, index) =>
+          <Box m="4" px="4" border="1px" borderRadius="lg" borderColor="gray.100">
+            <TableContainer overflowX="hidden" overflowY="hidden">
+              <Table size="sm">
+                <TableCaption placement="top" h="9">{project.name}</TableCaption>
+                <Thead>
+                  {headRow}
+                </Thead>
+                <Tbody>
+                  {requirementRows(project.requirements)}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </Box>)
+      }
+    </HStack>
+  );
+
+  return (
+    <>
+      <Heading as="h2" size="lg">Player Hand</Heading>
+      <Heading as="h3" size="md">Project Cards</Heading>
+      {renderHandProjectCards()}
+    </>
+  );
+}
+
+export default PlayerHand;

client/src/features/Table/Table.tsx

@@ -1,23 +1,63 @@
+import { useCallback } from 'react';
 import { BoardProps } from 'boardgame.io/react';
 import { OpenStarTerVillageType as Type } from 'packages/game/src/types';
 import { Box, Stack } from '@chakra-ui/react';
 import ActiveProject from '../Project/ActiveProject';
+import ActiveJob from '../Job/ActiveJob';
+import { useAppSelector, useAppDispatch } from '../../app/hooks';
+import ActionBoardSlice from '../ActionBoard/actionBoardSlice';
 
 type Props = BoardProps<Type.State.Root>;
 
 const Table: React.FC<Props> = (props) => {
+  const dispatch = useAppDispatch();
   const activeProjects = [...props.G.table.activeProjects, ...Array(6)].slice(0, 6);
+  const activeJobs = props.G.table.activeJobs;
+  const isCurrentPlayer = props.playerID === props.ctx.currentPlayer;
+  const currentMoveIndex = useAppSelector(state =>
+    state.actionBoard.moves.length - 1
+  );
+  const currentMove = useAppSelector(state =>
+    state.actionBoard.moves.length
+      ? state.actionBoard.moves[state.actionBoard.moves.length - 1]
+      : null
+  );
+  const handleActiveJobClick = useCallback(({ jobIndex }) => {
+    if (!isCurrentPlayer) {
+      return;
+    }
+
+    dispatch(ActionBoardSlice.actions.tableJobsToggled({ moveIndex: currentMoveIndex, tableJobsIndex: jobIndex }));
+  }, [isCurrentPlayer, currentMoveIndex, dispatch])
 
   return (
     <Box>
       <Stack direction={['column', 'column', 'row']} wrap="wrap" mt={2} spacing={0}>
-        {activeProjects.map((p, pIndex) => (
-          <Box key={`active-project-${pIndex}`} w={['100%', '100%', '50%', '50%', '33.3%']}>
-            <ActiveProject project={p} />
-          </Box>
-        ))}
-      </Stack >
-    </Box >
+        <Box w={['100%', '100%', '80%']}>
+          <Stack direction={['column', 'column', 'row']} wrap="wrap" mt={2} spacing={0}>
+            {activeProjects.map((p, pIndex) => (
+              <Box key={`active-project-${pIndex}`} w={['100%', '100%', '100%', '50%', '50%']}>
+                <ActiveProject project={p} />
+              </Box>
+            ))}
+          </Stack>
+        </Box>
+        <Box w={['100%', '100%', '20%']}>
+          <Stack direction={['column', 'column', 'row']} wrap="wrap" mt={2} spacing={0}>
+            {activeJobs.map((job, jobIndex) => (
+              <Box key={`active-job-${jobIndex}`} w={['100%', '100%', '100%', '100%', '50%']}>
+                <ActiveJob
+                  job={job}
+                  jobIndex={jobIndex}
+                  selected={currentMove?.selections.tableJobs[jobIndex]}
+                  onClick={handleActiveJobClick}
+                />
+              </Box>
+            ))}
+          </Stack>
+        </Box>
+      </Stack>
+    </Box>
   )
 }
 

client/src/index.tsx

@@ -4,12 +4,16 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { store } from './app/store'
+import { Provider as ReduxProvider } from 'react-redux'
 
 ReactDOM.render(
   <StrictMode>
-    <ChakraProvider>
-      <App />
-    </ChakraProvider>
+    <ReduxProvider store={store}>
+      <ChakraProvider>
+        <App />
+      </ChakraProvider>
+    </ReduxProvider>
   </StrictMode>,
   document.getElementById('root')
 );

package.json

@@ -21,9 +21,12 @@
     "test": "yarn workspaces foreach -p run test"
   },
   "devDependencies": {
-    "@types/koa-static": "^4.0.2"
+    "@types/koa-static": "^4.0.2",
+    "@types/react-redux": "^7.1.24"
   },
   "dependencies": {
-    "koa-static": "^5.0.0"
+    "@reduxjs/toolkit": "^1.8.3",
+    "koa-static": "^5.0.0",
+    "react-redux": "^8.0.2"
   }
 }