show the number of turns

NegarSal · Mar 10, 2024 · 1ba2383 · 1ba2383
1 parent 33c645f
commit 1ba2383
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 16 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,5 +1,5 @@
 .App {
-  max-width: 860px;
+  max-width: 590px;
   margin: 40px auto;
 }
 button{

diff --git a/src/App.js b/src/App.js
@@ -24,6 +24,8 @@ function App() {
       .sort(() => Math.random() - 0.5)
       .map((card) => ({ ...card, id: Math.random() }))
 
+    setChoiceTwo(null)
+    setChoiceOne(null)
     setCards(shuffledCards)
     setTurns(0)
   }
@@ -62,6 +64,11 @@ function App() {
     setDisabled(false)
   }
 
+  //start a new game automagically
+  useEffect(() => {
+    shuffleCards()
+  }, [])
+
   return (
     <div className="App">
       <h1>Magic Match</h1>
@@ -78,6 +85,7 @@ function App() {
           />
         ))}
       </div>
+      <p>Turns: {turns}</p>
     </div>
   );
 }

diff --git a/src/index.css b/src/index.css
@@ -1,22 +1,8 @@
-/* body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-} */
-
 /* base styles */
 body {
   font-family: 'Courier New', Courier, monospace;
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1rem;
   text-align: center;
   background: #1b1523;
   color: #fff;