Gabriel Lim FTBC13

README.md

@@ -1,3 +1,20 @@
+## Built Features
+
+- Compare cards by both rank and suit
+- Determine who has won each round & display message
+- Keep Score during the game
+- Keep Score of the number of games won
+- Display message after winner is declared
+- Reset game after winner is declared
+- Ability to reset the game
+- Display number of remaining cards in the deck
+- Playing Card class component to render image of cards
+
+## Outstanding Features
+
+- Display last card played in a smaller render
+- Highlight winning card when played
+
 # Rocket Academy Coding Bootcamp: High Card
 
 https://bc.rocketacademy.co/1-frontend/1.e-exercises/1.e.3-high-card

package.json

@@ -2,10 +2,10 @@
   "name": "high-card-bootcamp",
   "version": "0.1.0",
   "private": true,
-  "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
+  "homepage": "https://gbrllim.github.io/high-card-bootcamp/",
   "dependencies": {
-    "gh-pages": "^3.2.3",
     "react": "^18.1.0",
+    "react-bootstrap": "^2.8.0",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },
@@ -31,5 +31,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^6.0.0"
   }
 }

src/App.css

@@ -1,3 +1,42 @@
+* {
+  margin: 0;
+}
+
+:root {
+  --primary-blue: #5fa9b4;
+  --primary-teal: #b4d6c5;
+  --primary-red: #a8515d;
+  --primary-white: #fcecca;
+}
+
+h3 {
+  width: 75vw;
+  border: 3px dotted var(--primary-red);
+  border-radius: 20px;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 20px 20px;
+  max-width: 18em;
+  padding: 0;
+}
+
+input {
+  width: 15em;
+  border-radius: 10px;
+  text-align: center;
+  margin: 10px 10px;
+}
+
+button {
+  border-radius: 10px;
+  width: 12em;
+  height: 4em;
+  margin: 6px;
+  background-color: var(--primary-red);
+  color: var(--primary-white);
+  font-weight: 800;
+}
+
 .App {
   text-align: center;
 }
@@ -8,12 +47,73 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: var(--primary-white);
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
+  color: var(--primary-red);
+  font-weight: 600;
+  margin: 0;
+}
+
+.table-row {
+  font-family: sans-serif;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 75vw;
+  max-width: 20em;
+}
+
+.table-elements {
+  background-color: var(--primary-teal);
+  border: 2px solid black;
+  width: 10em;
+  height: 50px;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 0.7em;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.header-elements {
+  background-color: var(--primary-blue);
+  border: 2px solid black;
+  width: 10em; /* Adjust the width to your desired fixed width */
+  height: 50px;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 0.7em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--primary-white);
+}
+
+.card-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 15px;
+}
+
+.card-element {
+  margin-left: 5%;
+  margin-right: 5%;
+}
+
+p.char {
+  border-radius: 20px;
+  margin: 10px;
+  background-color: var(--primary-teal);
+}
+footer {
+  margin: 0.8em;
 }

src/App.js

@@ -1,45 +1,142 @@
 import React from "react";
 import "./App.css";
-import { makeShuffledDeck } from "./utils.js";
+import { makeShuffledDeck } from "./components/utils.js";
+import Container from "react-bootstrap/Container";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import PlayingCard from "./components/PlayingCard";
 
 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: [],
