From d0bb325a36a13f17a480c14d94b469597c69f5a6 Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sat, 21 Oct 2023 11:19:08 +0800 Subject: [PATCH 1/8] step 1: declaring and dislpaying the winner of the round done --- src/App.js | 24 +++++++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 899cefc..3ef9641 100644 --- a/src/App.js +++ b/src/App.js @@ -11,25 +11,41 @@ class App extends React.Component { cardDeck: makeShuffledDeck(), // currCards holds the cards from the current round currCards: [], + hasGameStarted: false, + currRoundWinner: null, + playerOneNumOfWins: 0, + playerTwoNumOfWins: 0, + roundNumber: 0, }; } dealCards = () => { // this.state.cardDeck.pop() modifies this.state.cardDeck array - const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()]; + const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()]; // each player gets one card this.setState({ currCards: newCurrCards, }); + this.determineThisRoundWinner(newCurrCards); + }; + //function to determine the winner of the round + determineThisRoundWinner = (currCards) => { + const newCurrRoundWinner = + currCards[0].rank === currCards[1].rank + ? "It's a tie!" + : currCards[0].rank > currCards[1].rank + ? "Player 1 wins!" + : "Player 2 wins!"; + this.setState({ currRoundWinner: newCurrRoundWinner }); }; render() { // 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 = this.state.currCards.map(({ name, suit }) => ( + const currCardElems = this.state.currCards.map(({ name, suit }, i) => ( // Give each list element a unique key
- {name} of {suit} + Player {i + 1} got {name} of {suit}
)); @@ -38,6 +54,8 @@ class App extends React.Component {

High Card 🚀

{currCardElems} + + {this.state.currRoundWinner}
From f06370a53682f46941bf6550d98e75e8e1901500 Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sat, 21 Oct 2023 17:01:43 +0800 Subject: [PATCH 2/8] declaring a nd displaying the current round winner modified, keeping score added --- src/App.js | 36 +++++++++++++++++++++++++++--------- 1 file changed, 27 insertions(+), 9 deletions(-) diff --git a/src/App.js b/src/App.js index 3ef9641..430b697 100644 --- a/src/App.js +++ b/src/App.js @@ -29,13 +29,22 @@ class App extends React.Component { }; //function to determine the winner of the round determineThisRoundWinner = (currCards) => { - const newCurrRoundWinner = - currCards[0].rank === currCards[1].rank - ? "It's a tie!" - : currCards[0].rank > currCards[1].rank - ? "Player 1 wins!" - : "Player 2 wins!"; - this.setState({ currRoundWinner: newCurrRoundWinner }); + let newCurrRoundWinner = null; + if (currCards[0].rank > currCards[1].rank) newCurrRoundWinner = 1; + if (currCards[1].rank > currCards[0].rank) newCurrRoundWinner = 2; + this.setState({ + currRoundWinner: newCurrRoundWinner, + hasGameStarted: true, + }); + this.keepScore(newCurrRoundWinner); + }; + //function to keep track of the score + keepScore = (currRoundWinner) => { + if (currRoundWinner == 1) + this.setState({ playerOneNumOfWins: this.state.playerOneNumOfWins + 1 }); + + if (currRoundWinner == 2) + this.setState({ playerTwoNumOfWins: this.state.playerTwoNumOfWins + 1 }); }; render() { @@ -45,17 +54,26 @@ class App extends React.Component { const currCardElems = this.state.currCards.map(({ name, suit }, i) => ( // Give each list element a unique key
- Player {i + 1} got {name} of {suit} +

+ Player {i + 1} got {name} of {suit} +

)); + const currRoundWinnerOutput = this.state.currRoundWinner + ? `Player ${this.state.currRoundWinner} won this round.` + : `It's a tie!`; + const playerOneNumOfWinsOutput = `Player 1 has ${this.state.playerOneNumOfWins} wins.`; + const playerTwoNumOfWinsOutput = `Player 2 has ${this.state.playerTwoNumOfWins} wins.`; return (

High Card 🚀

{currCardElems} +

{this.state.hasGameStarted && currRoundWinnerOutput}

+

{this.state.hasGameStarted && playerOneNumOfWinsOutput}

+

{this.state.hasGameStarted && playerTwoNumOfWinsOutput}

- {this.state.currRoundWinner}
From e5a08feb9ad3de7bdc81dcfc690ac918f8ced599 Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sat, 21 Oct 2023 22:26:43 +0700 Subject: [PATCH 3/8] number of rounds left and current round added --- src/App.js | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 430b697..3eddcfa 100644 --- a/src/App.js +++ b/src/App.js @@ -35,15 +35,16 @@ class App extends React.Component { this.setState({ currRoundWinner: newCurrRoundWinner, hasGameStarted: true, + roundNumber: this.state.roundNumber + 1, }); this.keepScore(newCurrRoundWinner); }; //function to keep track of the score keepScore = (currRoundWinner) => { - if (currRoundWinner == 1) + if (currRoundWinner === 1) this.setState({ playerOneNumOfWins: this.state.playerOneNumOfWins + 1 }); - if (currRoundWinner == 2) + if (currRoundWinner === 2) this.setState({ playerTwoNumOfWins: this.state.playerTwoNumOfWins + 1 }); }; @@ -59,20 +60,29 @@ class App extends React.Component {

)); + const gameDirections = this.state.hasGameStarted + ? `Click "deal" to continue the game.` + : `Click "deal to start the game.`; const currRoundWinnerOutput = this.state.currRoundWinner ? `Player ${this.state.currRoundWinner} won this round.` : `It's a tie!`; const playerOneNumOfWinsOutput = `Player 1 has ${this.state.playerOneNumOfWins} wins.`; const playerTwoNumOfWinsOutput = `Player 2 has ${this.state.playerTwoNumOfWins} wins.`; + const numOfRoundsLeft = `Number of rounds left: ${ + this.state.cardDeck.length / 2 + }`; return (
-

High Card 🚀

+

Welcome to High Card game!🚀

+
{gameDirections}
+ {/*

{this.state.roundNumber}

*/} {currCardElems}

{this.state.hasGameStarted && currRoundWinnerOutput}

{this.state.hasGameStarted && playerOneNumOfWinsOutput}

{this.state.hasGameStarted && playerTwoNumOfWinsOutput}

+

{numOfRoundsLeft}


From 4bdd6d81e420fe478525e691b5619e94d13b4e6b Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sun, 22 Oct 2023 17:47:06 +0700 Subject: [PATCH 4/8] determing the game winner added --- src/App.js | 43 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 8 deletions(-) diff --git a/src/App.js b/src/App.js index 3eddcfa..7364978 100644 --- a/src/App.js +++ b/src/App.js @@ -15,7 +15,7 @@ class App extends React.Component { currRoundWinner: null, playerOneNumOfWins: 0, playerTwoNumOfWins: 0, - roundNumber: 0, + isItLastRound: false, }; } @@ -26,6 +26,7 @@ class App extends React.Component { currCards: newCurrCards, }); this.determineThisRoundWinner(newCurrCards); + this.determineLastRound(); }; //function to determine the winner of the round determineThisRoundWinner = (currCards) => { @@ -33,19 +34,32 @@ class App extends React.Component { if (currCards[0].rank > currCards[1].rank) newCurrRoundWinner = 1; if (currCards[1].rank > currCards[0].rank) newCurrRoundWinner = 2; this.setState({ - currRoundWinner: newCurrRoundWinner, hasGameStarted: true, + currRoundWinner: newCurrRoundWinner, roundNumber: this.state.roundNumber + 1, }); + console.log(this.state.hasGameStarted); + this.keepScore(newCurrRoundWinner); }; //function to keep track of the score keepScore = (currRoundWinner) => { - if (currRoundWinner === 1) + if (currRoundWinner === 1) { this.setState({ playerOneNumOfWins: this.state.playerOneNumOfWins + 1 }); + } - if (currRoundWinner === 2) + if (currRoundWinner === 2) { this.setState({ playerTwoNumOfWins: this.state.playerTwoNumOfWins + 1 }); + console.log(this.state.playerTwoNumOfWins); + } + }; + //function to keep track of rounds and determine the las round + determineLastRound = () => { + let numOfRoundsLeft = this.state.cardDeck.length / 2; + if (numOfRoundsLeft === 0) { + this.setState({ isItLastRound: true }); + console.log(this.state.isItLastRound); + } }; render() { @@ -68,21 +82,34 @@ class App extends React.Component { : `It's a tie!`; const playerOneNumOfWinsOutput = `Player 1 has ${this.state.playerOneNumOfWins} wins.`; const playerTwoNumOfWinsOutput = `Player 2 has ${this.state.playerTwoNumOfWins} wins.`; - const numOfRoundsLeft = `Number of rounds left: ${ + + const numOfRoundsLeftOutput = `Number of rounds left: ${ this.state.cardDeck.length / 2 }`; + //logic to determine the game winner + let gameWinner = null; + if (this.state.playerOneNumOfWins > this.state.playerTwoNumOfWins) { + gameWinner = 1; + } + if (this.state.playerTwoNumOfWins > this.state.playerOneNumOfWins) { + gameWinner = 2; + } + console.log(gameWinner); + const gameWinnerOutput = gameWinner + ? `Player ${gameWinner} won the game!` + : `It's a tie!`; return (

