- Version 0.12.0

- Remove next turn/end game buttons in favor of fab buttons at bottom right
Digital-Defiance · Nov 11, 2024 · f0096ae · f0096ae
1 parent 532aa5f
commit f0096ae
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -207,6 +207,11 @@ Join our community of developers.
 
 ## Changelog
 
+### Mon Nov 11 12:28:00 2024
+
+- Version 0.12.0
+  - Remove next turn/end game buttons in favor of fab buttons at bottom right
+
 ### Mon Nov 11 12:03:00 2024
 
 - Version 0.11.2

diff --git a/src/components/GameInterface.tsx b/src/components/GameInterface.tsx
@@ -13,7 +13,13 @@ import {
   Tabs,
   Tooltip,
 } from '@mui/material';
-import { Pause as PauseIcon, PlayArrow as PlayIcon, Undo as UndoIcon } from '@mui/icons-material';
+import {
+  Pause as PauseIcon,
+  PlayArrow as PlayIcon,
+  Undo as UndoIcon,
+  SkipNext as NextTurnIcon,
+  Stop as EndGameIcon,
+} from '@mui/icons-material';
 import Scoreboard from '@/components/Scoreboard';
 import Player from '@/components/Player';
 import { canUndoAction } from '@/game/dominion-lib-undo';
@@ -57,13 +63,6 @@ const Container = styled(Box)(({ theme }) => ({
   paddingTop: 0,
 }));
 
