ocftw · ben196888 · Jul 3, 2024 · Jul 4, 2024 · Jul 4, 2024 · Jul 4, 2024
diff --git a/.yarn/cache/@mui-icons-material-npm-5.16.4-d62c35da3a-b0559215a1.zip b/.yarn/cache/@mui-icons-material-npm-5.16.4-d62c35da3a-b0559215a1.zip
diff --git a/.yarn/cache/@reduxjs-toolkit-npm-2.2.5-cdc856b5fc-41d7eb5025.zip b/.yarn/cache/@reduxjs-toolkit-npm-2.2.5-cdc856b5fc-41d7eb5025.zip
diff --git a/.yarn/cache/@types-use-sync-external-store-npm-0.0.3-875a91a914-161ddb8eec.zip b/.yarn/cache/@types-use-sync-external-store-npm-0.0.3-875a91a914-161ddb8eec.zip
diff --git a/.yarn/cache/immer-npm-10.1.1-973ae10d09-07c67970b7.zip b/.yarn/cache/immer-npm-10.1.1-973ae10d09-07c67970b7.zip
diff --git a/.yarn/cache/react-redux-npm-9.1.2-8af4985431-1ee9cf41f2.zip b/.yarn/cache/react-redux-npm-9.1.2-8af4985431-1ee9cf41f2.zip
diff --git a/.yarn/cache/redux-npm-5.0.1-f8e6b1cb23-e74affa900.zip b/.yarn/cache/redux-npm-5.0.1-f8e6b1cb23-e74affa900.zip
diff --git a/.yarn/cache/redux-thunk-npm-3.1.0-6a8fdd3211-bea96f8233.zip b/.yarn/cache/redux-thunk-npm-3.1.0-6a8fdd3211-bea96f8233.zip
diff --git a/.yarn/cache/reselect-npm-5.1.1-667568f51c-5d32d48be2.zip b/.yarn/cache/reselect-npm-5.1.1-667568f51c-5d32d48be2.zip
diff --git a/.yarn/cache/tsconfig-paths-npm-4.2.0-ac1edf8677-28c5f7bbbc.zip b/.yarn/cache/tsconfig-paths-npm-4.2.0-ac1edf8677-28c5f7bbbc.zip
diff --git a/.yarn/cache/use-sync-external-store-npm-1.2.2-7923c915e1-fe07c071c4.zip b/.yarn/cache/use-sync-external-store-npm-1.2.2-7923c915e1-fe07c071c4.zip
diff --git a/packages/webapp/.eslintrc.json b/packages/webapp/.eslintrc.json
@@ -1,3 +1,11 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "overrides": [
+    {
+      "files": ["src/game/**"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "off",
+      },
+    }
+  ]
 }
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
@@ -5,20 +5,21 @@
   "scripts": {
     "dev": "concurrently \"yarn dev:next\" \"yarn dev:server\"",
     "dev:next": "next dev",
-    "dev:server": "ts-node-dev -P tsconfig.server.json --respawn --transpile-only --ignore-watch .next src/server.ts",
+    "dev:server": "ts-node-dev -P tsconfig.server.json --respawn --transpile-only --ignore-watch .next -r tsconfig-paths/register src/server.ts",
     "build": "yarn build:next && yarn build:server",
     "build:next": "next build",
     "build:server": "tsc -P tsconfig.server.json",
     "start": "yarn start:next & yarn start:server",
     "start:next": "next start",
-    "start:server": "node dist/server.js",
+    "start:server": "node -r tsconfig-paths/register dist/server.js",
     "lint": "next lint",
     "test": "jest"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.16.4",
     "@mui/lab": "^5.0.0-alpha.170",
     "@mui/material": "^5.15.19",
     "@mui/material-nextjs": "^5.15.11",
@@ -27,7 +28,8 @@
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-redux": "^9.1.2"
+    "react-redux": "^9.1.2",
+    "tsconfig-paths": "^4.2.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",

diff --git a/packages/webapp/src/app/layout.tsx b/packages/webapp/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 import "./globals.css";
+import { CssBaseline } from "@mui/material";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -19,6 +20,7 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <AppRouterCacheProvider>
+          <CssBaseline />
           {children}
         </AppRouterCacheProvider>
       </body>

diff --git a/packages/webapp/src/components/ActionBoard/ActionBar/ActionBar.selectors.ts b/packages/webapp/src/components/ActionBoard/ActionBar/ActionBar.selectors.ts
@@ -0,0 +1,58 @@
+import { ActionMoveName } from '@/game/core/stage/action/move/type';
+import { GameContext } from '../../GameContextHelpers';
+import { GameState } from '@/game/store/store';
+import { RuleSelector } from '@/game/store/slice/rule';
+import { ActionSlotSelector } from '@/game/store/slice/actionSlot';
+import { AppDispatch } from '@/lib/store';
+import { UserActionMoves, getCurrentAction, setCurrentAction } from '@/lib/reducers/actionStepSlice';
+import { createSelector } from '@reduxjs/toolkit';
+
+export interface StateProps {
+  isActionBarVisible: boolean;
+}
+
+export const mapStateToProps = createSelector(getCurrentAction, (currentAction) => ({
+  isActionBarVisible: currentAction === null,
+}));
+
+export interface DispatchProps {
+  onActionClick: (action: UserActionMoves) => void;
+}
+
+export const mapDispatchToProps = (dispatch: AppDispatch): DispatchProps => ({
+  onActionClick: (action: UserActionMoves) => dispatch(setCurrentAction(action)),
+});
+
+export enum ActionMoveState {
+  Available = 'available',
+  Occupied = 'occupied',
+  Disabled = 'disabled'
+}
+
+const getActionMoveState = (state: GameState, actionMove: ActionMoveName): ActionMoveState => {
+  if (!RuleSelector.isActionSlotAvailable(state.rules, actionMove)) {
+    return ActionMoveState.Disabled;
+  }
+  if (ActionSlotSelector.isOccupied(state.table.actionSlots[actionMove])) {
+    return ActionMoveState.Occupied;
+  }
+  return ActionMoveState.Available;
+};
+
+export interface GameContextProps {
+  actionsState: Record<UserActionMoves, ActionMoveState>;
+}
+
+export const mapGameContextToProps = ({ G }: GameContext) => {
+  const actionsState: Record<UserActionMoves, ActionMoveState> = {
+    [UserActionMoves.CreateProject]: getActionMoveState(G, UserActionMoves.CreateProject),
+    [UserActionMoves.Recruit]: getActionMoveState(G, UserActionMoves.Recruit),
+    [UserActionMoves.ContributeOwnedProjects]: getActionMoveState(G, UserActionMoves.ContributeOwnedProjects),
+    [UserActionMoves.ContributeJoinedProjects]: getActionMoveState(G, UserActionMoves.ContributeJoinedProjects),
+    [UserActionMoves.RemoveAndRefillJobs]: getActionMoveState(G, UserActionMoves.RemoveAndRefillJobs),
+    [UserActionMoves.Mirror]: getActionMoveState(G, UserActionMoves.Mirror),
+    [UserActionMoves.EndActionTurn]: ActionMoveState.Available,
+  };
+
+  return { actionsState };
+};
diff --git a/packages/webapp/src/components/ActionBoard/ActionBar/ActionBar.tsx b/packages/webapp/src/components/ActionBoard/ActionBar/ActionBar.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box, Button, Grid } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { connectGameContext } from '../../GameContextHelpers';
+import { connect } from 'react-redux';
+import { ActionMoveState, mapGameContextToProps, mapDispatchToProps, GameContextProps, StateProps, DispatchProps, mapStateToProps } from './ActionBar.selectors';
+import { UserActionMoves } from '@/lib/reducers/actionStepSlice';
+
+type Props = GameContextProps & StateProps & DispatchProps;
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  margin: theme.spacing(1),
+  [`&.${ActionMoveState.Available}`]: {
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.common.white,
+    '&:hover': {
+      backgroundColor: theme.palette.success.dark,
+    },
+  },
+  [`&.${ActionMoveState.Occupied}`]: {
+    backgroundColor: theme.palette.warning.main,
+    color: theme.palette.common.white,
+    '&:hover': {
+      backgroundColor: theme.palette.warning.dark,
+    },
+  },
+  [`&.${ActionMoveState.Disabled}`]: {
+    backgroundColor: theme.palette.action.disabled,
+    color: theme.palette.text.disabled,
+  },
+}));
+
+const EndActionButton = styled(Button)(({ theme }) => ({
+  margin: theme.spacing(1),
+  backgroundColor: theme.palette.primary.main,
+  color: theme.palette.common.white,
+  '&:hover': {
+    backgroundColor: theme.palette.primary.dark,
+  },
+}));
+
+const ActionBar: React.FC<Props> = ({ isActionBarVisible, actionsState, onActionClick }) => {
+  if (!isActionBarVisible) {
+    return null;
+  }
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'center', padding: '8px', backgroundColor: '#f0f0f0', marginTop: '16px' }}>
+      <Grid container spacing={1} justifyContent="center">
+        {Object.entries(actionsState).map(([action, state]) => (
+          action === UserActionMoves.EndActionTurn ? (
+            <EndActionButton
+              key={action}
+              onClick={() => onActionClick(action)}
+            >
+              End Action Turn
+            </EndActionButton>
+          ) : (
+            <StyledButton
+              key={action}
+              className={state}
+              onClick={() => state === ActionMoveState.Available && onActionClick(action as UserActionMoves)}
+              disabled={state === ActionMoveState.Disabled}
+            >
+              {action.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
+            </StyledButton>
+          )
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default connectGameContext(mapGameContextToProps)(connect(mapStateToProps, mapDispatchToProps)(ActionBar));
diff --git a/packages/webapp/src/components/ActionBoard/ActionBoard.tsx b/packages/webapp/src/components/ActionBoard/ActionBoard.tsx