ptbc7 high card initial version -karina

package.json

@@ -4,8 +4,14 @@
   "private": true,
   "homepage": "https://rocketacademy.github.io/high-card-bootcamp",
   "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/material": "^5.12.0",
+    "bootstrap": "^5.2.3",
+    "deck-of-cards": "^0.1.8",
     "gh-pages": "^3.2.3",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.7.2",
     "react-dom": "^18.1.0",
     "react-scripts": "5.0.1"
   },

src/App.css

@@ -2,11 +2,6 @@
   text-align: center;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -17,3 +12,18 @@
   font-size: calc(10px + 2vmin);
   color: white;
 }
+
+.progressBar {
+  width: 70%;
+}
+
+.tableMargin {
+  margin: 50px;
+}
+
+
+.image {
+  max-width: 40%;
+  max-height: 30%;
+  margin: auto;
+}

src/App.js

@@ -1,43 +1,134 @@
-import React from "react";
-import "./App.css";
-import { makeShuffledDeck } from "./utils.js";
+import React from 'react';
+import './App.css';
+import { makeShuffledDeck } from './utils.js';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+import 'bootstrap/dist/css/bootstrap.css';
+import Table from 'react-bootstrap/Table';
 
 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: [],
+      gameStart: false,
+      roundWinner: null,
+      player1Won: 0,
+      player2Won: 0,
     };
   }
 
   dealCards = () => {
+    // remove the 2 cards from deck, the remaining card set is called newCurrCard
+    const newCurrCards = this.state.cardDeck.slice(-2);
+
+    let roundWinner = null;
+
+    if (newCurrCards[0].rank > newCurrCards[1].rank) {
+      roundWinner = 1;
+    } else if (newCurrCards[1].rank > newCurrCards[0].rank) {
+      roundWinner = 2;
+    } else if (newCurrCards[0].rank === newCurrCards[1].rank) {
+      roundWinner = 3;
+    }
+
     this.setState((state) => ({
-      // Remove last 2 cards from cardDeck
       cardDeck: state.cardDeck.slice(0, -2),
-      // Deal last 2 cards to currCards
-      currCards: state.cardDeck.slice(-2),
+      currCards: newCurrCards,
+      gameStart: true,
+      roundWinner: roundWinner,
+      player1Won: roundWinner === 1 ? state.player1Won + 1 : state.player1Won,
+      player2Won: roundWinner === 2 ? state.player2Won + 1 : state.player2Won,
     }));
   };
 
+  componentDidUpdate() {
+    setTimeout(() => {
+      console.log(JSON.stringify(this.state.currCards));
+    }, 1000);
+  }
+
+  resetGame = () => {
+    this.setState({
+      cardDeck: makeShuffledDeck(),
+      currCards: [],
+      player1Won: 0,
+      player2Won: 0,
+      roundWinner: null,
+      gameStart: false,
+    });
+  };
   render() {
     const currCardElems = this.state.currCards.map(({ name, suit }) => (
-      // Give each list element a unique key
       <div key={`${name}${suit}`}>
-        {name} of {suit}
+        <img
+          className='image'
+          src={require(`./images/${name}_of_${suit}.png`)}
+          alt={`${name} of ${suit}`}
+        />
       </div>
     ));
 
+    let gameWinnerMessage = '';
+
+    if (this.state.roundWinner === 3) {
+      gameWinnerMessage = 'It is a tie.';
+    } else if (this.state.roundWinner === 1 || this.state.roundWinner === 2) {
+      gameWinnerMessage = `Player ${this.state.roundWinner} won the round`;
+    }
+
+    let overallWinnerMessage = '';
+
+    if (this.state.player1Won > this.state.player2Won) {
+      overallWinnerMessage = 'Player 1 won the game';
+    } else if (this.state.player2Won > this.state.player1Won) {
+      overallWinnerMessage = 'Player 2 won the game';
+    } else if (this.state.player1Won === this.state.player2Won) {
+      overallWinnerMessage = 'It is a tie.';
+    }
+
+    const dealButtonText = this.state.cardDeck.length === 0 ? 'Reset' : 'Deal';
+
     return (
-      <div className="App">
-        <header className="App-header">
+      <div className='App'>
+        <header className='App-header'>
           <h3>High Card 🚀</h3>
+
           {currCardElems}
           <br />
-          <button onClick={this.dealCards}>Deal</button>
+          <div className='tableMargin'>
+            <Table striped bordered variant='dark'>
+              <thead>
+                <tr>
+                  <td colSpan={2}>Scoreboard</td>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th>Player 1</th>
+                  <th>Player 2</th>
+                </tr>
+                <tr>
+                  <td>{this.state.player1Won}</td>
+                  <td>{this.state.player2Won}</td>
+                </tr>
+              </tbody>
+            </Table>
+          </div>
+          <div className='progressBar'>
+            <ProgressBar now={this.state.cardDeck.length} max={52} />
+          </div>
+          <button
+            onClick={
+              this.state.cardDeck.length === 0 ? this.resetGame : this.dealCards
+            }
+          >
+            {dealButtonText}
+          </button>
+          <br />
+
+          <p>{this.state.gameStart && gameWinnerMessage}</p>
+          <p>{this.state.cardDeck.length === 0 && overallWinnerMessage}</p>
         </header>
       </div>
     );

src/PlayingCard.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+//PlayingCard is just a function component since there is no need to manage any state
+const PlayingCard = (props) => {
+  const { name, suit, index } = props;
+  const imageName = name.charAt(0);
+  const imageSuit = suit.charAt(0);
+
+  const myImage = require(`./images/${imageName}${imageSuit}.png`);
+};
+
+export default PlayingCard;