refactor: Move sizing constants into theme and remove 'any' types

- **Removed `constants.ts`**: - Deleted `constants.ts` which contained `TITLE_SIZE`, `SUBTITLE_SIZE`, and `TEXT_SIZE`. - **Centralized Sizing in Theme**: - Extended the Material-UI theme by adding a `sizes` property in `theme.ts`. - Declared custom theme interfaces to include `sizes` with `title`, `subtitle`, and `text`. - Updated components to use `theme.sizes` instead of importing constants. - Adjusted imports and styled components accordingly. - **Improved Type Safety**: - Replaced `any` type assertions with more specific types or `unknown` where appropriate. - Changed image module declarations in `images.d.ts` from `any` to `string`. - Updated test files to use correct type assertions instead of `any`. - Added `NumericKeys` utility type in `types.ts` for better type inference. - Added ESLint disable comment in `jest.preset.js` to suppress `@typescript-eslint/no-require-imports` warning. - **Updated Scripts and Documentation**: - Renamed `format` script to `lint:prettier:fix` in `package.json` and `README.md` for clarity. - Added `lint:eslint` script to run ESLint. - **Code Style Adjustments**: - Modified components to align with updated linting and formatting rules. - Ensured consistent usage of `theme.sizes` across all components. - Removed unused imports and variables in various files. These changes improve type safety by eliminating unnecessary `any` types and centralize sizing constants within the theme for consistent styling across the application.
Digital-Defiance · Oct 19, 2024 · 9be7b51 · 9be7b51
1 parent eaee25a
commit 9be7b51
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -138,8 +138,9 @@ Other commands available:
 - yarn test:jest:single: Runs a single specified test (eg yarn test:jest:single src/game/**tests**/dominion-lib-load-save-saveGame.spec.ts)
 - yarn test:playwright: Runs playwright e2e tests
 - yarn test:playwright:report: Shows the playwright report
+- yarn lint:eslint: Runs ESLint
 - yarn lint:eslint:fix: Runs ESLint with auto-fix option
-- yarn format: Runs Prettier to format various file types
+- yarn lint:prettier:fix: Runs Prettier to format various file types
 - yarn clean: Removes dist/coverage directories
 - yarn reset: Removes node_modules, dist, coverage, and runs yarn install again
 

diff --git a/jest.preset.js b/jest.preset.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 const nxPreset = require('@nx/jest/preset').default;
 
 module.exports = { ...nxPreset };
