UI rework, rely more on CSS for font sizes, convert all fonts to WOFF…

…/WOFF2, use Minion over Trajan in many places, homogenize tab centering components

package.json

@@ -24,6 +24,7 @@
     "@mui/icons-material": "^6.1.3",
     "@mui/material": "^6.1.3",
     "react": "18.3.1",
+    "react-color": "^2.19.3",
     "react-dom": "18.3.1",
     "react-router-dom": "^6.27.0",
     "uuid": "^10.0.0"
@@ -55,6 +56,7 @@
     "@types/jest": "^29.5.12",
     "@types/node": "18.16.9",
     "@types/react": "^18.3.11",
+    "@types/react-color": "^3.0.12",
     "@types/react-dom": "18.3.0",
     "@types/uuid": "^10.0.0",
     "babel-jest": "^29.7.0",

src/__fixtures__/dominion-lib-fixtures.ts

@@ -6,6 +6,7 @@ import {
   EmptyVictoryDetails,
   EmptyMatDetails,
   DefaultTurnDetails,
+  DefaultPlayerColors,
 } from '@/game/constants';
 import { calculateInitialSupply } from '@/game/dominion-lib';
 import { GameLogActionWithCount } from '@/game/enumerations/game-log-action-with-count';
@@ -29,7 +30,7 @@ export function createMockGame(playerCount: number, overrides?: Partial<IGame>):
   return {
     players: Array(playerCount)
       .fill(null)
-      .map(() => createMockPlayer()),
+      .map((value, index) => createMockPlayer(undefined, index)),
     supply,
     options,
     risingSun: {
@@ -56,9 +57,13 @@ export function createMockGame(playerCount: number, overrides?: Partial<IGame>):
   };
 }
 
