moving to themed buttons, they look much better (#53)

lounsbrough · Oct 2, 2024 · 7244127 · 7244127
1 parent 43c9a8c
commit 7244127
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 38 deletions.
diff --git a/client/eslint.config.mjs b/client/eslint.config.mjs
@@ -9,7 +9,8 @@ export default [
   ...tseslint.configs.recommended,
   {
     rules: {
-      semi: ['error', 'never']
+      semi: ['error', 'never'],
+      "@typescript-eslint/no-empty-object-type": ['error', { allowInterfaces: 'with-single-extends' }]
     }
   }
 ]
diff --git a/client/src/components/game/ChooseAction.tsx b/client/src/components/game/ChooseAction.tsx
@@ -9,7 +9,7 @@ function ChooseAction() {
   const [selectedAction, setSelectedAction] = useState<Actions>()
   const [selectedTargetPlayer, setSelectedTargetPlayer] = useState<string>()
   const { gameState } = useGameStateContext()
-  const { actionColors } = useTheme()
+  const theme = useTheme()
 
   if (!gameState) {
     return null
@@ -45,11 +45,23 @@ function ChooseAction() {
               ) {
                 return null
               }
+
+              const paletteColor = theme.palette.augmentColor({
+                color: { main: player.color }
+              })
+
               return <Button
                 key={player.name}
                 onClick={() => {
                   setSelectedTargetPlayer(player.name)
-                }} sx={{ background: player.color }}
+                }}
+                sx={{
+                  color: paletteColor.contrastText,
+                  background: paletteColor.main,
+                  '&:hover': {
+                    background: paletteColor.dark
+                  }
+                }}
                 variant="contained"
               >{player.name}</Button>
             })}
@@ -88,9 +100,8 @@ function ChooseAction() {
                         onClick={() => {
                           setSelectedAction(action as Actions)
                         }}
-                        sx={{
-                          background: actionColors[action as Actions]
-                        }} variant="contained"
+                        color={action as Actions}
+                        variant="contained"
                       >
                         {action}
                       </Button>

diff --git a/client/src/components/game/ChooseActionResponse.tsx b/client/src/components/game/ChooseActionResponse.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid2, Typography, useTheme } from "@mui/material"
+import { Button, Grid2, Typography } from "@mui/material"
 import { ActionAttributes, Actions, InfluenceAttributes, Influences, Responses } from '@shared'
 import { useState } from "react"
 import { getPlayerId } from "../../helpers/playerId"
@@ -11,7 +11,6 @@ function ChooseActionResponse() {
   const [selectedResponse, setSelectedResponse] = useState<Responses>()
   const [selectedInfluence, setSelectedInfluence] = useState<Influences>()
   const { gameState } = useGameStateContext()
-  const { influenceColors } = useTheme()
 
   if (!gameState?.pendingAction) {
     return null
@@ -53,7 +52,8 @@ function ChooseActionResponse() {
                   key={influence}
                   onClick={() => {
                     setSelectedInfluence(influence as Influences)
-                  }} sx={{ background: influenceColors[influence as Influences] }}
+                  }}
+                  color={influence as Influences}
                   variant="contained"
                 >{influence}</Button>
               })}

diff --git a/client/src/components/game/ChooseChallengeResponse.tsx b/client/src/components/game/ChooseChallengeResponse.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid2, Typography, useTheme } from "@mui/material"
+import { Button, Grid2, Typography } from "@mui/material"
 import { Influences } from '@shared'
 import { useState } from "react"
 import { getPlayerId } from "../../helpers/playerId"
