# Project 1: Planning and Journal

## Day 1
1. The Day Plan
* Review key concepts (DOM manipulation, functions, objects, css grid and flexbox).
* Research potential tools (how to get the cards to appear on the page, how to store these images?, how to give them values).
* Outline and plan the steps I should take to complete MVP (at least the first few).
* Touch files and directories needed.
* MAIN GOAL: Get the face down card and one other card to appear on the screen (research methods to create and log values for a deck of cards).
* Update README.md with other stretch ideas (toggle gamemode for actual play) as well as sources used during research

2. Takeaways
* After researching how to create a deck of cards, it is a different approach than what I expected. I initially thought I would have to use images as backgrounds for divs but I found a great video of someone building a deck of cards (linked in sources)
* The great thing is that everything they used to build the deck are tools and methods I'm super familiar with already (OOP in JS, array iterators, CSS grid). This opened my eyes to different ways I can create cards in JS and CSS without actual images. Playing around with this for a while till ending up at something that makes sense to me.
* Ended up going with nested for in loops. This is the way I felt was simplest and made the most sense to me (instead of the flatmap used in the video)

## Day 2
1. The Day Plan
* Add css and html elements to create the spaces for the cards, action buttons, run button.
* Generate random cards in the card slots on each "new deal" button press.
* Obtain the value of the hands: dealer card value as well as player hand(both player card values added up).

2. Takeaways
* Pretty challenging day but feel as if I have gotten way better at debugging my own code when my code is returning unexpected values. Spent a good amount of time styling with grid and flexbox to make all my components. centered. Completed all of the above with a nuance in the last daily obj. Need to find a way how to store Ace values since they are considered "soft" values, a way to store pairs as a different value, and a way to check for blackjack off the rip.

## WEEKEND
1. Weekend Plan
* Write out a rule sheet. Update README.md with sources used.
* Main goal: plan how to change values for soft hand and pair hand values.
* Incorporate objects as basic strategy rules.

2. Takeaways
* Completed all objectives.
* Mainly trying to work through the logic of setting separate values for soft hands and pair hands. Gets tricky.
* Question: How do we store different vaues for soft hands (A X) and pairs?
* Aces can be their own thing, set it to a huge value (1111). This will make soft hands range in value from 1113(A2)-1120(A9)
* Pairs: check if two player cards are the same, if they are, set value to the two numbers concatenated, not added. For ex. if player has two 9s value would be 99 instead of 18.
** Done by parseInt('' + getValue(playerUpcard1) + getValue(playerUpcard2))

* INITIAL THOUGHT: Use checking conditional to see which rules to compare to.

        Checking conditional:
        "if (value === 1121) {player has a blackjack} 
        else if (value is less than 22 (22 being pocket 2s)) {player value = two card values added together (ex. KQ = 20)- compare with hard hand rules}
        else if (value is < 1010) {player has pair, compare with pair rules}
        else if (value is < 1121) {player has soft hand, compare with soft hand rules}
        else {player has pocket aces (value of 11111111) compare with pair rules}       
    * However, started to wonder if I can compare result with basic strategy rules without the checking conditional, since each value is different. Simply create one big basic strategy object. (went with this)
    * Ended up writing a conditional so that every click of new deal also console logs the correct move after comparing with the basic strategy object.


## Day 3
1. The Day Plan
    * A way to compare the user's button press with the correct move.
    * A way to hide cards until New Deal is pressed.
    * Rule sheet.
    * Analysis panel.
        
2. Takeaways 
    * Was able to get the comparison and analysis to show up on screen after player action. However, the bug I got stuck on for hours is that I could still press the other buttons after pressing the first action. Eventually realized I just defined my function in the wrong spot.
    * Made a function to create the button event listeners.
    * Researched into modals for my rules and basic strategy buttons.
    * Wasn't able to tackle 2nd objective and writing out rule sheet because of the bug.

## Day 4
1. The Day Plan
    * A way to hide cards until New Deal is pressed.
    * Rule Sheet
    * Adding statistics
    * CSS

2. Takeaways
    * Added modals for rule sheet and basic strategy chart. Basic strategy chart was tricky with the images.
    * Had a tricky bug with my statistics where it wasn't resetting properly. Main thing was trying to logic where in my code to increment totalhands an correcthands to keep track of correct/total.
    * Set cards to blank on page refresh.
    * Completed MVP and a couple stretch goals. Want to focus on making it look better though.


## Day 5
1. The Day Plan
    * Make it look nice! (maybe button hovering effects and different backgrounds)
    * Last bug. After hitting reset, if you spam click new deal and then one action, the stats show every hand that the action was correct out of the spammed hands. (we just want one/total)
        * maybe a true/false (like is running)

## Post-Course
Realized I have some scoping issues which caused the frustrating bug above. Seems like the version of myself that was just starting to learn how to code defined many of the variables within the newDeal eventListener and therefore couldn't access them outside of that scope. This makes it super difficult to solve this bug.

Solved by removing the event listeners on action buttons at the beginning of each newDeal click and then adding them later on based on my original conditions.