From bab11d2484f936223f2aeda3b2594c35e6718d08 Mon Sep 17 00:00:00 2001
From: ignatiusgabrieltan <ignatiusgabrieltanwei@gmail.com>
Date: Tue, 12 Sep 2023 00:51:04 +0800
Subject: [PATCH 1/2] Finished game

---
 package.json       |   4 +-
 src/App.css        |  31 ++++++++-
 src/App.js         | 156 +++++++++++++++++++++++++++++++++++++++++----
 src/answer.js      | 117 ++++++++++++++++++++++++++++++++++
 src/startscreen.js |   0
 5 files changed, 291 insertions(+), 17 deletions(-)
 create mode 100644 src/answer.js
 create mode 100644 src/startscreen.js

diff --git a/package.json b/package.json
index 9e1db91..1856b8f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "high-card-bootcamp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
+  "homepage": "https://ignatiusgabrieltan.github.io/high-card-bootcamp",
   "dependencies": {
     "gh-pages": "^3.2.3",
     "react": "^18.1.0",
@@ -12,7 +12,7 @@
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d build",
-    "start": "react-scripts start",
+    "start": "WATCHPACK_POLLING=true react-scripts start",
     "build": "react-scripts build"
   },
   "eslintConfig": {
diff --git a/src/App.css b/src/App.css
index 97b7c57..2f34581 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,5 +1,13 @@
 .App {
   text-align: center;
+  background-color: rgb(153, 153, 211);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: rgba(15, 15, 122, 0.622);
 }
 
 .App-logo {
@@ -7,7 +15,26 @@
   pointer-events: none;
 }
 
-.App-header {
+button {
+  width: 100px;
+  height: 30px;
+  background-color: rgba(15, 15, 122, 0.622);
+  color: rgb(215, 242, 152);
+  border-radius: 5px;
+}
+
+.table-container {
+  border-radius: 20px;
+  padding: 0 50px;
+  color: rgba(15, 15, 122, 0.622);
+}
+h5 {
+  border: rgb(194, 138, 40) solid 1.5px;
+  background-color: rgb(215, 242, 152);
+  margin: 0;
+  padding: 5px 35px;
+}
+/* .App-header {
   background-color: #282c34;
   min-height: 100vh;
   display: flex;
@@ -16,4 +43,4 @@
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
-}
+} */
diff --git a/src/App.js b/src/App.js
index 899cefc..569d9ec 100644
--- a/src/App.js
+++ b/src/App.js
@@ -11,36 +11,166 @@ class App extends React.Component {
       cardDeck: makeShuffledDeck(),
       // currCards holds the cards from the current round
       currCards: [],
+      playerOneRoundScore: 0,
+      playerTwoRoundScore: 0,
+      tieRoundScore: 0,
+      playerOneGameScore: 0,
+      playerTwoGameScore: 0,
+      tieGameScore: 0,
+      winner: 0,
+      gameState: "START",
     };
   }
 
+  //restart the game function..
+  restartGame = () => {
+    this.setState({
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      playerOneRoundScore: 0,
+      playerTwoRoundScore: 0,
+      tieRoundScore: 0,
+      winner: 0,
+      gameState: "START",
+    });
+  };
+
   dealCards = () => {
     // this.state.cardDeck.pop() modifies this.state.cardDeck array
     const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
+    let roundWinner = 0;
+    if (newCurrCards[0].rank > newCurrCards[1].rank) {
+      roundWinner = 1;
+    } else if (newCurrCards[0].rank < newCurrCards[1].rank) {
+      roundWinner = 2;
+    } else if (newCurrCards[0].rank === newCurrCards[1].rank) {
+      roundWinner = 3;
+    }
     this.setState({
       currCards: newCurrCards,
+      gameState: "PLAY",
+      playerOneRoundScore:
+        roundWinner === 1
+          ? this.state.playerOneRoundScore + 1
+          : this.state.playerOneRoundScore,
+      playerTwoRoundScore:
+        roundWinner === 2
+          ? this.state.playerTwoRoundScore + 1
+          : this.state.playerTwoRoundScore,
+      tieRoundScore:
+        roundWinner === 3
+          ? this.state.tieRoundScore + 1
+          : this.state.tieRoundScore,
+      winner: roundWinner,
     });
   };
 
-  render() {
-    // You can write JavaScript here, just don't try and set your state!
+  //start of game
+  gameTitle = () => {
+    if (this.state.gameState === "START") {
+      return (
+        <div>
+          <h3>🃏 Welcome to High Card!🃏</h3>
+          <h3>2 players will compete to see has the highest card</h3>
+        </div>
+      );
+    } else {
+      return <div></div>;
+    }
+  };
 
-    // You can access your current components state here, as indicated below
-    const currCardElems = this.state.currCards.map(({ name, suit }) => (
-      // Give each list element a unique key
-      <div key={`${name}${suit}`}>
-        {name} of {suit}
-      </div>
-    ));
+  //winner!
+  winner = () => {
+    if (this.state.winner === 3 && this.state.gameState === "PLAY") {
+      return <h4>It's a tie!</h4>;
+    } else if (this.state.gameState === "PLAY") {
+      return <h4>Player {this.state.winner} wins!</h4>;
+    }
+  };
+
+  //check to see who has won the game
+  checkGameWin = () => {
+    let playerOneTotalScore = this.state.playerOneRoundScore;
+    let playerTwoTotalScore = this.state.playerTwoRoundScore;
+    let tieTotalScore = this.state.tieRoundScore;
+    this.setState({
+      playerOneGameScore:
+        playerOneTotalScore > playerTwoTotalScore &&
+        playerOneTotalScore > tieTotalScore
+          ? this.state.playerOneGameScore + 1
+          : this.state.playerOneGameScore,
+      playerTwoGameScore:
+        playerTwoTotalScore > playerOneTotalScore &&
+        playerTwoTotalScore > tieTotalScore
+          ? this.state.playerTwoGameScore + 1
+          : this.state.playerTwoGameScore,
+      tieGameScore:
+        tieTotalScore >= playerOneTotalScore &&
+        tieTotalScore >= playerTwoTotalScore
+          ? this.state.tieGameScore + 1
+          : this.state.tieGameScore,
+    });
+  };
+
+  //players cards
+  playersCards = () => {
+    if (this.state.gameState === "PLAY") {
+      return (
+        <h4>
+          Player 1s Card: {this.state.currCards[0].name} of
+          {this.state.currCards[0].suit} <br />
+          Player 2s Card: {this.state.currCards[1].name} of
+          {this.state.currCards[1].suit}
+        </h4>
+      );
+    } else {
+      return null;
+    }
+  };
+
+  //number of rounds left
+  numberOfRoundsLeft = () => {
+    const cardsLeft = this.state.cardDeck.length / 2;
+    return <h3>There are {cardsLeft} more rounds left in this deck.</h3>;
+  };
+
+  render() {
+    const dealBtn = this.state.cardDeck.length === 0 ? "Restart" : "Deal";
 
     return (
       <div className="App">
         <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
-          <br />
-          <button onClick={this.dealCards}>Deal</button>
+          {this.gameTitle()}
+          {this.numberOfRoundsLeft()}
         </header>
+        <button
+          onClick={() => {
+            if (this.state.cardDeck.length === 0) {
+              this.restartGame();
+              this.checkGameWin();
+            } else {
+              this.dealCards();
+            }
+          }}
+        >
+          {dealBtn}
+        </button>
+        <br />
+        {this.playersCards()}
+        {this.winner()}
+        <br />
+        <div className="table-container">
+          <div className="game-score-container">
+            <h5>Player 1 Game Score: {this.state.playerOneGameScore}</h5>
+            <h5>Player 2 Game Score: {this.state.playerTwoGameScore}</h5>
+            <h5>Game Ties: {this.state.tieGameScore}</h5>
+          </div>
+          <div className="round-score-container">
+            <h5>Player 1 Round Score: {this.state.playerOneRoundScore}</h5>
+            <h5>Player 2 Round Score: {this.state.playerTwoRoundScore}</h5>
+            <h5>Game Ties: {this.state.tieRoundScore}</h5>
+          </div>
+        </div>
       </div>
     );
   }
diff --git a/src/answer.js b/src/answer.js
new file mode 100644
index 0000000..fda2016
--- /dev/null
+++ b/src/answer.js
@@ -0,0 +1,117 @@
+import React from "react";
+import "./App.css";
+import { makeShuffledDeck } from "./utils.js";
+
+class App extends React.Component {
+  constructor(props) {
+    // Always call super with props in constructor to initialise parent class
+    super(props);
+    this.state = {
+      // Set default value of card deck to new shuffled deck
+      cardDeck: makeShuffledDeck(),
+      // currCards holds the cards from the current round
+      currCards: [],
+      hasGameStarted: false,
+      roundWinner: null,
+      player1NumRoundsWon: 0,
+      player2NumRoundsWon: 0,
+    };
+  }
+
+  resetGame = () => {
+    this.setState({
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      hasGameStarted: false,
+      roundWinner: null,
+      player1NumRoundsWon: 0,
+      player2NumRoundsWon: 0,
+    });
+  };
+
+  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,
+    }));
+  };
+
+  render() {
+    const currCardElems = this.state.currCards.map(({ name, suit }) => (
+      // Give each list element a unique key
+      <div key={`${name}${suit}`}>
+        {name} of {suit}
+      </div>
+    ));
+
+    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 (
+      <div className="App">
+        <header className="App-header">
+          <h3>High Card 🚀</h3>
+          {currCardElems}
+          <br />
+          {/* Button changes functionality depending on game state */}
+          <button
+            onClick={numRoundsLeft === 0 ? this.resetGame : this.dealCards}
+          >
+            {dealButtonText}
+          </button>
+          <br />
+          <p>{this.state.hasGameStarted && roundWinnerMessage}</p>
+          <p>{this.state.hasGameStarted && player1RoundsWonMessage}</p>
+          <p>{this.state.hasGameStarted && player2RoundsWonMessage}</p>
+          <p>{this.state.hasGameStarted && numRoundsLeftMessage}</p>
+          {/* Render winner message if the game is over */}
+          <p>{numRoundsLeft === 0 && gameWinnerMessage}</p>
+        </header>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/src/startscreen.js b/src/startscreen.js
new file mode 100644
index 0000000..e69de29

From 15c9652ec65d44a65659fa2830523bd26be81de4 Mon Sep 17 00:00:00 2001
From: ignatiusgabrieltan <ignatiusgabrieltanwei@gmail.com>
Date: Tue, 12 Sep 2023 00:52:18 +0800
Subject: [PATCH 2/2] removed guide

---
 src/answer.js | 117 --------------------------------------------------
 1 file changed, 117 deletions(-)
 delete mode 100644 src/answer.js

diff --git a/src/answer.js b/src/answer.js
deleted file mode 100644
index fda2016..0000000
--- a/src/answer.js
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from "react";
-import "./App.css";
-import { makeShuffledDeck } from "./utils.js";
-
-class App extends React.Component {
-  constructor(props) {
-    // Always call super with props in constructor to initialise parent class
-    super(props);
-    this.state = {
-      // Set default value of card deck to new shuffled deck
-      cardDeck: makeShuffledDeck(),
-      // currCards holds the cards from the current round
-      currCards: [],
-      hasGameStarted: false,
-      roundWinner: null,
-      player1NumRoundsWon: 0,
-      player2NumRoundsWon: 0,
-    };
-  }
-
-  resetGame = () => {
-    this.setState({
-      cardDeck: makeShuffledDeck(),
-      currCards: [],
-      hasGameStarted: false,
-      roundWinner: null,
-      player1NumRoundsWon: 0,
-      player2NumRoundsWon: 0,
-    });
-  };
-
-  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,
-    }));
-  };
-
-  render() {
-    const currCardElems = this.state.currCards.map(({ name, suit }) => (
-      // Give each list element a unique key
-      <div key={`${name}${suit}`}>
-        {name} of {suit}
-      </div>
-    ));
-
-    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 (
-      <div className="App">
-        <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
-          <br />
-          {/* Button changes functionality depending on game state */}
-          <button
-            onClick={numRoundsLeft === 0 ? this.resetGame : this.dealCards}
-          >
-            {dealButtonText}
-          </button>
-          <br />
-          <p>{this.state.hasGameStarted && roundWinnerMessage}</p>
-          <p>{this.state.hasGameStarted && player1RoundsWonMessage}</p>
-          <p>{this.state.hasGameStarted && player2RoundsWonMessage}</p>
-          <p>{this.state.hasGameStarted && numRoundsLeftMessage}</p>
-          {/* Render winner message if the game is over */}
-          <p>{numRoundsLeft === 0 && gameWinnerMessage}</p>
-        </header>
-      </div>
-    );
-  }
-}
-
-export default App;