@@ -9,7 +9,6 @@ import PlayerActionConfirmation from "./PlayerActionConfirmation"
 function ChooseChallengeResponse() {
   const [selectedInfluence, setSelectedInfluence] = useState<Influences>()
   const { gameState } = useGameStateContext()
-  const { influenceColors } = useTheme()
 
   if (!gameState?.pendingActionChallenge && !gameState?.pendingBlockChallenge) {
     return null
@@ -55,9 +54,8 @@ function ChooseChallengeResponse() {
               onClick={() => {
                 setSelectedInfluence(influence as Influences)
               }}
-              sx={{
-                background: influenceColors[influence]
-              }} variant="contained"
+              color={influence as Influences}
+              variant="contained"
             >
               {influence}
             </Button>

diff --git a/client/src/components/game/ChooseInfluenceToLose.tsx b/client/src/components/game/ChooseInfluenceToLose.tsx
@@ -1,4 +1,4 @@
-import { Button, Grid2, Typography, useTheme } from "@mui/material"
+import { Button, Grid2, Typography } from "@mui/material"
 import { Influences } from '@shared'
 import { useState } from "react"
 import { getPlayerId } from "../../helpers/playerId"
@@ -8,7 +8,6 @@ import PlayerActionConfirmation from "./PlayerActionConfirmation"
 function ChooseInfluenceToLose() {
   const [selectedInfluence, setSelectedInfluence] = useState<Influences>()
   const { gameState } = useGameStateContext()
-  const { influenceColors } = useTheme()
 
   if (!gameState) {
     return null
@@ -43,9 +42,8 @@ function ChooseInfluenceToLose() {
               onClick={() => {
                 setSelectedInfluence(influence)
               }}
-              sx={{
-                background: influenceColors[influence]
-              }} variant="contained"
+              color={influence}
+              variant="contained"
             >
               {influence}
             </Button>

diff --git a/client/src/components/game/ChooseInfluencesToKeep.tsx b/client/src/components/game/ChooseInfluencesToKeep.tsx
@@ -1,13 +1,12 @@
 import { useState } from "react"
-import { Button, Checkbox, Grid2, Typography, useTheme } from "@mui/material"
+import { Button, Checkbox, Grid2, Typography } from "@mui/material"
 import { getPlayerId } from "../../helpers/playerId"
 import { useGameStateContext } from "../../contexts/GameStateContext"
 import PlayerActionConfirmation from "./PlayerActionConfirmation"
 
-function ChooseInfluenceToKeep() {
+function ChooseInfluencesToKeep() {
   const [checkedIndexes, setCheckedIndexes] = useState<number[]>([])
   const { gameState } = useGameStateContext()
-  const { influenceColors } = useTheme()
 
   if (!gameState) {
     return null
@@ -55,9 +54,8 @@ function ChooseInfluenceToKeep() {
                   ])
                 }
               }}
-              sx={{
-                background: influenceColors[influence]
-              }} variant="contained"
+              color={influence}
+              variant="contained"
             >
               <Checkbox
                 color="default"
@@ -72,4 +70,4 @@ function ChooseInfluenceToKeep() {
   )
 }
 
-export default ChooseInfluenceToKeep
+export default ChooseInfluencesToKeep
diff --git a/client/src/components/game/PlayerActionConfirmation.tsx b/client/src/components/game/PlayerActionConfirmation.tsx
@@ -105,6 +105,7 @@ function PlayerActionConfirmation({
               <Check />
             )}
             sx={{
+              color: theme.palette.primary.contrastText,
               background: `
                 linear-gradient(
                   to right,

diff --git a/client/src/components/game/PlayerDecision.tsx b/client/src/components/game/PlayerDecision.tsx
@@ -6,7 +6,7 @@ import ChooseInfluenceToLose from "./ChooseInfluenceToLose"
 import ChooseBlockResponse from "./ChooseBlockResponse"
 import { useGameStateContext } from "../../contexts/GameStateContext"
 import { Circle } from "@mui/icons-material"
-import ChooseInfluenceToKeep from "./ChooseInfluencesToKeep"
+import ChooseInfluencesToKeep from "./ChooseInfluencesToKeep"
 
 function PlayerDecision() {
   const { gameState } = useGameStateContext()
@@ -24,7 +24,7 @@ function PlayerDecision() {
   const pendingInfluenceLoss = gameState.pendingInfluenceLoss[gameState.selfPlayer.name]
   if (pendingInfluenceLoss) {
     if (pendingInfluenceLoss[0].putBackInDeck) {
-      return <ChooseInfluenceToKeep />
+      return <ChooseInfluencesToKeep />
     } else {
       return <ChooseInfluenceToLose />
     }

diff --git a/client/src/contexts/MaterialThemeContext.tsx b/client/src/contexts/MaterialThemeContext.tsx
@@ -1,20 +1,32 @@
 import { useState, useMemo, createContext, useEffect, useContext, ReactNode } from 'react'
-import { createTheme, useMediaQuery, PaletteMode, GlobalStyles, ThemeProvider } from '@mui/material'
+import { createTheme, useMediaQuery, PaletteMode, GlobalStyles, ThemeProvider, PaletteColor } from '@mui/material'
 import { grey } from '@mui/material/colors'
 import { activeColorModeStorageKey } from '../helpers/localStorageKeys'
 import { Actions, Influences } from '@shared'
 
 declare module '@mui/material/styles' {
   interface Theme {
     isSmallScreen: boolean
-    actionColors: { [Action in Actions]: string | undefined }
+    actionColors: { [Action in Actions]: string }
     influenceColors: { [influence in Influences]: string }
   }
   interface ThemeOptions {
     isSmallScreen: boolean
-    actionColors: { [Action in Actions]: string | undefined }
+    actionColors: { [Action in Actions]: string }
     influenceColors: { [influence in Influences]: string }
   }
+
+  type CustomPalette = Record<Influences, PaletteColor> & Record<Actions, PaletteColor>;
+  type CustomPaletteOptions = Partial<Record<Influences, PaletteColor>> & Partial<Record<Actions, PaletteColor>>;
+
+  interface Palette extends CustomPalette { }
+  interface PaletteOptions extends CustomPaletteOptions { }
+}
+
+declare module '@mui/material/Button' {
+  type CustomButtonOverrides = Record<Influences, true> & Record<Actions, true>;
+
+  interface ButtonPropsColorOverrides extends CustomButtonOverrides { }
 }
 
 export const LIGHT_COLOR_MODE = 'light'
@@ -64,10 +76,11 @@ export function MaterialThemeContextProvider({ children }: { children: ReactNode
   }, [mode])
 
   const isLightMode = activeColorMode === LIGHT_COLOR_MODE
-  const white = '#ffffff'
-  const defaultBackgroundColor = isLightMode ? white : '#212121'
+  const defaultBackgroundColor = isLightMode ? '#ffffff' : '#212121'
 
   const materialTheme = useMemo(() => {
+    const primaryColor = isLightMode ? grey['700'] : grey['500']
+
     const influenceColors = {
       [Influences.Assassin]: isLightMode ? '#7A0000' : '#B23535',
       [Influences.Contessa]: isLightMode ? '#9B6000' : '#C38E3A',
@@ -78,21 +91,21 @@ export function MaterialThemeContextProvider({ children }: { children: ReactNode
 
     const actionColors = {
       [Actions.Assassinate]: influenceColors[Influences.Assassin],
-      [Actions.Coup]: undefined,
+      [Actions.Coup]: primaryColor,
       [Actions.Exchange]: influenceColors[Influences.Ambassador],
-      [Actions.ForeignAid]: undefined,
-      [Actions.Income]: undefined,
+      [Actions.ForeignAid]: primaryColor,
+      [Actions.Income]: primaryColor,
       [Actions.Steal]: influenceColors[Influences.Captain],
       [Actions.Tax]: influenceColors[Influences.Duke]
     }
 
-    return createTheme({
+    let theme = createTheme({
       isSmallScreen,
       palette: {
         mode: activeColorMode,
         background: (isLightMode ? {} : { default: grey[800] }),
         primary: {
-          main: isLightMode ? grey['700'] : grey['500']
+          main: primaryColor
         }
       },
       actionColors,
@@ -129,6 +142,35 @@ export function MaterialThemeContextProvider({ children }: { children: ReactNode
         }
       }
     })
+
+    const customPaletteColors = Object.fromEntries([
+      ...Object.values(Influences)
+        .map((influence) => [
+          influence,
+          theme.palette.augmentColor({
+            color: {
+              main: theme.influenceColors[influence],
+            },
+            name: influence,
+          })
+        ]),
+      ...Object.values(Actions)
+        .map((action) => [
+          action,
+          theme.palette.augmentColor({
+            color: {
+              main: theme.actionColors[action],
+            },
+            name: action,
+          })
+        ])
+    ])
+
+    theme = createTheme(theme, {
+      palette: customPaletteColors
+    })
+
+    return theme
   }, [isLightMode, activeColorMode, isSmallScreen])
 
   return (