wip

src/Components/Counters/ExtraCountersBar.tsx

@@ -11,6 +11,8 @@ import {
   Poison,
 } from '../../Icons/generated';
 import { usePlayers } from '../../Hooks/usePlayers';
+import { useGlobalSettings } from '../../Hooks/useGlobalSettings';
+import { GameFormat } from '../../Types/Settings';
 
 const Container = styled.div<{ $rotation: Rotation }>`
   width: 100%;
@@ -61,6 +63,7 @@ type ExtraCountersBarProps = {
 
 const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
   const { updatePlayer } = usePlayers();
+  const { initialGameSettings } = useGlobalSettings();
 
   const handleCounterChange = (
     updatedCounterTotal: number,
@@ -117,6 +120,9 @@ const ExtraCountersBar = ({ player }: ExtraCountersBarProps) => {
     return null;
   }
 
+  const isTwoHeadedGiant =
+    initialGameSettings?.gameFormat === GameFormat.TwoHeadedGiant;
+
   return (
     <Container $rotation={player.settings.rotation}>
       <ExtraCountersGrid $rotation={player.settings.rotation}>

src/Components/Views/StartMenu/StartMenu.tsx

@@ -1,4 +1,11 @@
-import { Button, FormControl, FormLabel, Switch } from '@mui/material';
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  MenuItem,
+  Select,
+  Switch,
+} from '@mui/material';
 import Slider from '@mui/material/Slider';
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
@@ -14,7 +21,7 @@ import LayoutOptions from './LayoutOptions';
 import { Spacer } from '../../Misc/Spacer';
 import { usePlayers } from '../../../Hooks/usePlayers';
 import { useGlobalSettings } from '../../../Hooks/useGlobalSettings';
-import { InitialGameSettings } from '../../../Types/Settings';
+import { GameFormat, InitialGameSettings } from '../../../Types/Settings';
 import { SettingsModal } from '../../Misc/SettingsModal';
 
 const MainWrapper = styled.div`
@@ -118,6 +125,7 @@ const Start = () => {
       numberOfPlayers: 4,
       startingLifeTotal: 40,
       useCommanderDamage: true,
+      gameFormat: GameFormat.Commander,
       gridAreas: GridTemplateAreas.FourPlayers,
     }
   );
@@ -214,7 +222,11 @@ const Start = () => {
 
       <H1>Life Trinket</H1>
       <FormControl focused={false} style={{ width: '80vw' }}>
-        <FormLabel>Number of Players</FormLabel>
+        <FormLabel>
+          {playerOptions.gameFormat === GameFormat.TwoHeadedGiant
+            ? 'Number of Teams'
+            : 'Number of Players'}
+        </FormLabel>
         <Slider
           title="Number of Players"
           max={6}
@@ -253,29 +265,37 @@ const Start = () => {
 
         <ToggleButtonsWrapper>
           <ToggleContainer>
-            <FormLabel>Commander</FormLabel>
+            <FormLabel>Use Commander Damage</FormLabel>
             <Switch
-              checked={
-                playerOptions.useCommanderDamage ??
-                initialGameSettings?.useCommanderDamage ??
-                true
-              }
+              disabled={playerOptions.gameFormat === GameFormat.Commander}
+              checked={playerOptions.useCommanderDamage}
               onChange={(_e, value) => {
-                if (value) {
-                  setPlayerOptions({
-                    ...playerOptions,
-                    useCommanderDamage: value,
-                    numberOfPlayers: 4,
-                    startingLifeTotal: 40,
-                  });
-                  return;
+                switch (playerOptions.gameFormat) {
+                  case GameFormat.TwoHeadedGiant:
+                    if (value) {
+                      setPlayerOptions({
+                        ...playerOptions,
+                        useCommanderDamage: value,
+                        startingLifeTotal: 60,
+                      });
+                      return;
+                    }
+                    setPlayerOptions({
+                      ...playerOptions,
+                      useCommanderDamage: value,
+                      startingLifeTotal: 30,
+                    });
+                    return;
+
+                  case GameFormat.Standard:
+                  case GameFormat.Commander:
+                  default:
+                    setPlayerOptions({
+                      ...playerOptions,
+                      useCommanderDamage: value,
+                    });
+                    return;
                 }
-                setPlayerOptions({
-                  ...playerOptions,
-                  useCommanderDamage: value,
-                  numberOfPlayers: 2,
-                  startingLifeTotal: 20,
-                });
               }}
             />
           </ToggleContainer>
@@ -290,6 +310,51 @@ const Start = () => {
           </Button>
         </ToggleButtonsWrapper>
 
+        <FormLabel>Format</FormLabel>
+        <Select
+          value={playerOptions.gameFormat}
+          onChange={(e) => {
+            switch (e.target.value) {
+              case GameFormat.Standard:
+                setPlayerOptions({
+                  ...playerOptions,
+                  useCommanderDamage: false,
+                  numberOfPlayers: 2,
+                  startingLifeTotal: 20,
+                  gameFormat: GameFormat.Standard,
+                });
+                return;
+
+              case GameFormat.TwoHeadedGiant:
+                setPlayerOptions({
+                  ...playerOptions,
+                  useCommanderDamage: false,
+                  numberOfPlayers: 2,
+                  startingLifeTotal: 30,
+                  gameFormat: GameFormat.TwoHeadedGiant,
+                });
+                return;
+
+              case GameFormat.Commander:
+              default:
+                setPlayerOptions({
+                  ...playerOptions,
+                  useCommanderDamage: true,
+                  numberOfPlayers: 4,
+                  startingLifeTotal: 40,
+                  gameFormat: GameFormat.Commander,
+                });
+                return;
+            }
+          }}
+        >
+          <MenuItem value={GameFormat.Commander}>Commander</MenuItem>
+          <MenuItem value={GameFormat.Standard}>Standard</MenuItem>
+          <MenuItem value={GameFormat.TwoHeadedGiant}>
+            Two Headed Giant
+          </MenuItem>
+        </Select>
+
         <FormLabel>Layout</FormLabel>
         <LayoutOptions
           numberOfPlayers={playerOptions.numberOfPlayers}

src/Data/theme.ts

@@ -104,5 +104,26 @@ export const theme = createTheme({
         },
       },
     },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#495E35',
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#495E35',
+        },
+      },
+    },
+    MuiList: {
+      styleOverrides: {
+        root: {
+          backgroundColor: '#495E35',
+        },
+      },
+    },
   },
 });

src/Types/Settings.ts

@@ -14,4 +14,8 @@ export type InitialGameSettings = {
   gridAreas: GridTemplateAreas;
 };
 
-type GameFormat = 'commander' | 'standard' | 'two-headed-giant';
+export enum GameFormat {
+  Commander = 'commander',
+  Standard = 'standard',
+  TwoHeadedGiant = 'two-headed-giant',
+}