Welcome to High Card game!🚀

-
{gameDirections}
- {/*

{this.state.roundNumber}

*/} +

{gameDirections}

{currCardElems}

{this.state.hasGameStarted && currRoundWinnerOutput}

{this.state.hasGameStarted && playerOneNumOfWinsOutput}

{this.state.hasGameStarted && playerTwoNumOfWinsOutput}

-

{numOfRoundsLeft}

+

{numOfRoundsLeftOutput}

+

{this.state.isItLastRound && gameWinnerOutput}


From b6b3cfef1d37772e3ae86b70b33f15052a34373e Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sun, 22 Oct 2023 17:58:06 +0700 Subject: [PATCH 5/8] game reset added, console.logs removed --- src/App.js | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 7364978..22066c0 100644 --- a/src/App.js +++ b/src/App.js @@ -38,7 +38,6 @@ class App extends React.Component { currRoundWinner: newCurrRoundWinner, roundNumber: this.state.roundNumber + 1, }); - console.log(this.state.hasGameStarted); this.keepScore(newCurrRoundWinner); }; @@ -50,7 +49,6 @@ class App extends React.Component { if (currRoundWinner === 2) { this.setState({ playerTwoNumOfWins: this.state.playerTwoNumOfWins + 1 }); - console.log(this.state.playerTwoNumOfWins); } }; //function to keep track of rounds and determine the las round @@ -58,10 +56,19 @@ class App extends React.Component { let numOfRoundsLeft = this.state.cardDeck.length / 2; if (numOfRoundsLeft === 0) { this.setState({ isItLastRound: true }); - console.log(this.state.isItLastRound); } }; - + resetGame = () => { + this.setState({ + cardDeck: makeShuffledDeck(), + currCards: [], + hasGameStarted: false, + currRoundWinner: null, + playerOneNumOfWins: 0, + playerTwoNumOfWins: 0, + isItLastRound: false, + }); + }; render() { // You can write JavaScript here, just don't try and set your state! @@ -94,7 +101,6 @@ class App extends React.Component { if (this.state.playerTwoNumOfWins > this.state.playerOneNumOfWins) { gameWinner = 2; } - console.log(gameWinner); const gameWinnerOutput = gameWinner ? `Player ${gameWinner} won the game!` : `It's a tie!`; @@ -103,7 +109,7 @@ class App extends React.Component {