diff --git a/src/components/IncrementDecrementControl.tsx b/src/components/IncrementDecrementControl.tsx
@@ -4,7 +4,7 @@ import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
-import { SUBTITLE_SIZE } from '@/components/constants';
+import theme from '@/components/theme';
 
 // Modify StyledTypography to use forwardRef
 const StyledTypography = forwardRef<HTMLSpanElement, TypographyProps>((props, ref) => (
@@ -13,7 +13,7 @@ const StyledTypography = forwardRef<HTMLSpanElement, TypographyProps>((props, re
     {...props}
     sx={{
       fontFamily: 'TrajanProBold',
-      fontSize: SUBTITLE_SIZE,
+      fontSize: theme.sizes.subtitle,
       ...props.sx,
     }}
   />
@@ -28,7 +28,7 @@ const StyledLargeNumber = forwardRef<HTMLSpanElement, TypographyProps>((props, r
     {...props}
     sx={{
       fontFamily: 'TrajanProBold',
-      fontSize: SUBTITLE_SIZE,
+      fontSize: theme.sizes.subtitle,
       fontWeight: 'bold',
       ...props.sx,
     }}

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { Checkbox, Paper, Box, IconButton, Popover, Tooltip, Typography } from '@mui/material';
 import { styled } from '@mui/system';
+import { Theme } from '@mui/material/styles';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { useGameContext } from '@/components/GameContext';
 import SuperCapsText from '@/components/SuperCapsText';
 import IncrementDecrementControl from '@/components/IncrementDecrementControl';
-import { TITLE_SIZE } from '@/components/constants';
 import { ILogEntry } from '@/game/interfaces/log-entry';
 import { updatePlayerField } from '@/game/dominion-lib';
 import { addLogEntry, victoryFieldToGameLogAction } from '@/game/dominion-lib-log';
@@ -16,7 +16,7 @@ import { useAlert } from '@/components/AlertContext';
 import { FailedAddLogEntryError } from '@/game/errors/failed-add-log';
 import theme from '@/components/theme';
 
-const StyledPaper = styled(Paper)(({ theme }) => ({
+const StyledPaper = styled(Paper)(({ theme }: { theme: Theme }) => ({
   padding: theme.spacing(2),
   margin: theme.spacing(2),
   position: 'relative',
@@ -53,7 +53,7 @@ const Player: React.FC = () => {
 
   if (gameState.selectedPlayerIndex === -1) {
     return (
-      <StyledPaper elevation={3}>
+      <StyledPaper elevation={3} theme={theme}>
         <Typography variant="h6">No player selected</Typography>
       </StyledPaper>
     );
@@ -168,6 +168,7 @@ const Player: React.FC = () => {
 
   return (
     <StyledPaper
+      theme={theme}
       elevation={3}
       style={{
         border: isCorrection
@@ -180,7 +181,7 @@ const Player: React.FC = () => {
       <Box mb={2} display="flex" alignItems="center" justifyContent="space-between">
         <Box display="flex" alignItems="center">
           {isCurrentPlayer && <ArrowRightIcon sx={{ mr: 1 }} />}
-          <SuperCapsText fontSize={TITLE_SIZE}>{player.name}</SuperCapsText>
+          <SuperCapsText fontSize={theme.sizes.title}>{player.name}</SuperCapsText>
         </Box>
         <IconButton onClick={handleNewTurnClick}>
           <SettingsIcon />
@@ -199,7 +200,7 @@ const Player: React.FC = () => {
           <ColumnBox>
             <CenteredTitle>
               <Tooltip title="These values reset every turn">
-                <SuperCapsText fontSize={TITLE_SIZE}>Turn</SuperCapsText>
+                <SuperCapsText fontSize={theme.sizes.title}>Turn</SuperCapsText>
               </Tooltip>
             </CenteredTitle>
             <IncrementDecrementControl
@@ -233,7 +234,7 @@ const Player: React.FC = () => {
             <ColumnBox>
               <CenteredTitle>
                 <Tooltip title="These player mat values persist between turns">
-                  <SuperCapsText fontSize={TITLE_SIZE}>Mats</SuperCapsText>
+                  <SuperCapsText fontSize={theme.sizes.title}>Mats</SuperCapsText>
                 </Tooltip>
               </CenteredTitle>
               {gameState.options.mats.coffersVillagers && (
@@ -283,7 +284,7 @@ const Player: React.FC = () => {
                   <Box sx={{ paddingTop: 2 }}>
                     <CenteredTitle>
                       <Tooltip title="Global Mats affect all players and persist between turns">
-                        <SuperCapsText fontSize={TITLE_SIZE}>Global Mats</SuperCapsText>
+                        <SuperCapsText fontSize={theme.sizes.title}>Global Mats</SuperCapsText>
                       </Tooltip>
                     </CenteredTitle>
                   </Box>
@@ -303,7 +304,7 @@ const Player: React.FC = () => {
           <ColumnBox>
             <CenteredTitle>
               <Tooltip title="Victory points" arrow>
-                <SuperCapsText fontSize={TITLE_SIZE}>Victory</SuperCapsText>
+                <SuperCapsText fontSize={theme.sizes.title}>Victory</SuperCapsText>
               </Tooltip>
             </CenteredTitle>
             <IncrementDecrementControl
@@ -370,7 +371,7 @@ const Player: React.FC = () => {
       >
         <Box p={2}>
           <CenteredTitle>
-            <SuperCapsText fontSize={TITLE_SIZE}>Next Turn</SuperCapsText>
+            <SuperCapsText fontSize={theme.sizes.title}>Next Turn</SuperCapsText>
           </CenteredTitle>
           <IncrementDecrementControl
             label="Actions"

diff --git a/src/components/Scoreboard.tsx b/src/components/Scoreboard.tsx
@@ -9,28 +9,30 @@ import {
   Paper,
   Button,
 } from '@mui/material';
+import { Theme } from '@mui/material/styles';
 import { styled } from '@mui/system';
 import SuperCapsText from '@/components/SuperCapsText';
 import { calculateVictoryPoints } from '@/game/dominion-lib';
-import { SUBTITLE_SIZE, TEXT_SIZE } from '@/components/constants';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import { useGameContext } from '@/components/GameContext';
 import { addLogEntry } from '@/game/dominion-lib-log';
 import { GameLogActionWithCount } from '@/game/enumerations/game-log-action-with-count';
+import theme from '@/components/theme';
 
-const StyledTableCell = styled(TableCell)(({ theme }) => ({
+const StyledTableCell = styled(TableCell)(({ theme }: { theme: Theme }) => ({
   fontFamily: 'TrajanProBold',
-  fontSize: TEXT_SIZE,
+  fontSize: theme.sizes.text,
 }));
 
-const StyledScoreCell = styled(TableCell)(({ theme }) => ({
+const StyledScoreCell = styled(TableCell)(({ theme }: { theme: Theme }) => ({
   fontFamily: 'TrajanProBold',
-  fontSize: SUBTITLE_SIZE,
+  fontSize: theme.sizes.title,
   fontWeight: 'bold',
 }));
 
-const StyledButton = styled(Button)(({ theme }) => ({
+const StyledButton = styled(Button)(({ theme }: { theme: Theme }) => ({
   fontFamily: 'TrajanProBold',
+  fontSize: theme.sizes.text,
 }));
 
 const Scoreboard: React.FC = () => {
@@ -60,10 +62,14 @@ const Scoreboard: React.FC = () => {
         <Table>
           <TableHead>
             <TableRow>
-              <StyledTableCell>Current</StyledTableCell>
-              <StyledTableCell>Player</StyledTableCell>
-              <StyledTableCell align="right">Score</StyledTableCell>
-              <StyledTableCell align="right">Turn: {gameState.currentTurn}</StyledTableCell>
+              <StyledTableCell theme={theme}>Current</StyledTableCell>
+              <StyledTableCell theme={theme}>Player</StyledTableCell>
+              <StyledTableCell theme={theme} align="right">
+                Score
+              </StyledTableCell>
+              <StyledTableCell theme={theme} align="right">
+                Turn: {gameState.currentTurn}
+              </StyledTableCell>
             </TableRow>
           </TableHead>
           <TableBody>
@@ -76,17 +82,20 @@ const Scoreboard: React.FC = () => {
                   '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.04)' },
                 }}
               >
-                <StyledTableCell>
+                <StyledTableCell theme={theme}>
                   {index === getCurrentPlayerIndex() && (
                     <ArrowRightIcon color="primary" style={{ fontSize: 24 }} />
                   )}
                 </StyledTableCell>
-                <StyledTableCell component="th" scope="row">
-                  <SuperCapsText fontSize={TEXT_SIZE}>{player.name}</SuperCapsText>
+                <StyledTableCell theme={theme} component="th" scope="row">
+                  <SuperCapsText fontSize={theme.sizes.text}>{player.name}</SuperCapsText>
                 </StyledTableCell>
-                <StyledScoreCell align="right">{calculateVictoryPoints(player)}</StyledScoreCell>
-                <StyledTableCell align="right">
+                <StyledScoreCell theme={theme} align="right">
+                  {calculateVictoryPoints(player)}
+                </StyledScoreCell>
+                <StyledTableCell theme={theme} align="right">
                   <StyledButton
+                    theme={theme}
                     variant="contained"
                     size="small"
                     onClick={() => handlePlayerSelect(index)}

diff --git a/src/components/constants.ts b/src/components/constants.ts
diff --git a/src/components/screens/AboutScreen.tsx b/src/components/screens/AboutScreen.tsx
@@ -10,8 +10,8 @@ import {
   ListItemText,
 } from '@mui/material';
 import DominionTransparentLogo from '@/assets/images/Dominion-tx.png';
-import SuperCapsText from '../SuperCapsText';
-import { TITLE_SIZE } from '../constants';
+import SuperCapsText from '@/components/SuperCapsText';
+import theme from '@/components/theme';
 
 export default function AboutScreen() {
   return (
@@ -60,7 +60,7 @@ export default function AboutScreen() {
           <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 4 }}>
             <Box sx={{ flex: 1 }}>
               <Paper elevation={3} sx={{ p: 2, height: '100%' }}>
-                <SuperCapsText fontSize={TITLE_SIZE}>Features</SuperCapsText>
+                <SuperCapsText fontSize={theme.sizes.title}>Features</SuperCapsText>
                 <List dense>
                   {[
                     'Player Management: Add, remove, and track multiple players',
@@ -82,7 +82,7 @@ export default function AboutScreen() {
 
             <Box sx={{ flex: 1 }}>
               <Paper elevation={3} sx={{ p: 2, height: '100%' }}>
-                <SuperCapsText fontSize={TITLE_SIZE} sx={{ paddingBottom: '10px' }}>
+                <SuperCapsText fontSize={theme.sizes.title} sx={{ paddingBottom: '10px' }}>
                   About
                 </SuperCapsText>
                 <Typography variant="body1" paragraph>

diff --git a/src/components/screens/DominionAssistantScreen.tsx b/src/components/screens/DominionAssistantScreen.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box } from '@mui/material';
 import { styled } from '@mui/system';
 import { useNavigate, useLocation } from 'react-router-dom';
 import DominionAssistant from '@/components/DominionAssistant';
@@ -13,11 +13,6 @@ const StyledContainer = styled(Box)(({ theme }) => ({
   height: '100vh',
 }));
 
-const StyledTitle = styled(Typography)(({ theme }) => ({
-  fontFamily: 'CharlemagneStdBold',
-  marginBottom: theme.spacing(2),
-}));
-
 export default function DominionAssistantScreen() {
   const navigate = useNavigate();
   const location = useLocation();

diff --git a/src/components/screens/LoadSaveScreen.tsx b/src/components/screens/LoadSaveScreen.tsx
@@ -1,13 +1,9 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { useLocation, useNavigate } from 'react-router-dom';
 import LoadSaveGame from '@/components/LoadSaveGame';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadSaveGameScreen() {
-  const location = useLocation();
-  const navigate = useNavigate();
-
   return (
     <Box
       sx={{

diff --git a/src/components/theme.ts b/src/components/theme.ts
@@ -1,5 +1,22 @@
 import { createTheme, Theme } from '@mui/material/styles';
 
+declare module '@mui/material/styles' {
+  interface Theme {
+    sizes: {
+      title: number;
+      subtitle: number;
+      text: number;
+    };
+  }
+  interface ThemeOptions {
+    sizes?: {
+      title?: number;
+      subtitle?: number;
+      text?: number;
+    };
+  }
+}
+
 const theme: Theme = createTheme({
   palette: {
     primary: {
@@ -14,6 +31,11 @@ const theme: Theme = createTheme({
       fontSize: '1.25rem',
     },
   },
+  sizes: {
+    title: 24,
+    subtitle: 18,
+    text: 16,
+  },
 });
 
 export default theme;
diff --git a/src/game/__tests__/dominion-lib-load-save-restoreSavedGame.spec.ts b/src/game/__tests__/dominion-lib-load-save-restoreSavedGame.spec.ts
@@ -33,7 +33,7 @@ describe('restoreSavedGame', () => {
   const validGameRaw: IGameRaw = createMockGameRaw(2, { log: [validLogEntryRaw] });
 
   it('should throw an error when the game object is invalid', () => {
-    const invalidGame = { ...validGameRaw, players: null as any }; // Invalid players
+    const invalidGame = { ...validGameRaw, players: null as unknown as IGameRaw['players'] }; // Invalid players
 
     expect(() => restoreSavedGame(invalidGame)).toThrow('Invalid game object');
   });

diff --git a/src/game/__tests__/dominion-lib-updatePlayerField.spec.ts b/src/game/__tests__/dominion-lib-updatePlayerField.spec.ts
@@ -5,6 +5,7 @@ import { EmptyGameState } from '@/game/dominion-lib';
 import { InvalidFieldError } from '@/game/errors/invalid-field';
 import { NotEnoughSupplyError } from '@/game/errors/not-enough-supply';
 import { NotEnoughSubfieldError } from '@/game/errors/not-enough-subfield';
+import { PlayerFieldMap } from '@/game/types';
 
 describe('updatePlayerField', () => {
   let mockGame: IGame;
@@ -69,7 +70,13 @@ describe('updatePlayerField', () => {
 
   it('should throw InvalidFieldError for non-existent fields', () => {
     expect(() => {
-      updatePlayerField(mockGame, 0, 'nonexistent' as any, 'subfield' as any, 1);
+      updatePlayerField(
+        mockGame,
+        0,
+        'nonexistentField' as keyof PlayerFieldMap,
+        'subfield' as unknown as keyof IPlayer['turn'],
+        1
+      );
     }).toThrow(InvalidFieldError);
   });
 

diff --git a/src/game/types.ts b/src/game/types.ts
@@ -32,3 +32,7 @@ export type OptionField = keyof IGameOptions;
 export type OptionSubField<T extends OptionField> = T extends 'curses'
   ? boolean
   : keyof IGameOptions[T];
+
+export type NumericKeys<T> = {
+  [K in keyof T]: T[K] extends number ? K : never;
+}[keyof T];
diff --git a/src/types/images.d.ts b/src/types/images.d.ts
@@ -1,19 +1,19 @@
 declare module '*.png' {
-  const content: any;
+  const content: string;
   export default content;
 }
 
 declare module '*.jpg' {
-  const content: any;
+  const content: string;
   export default content;
 }
 
 declare module '*.jpeg' {
-  const content: any;
+  const content: string;
   export default content;
 }
 
 declare module '*.svg' {
-  const content: any;
+  const content: string;
   export default content;
 }