-const ButtonContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  gap: theme.spacing(2),
-  marginTop: theme.spacing(2),
-}));
-
 const FabContainer = styled(Box)(({ theme }) => ({
   position: 'fixed',
   bottom: theme.spacing(10),
@@ -250,26 +249,18 @@ const GameInterface: FC<GameInterfaceProps> = ({ nextTurn, endGame, undoLastActi
             />
           )}
         </ForwardRefBox>
-        <ButtonContainer>
-          <Button
-            variant="contained"
+      </Container>
+      <FabContainer>
+        <Tooltip title="Next Turn">
+          <Fab
             color="primary"
+            aria-label="next-turn"
             onClick={nextTurn}
             disabled={!lastActionIsNotPause}
           >
-            Next Turn
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={handleOpenConfirmEndGameDialog}
-            disabled={!lastActionIsNotPause}
-          >
-            End Game
-          </Button>
-        </ButtonContainer>
-      </Container>
-      <FabContainer>
+            <NextTurnIcon />
+          </Fab>
+        </Tooltip>
         <Tooltip title="Undo the most recent update">
           <Fab
             color="secondary"
@@ -289,6 +280,16 @@ const GameInterface: FC<GameInterfaceProps> = ({ nextTurn, endGame, undoLastActi
             {lastActionIsNotPause ? <PauseIcon /> : <PlayIcon />}
           </Fab>
         </Tooltip>
+        <Tooltip title="End Game">
+          <Fab
+            color="secondary"
+            aria-label="end-game"
+            onClick={handleOpenConfirmEndGameDialog}
+            disabled={!lastActionIsNotPause}
+          >
+            <EndGameIcon />
+          </Fab>
+        </Tooltip>
       </FabContainer>
       {gameState.currentStep === CurrentStep.Game && containerWidth > 1300 && (
         <>

diff --git a/src/components/Player.tsx b/src/components/Player.tsx
@@ -56,28 +56,37 @@ const CenteredTitle = styled(Box)({
   marginBottom: 2,
 });
 
-const CheckboxContainer = styled(Box)(({ theme }) => ({
-  position: 'absolute',
-  bottom: theme.spacing(2), // Adjust as needed
-  left: theme.spacing(2), // Adjust as needed
+interface PlayerProps {
+  containerHeight: number;
+}
+const PlayerHeader = styled('div')(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
-  gap: theme.spacing(2), // Adjust the gap as needed
+  justifyContent: 'space-between',
+  width: '100%',
+  marginBottom: theme.spacing(1),
 }));
 
-const CorrectionCheckboxContainer = styled(Box)({
+const HeaderLeftSection = styled('div')({
   display: 'flex',
   alignItems: 'center',
+  gap: '8px',
+  flex: 1,
 });
 
-const LinkCheckboxContainer = styled(Box)({
+const HeaderRightSection = styled('div')({
   display: 'flex',
   alignItems: 'center',
+  gap: '8px',
 });
 
-interface PlayerProps {
-  containerHeight: number;
-}
+const CheckboxesContainer = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  marginLeft: 'auto',
+  marginRight: '8px',
+});
 
 const Player: FC<PlayerProps> = ({ containerHeight }) => {
   const { gameState, setGameState } = useGameContext();
@@ -307,8 +316,8 @@ const Player: FC<PlayerProps> = ({ containerHeight }) => {
       >
         <DisabledOverlay />
         <Box sx={{ position: 'relative', pointerEvents: isGamePaused() ? 'none' : 'auto' }}>
-          <Box mb={2} display="flex" alignItems="center" justifyContent="space-between">
-            <Box display="flex" alignItems="center">
+          <PlayerHeader>
+            <HeaderLeftSection>
               <Tooltip
                 title={
                   isCurrentPlayer
@@ -329,11 +338,34 @@ const Player: FC<PlayerProps> = ({ containerHeight }) => {
                 />
               </Tooltip>
               <SuperCapsText className={`typography-title`}>{player.name}</SuperCapsText>
-            </Box>
-            <IconButton onClick={handleNewTurnClick}>
-              <SettingsIcon />
-            </IconButton>
-          </Box>
+            </HeaderLeftSection>
+            <CheckboxesContainer>
+              <Tooltip title="Use to reverse accidental changes. They will be marked as corrections in the log.">
+                <Checkbox
+                  checked={isCorrection}
+                  onChange={handleCorrectionChange}
+                  inputProps={{ 'aria-label': 'Correction Checkbox' }}
+                  icon={<EditIcon />}
+                  checkedIcon={<EditIcon color="primary" />}
+                />
+              </Tooltip>
+              <Tooltip title="Link new changes to the previous change">
+                <Checkbox
+                  checked={linkChanges}
+                  onChange={handleLinkChange}
+                  disabled={gameState.log.length <= 1}
+                  inputProps={{ 'aria-label': 'Link Checkbox' }}
+                  icon={<LinkIcon />}
+                  checkedIcon={<LinkIcon color="primary" />}
+                />
+              </Tooltip>
+            </CheckboxesContainer>
+            <HeaderRightSection>
+              <IconButton onClick={handleNewTurnClick} aria-label="New Turn Settings">
+                <SettingsIcon />
+              </IconButton>
+            </HeaderRightSection>
+          </PlayerHeader>
           {player && (
             <Box display="flex" flexWrap="wrap">
               <ColumnBox>
@@ -637,29 +669,6 @@ const Player: FC<PlayerProps> = ({ containerHeight }) => {
           </Popover>
         </Box>
       </StyledPaper>
-      <CheckboxContainer>
-        <CorrectionCheckboxContainer>
-          <Checkbox
-            checked={isCorrection}
-            onChange={handleCorrectionChange}
-            inputProps={{ 'aria-label': 'Correction Checkbox' }}
-          />
-          <Tooltip title="Use to reverse accidental changes. They will be marked as corrections in the log.">
-            <EditIcon />
-          </Tooltip>
-        </CorrectionCheckboxContainer>
-        <LinkCheckboxContainer>
-          <Checkbox
-            checked={linkChanges}
-            onChange={handleLinkChange}
-            disabled={gameState.log.length <= 1}
-            inputProps={{ 'aria-label': 'Link Checkbox' }}
-          />
-          <Tooltip title="Link new changes to the previous change">
-            <LinkIcon />
-          </Tooltip>
-        </LinkCheckboxContainer>
-      </CheckboxContainer>
     </OuterContainer>
   );
 };

diff --git a/src/game/constants.ts b/src/game/constants.ts
@@ -14,7 +14,7 @@ import { IRisingSunFeatures } from '@/game/interfaces/set-features/rising-sun';
 import { IExpansionsEnabled } from '@/game/interfaces/expansions-enabled';
 import { calculateInitialSunTokens } from '@/game/interfaces/set-mats/prophecy';
 
-export const VERSION_NUMBER = '0.11.2';
+export const VERSION_NUMBER = '0.11.3';
 export const LAST_COMPATIBLE_SAVE_VERSION = '0.11.0';
 
 export const MIN_PLAYERS = 2;