Brandon High-card 3.2

src/App.css

@@ -40,3 +40,25 @@
 .read-the-docs {
   color: #888;
 }
+
+.scoreboard{
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+
+h3{
+  margin: 5px
+}
+
+img{
+  height: 175px;
+  width: 125px;
+}
+
+.cardimg{
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  margin: 5px;
+}

src/App.jsx

@@ -1,27 +1,87 @@
-import logo from "/logo.png";
 import "./App.css";
+import logo from "/logo.png";
 import { makeShuffledDeck } from "./utils.jsx";
 import { useState } from "react";
 
-function App(props) {
+function App() {
   // Set default value of card deck to new shuffled deck
   const [cardDeck, setCardDeck] = useState(makeShuffledDeck());
   // currCards holds the cards from the current round
-  const [currCards, setCurrCards] = useState([]);
+  const [player1Cards, setplayer1Cards] = useState(null);
+  const [player2Cards, setplayer2Cards] = useState(null);
+  const [player1Score, setplayer1Score] = useState(0);
+  const [player2Score, setplayer2Score] = useState(0);
+  const [playerTies, setPlayerTies] = useState(0);
+  const [winner , setWinner] = useState(null);
+  const [gameOver, setGameOver] = useState(false)
+
+  const resetGame = () => {
+    setCardDeck(makeShuffledDeck())
+    setplayer1Cards(null);
+    setplayer2Cards(null);
+    setplayer1Score(0);
+    setplayer2Score(0);
+    setPlayerTies(0);
+    setGameOver(false);
+    setWinner(null);
+  }
 
   const dealCards = () => {
-    const newCurrCards = [cardDeck.pop(), cardDeck.pop()];
-    setCurrCards(newCurrCards);
+    if (cardDeck.length < 2) {
+      setGameOver(true);
+      finalWinner();
+      return
+    }
+    const player1Draw = cardDeck[0];
+    const player2Draw = cardDeck[1];
+
+    setplayer1Cards(player1Draw);
+    setplayer2Cards(player2Draw);
+
+    setCardDeck(cardDeck.slice(2));
+
+    checkWinner(player1Draw,player2Draw)
   };
+
+  const checkWinner = (card1, card2) => {
+    if (card1.rank > card2.rank){
+      setplayer1Score(player1Score + 1)
+    } else if (card2.rank > card1.rank){
+      setplayer2Score(player2Score + 1)
+    } else {
+      setPlayerTies(playerTies + 1)
+    }
+  }
+
+  const finalWinner = () =>{
+    if (player1Score > player2Score) {
+      setWinner("Player 1 Wins")
+    } else if (player1Score < player2Score){
+      setWinner("Player 2 Wins")
+    } else {
+      setWinner("It is Ties")
+    }
+  }
   // You can write JavaScript here, just don't try and set your state!
 
   // You can access your current components state here, as indicated below
-  const currCardElems = currCards.map(({ name, suit }) => (
-    // Give each list element a unique key
-    <div key={`${name}${suit}`}>
-      {name} of {suit}
+  const currCardElems = player1Cards && player2Cards && (
+    <div className="cardimg">
+      <div>
+        Player 1: 
+        <div>
+            <img src={player1Cards.img}/>          
+        </div>
+      </div>
+      <div>
+        Player 2: 
+      <div>
+          <img src={player2Cards.img}/>
+      </div>        
+      </div>
+
     </div>
-  ));
+  )
 
   return (
     <>
@@ -30,10 +90,22 @@ function App(props) {
       </div>
       <div className="card">
         <h2>React High Card 🚀</h2>
-        {currCardElems}
-        <br />
-        <button onClick={dealCards}>Deal</button>
       </div>
+      {gameOver && (
+        <div>
+          <h1>Game Over</h1>
+          <h1>{winner}</h1>
+        </div>
+      )}
+      <div className="scoreboard">
+        <h3>Player 1 Score: {player1Score}</h3>
+        <h3>Player 2 Score: {player2Score}</h3>
+        <h3>Player Ties: {playerTies}</h3>
+      </div>
+      <div>
+        <button onClick={gameOver? resetGame : dealCards}>{gameOver ? "Reset Game" : "Deal"}</button>
+      </div>
+      <div>{currCardElems}</div>
     </>
   );
 }

src/utils.jsx

@@ -23,7 +23,7 @@ const makeDeck = () => {
   // Initialise an empty deck array
   const newDeck = [];
   // Initialise an array of the 4 suits in our deck. We will loop over this array.
-  const suits = ["Hearts", "Diamonds", "Clubs", "Spades"];
+  const suits = ["H", "D", "C", "S"];
 
   // Loop over the suits array
   for (let suitIndex = 0; suitIndex < suits.length; suitIndex += 1) {
@@ -40,22 +40,25 @@ const makeDeck = () => {
 
       // If rank is 1, 11, 12, or 13, set cardName to the ace or face card's name
       if (cardName === "1") {
-        cardName = "Ace";
+        cardName = "A";
         // Ace has higher rank than all other cards
         cardRank = 14;
       } else if (cardName === "11") {
-        cardName = "Jack";
+        cardName = "J";
       } else if (cardName === "12") {
-        cardName = "Queen";
+        cardName = "Q";
       } else if (cardName === "13") {
-        cardName = "King";
+        cardName = "K";
       }
 
+      const imgPath = `./cards/${cardName}-${currentSuit}.png`;
+
       // Create a new card with the current name, suit, and rank
       const card = {
         name: cardName,
         suit: currentSuit,
         rank: cardRank,
+        img: imgPath,
       };
 
       // Add the new card to the deck