jasonmzx / black-jack-replay-3700u

Project by Armaghan, Ahmed, Tahmid, Jason

Black Jack | Cards Game | Play & Replay (Review) System

by: Group 11

Ahmed Darwish (100754743)

Armaghan Nasir (100820948)

Tahmid Chowdhury (100822671)

Jason Manarroo (100825106)

---

Video of some games on the site being played !

^^ Click Image, or Raw Link: https://youtu.be/i_CnzXaYXig

Video reviewing some past games !

^^ Click Image, or Raw Link: https://youtu.be/wY-Z2K8M_Ns

---

Linux Setup:

Docker DB Setup

docker run --name blackjack-db -e MYSQL_ROOT_PASSWORD=blackjack -d -p 3306:3306 mysql:latest

---

Database & Schema Setup:

CREATE DATABASE blackjack_replay;

Now go to scripts.md document, within the same directory as this file, and run Script #1 to initialize the Table Schemas, and run Script #2 to load in the card_registry table with 52 cards, for cloning and shuffling upon active_games initializations.

---

Python FastAPI Setup for Conda Distribution

Anaconda Install, which is a Python Distribution and Package Management Tool (Easier for those on Windows IMO)

1. conda create --name blackjack-API

2. conda activate blackjack-API

3. conda install fastapi uvicorn mysql-connector-python

When you want to close the VENV

4. Use conda deactivate to de-activate Conda VENV

---

PIP (Python Original Distribution):

1. Make sure you are in ./API directory

2. python3 -m venv blackjack-VENV

• LINUX: source blackjack-VENV/bin/activate
• WINDOWS: & .\blackjack-VENV\Scripts\Activate.ps1 (Untested)

4. pip install fastapi uvicorn mysql-connector-python

5. Make sure essential API packages are installed LINUX ONLY: pip list | grep -E "uvicorn|fastapi|mysql-connector-python"

When you want to close the VENV

6. Use deactivate to de-activate PIP VENV

---

Running API, this will require:

1. Start MySQL Docker Container sudo docker start blackjack-db
2. Re-activate your virtual environment, then going to ../API/source where main.py resides, then run: uvicorn main:app --reload

On Linux: you're able to run the shell script run_api.sh in the main Blackjack3700U Directory, this will activate venv, start up the docker, and run api, just run the it with BASH!

---

Frontend Docs

Create-React-App command

sudo npm install -g create-react-app

---

Installation, once cloned our repo:

Setting up, and running our frontend in Development Mode

cd Frontend/blackjack-web/src
npm install
npm run start

black-jack-replay-3700u's Issues

Game breaking ACE Bug (API issue)

Le'ts say the player initially pulls: 4 and Ace, here we say: Since 4 =< 10, Ace's value is 11, so hand value is 15

Player pulls a 7 when hitting: Now 4+7 = 11 !< 10, so Ace shuld be valued at 1, buts it's been appended as 11 (Error in Perform hit, and Dealer Play functions in db_utility.py) fix these bugs and possibly abstract this tricky hand value countign as a fn in game utility file?

CSS & JSX Cleanup of gamelog

Game Log still doesn't look the greatest, even if the text is formatted! Pls go into Game.js and fix the rendering of this gamelog

Right now this is the rendering fn, pls spiffy it up!

    const RenderLog = (state, hands_payload) => {
        const logStrs = activeGameLoggingAlgorithm(state, hands_payload);

        let logDump = [];

        for (const logStr of logStrs) {
            logDump.push(
                <>
                    <span className="bg-light">
                        {logStr}
                    </span>
                    <br />
                </>
            );
        }

        setGameLog(logDump);
    }

I'd say adjust the padding and margins of the span, you can use the Active Logging algorithm with multiple different outputs, like maybe The Card values are rendered differently in the log, and the Holder Drew looks different, just make it look better than what it currently is...

game.js line 233

                        {/* GAME LOG ENTRIES GO INTO HERE */}
                        <div className="ms-2 me-2">
                            {gameLog}
                        </div>

Also note you can adjust the container of the gameLog (this is the state the renderer is building too)

Place a quick wager

