BC High Card - Hong Yun

package.json

@@ -4,6 +4,11 @@
   "private": true,
   "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^5.0.8",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
     "gh-pages": "^3.2.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

src/App.css

@@ -1,3 +1,7 @@
+. {
+  font-family: "Roboto";
+}
+
 .App {
   text-align: center;
 }
@@ -12,8 +16,13 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.card-hand {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}

src/App.js

@@ -1,6 +1,14 @@
 import React from "react";
 import "./App.css";
 import { makeShuffledDeck } from "./utils.js";
+import PlayingCard from "./cardimages";
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+import Button from "@mui/material/Button";
+import CasinoRoundedIcon from "@mui/icons-material/CasinoRounded";
+import RocketLaunchRoundedIcon from "@mui/icons-material/RocketLaunchRounded";
 
 class App extends React.Component {
   constructor(props) {
@@ -11,14 +19,73 @@ class App extends React.Component {
       cardDeck: makeShuffledDeck(),
       // currCards holds the cards from the current round
       currCards: [],
+      currComputerCards: [],
+      roundWinner: "",
+      score: [0, 0],
+      overallWinner: "",
+      roundsLeft: 26,
     };
   }
 
   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()];
+    const newComputerCurrCards = [this.state.cardDeck.pop()];
+    this.setState(
+      {
+        currCards: newCurrCards,
+        currComputerCards: newComputerCurrCards,
+        roundsLeft: this.state.roundsLeft - 1,
+      },
+      () => this.determineWinner()
+    );
+    if (this.state.cardDeck.length === 0) {
+      this.setState(() => this.determineOverallWinner());
+    }
+  };
+
+  determineWinner = () => {
+    const playerRank = this.state.currCards[0].rank;
+    const computerRank = this.state.currComputerCards[0].rank;
+    let playerScore = this.state.score[0];
+    let computerScore = this.state.score[1];
+    if (playerRank > computerRank) {
+      this.setState({
+        roundWinner: "Player",
+        score: [(playerScore += 1), computerScore],
+      });
+    } else if (playerRank === computerRank) {
+      this.setState({ roundWinner: "Draw" });
+    } else {
+      this.setState({
+        roundWinner: "Computer",
+        score: [playerScore, (computerScore += 1)],
+      });
+    }
+  };
+
+  determineOverallWinner = () => {
+    const playerFinalScore = this.state.score[0];
+    const computerFinalScore = this.state.score[1];
+
+    if (playerFinalScore > computerFinalScore) {
+      this.setState({ overallWinner: "Player wins" });
+    } else if (playerFinalScore === computerFinalScore) {
+      this.setState({ overallWinner: "It's a draw" });
+    } else {
+      this.setState({ overallWinner: "Computer wins" });
+    }
+  };
+
+  restartGame = () => {
     this.setState({
-      currCards: newCurrCards,
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      currComputerCards: [],
+      roundWinner: "",
+      score: [0, 0],
+      overallWinner: "",
+      roundsLeft: 26,
     });
   };
 
@@ -28,18 +95,61 @@ class App extends React.Component {
     // 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>
+      <>
+        <div key={`${name}${suit}`}>{/*{name} of {suit}*/}</div>
+        <div>
+          <PlayingCard value={name} suit={suit} />
+        </div>
+      </>
     ));
-
+    const currComputerCardElems = this.state.currComputerCards.map(
+      ({ name, suit }) => (
+        // Give each list element a unique key
+        <>
+          <div key={`${name}${suit}`}>{/* {name} of {suit}*/}</div>
+          <div>
+            <PlayingCard value={name} suit={suit} />
+          </div>
+        </>
+      )
+    );
+    const currWinner = this.state.roundWinner;
+    const overallWinner = this.state.overallWinner;
     return (
       <div className="App">
         <header className="App-header">
-          <h3>High Card 🚀</h3>
-          {currCardElems}
-          <br />
-          <button onClick={this.dealCards}>Deal</button>
+          <h3>
+            <CasinoRoundedIcon /> High Card <RocketLaunchRoundedIcon />
+          </h3>
+          {this.state.roundsLeft !== 26 && (
+            <div className="card-hand">
+              <p>Player Hand {currCardElems}</p>
+              <p>Computer Hand {currComputerCardElems}</p>
+            </div>
+          )}
+          {this.state.roundsLeft !== 26 && (
+            <div className="winning-hand">
+              <p>Winner: {currWinner}</p>
+              <p>
+                Player score: {this.state.score[0]}
+                <br />
+                Computer score: {this.state.score[1]}
+              </p>
+              <p>Rounds Left: {this.state.roundsLeft}</p>
+              <p>{overallWinner}</p>
+            </div>
+          )}
+          <div>
+            {overallWinner ? (
+              <Button variant="contained" onClick={this.restartGame}>
+                Restart
+              </Button>
+            ) : (
+              <Button variant="contained" onClick={this.dealCards}>
+                Deal
+              </Button>
+            )}
+          </div>
         </header>
       </div>
     );

src/cardimages.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const PlayingCard = ({ value, suit }) => {
+  const cardImage = require(`./images/SVG-cards-1.3/${value}_of_${suit}.svg`);
+  return (
+    <div>
+      <img src={cardImage} alt={`${value}_of_${suit}`} />
+    </div>
+  );
+};
+export default PlayingCard;