From e035733eea0c981ac37e22d1202af12582115f89 Mon Sep 17 00:00:00 2001 From: charlesleezhaoyi Date: Wed, 25 Oct 2023 21:10:12 +0800 Subject: [PATCH 1/3] Commit #1 - Initiate State --- src/App.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 76 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 899cefc..fda2016 100644 --- a/src/App.js +++ b/src/App.js @@ -11,21 +11,53 @@ class App extends React.Component { cardDeck: makeShuffledDeck(), // currCards holds the cards from the current round currCards: [], + hasGameStarted: false, + roundWinner: null, + player1NumRoundsWon: 0, + player2NumRoundsWon: 0, }; } - dealCards = () => { - // this.state.cardDeck.pop() modifies this.state.cardDeck array - const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()]; + resetGame = () => { this.setState({ - currCards: newCurrCards, + cardDeck: makeShuffledDeck(), + currCards: [], + hasGameStarted: false, + roundWinner: null, + player1NumRoundsWon: 0, + player2NumRoundsWon: 0, }); }; - render() { - // You can write JavaScript here, just don't try and set your state! + dealCards = () => { + // Deal last 2 cards to currCards + const newCurrCards = this.state.cardDeck.slice(-2); + let newRoundWinner = null; + if (newCurrCards[0].rank > newCurrCards[1].rank) { + newRoundWinner = 1; + } else if (newCurrCards[1].rank > newCurrCards[0].rank) { + newRoundWinner = 2; + } + + this.setState((state) => ({ + // Remove last 2 cards from cardDeck + cardDeck: state.cardDeck.slice(0, -2), + currCards: newCurrCards, + hasGameStarted: true, + roundWinner: newRoundWinner, + // Use prev state from setState argument instead of this.state to calculate what next state should be + player1NumRoundsWon: + newRoundWinner === 1 + ? state.player1NumRoundsWon + 1 + : state.player1NumRoundsWon, + player2NumRoundsWon: + newRoundWinner === 2 + ? state.player2NumRoundsWon + 1 + : state.player2NumRoundsWon, + })); + }; - // You can access your current components state here, as indicated below + render() { const currCardElems = this.state.currCards.map(({ name, suit }) => ( // Give each list element a unique key
@@ -33,13 +65,49 @@ class App extends React.Component {
)); + const roundWinnerMessage = this.state.roundWinner + ? `Player ${this.state.roundWinner} won this round.` + : `This rounds is a tie!`; + const player1RoundsWonMessage = `Player 1 has won ${this.state.player1NumRoundsWon} rounds this game.`; + const player2RoundsWonMessage = `Player 2 has won ${this.state.player2NumRoundsWon} rounds this game.`; + const numRoundsLeft = this.state.cardDeck.length / 2; + const numRoundsLeftMessage = `There are ${numRoundsLeft} rounds left in this game!`; + + // Determine game winner + let gameWinner = null; + if (this.state.player1NumRoundsWon > this.state.player2NumRoundsWon) { + gameWinner = 1; + } else if ( + this.state.player2NumRoundsWon > this.state.player1NumRoundsWon + ) { + gameWinner = 2; + } + const gameWinnerMessage = gameWinner + ? `Player ${gameWinner} won this game!` + : "It's a draw!"; + + // Deal button text changes at end of game to start again + const dealButtonText = numRoundsLeft === 0 ? "Reset Game" : "Deal"; + return (

High Card 🚀

{currCardElems}
- + {/* Button changes functionality depending on game state */} + +
+

{this.state.hasGameStarted && roundWinnerMessage}

+

{this.state.hasGameStarted && player1RoundsWonMessage}

+

{this.state.hasGameStarted && player2RoundsWonMessage}

+

{this.state.hasGameStarted && numRoundsLeftMessage}

+ {/* Render winner message if the game is over */} +

