make scoreboard its own component

pishposh · Nov 7, 2024 · 63b479d · 63b479d
1 parent d44a2dc
commit 63b479d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 52 deletions.
diff --git a/src/App.css b/src/App.css
@@ -47,40 +47,3 @@ div#game {
   aspect-ratio: 1 / 1;
   padding: 0.5rem;
 }
-
-.scoreboard-container {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  padding-top: 0.5rem;
-}
-
-.scoreboard {
-  display: block;
-  padding: 0 0.5rem;
-  width: var(--scoreboard-width);
-}
-
-.scoreboard .row {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-.scoreboard p {
-  margin: 0;
-}
-
-.summary h1 {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-.summary p {
-  margin-bottom: 0.5rem;
-}
-
-.summary button {
-  margin-top: 1rem;
-}
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,6 +4,7 @@ import { Header } from './components/Header';
 import { InfoDialog } from './components/InfoDialog';
 import { PicketSign } from './components/PicketSign';
 import { ResultsDialog } from './components/ResultsDialog';
+import { Scoreboard } from './components/Scoreboard';
 import { Game, NewGame } from './game';
 
 function App() {
@@ -72,21 +73,7 @@ function App() {
           ))}
         </div>
       </div>
-      <div className="scoreboard-container">
-        <div className="scoreboard">
-          <p className="time">
-            <strong>Time spent:</strong> {duration}
-          </p>
-          <div className="row">
-            <p className="attempts">
-              <strong>Picket signs flipped:</strong> {game.getAttempts()}
-            </p>
-            <p className="score">
-              <strong>Matches:</strong> {game.getScore()}
-            </p>
-          </div>
-        </div>
-      </div>
+      <Scoreboard game={game} duration={duration} />
       {showDialog && (
         <ResultsDialog
           game={game}

diff --git a/src/components/Scoreboard/Scoreboard.css b/src/components/Scoreboard/Scoreboard.css
@@ -0,0 +1,23 @@
+.scoreboard-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding-top: 0.5rem;
+}
+
+.scoreboard {
+  display: block;
+  padding: 0 0.5rem;
+  width: var(--scoreboard-width);
+}
+
+.scoreboard .row {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.scoreboard p {
+  margin: 0;
+}
diff --git a/src/components/Scoreboard/index.tsx b/src/components/Scoreboard/index.tsx
@@ -0,0 +1,26 @@
+import { Game } from '../../game';
+import './Scoreboard.css';
+
+export const Scoreboard = ({
+  duration,
+  game
+}: {
+  duration: string;
+  game: Game;
+}) => (
+  <div className="scoreboard-container">
+    <div className="scoreboard">
+      <p className="time">
+        <strong>Time spent:</strong> {duration}
+      </p>
+      <div className="row">
+        <p className="attempts">
+          <strong>Picket signs flipped:</strong> {game.getAttempts()}
+        </p>
+        <p className="score">
+          <strong>Matches:</strong> {game.getScore()}
+        </p>
+      </div>
+    </div>
+  </div>
+);