-export function createMockPlayer(victory?: Partial<IPlayer['victory']>): IPlayer {
+export function createMockPlayer(victory?: Partial<IPlayer['victory']>, index?: number): IPlayer {
   return {
     name: faker.person.firstName(),
+    color:
+      DefaultPlayerColors[
+        index ?? faker.number.int({ min: 0, max: DefaultPlayerColors.length - 1 })
+      ],
     mats: { ...EmptyMatDetails },
     turn: { ...DefaultTurnDetails },
     newTurn: { ...DefaultTurnDetails },

src/_typography.scss

@@ -0,0 +1,29 @@
+$SUPER_TITLE: 32px;
+$LARGE_TITLE: 28px;
+$TITLE_SIZE: 24px;
+$SUBTITLE_SIZE: 18px;
+$TEXT_SIZE: 16px;
+
+.typography-super-title {
+  font-size: $SUPER_TITLE !important;
+  font-weight: bold;
+}
+
+.typography-large-title {
+  font-size: $LARGE_TITLE !important;
+  font-weight: bold;
+}
+
+.typography-title {
+  font-size: $TITLE_SIZE !important;
+  font-weight: bold;
+}
+
+.typography-subtitle {
+  font-size: $SUBTITLE_SIZE !important;
+  font-weight: 600;
+}
+
+.typography-text {
+  font-size: $TEXT_SIZE !important;
+}

src/components/AddPlayerNames.tsx

@@ -8,19 +8,32 @@ import {
   ListItem,
   ListItemText,
   IconButton,
+  styled,
+  Popover,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
+import AddCircleIcon from '@mui/icons-material/AddCircle';
+import { SketchPicker } from 'react-color';
 import { useGameContext } from '@/components/GameContext';
 import { newPlayer } from '@/game/dominion-lib';
-import { MAX_PLAYERS, MIN_PLAYERS } from '@/game/constants';
+import { DefaultPlayerColors, MAX_PLAYERS, MIN_PLAYERS } from '@/game/constants';
+import SuperCapsText from '@/components/SuperCapsText';
+import CenteredContainer from '@/components/CenteredContainer';
+import TabTitle from '@/components/TabTitle';
 
 interface AddPlayerNamesProps {
   nextStep: () => void;
 }
 
+const StyledPlayerNumber = styled(Typography)(({ theme }) => ({
+  fontFamily: 'TrajanProBold',
+}));
+
 const AddPlayerNames: React.FC<AddPlayerNamesProps> = ({ nextStep }) => {
   const { gameState, setGameState } = useGameContext();
   const [playerName, setPlayerName] = useState('');
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [currentPlayerIndex, setCurrentPlayerIndex] = useState<number>(-1);
 
   useEffect(() => {
     setGameState((prevState) => ({
@@ -31,9 +44,10 @@ const AddPlayerNames: React.FC<AddPlayerNamesProps> = ({ nextStep }) => {
 
   const addPlayer = () => {
     if (playerName.trim()) {
+      const nextPlayerIndex = gameState.players.length; // +1, -1
       setGameState((prevState) => ({
         ...prevState,
-        players: [...prevState.players, newPlayer(playerName)],
+        players: [...prevState.players, newPlayer(playerName, nextPlayerIndex)],
       }));
       setPlayerName('');
     }
@@ -46,11 +60,32 @@ const AddPlayerNames: React.FC<AddPlayerNamesProps> = ({ nextStep }) => {
     }));
   };
 
+  const handleColorClick = (event: React.MouseEvent<HTMLElement>, playerIndex: number) => {
+    setCurrentPlayerIndex(playerIndex);
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleColorChange = (color: any) => {
+    if (currentPlayerIndex !== -1) {
+      setGameState((prevState) => {
+        const players = [...prevState.players];
+        players[currentPlayerIndex].color = color.hex;
+        return { ...prevState, players };
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setCurrentPlayerIndex(-1);
+  };
+
+  const open = Boolean(anchorEl);
+  const id = open ? 'color-popover' : undefined;
+
   return (
-    <Box sx={{ width: '100%', maxWidth: 360, margin: 'auto' }}>
-      <Typography variant="h4" gutterBottom>
-        Players
-      </Typography>
+    <CenteredContainer>
+      <TabTitle>Players</TabTitle>
       <List>
         {gameState.players.map((player, index) => (
           <ListItem
@@ -61,7 +96,25 @@ const AddPlayerNames: React.FC<AddPlayerNamesProps> = ({ nextStep }) => {
               </IconButton>
             }
           >
-            <ListItemText primary={`${index + 1}. ${player.name}`} />
+            <ListItemText
+              primary={
+                <Box display="flex" alignItems="center">
+                  <Box
+                    sx={{
+                      width: 24,
+                      height: 24,
+                      backgroundColor: player.color,
+                      cursor: 'pointer',
+                      marginRight: 1,
+                    }}
+                    onClick={(e) => handleColorClick(e, index)}
+                  />
+                  <StyledPlayerNumber className="typography-title">{`${index + 1}.`}</StyledPlayerNumber>
+                  &nbsp;&nbsp;
+                  <SuperCapsText className="typography-title">{player.name}</SuperCapsText>
+                </Box>
+              }
+            />
           </ListItem>
         ))}
       </List>
@@ -74,9 +127,9 @@ const AddPlayerNames: React.FC<AddPlayerNamesProps> = ({ nextStep }) => {
             placeholder="Enter player name"
             variant="outlined"
           />
-          <Button variant="contained" onClick={addPlayer} sx={{ marginLeft: 1 }}>
-            Add
-          </Button>
+          <IconButton onClick={addPlayer} color="primary" disabled={!playerName.trim()}>
+            <AddCircleIcon />
+          </IconButton>
         </Box>
       )}
       {gameState.players.length >= 5 && (
@@ -89,7 +142,26 @@ const AddPlayerNames: React.FC<AddPlayerNamesProps> = ({ nextStep }) => {
           Next
         </Button>
       )}
-    </Box>
+      <Popover
+        id={id}
+        open={open}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <SketchPicker
+          color={
+            gameState.players.length > 0 && currentPlayerIndex !== -1
+              ? gameState.players[currentPlayerIndex].color
+              : '#000000'
+          }
+          onChange={handleColorChange}
+        />
+      </Popover>
+    </CenteredContainer>
   );
 };
 

src/components/CenteredContainer.tsx

@@ -0,0 +1,13 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/system';
+
+const CenteredContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100vh',
+  padding: theme.spacing(2),
+}));
+
+export default CenteredContainer;

src/components/EndGame.tsx

@@ -27,7 +27,7 @@ const EndGame: React.FC<EndGameProps> = ({ game, onNewGame }) => {
 
   return (
     <Paper elevation={3} sx={{ padding: 2, maxWidth: 600, margin: 'auto' }}>
-      <SuperCapsText fontSize={32}>Game Over</SuperCapsText>
+      <SuperCapsText className={`typography-super-title`}>Game Over</SuperCapsText>
       <Typography variant="h6" component="div" gutterBottom align="center">
         Total Turns: {game.currentTurn}
       </Typography>

src/components/GameLog.tsx

@@ -1,26 +1,55 @@
 import React from 'react';
-import { Typography, Paper, TableContainer, Table, TableBody } from '@mui/material';
+import {
+  Paper,
+  TableContainer,
+  Table,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+  Typography,
+} from '@mui/material';
 import { useGameContext } from '@/components/GameContext';
 import GameLogEntry from '@/components/GameLogEntry';
+import TabTitle from '@/components/TabTitle';
+import { CurrentStep } from '@/game/enumerations/current-step';
 
 const GameLog: React.FC = () => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { gameState, setGameState } = useGameContext();
+  const { gameState } = useGameContext();
+
   return (
-    <Paper elevation={3} style={{ padding: '16px', width: '100%' }}>
-      <Typography variant="h4" gutterBottom>
-        Game Log
-      </Typography>
-      <TableContainer component={Paper} style={{ maxHeight: 400, width: '100%' }}>
-        <Table stickyHeader style={{ width: '100%' }}>
-          <TableBody>
-            {gameState.log.map((entry, index) => (
-              <GameLogEntry game={gameState} key={index} entry={entry} />
-            ))}
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </Paper>
+    <>
+      <TabTitle>Game Log</TabTitle>
+      {gameState.currentStep === CurrentStep.GameScreen ||
+      gameState.currentStep === CurrentStep.EndGame ? (
+        <TableContainer component={Paper} style={{ maxHeight: 400, width: '100%' }}>
+          <Table stickyHeader size="small">
+            <TableHead>
+              <TableRow>
+                <TableCell style={{ width: '15%', fontWeight: 'bold' }}>Time</TableCell>
+                <TableCell style={{ width: '15%', fontWeight: 'bold' }}>Duration</TableCell>
+                <TableCell style={{ width: '60%', fontWeight: 'bold' }}>Action</TableCell>
+                <TableCell style={{ width: '10%', fontWeight: 'bold' }}>Undo</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {gameState.log.map((entry, index) => (
+                <GameLogEntry
+                  key={entry.id || index}
+                  logIndex={index}
+                  entry={entry}
+                  isCurrentPlayer={index === gameState.currentPlayerIndex}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      ) : (
+        <Typography variant="body1" color="textSecondary" align="center" style={{ marginTop: 20 }}>
+          The game has not started yet.
+        </Typography>
+      )}
+    </>
   );
 };