diff --git a/cards/10-C.png b/cards/10-C.png new file mode 100644 index 0000000..18af741 Binary files /dev/null and b/cards/10-C.png differ diff --git a/cards/10-D.png b/cards/10-D.png new file mode 100644 index 0000000..3bbc4e0 Binary files /dev/null and b/cards/10-D.png differ diff --git a/cards/10-H.png b/cards/10-H.png new file mode 100644 index 0000000..3eb83d7 Binary files /dev/null and b/cards/10-H.png differ diff --git a/cards/10-S.png b/cards/10-S.png new file mode 100644 index 0000000..0b3d294 Binary files /dev/null and b/cards/10-S.png differ diff --git a/cards/2-C.png b/cards/2-C.png new file mode 100644 index 0000000..291ed97 Binary files /dev/null and b/cards/2-C.png differ diff --git a/cards/2-D.png b/cards/2-D.png new file mode 100644 index 0000000..4deee7c Binary files /dev/null and b/cards/2-D.png differ diff --git a/cards/2-H.png b/cards/2-H.png new file mode 100644 index 0000000..75a014f Binary files /dev/null and b/cards/2-H.png differ diff --git a/cards/2-S.png b/cards/2-S.png new file mode 100644 index 0000000..1ce0ffe Binary files /dev/null and b/cards/2-S.png differ diff --git a/cards/3-C.png b/cards/3-C.png new file mode 100644 index 0000000..076ab31 Binary files /dev/null and b/cards/3-C.png differ diff --git a/cards/3-D.png b/cards/3-D.png new file mode 100644 index 0000000..8ee0b4b Binary files /dev/null and b/cards/3-D.png differ diff --git a/cards/3-H.png b/cards/3-H.png new file mode 100644 index 0000000..8e74673 Binary files /dev/null and b/cards/3-H.png differ diff --git a/cards/3-S.png b/cards/3-S.png new file mode 100644 index 0000000..f9e06b4 Binary files /dev/null and b/cards/3-S.png differ diff --git a/cards/4-C.png b/cards/4-C.png new file mode 100644 index 0000000..8be9e08 Binary files /dev/null and b/cards/4-C.png differ diff --git a/cards/4-D.png b/cards/4-D.png new file mode 100644 index 0000000..70e82e8 Binary files /dev/null and b/cards/4-D.png differ diff --git a/cards/4-H.png b/cards/4-H.png new file mode 100644 index 0000000..ceecbfe Binary files /dev/null and b/cards/4-H.png differ diff --git a/cards/4-S.png b/cards/4-S.png new file mode 100644 index 0000000..95abe3e Binary files /dev/null and b/cards/4-S.png differ diff --git a/cards/5-C.png b/cards/5-C.png new file mode 100644 index 0000000..bde9777 Binary files /dev/null and b/cards/5-C.png differ diff --git a/cards/5-D.png b/cards/5-D.png new file mode 100644 index 0000000..bb92525 Binary files /dev/null and b/cards/5-D.png differ diff --git a/cards/5-H.png b/cards/5-H.png new file mode 100644 index 0000000..d923456 Binary files /dev/null and b/cards/5-H.png differ diff --git a/cards/5-S.png b/cards/5-S.png new file mode 100644 index 0000000..53a1aad Binary files /dev/null and b/cards/5-S.png differ diff --git a/cards/6-C.png b/cards/6-C.png new file mode 100644 index 0000000..a9660a0 Binary files /dev/null and b/cards/6-C.png differ diff --git a/cards/6-D.png b/cards/6-D.png new file mode 100644 index 0000000..78a80ad Binary files /dev/null and b/cards/6-D.png differ diff --git a/cards/6-H.png b/cards/6-H.png new file mode 100644 index 0000000..361643e Binary files /dev/null and b/cards/6-H.png differ diff --git a/cards/6-S.png b/cards/6-S.png new file mode 100644 index 0000000..40242a7 Binary files /dev/null and b/cards/6-S.png differ diff --git a/cards/7-C.png b/cards/7-C.png new file mode 100644 index 0000000..9d6b545 Binary files /dev/null and b/cards/7-C.png differ diff --git a/cards/7-D.png b/cards/7-D.png new file mode 100644 index 0000000..6ad5f15 Binary files /dev/null and b/cards/7-D.png differ diff --git a/cards/7-H.png b/cards/7-H.png new file mode 100644 index 0000000..19b89a2 Binary files /dev/null and b/cards/7-H.png differ diff --git a/cards/7-S.png b/cards/7-S.png new file mode 100644 index 0000000..b9f1b93 Binary files /dev/null and b/cards/7-S.png differ diff --git a/cards/8-C.png b/cards/8-C.png new file mode 100644 index 0000000..cec743c Binary files /dev/null and b/cards/8-C.png differ diff --git a/cards/8-D.png b/cards/8-D.png new file mode 100644 index 0000000..ed12951 Binary files /dev/null and b/cards/8-D.png differ diff --git a/cards/8-H.png b/cards/8-H.png new file mode 100644 index 0000000..fb39723 Binary files /dev/null and b/cards/8-H.png differ diff --git a/cards/8-S.png b/cards/8-S.png new file mode 100644 index 0000000..b6b3b38 Binary files /dev/null and b/cards/8-S.png differ diff --git a/cards/9-C.png b/cards/9-C.png new file mode 100644 index 0000000..2174db5 Binary files /dev/null and b/cards/9-C.png differ diff --git a/cards/9-D.png b/cards/9-D.png new file mode 100644 index 0000000..0b933fb Binary files /dev/null and b/cards/9-D.png differ diff --git a/cards/9-H.png b/cards/9-H.png new file mode 100644 index 0000000..7b196d6 Binary files /dev/null and b/cards/9-H.png differ diff --git a/cards/9-S.png b/cards/9-S.png new file mode 100644 index 0000000..3c3b5ff Binary files /dev/null and b/cards/9-S.png differ diff --git a/cards/A-C.png b/cards/A-C.png new file mode 100644 index 0000000..42bf5ec Binary files /dev/null and b/cards/A-C.png differ diff --git a/cards/A-D.png b/cards/A-D.png new file mode 100644 index 0000000..79cd3b8 Binary files /dev/null and b/cards/A-D.png differ diff --git a/cards/A-H.png b/cards/A-H.png new file mode 100644 index 0000000..b422124 Binary files /dev/null and b/cards/A-H.png differ diff --git a/cards/A-S.png b/cards/A-S.png new file mode 100644 index 0000000..103f56d Binary files /dev/null and b/cards/A-S.png differ diff --git a/cards/BACK.png b/cards/BACK.png new file mode 100644 index 0000000..2e02e05 Binary files /dev/null and b/cards/BACK.png differ diff --git a/cards/J-B.png b/cards/J-B.png new file mode 100644 index 0000000..000b640 Binary files /dev/null and b/cards/J-B.png differ diff --git a/cards/J-C.png b/cards/J-C.png new file mode 100644 index 0000000..5e003be Binary files /dev/null and b/cards/J-C.png differ diff --git a/cards/J-D.png b/cards/J-D.png new file mode 100644 index 0000000..131a977 Binary files /dev/null and b/cards/J-D.png differ diff --git a/cards/J-H.png b/cards/J-H.png new file mode 100644 index 0000000..bf342bc Binary files /dev/null and b/cards/J-H.png differ diff --git a/cards/J-R.png b/cards/J-R.png new file mode 100644 index 0000000..55b3ef9 Binary files /dev/null and b/cards/J-R.png differ diff --git a/cards/J-S.png b/cards/J-S.png new file mode 100644 index 0000000..f539c19 Binary files /dev/null and b/cards/J-S.png differ diff --git a/cards/K-C.png b/cards/K-C.png new file mode 100644 index 0000000..68e5774 Binary files /dev/null and b/cards/K-C.png differ diff --git a/cards/K-D.png b/cards/K-D.png new file mode 100644 index 0000000..e21d6a0 Binary files /dev/null and b/cards/K-D.png differ diff --git a/cards/K-H.png b/cards/K-H.png new file mode 100644 index 0000000..1d3c468 Binary files /dev/null and b/cards/K-H.png differ diff --git a/cards/K-S.png b/cards/K-S.png new file mode 100644 index 0000000..2edbbc1 Binary files /dev/null and b/cards/K-S.png differ diff --git a/cards/Q-C.png b/cards/Q-C.png new file mode 100644 index 0000000..7be5f9a Binary files /dev/null and b/cards/Q-C.png differ diff --git a/cards/Q-D.png b/cards/Q-D.png new file mode 100644 index 0000000..928f650 Binary files /dev/null and b/cards/Q-D.png differ diff --git a/cards/Q-H.png b/cards/Q-H.png new file mode 100644 index 0000000..21839e6 Binary files /dev/null and b/cards/Q-H.png differ diff --git a/cards/Q-S.png b/cards/Q-S.png new file mode 100644 index 0000000..7983d03 Binary files /dev/null and b/cards/Q-S.png differ diff --git a/src/App.css b/src/App.css index b9d355d..39d7416 100644 --- a/src/App.css +++ b/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; +} \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 1ee1d31..f1168e9 100644 --- a/src/App.jsx +++ b/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 -
- {name} of {suit} + const currCardElems = player1Cards && player2Cards && ( +
+
+ Player 1: +
+ +
+
+
+ Player 2: +
+ +
+
+
- )); + ) return ( <> @@ -30,10 +90,22 @@ function App(props) {

React High Card 🚀

- {currCardElems} -
-
+ {gameOver && ( +
+

Game Over

+

{winner}

+
+ )} +
+

Player 1 Score: {player1Score}

+

Player 2 Score: {player2Score}

+

Player Ties: {playerTies}

+
+
+ +
+
{currCardElems}
); } diff --git a/src/utils.jsx b/src/utils.jsx index e3102aa..b3eb379 100644 --- a/src/utils.jsx +++ b/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