Currently, you must type in your wager manually. This can be tedious if you're playing multiple games in succession. Let's try making some buttons underneath the text field that quickly set a wager automatically. I also think we should add some space between the input and button, so they don't touch.

                    <div class="block-heading">
                        <h2 class="text-info">Place your Wager...</h2>
                        <h4>Your current balance on our site is: {moneyDisplay}</h4>
                        <br/>

                        <div>
                            <label class="form-label">Amount: </label>
                            <input class="form-control item" type="number" ref={wagerInput}/> 

                            <button class="btn btn-primary" 
                            onClick={() => {
                                InitializeGame();
                            }}>Let's Play</button>
                        </div>

                        {errorDisplay}

                    </div>

This is the part of the code that we're looking to change. It's located in \src\pages\GameCreation.js.

Bug where dealer hits until deck is empty

We encountered this strange bug, which seems to occur occasionally when the player stands at 16, where the dealer will hit until the deck is completely empty.

CardRender.js Card Asset Loading & Polished Card Title / Description field

Notice on the Left (In the Game Log) The player pulls:

10 of hearts & Ace of Clubs, but the Cards visually display as Ace of Hearts!

I need you to work on the CardRender.js to import all the card types, and based on the incoming props, serve the Correct Card along with an important description of the cards. (Example: For the hidden card, the naive parser I wrote outputs -1 | of, change this to like "Unknown Card")

CardRender.js Component Full Code

General Steps to follow for this

Step 1.

Find and Download all Card assets you can find, so in total we need 52 pictures, of each unique card as it's own image (png perferably)

I think this link has a zip of all of em https://acbl.mybigcommerce.com/52-playing-cards/

Please put these images in the Static sub-directory in the our frontend, make like a subdirectory within static like card_assets for ex.

Step 2. make sure that based on the incoming props of the CardRender component, the associated card img renders, and the description of the card is well formatted!

Dealer hit limit

The dealer is only allowed to hit if his cards total are less than 17. In other words, the dealer is not allowed to hit if his cards total 17+

Here the player is able to draw after the total cards are equal to 19. This shouldn't've be the case!

Ace value

A player should have the option to choose the value of the ace depending on his situation within the game:

If a player draws a 4 and an ace, he should pick whether if the ace counts as an 11 or as a 1. If the player counts it as an 11 then 4+11=15.
If the player decides to hit after his total cards are equal to 15, and he pulls an ace, the ace should automatically count as a 1 else the player busts.
Ex2. another example: lets say u pull your first card as ACE . u chose the value to be 11 now you pull an ace AGAIN as your second card. you cant choose it as 11 cuz 11+11=22 you will bust so you are forced to make it count as 11+1=12 then if u keep drawing aces they will always count as 1.

Active Game Logging | Formatting Algorithm Implementation

I've implemented the functional & rendering portion of the game log, but the actual strings that are generated as "logs" are still choppy

In src/util/browserUtil.js

BrowserUtil.js full source code

export function activeGameLoggingAlgorithm(state, hands) {

    let lg = [];

    for(const [idx,hand] of hands.entries()) {
        lg.push(
            <>
                {hand["holder"] ? "Dealer" : "Player"} drew a {hand["card_name"]} of {hand["symbol_name"]} | VALUE: {hand["card_value"]}
            </>
        );
    }

    return lg;
}

Here you can see I'm doing a very lazy format, I want you to go in and improve this algorithm, for the Parameter inputs, keep those the same, state refers to general game state, 0: player's turn, 1: dealer's turn, 1< someone won or lost...

and a sample of the hands object follows:

[
    {
      "card_id": 33,
      "shown": 1,
      "holder": 0,
      "symbol_type": 3,
      "symbol_name": "Spades",
      "card_type": 0,
      "card_value": 7,
      "card_name": ""
    },
    {
      "card_id": 9,
      "shown": 1,
      "holder": 0,
      "symbol_type": 0,
      "symbol_name": "Clubs",
      "card_type": 0,
      "card_value": 10,
      "card_name": ""
    },
    {
      "card_id": 29,
      "shown": 1,
      "holder": 1,
      "symbol_type": 3,
      "symbol_name": "Spades",
      "card_type": 0,
      "card_value": 3,
      "card_name": ""
    },
    {
      "card_id": -1,
      "shown": 0,
      "holder": 1,
      "symbol_type": -1,
      "symbol_name": "",
      "card_type": -1,
      "card_value": -1,
      "card_name": ""
    },
    {
      "card_id": 32,
      "shown": 1,
      "holder": 0,
      "symbol_type": 3,
      "symbol_name": "Spades",
      "card_type": 0,
      "card_value": 6,
      "card_name": ""
    }
  ]