+      p1Card: [{ name: "", suit: "", rank: 0 }],
+      p2Card: [{ name: "", suit: "", rank: 0 }],
+      p1Score: 0,
+      p2Score: 0,
+      p1Result: 0,
+      p2Result: 0,
+      gameState: `Press deal to begin ⬇️`,
     };
   }
 
   dealCards = () => {
-    // this.state.cardDeck.pop() modifies this.state.cardDeck array
-    const newCurrCards = [this.state.cardDeck.pop(), this.state.cardDeck.pop()];
+    if (this.state.cardDeck.length === 0) {
+      this.setState(this.checkGameEnd);
+      return;
+    }
+
+    const p1Cards = [this.state.cardDeck.pop()];
+    const p2Cards = [this.state.cardDeck.pop()];
+    this.setState(
+      {
+        p1Card: p1Cards,
+        p2Card: p2Cards,
+      },
+      this.cardCompare //run card compare after cards are dealt
+    );
+  };
+
+  test = () => this.setState({ p1Score: this.state.p1Score + 1 });
+
+  cardCompare = () => {
+    const [card1] = this.state.p1Card;
+    const [card2] = this.state.p2Card;
+    const suitWeights = {
+      Spades: 4,
+      Hearts: 3,
+      Clubs: 2,
+      Diamonds: 1,
+    };
+
+    if (card1.rank > card2.rank) {
+      this.setState({
+        p1Score: this.state.p1Score + 1,
+        gameState: "🥷🏻 Scores!",
+      });
+    } else if (suitWeights[card1.suit] > suitWeights[card2.suit]) {
+      this.setState({
+        p1Score: this.state.p1Score + 1,
+        gameState: "🥷🏻 Scores!",
+      });
+    } else
+      this.setState({
+        p2Score: this.state.p2Score + 1,
+        gameState: "🤖 Scores!",
+      });
+  };
+
+  checkGameEnd = () => {
+    if (this.state.p1Score > this.state.p2Score) {
+      this.setState({
+        p1Result: this.state.p1Result + 1,
+        p1Score: 0,
+        p2Score: 0,
+        gameState: "No more cards - 🥷🏻 Wins!",
+      });
+    } else {
+      this.setState({
+        p1Score: this.state.p1Score + 1,
+        p1Score: 0,
+        p2Score: 0,
+        gameState: "No more cards - 🤖 Wins!",
+      });
+    }
+    this.setState({ cardDeck: makeShuffledDeck() });
+  };
+
+  restartGame = () => {
     this.setState({
-      currCards: newCurrCards,
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      p1Score: 0,
+      p2Score: 0,
+      p1Result: 0,
+      p2Result: 0,
+      gameState: "Game Reset",
     });
   };
 
   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 }) => (
-      // Give each list element a unique key
-      <div key={`${name}${suit}`}>
-        {name} of {suit}
-      </div>
-    ));
+    const [card1] = this.state.p1Card;
+    const [card2] = this.state.p2Card;
 
     return (
       <div className="App">
         <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
-          <br />
-          <button onClick={this.dealCards}>Deal</button>
+          <h2>High Card Showdown 🥷🏻 vs 🤖</h2>
+          <h3>{this.state.gameState}</h3>
+          <Container>
+            <Row className="table-row">
+              <Col className="header-elements">🥷🏻 Games Won:</Col>
+              <Col className="header-elements">🥷🏻 Game Score:</Col>
+              <Col className="header-elements">🤖 Game Score:</Col>
+              <Col className="header-elements">🤖 Games Won:</Col>
+            </Row>
+            <Row className="table-row">
+              <Col className="table-elements">{this.state.p1Result}</Col>
+              <Col className="table-elements">{this.state.p1Score}</Col>
+              <Col className="table-elements">{this.state.p2Score}</Col>
+              <Col className="table-elements">{this.state.p2Result}</Col>
+            </Row>
+          </Container>
+          <Container>
+            <Row className="card-row">
+              <Col className="card-element">
+                <PlayingCard suit={card1.suit} name={card1.name} />
+                <p className="char">🥷🏻</p>
+              </Col>
+              <Col className="card-element">
+                <PlayingCard suit={card2.suit} name={card2.name} />
+                <p className="char">🤖</p>
+              </Col>
+            </Row>
+          </Container>
+          <button onClick={this.dealCards}>Deal!</button>
+          <button onClick={this.restartGame}>Reset</button>
+          <footer>Remaining Cards:{this.state.cardDeck.length}</footer>
         </header>
       </div>
     );

src/components/PlayingCard.css

@@ -0,0 +1,31 @@
+:root {
+  --primary-blue: #5fa9b4;
+  --primary-teal: #b4d6c5;
+  --primary-red: #a8515d;
+  --primary-white: #fcecca;
+}
+
+.playing-card {
+  background-color: white;
+  border-radius: 10%;
+  width: 30vw;
+  max-width: 8em;
+  height: 40vw;
+  max-height: 11em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin: 0;
+  box-shadow: 0 0 7px 6px var(--primary-teal);
+}
+
+.card-rank {
+  font-size: 28px;
+  margin: 0;
+}
+
+.card-suit {
+  font-size: 28px;
+  margin: 10px;
+}

src/components/PlayingCard.js

@@ -0,0 +1,27 @@
+import React from "react";
+import "./PlayingCard.css";
+
+export default class PlayingCard extends React.Component {
+  render() {
+    const suitEmojis = {
+      Spades: "♠️",
+      Hearts: "♥️",
+      Clubs: "♣️",
+      Diamonds: "♦️",
+    };
+
+    return (
+      <div className="playing-card">
+        <div className="wrapper">
+          <p className="card-suit">{suitEmojis[this.props.suit]}</p>
+        </div>
+        <div className="wrapper">
+          <p className="card-rank">{this.props.name}</p>
+        </div>
+        <div className="wrapper">
+          <p className="card-suit">{suitEmojis[this.props.suit]}</p>
+        </div>
+      </div>
+    );
+  }
+}