rocketacademy · patrickkok · Oct 14, 2023 · Oct 14, 2023 · Oct 15, 2023 · Oct 15, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,10 +2,11 @@
   "name": "high-card-bootcamp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
+  "homepage": "https://patrickkok.github.io/high-card-bootcamp",
   "dependencies": {
-    "gh-pages": "^3.2.3",
+    "bootstrap": "^5.3.2",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.9.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },
@@ -31,5 +32,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.0.0"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,12 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
+      crossorigin="anonymous"
+    />
     <title>Rocket Bootcamp Project</title>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,12 @@
 import React from "react";
 import "./App.css";
 import { makeShuffledDeck } from "./utils.js";
+import "bootstrap/dist/css/bootstrap.min.css";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
+import CardDisplay from "./CardDisplay";
 
 class App extends React.Component {
   constructor(props) {
@@ -11,35 +17,152 @@ class App extends React.Component {
       cardDeck: makeShuffledDeck(),
       // currCards holds the cards from the current round
       currCards: [],
+      cardsLeft: 52,
+      gameStarted: false,
+
+      playerOneCurrWinner: false,
+      playerOneScore: 0,
+      playerTwoScore: 0,
     };
   }
 
+  playerOneIsHigher = (list) => {
+    const suits = ["Diamonds", "Clubs", "Hearts", "Spades"];
+    if (list.length === 0) {
-    if (list.length === 0) {
+    if (!list.length) {
-    if (list.length === 0) {
+    if (!list.length) {
+      console.log(list);
+      return null;
+    }
+    if (list[0].rank === list[1].rank) {
+      if (suits.indexOf(list[0].suit) > suits.indexOf(list[1].suit)) {
+        return true;
+      } else {
+        return false;
+      }
-      if (suits.indexOf(list[0].suit) > suits.indexOf(list[1].suit)) {
-        return true;
-      } else {
-        return false;
-      }
+      if (suits.indexOf(list[0].suit) > suits.indexOf(list[1].suit)) return true
+      return false
-      if (suits.indexOf(list[0].suit) > suits.indexOf(list[1].suit)) {
-        return true;
-      } else {
-        return false;
-      }
+      if (suits.indexOf(list[0].suit) > suits.indexOf(list[1].suit)) return true
+      return false
+    } else if (list[0].rank > list[1].rank) {
+      return true;
+    } else {
+      return false;
+    }
+  };
+
   dealCards = () => {
     // this.state.cardDeck.pop() modifies this.state.cardDeck array
     const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
+    const newPlayerOneCurrWinner = this.playerOneIsHigher(newCurrCards);
     this.setState({
       currCards: newCurrCards,
+      cardsLeft: this.state.cardsLeft - 2,
+      gameStarted: true,
+      playerOneCurrWinner: newPlayerOneCurrWinner,
     });
+    if (newPlayerOneCurrWinner) {
+      this.setState({
+        playerOneScore: this.state.playerOneScore + 1,
+      });
+    } else {
+      this.setState({
+        playerTwoScore: this.state.playerTwoScore + 1,
+      });
+    }
+  };
+
+  calculateWinningStatement = (p1Points, p2Points) => {
+    if (this.state.cardsLeft > 0) {
+      const currWinner = this.state.playerOneCurrWinner
+        ? "Player 1"
+        : "Player 2";
+      return "Winner of this round is: " + currWinner;
+    }
+    if (p1Points === p2Points) {
+      return "This game is a draw!";
+    }
+    let winnerString = "Winner of the game is: Player ";
+    return winnerString + (p1Points > p2Points ? 1 : 2);
+  };
+
+  refreshPage = () => {
+    window.location.reload();
   };
 
   render() {
     // You can write JavaScript here, just don't try and set your state!
+    const instructions = (
+      <div>
+        1. Assign yourselves player 1 and player 2<br />
+        2. Press "Start Game" to start a round of High Card between 2 players
+        <br />
+        3. Suit value is ordered like this from highest to lowest
+        <br />
+        {"largest Spades > Hearts > Clubs > Diamonds smallest"}
+      </div>
+    );
+
+    const currCardElems = (
+      <Container className="mb-2">
+        <Row>
+          <Col>Player 1</Col>
+          <Col>Player 2</Col>
+        </Row>
+        <Row>
+          <Col>
+            <CardDisplay card={this.state.currCards[0]} />
+          </Col>
+          <Col>
+            <CardDisplay card={this.state.currCards[1]} />
+          </Col>
+        </Row>
+        <Row>
+          {this.state.currCards.map(({ name, suit }, index) => (
+            // Give each list element a unique key
+            <Col key={`${name} ${suit}`} className="col-6">
+              Player {index + 1}: {name} of {suit}
+            </Col>
+          ))}
+        </Row>
+      </Container>
+    );
+
+    const gameTable = (
+      <div>
+        <h3>
+          {this.calculateWinningStatement(
+            this.state.playerOneScore,
+            this.state.playerTwoScore
+          )}
+        </h3>
+        <div>Player 1's Score: {this.state.playerOneScore}</div>
+        <div>Player 2's Score: {this.state.playerTwoScore}</div>
+        <h4>
+          {this.state.cardsLeft > 0
+            ? `Card left in deck: ${this.state.cardsLeft}`
+            : "Press the button below to play again"}
+        </h4>
+      </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}
+    const gameDisplay = (
+      <div className="col-11">
+        {currCardElems} {gameTable}
       </div>
-    ));
+    );
+
+    const dealButtonText =
+      this.state.cardsLeft === 0 ? "Start next round" : "Deal";
 
     return (
       <div className="App">
         <header className="App-header">
           <h3>High Card 🚀</h3>
-          {currCardElems}
+          {this.state.gameStarted ? gameDisplay : instructions}
           <br />
-          <button onClick={this.dealCards}>Deal</button>
+          <Button
+            className="btn btn-light"
+            onClick={
+              this.state.cardsLeft === 0 ? this.refreshPage : this.dealCards
-              this.state.cardsLeft === 0 ? this.refreshPage : this.dealCards
+              !this.state.cardsLeft? this.refreshPage : this.dealCards
-              this.state.cardsLeft === 0 ? this.refreshPage : this.dealCards
+              !this.state.cardsLeft? this.refreshPage : this.dealCards
+            }
+          >
+            {this.state.gameStarted ? dealButtonText : "Start Game"}
+          </Button>
         </header>
       </div>
     );

diff --git a/src/CardDisplay.js b/src/CardDisplay.js
@@ -0,0 +1,9 @@
+import React from "react";
+import "./App.css";
+
+export default class CardDisplay extends React.Component {
+  render() {
+    const imgName = `./PNG-cards/${this.props.card.name.toLowerCase()}_of_${this.props.card.suit.toLowerCase()}.png`;
+    return <img className="col-2" src={require(`${imgName}`)} alt="" />;
+  }
+}
diff --git a/src/PNG-cards/10_of_clubs.png b/src/PNG-cards/10_of_clubs.png
diff --git a/src/PNG-cards/10_of_diamonds.png b/src/PNG-cards/10_of_diamonds.png
diff --git a/src/PNG-cards/10_of_hearts.png b/src/PNG-cards/10_of_hearts.png
diff --git a/src/PNG-cards/10_of_spades.png b/src/PNG-cards/10_of_spades.png
diff --git a/src/PNG-cards/2_of_clubs.png b/src/PNG-cards/2_of_clubs.png
diff --git a/src/PNG-cards/2_of_diamonds.png b/src/PNG-cards/2_of_diamonds.png
diff --git a/src/PNG-cards/2_of_hearts.png b/src/PNG-cards/2_of_hearts.png
diff --git a/src/PNG-cards/2_of_spades.png b/src/PNG-cards/2_of_spades.png
diff --git a/src/PNG-cards/3_of_clubs.png b/src/PNG-cards/3_of_clubs.png
diff --git a/src/PNG-cards/3_of_diamonds.png b/src/PNG-cards/3_of_diamonds.png
diff --git a/src/PNG-cards/3_of_hearts.png b/src/PNG-cards/3_of_hearts.png
diff --git a/src/PNG-cards/3_of_spades.png b/src/PNG-cards/3_of_spades.png
diff --git a/src/PNG-cards/4_of_clubs.png b/src/PNG-cards/4_of_clubs.png
diff --git a/src/PNG-cards/4_of_diamonds.png b/src/PNG-cards/4_of_diamonds.png
diff --git a/src/PNG-cards/4_of_hearts.png b/src/PNG-cards/4_of_hearts.png
diff --git a/src/PNG-cards/4_of_spades.png b/src/PNG-cards/4_of_spades.png
diff --git a/src/PNG-cards/5_of_clubs.png b/src/PNG-cards/5_of_clubs.png
diff --git a/src/PNG-cards/5_of_diamonds.png b/src/PNG-cards/5_of_diamonds.png
diff --git a/src/PNG-cards/5_of_hearts.png b/src/PNG-cards/5_of_hearts.png
diff --git a/src/PNG-cards/5_of_spades.png b/src/PNG-cards/5_of_spades.png
diff --git a/src/PNG-cards/6_of_clubs.png b/src/PNG-cards/6_of_clubs.png
diff --git a/src/PNG-cards/6_of_diamonds.png b/src/PNG-cards/6_of_diamonds.png
diff --git a/src/PNG-cards/6_of_hearts.png b/src/PNG-cards/6_of_hearts.png
diff --git a/src/PNG-cards/6_of_spades.png b/src/PNG-cards/6_of_spades.png
diff --git a/src/PNG-cards/7_of_clubs.png b/src/PNG-cards/7_of_clubs.png
diff --git a/src/PNG-cards/7_of_diamonds.png b/src/PNG-cards/7_of_diamonds.png
diff --git a/src/PNG-cards/7_of_hearts.png b/src/PNG-cards/7_of_hearts.png
diff --git a/src/PNG-cards/7_of_spades.png b/src/PNG-cards/7_of_spades.png
diff --git a/src/PNG-cards/8_of_clubs.png b/src/PNG-cards/8_of_clubs.png
diff --git a/src/PNG-cards/8_of_diamonds.png b/src/PNG-cards/8_of_diamonds.png
diff --git a/src/PNG-cards/8_of_hearts.png b/src/PNG-cards/8_of_hearts.png
diff --git a/src/PNG-cards/8_of_spades.png b/src/PNG-cards/8_of_spades.png
diff --git a/src/PNG-cards/9_of_clubs.png b/src/PNG-cards/9_of_clubs.png
diff --git a/src/PNG-cards/9_of_diamonds.png b/src/PNG-cards/9_of_diamonds.png
diff --git a/src/PNG-cards/9_of_hearts.png b/src/PNG-cards/9_of_hearts.png
diff --git a/src/PNG-cards/9_of_spades.png b/src/PNG-cards/9_of_spades.png
diff --git a/src/PNG-cards/ace_of_clubs.png b/src/PNG-cards/ace_of_clubs.png
diff --git a/src/PNG-cards/ace_of_diamonds.png b/src/PNG-cards/ace_of_diamonds.png
diff --git a/src/PNG-cards/ace_of_hearts.png b/src/PNG-cards/ace_of_hearts.png
diff --git a/src/PNG-cards/ace_of_spades.png b/src/PNG-cards/ace_of_spades.png
diff --git a/src/PNG-cards/ace_of_spades2.png b/src/PNG-cards/ace_of_spades2.png
diff --git a/src/PNG-cards/black_joker.png b/src/PNG-cards/black_joker.png
diff --git a/src/PNG-cards/jack_of_clubs.png b/src/PNG-cards/jack_of_clubs.png
diff --git a/src/PNG-cards/jack_of_clubs2.png b/src/PNG-cards/jack_of_clubs2.png
diff --git a/src/PNG-cards/jack_of_diamonds.png b/src/PNG-cards/jack_of_diamonds.png
diff --git a/src/PNG-cards/jack_of_diamonds2.png b/src/PNG-cards/jack_of_diamonds2.png
diff --git a/src/PNG-cards/jack_of_hearts.png b/src/PNG-cards/jack_of_hearts.png
diff --git a/src/PNG-cards/jack_of_hearts2.png b/src/PNG-cards/jack_of_hearts2.png
diff --git a/src/PNG-cards/jack_of_spades.png b/src/PNG-cards/jack_of_spades.png
diff --git a/src/PNG-cards/jack_of_spades2.png b/src/PNG-cards/jack_of_spades2.png
diff --git a/src/PNG-cards/king_of_clubs.png b/src/PNG-cards/king_of_clubs.png
diff --git a/src/PNG-cards/king_of_clubs2.png b/src/PNG-cards/king_of_clubs2.png
diff --git a/src/PNG-cards/king_of_diamonds.png b/src/PNG-cards/king_of_diamonds.png
diff --git a/src/PNG-cards/king_of_diamonds2.png b/src/PNG-cards/king_of_diamonds2.png
diff --git a/src/PNG-cards/king_of_hearts.png b/src/PNG-cards/king_of_hearts.png
diff --git a/src/PNG-cards/king_of_hearts2.png b/src/PNG-cards/king_of_hearts2.png
diff --git a/src/PNG-cards/king_of_spades.png b/src/PNG-cards/king_of_spades.png
diff --git a/src/PNG-cards/king_of_spades2.png b/src/PNG-cards/king_of_spades2.png
diff --git a/src/PNG-cards/queen_of_clubs.png b/src/PNG-cards/queen_of_clubs.png
diff --git a/src/PNG-cards/queen_of_clubs2.png b/src/PNG-cards/queen_of_clubs2.png
diff --git a/src/PNG-cards/queen_of_diamonds.png b/src/PNG-cards/queen_of_diamonds.png
diff --git a/src/PNG-cards/queen_of_diamonds2.png b/src/PNG-cards/queen_of_diamonds2.png
diff --git a/src/PNG-cards/queen_of_hearts.png b/src/PNG-cards/queen_of_hearts.png
diff --git a/src/PNG-cards/queen_of_hearts2.png b/src/PNG-cards/queen_of_hearts2.png
diff --git a/src/PNG-cards/queen_of_spades.png b/src/PNG-cards/queen_of_spades.png
diff --git a/src/PNG-cards/queen_of_spades2.png b/src/PNG-cards/queen_of_spades2.png
diff --git a/src/PNG-cards/red_joker.png b/src/PNG-cards/red_joker.png