Welcome to High Card game!🚀

-

{gameDirections}

+
{gameDirections}
{currCardElems}

{this.state.hasGameStarted && currRoundWinnerOutput}

{this.state.hasGameStarted && playerOneNumOfWinsOutput}

@@ -112,7 +118,11 @@ class App extends React.Component {

{this.state.isItLastRound && gameWinnerOutput}


- +
); From d831f819c07bf85f6c71409f7b676d716caef164 Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sun, 22 Oct 2023 18:29:04 +0700 Subject: [PATCH 6/8] p tages changed to br, position of the button changed --- src/App.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index 22066c0..0421884 100644 --- a/src/App.js +++ b/src/App.js @@ -110,19 +110,21 @@ class App extends React.Component {

Welcome to High Card game!🚀

{gameDirections}
- {currCardElems} -

{this.state.hasGameStarted && currRoundWinnerOutput}

-

{this.state.hasGameStarted && playerOneNumOfWinsOutput}

-

{this.state.hasGameStarted && playerTwoNumOfWinsOutput}

-

{numOfRoundsLeftOutput}

-

{this.state.isItLastRound && gameWinnerOutput}

-
+
+ {currCardElems} +
+ {this.state.hasGameStarted && currRoundWinnerOutput}

+ {this.state.hasGameStarted && playerOneNumOfWinsOutput}

+ {this.state.hasGameStarted && playerTwoNumOfWinsOutput} +

+ {numOfRoundsLeftOutput}

+ {this.state.isItLastRound && gameWinnerOutput}
); From f6d4c96c923e3f454629a8ffc223d9a31a6c5929 Mon Sep 17 00:00:00 2001 From: Mannushka Date: Sun, 22 Oct 2023 20:02:28 +0700 Subject: [PATCH 7/8] size of the button changed --- src/App.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 0421884..e7d10bf 100644 --- a/src/App.js +++ b/src/App.js @@ -82,8 +82,8 @@ class App extends React.Component {
)); const gameDirections = this.state.hasGameStarted - ? `Click "deal" to continue the game.` - : `Click "deal to start the game.`; + ? `Click "deal" to continue playing.` + : `Click "deal" to start the game.`; const currRoundWinnerOutput = this.state.currRoundWinner ? `Player ${this.state.currRoundWinner} won this round.` : `It's a tie!`; @@ -112,6 +112,7 @@ class App extends React.Component {
{gameDirections}


{currCardElems}