Merge branch 'default-settings-to-current-difficulty'

pishposh · Nov 7, 2024 · fc4abf2 · fc4abf2
2 parents c99b1de + 7811f44
commit fc4abf2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 22 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -54,32 +54,31 @@ function App() {
   return (
     <>
       <Header>
-        <span
-          className="link-alike"
-          onClick={() => setInfoDialogOpen(!infoDialogOpen)}
-        >
+        <a href="https://nytimesguild.org/tech/guild-builds/">
+          More Games
+        </a>
+
+        <span className="link-alike" onClick={() => setInfoDialogOpen(!infoDialogOpen)}>
           What’s this?
         </span>
+        {infoDialogOpen && (
+          <InfoDialog onClose={() => setInfoDialogOpen(false)} />
+        )}
 
-        <a style={{cursor: "pointer"}} onClick={() => setGameSettingsOpen(!gameSettingsOpen)}>
+        <span className="link-alike" onClick={() => setGameSettingsOpen(!gameSettingsOpen)}>
           Settings
-        </a>
+        </span>
+        {gameSettingsOpen && (
+          <GameSettings
+            onClose={() => setGameSettingsOpen(false)}
+            onSave={(difficulty) => {
+              setGame(game.resetWithDifficulty(difficulty));
+            }}
+            currentDifficulty={game.getDifficulty()}
+          />
+        )}
       </Header>
 
-      {infoDialogOpen && (
-        <InfoDialog onClose={() => setInfoDialogOpen(false)} />
-      )}
-
-      {gameSettingsOpen && (
-        <GameSettings
-          onClose={() => setGameSettingsOpen(false)}
-          onSave={(difficulty) => {
-            setGame(game.resetWithDifficulty(difficulty));
-          }}
-          currentDifficulty={game.getDifficulty()}
-        />
-      )}
-
       <div id="game-container">
         <div id="game">
           {game.getCards().map((card) => (

diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css
@@ -26,7 +26,7 @@
 
   > div.header-links {
     justify-content: end;
-    & > * {
+    & > a, & > .link-alike {
       margin-left: 1rem;
     }
   }

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -9,7 +9,6 @@ export const Header = ({ children }: PropsWithChildren) => (
         <b>Match Strike</b>
       </div>
       <div className="header-links">
-        <a href="https://nytimesguild.org/tech/guild-builds/">More Games</a>
         {children}
       </div>
     </div>