make scoreboard its own component

pishposh · Nov 7, 2024 · 126abae · 126abae
1 parent d44a2dc
commit 126abae
Show file tree

Hide file tree

Showing 2 changed files with 2 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}