chore: move the undo button to where the other input actions are (#12)

TN1ck · Aug 25, 2024 · a29913e · a29913e
1 parent d1be080
commit a29913e
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 35 deletions.
diff --git a/src/components/pages/Game/GameControls/GameControlActions.tsx b/src/components/pages/Game/GameControls/GameControlActions.tsx
@@ -1,14 +1,43 @@
 import * as React from "react";
-import {clearCell, getHint} from "src/state/sudoku";
+import {clearCell, getHint, undo} from "src/state/sudoku";
 import styled from "styled-components";
-import {activateNotesMode, deactivateNotesMode} from "src/state/game";
+import {activateNotesMode, deactivateNotesMode, GameStateMachine} from "src/state/game";
 import Button from "../../../modules/Button";
 import {connect, ConnectedProps} from "react-redux";
 import {RootState} from "src/state/rootReducer";
 import clsx from "clsx";
 
 const ControlContainer = styled.div.attrs({className: "relative justify-center flex"})``;
 
+const undoButtonConnector = connect(
+  (state: RootState) => {
+    return {
+      state: state.game.state,
+      sudoku: state.sudoku,
+    };
+  },
+  {
+    undo,
+  },
+);
+
+type UndoButtonProps = ConnectedProps<typeof undoButtonConnector>;
+
+const UndoButton: React.FC<UndoButtonProps> = ({state, undo, sudoku}) => {
+  const canUndo = sudoku.historyIndex < sudoku.history.length - 1;
+  return (
+    <Button
+      className="w-full"
+      disabled={state === GameStateMachine.wonGame || state === GameStateMachine.paused || !canUndo}
+      onClick={undo}
+    >
+      {"Undo"}
+    </Button>
+  );
+};
+
+const ConnectedUndoButton = undoButtonConnector(UndoButton);
+
 const connector = connect(
   (state: RootState) => ({
     notesMode: state.game.notesMode,
@@ -26,7 +55,7 @@ type PropsFromRedux = ConnectedProps<typeof connector>;
 class SudokuMenuControls extends React.Component<PropsFromRedux> {
   render() {
     return (
-      <div className="mt-4 grid w-full grid-cols-3 gap-2">
+      <div className="mt-4 grid w-full grid-cols-4 gap-2">
         <ControlContainer>
           <Button
             onClick={() => (this.props.notesMode ? this.props.deactivateNotesMode() : this.props.activateNotesMode())}
@@ -46,6 +75,9 @@ class SudokuMenuControls extends React.Component<PropsFromRedux> {
             {"Hint"}
           </Button>
         </ControlContainer>
+        <ControlContainer>
+          <ConnectedUndoButton />
+        </ControlContainer>
       </div>
     );
   }

diff --git a/src/components/pages/Game/index.tsx b/src/components/pages/Game/index.tsx
@@ -50,34 +50,6 @@ const sudokuMenuNumbersConnector = connect(
 );
 const SudokuMenuNumbersConnected = sudokuMenuNumbersConnector(SudokuMenuNumbers);
 
-const undoButtonConnector = connect(
-  (state: RootState) => {
-    return {
-      state: state.game.state,
-      sudoku: state.sudoku,
-    };
-  },
-  {
-    undo,
-  },
-);
-
-type UndoButtonProps = ConnectedProps<typeof undoButtonConnector>;
-
-const UndoButton: React.FC<UndoButtonProps> = ({state, undo, sudoku}) => {
-  const canUndo = sudoku.historyIndex < sudoku.history.length - 1;
-  return (
-    <Button
-      disabled={state === GameStateMachine.wonGame || state === GameStateMachine.paused || !canUndo}
-      onClick={undo}
-    >
-      {"Undo"}
-    </Button>
-  );
-};
-
-const ConnectedUndoButton = undoButtonConnector(UndoButton);
-
 function PauseButton({
   state,
   pauseGame,
@@ -279,11 +251,8 @@ class Game extends React.Component<PropsFromRedux> {
                 <GameTimer />
               </div>
               <div className="flex">
-                <div className="mr-2">
-                  <PauseButton state={game.state} continueGame={continueGame} pauseGame={pauseGame} />
-                </div>
                 <div>
-                  <ConnectedUndoButton />
+                  <PauseButton state={game.state} continueGame={continueGame} pauseGame={pauseGame} />
                 </div>
               </div>
             </GameHeaderArea>