{numRoundsLeft === 0 && gameWinnerMessage}

); From 8901d6a424c251419a4bea141cccbdebfe46ced7 Mon Sep 17 00:00:00 2001 From: charlesleezhaoyi Date: Thu, 26 Oct 2023 23:25:29 +0800 Subject: [PATCH 2/3] Added dealCards logic and conditional rendering --- src/App.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index fda2016..1d33463 100644 --- a/src/App.js +++ b/src/App.js @@ -46,6 +46,7 @@ class App extends React.Component { hasGameStarted: true, roundWinner: newRoundWinner, // Use prev state from setState argument instead of this.state to calculate what next state should be + // nested ternary operator to nest two if statements player1NumRoundsWon: newRoundWinner === 1 ? state.player1NumRoundsWon + 1 @@ -68,8 +69,11 @@ class App extends React.Component { const roundWinnerMessage = this.state.roundWinner ? `Player ${this.state.roundWinner} won this round.` : `This rounds is a tie!`; + //Placeholder text when player 1 wins a round const player1RoundsWonMessage = `Player 1 has won ${this.state.player1NumRoundsWon} rounds this game.`; + //Placeholder text when player 2 wins a round const player2RoundsWonMessage = `Player 2 has won ${this.state.player2NumRoundsWon} rounds this game.`; + // numRoundsLeft is the number of rounds left in the game - divide by two because two cards are drawn each round const numRoundsLeft = this.state.cardDeck.length / 2; const numRoundsLeftMessage = `There are ${numRoundsLeft} rounds left in this game!`; @@ -82,6 +86,7 @@ class App extends React.Component { ) { gameWinner = 2; } + const gameWinnerMessage = gameWinner ? `Player ${gameWinner} won this game!` : "It's a draw!"; @@ -95,13 +100,15 @@ class App extends React.Component {

High Card 🚀

{currCardElems}
- {/* Button changes functionality depending on game state */} + {/* Button changes functionality depending on game state. When number of rounds = 0, button prompts game reset, else deal cards. */}
+
+ {/* Render round winner message if the game has started */}

{this.state.hasGameStarted && roundWinnerMessage}

{this.state.hasGameStarted && player1RoundsWonMessage}

{this.state.hasGameStarted && player2RoundsWonMessage}

From fc18b02f7a5c76973c19bf75f5f708ee8e6b6449 Mon Sep 17 00:00:00 2001 From: charlesleezhaoyi Date: Thu, 26 Oct 2023 23:44:57 +0800 Subject: [PATCH 3/3] Refactored code --- src/App.js | 33 +++++++++++++++++++-------------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git a/src/App.js b/src/App.js index 1d33463..9923325 100644 --- a/src/App.js +++ b/src/App.js @@ -18,6 +18,7 @@ class App extends React.Component { }; } + // Function to reset game to initial state resetGame = () => { this.setState({ cardDeck: makeShuffledDeck(), @@ -32,12 +33,8 @@ class App extends React.Component { dealCards = () => { // Deal last 2 cards to currCards const newCurrCards = this.state.cardDeck.slice(-2); - let newRoundWinner = null; - if (newCurrCards[0].rank > newCurrCards[1].rank) { - newRoundWinner = 1; - } else if (newCurrCards[1].rank > newCurrCards[0].rank) { - newRoundWinner = 2; - } + // Determine round winner based on card rank + const newRoundWinner = newCurrCards[0].rank > newCurrCards[1].rank ? 1 : 2; this.setState((state) => ({ // Remove last 2 cards from cardDeck @@ -87,12 +84,20 @@ class App extends React.Component { gameWinner = 2; } - const gameWinnerMessage = gameWinner - ? `Player ${gameWinner} won this game!` - : "It's a draw!"; + let gameWinnerMessage; + if (gameWinner) { + gameWinnerMessage = `Player ${gameWinner} won this game!`; + } else { + gameWinnerMessage = "It's a draw!"; + } // Deal button text changes at end of game to start again - const dealButtonText = numRoundsLeft === 0 ? "Reset Game" : "Deal"; + let dealButtonText; + if (numRoundsLeft === 0) { + dealButtonText = "Reset Game"; + } else { + dealButtonText = "Deal"; + } return (
@@ -109,10 +114,10 @@ class App extends React.Component {

{/* Render round winner message if the game has started */} -

{this.state.hasGameStarted && roundWinnerMessage}

-

{this.state.hasGameStarted && player1RoundsWonMessage}

-

{this.state.hasGameStarted && player2RoundsWonMessage}

-

{this.state.hasGameStarted && numRoundsLeftMessage}

+ {this.state.hasGameStarted &&

{roundWinnerMessage}

} + {this.state.hasGameStarted &&

{player1RoundsWonMessage}

} + {this.state.hasGameStarted &&

{player2RoundsWonMessage}

} + {this.state.hasGameStarted &&

{numRoundsLeftMessage}

} {/* Render winner message if the game is over */}

{numRoundsLeft === 0 && gameWinnerMessage}