# Final Project -- Texas Hold'em Chip Calculator ### Group Members: Ada Zhou, Aixue Zhang, Yajuan Wu, Yiran Wang --- ### **"Tired of machines dealing outrageous cards?"** ### Play with your friends **in person** and we prepare the **chips** for you ### Here's the path: [Texas Hold'em Chip Calculator](https://codepen.io/az2725/pen/jOpEMoj) 🥳 ![](https://i.imgur.com/r8i0BOh.png) ## Project Initial Thoughts: :::success - We understand people enjoy playing poker game with friends. However, online poker website or app sometimes delivers absurd hands (cards). And many people have complained about unfair online poker games. Therefore, we provide this website for people who want to deal cards in person but do not have actual chip sets at home. People can deal cards in person and use our website for tracking stack number. ::: ## Instructions on how this website works: :::success ### 1. Before Game Starts: - For now, this website allows 6 players maximum (wait for the next update). Players can take a seat between 1-6 wherever they want to sit. By clicking the seats, there will be a pop-up window to ask players enter their name and the initial stack number. ![](https://i.imgur.com/Vj3pRd6.png) - When people joined the table, the seat will show their name and initial chip number. ![](https://i.imgur.com/p5okpOo.png) - After everyone takes a seat, the host can click start button. Then, only seats are taken will be showing on the webpage. The button contains an event handler which triggers a Javascript function to disable the pop-up window for selecting seats. So, after the game starts, nothing will show up if players click the seats, they are not allowed to change their names and stack number. ![](https://i.imgur.com/JyTsivm.png) - The person who is sitting nearest to No.1 seat **counterclockwise** will be the **dealer** for the first game. And the person who is sitting nearest to No.1 seat **clockwise** will be the **small blind** and the next person will be the **big blind**. If there are less than three people, the first person will be the **big blind** and the next person will be the **dealer**. ![](https://i.imgur.com/JRBrt2I.png) ::: :::success ### 2. Game States: - The **start game** button also triggers the visibility of **Game State** and **buttons** that players can interact with during the game (more explanations can be found in step 3). At this time, the previous inserting name and initial stack window will be disabled. ![](https://i.imgur.com/xDtAiyg.png) - The Game State includes 5 different states: **Not started**: This only appears at the beginning of the first game. After everyone takes a seat, we hit the start game, and people distribute cards in person to player. Play then proceeds clockwise around the table. ![](https://i.imgur.com/G1DGZrw.png) **Pre-flop**: After the Dealer has passed out two cards to everyone, the player clockwise to the Blind has the option to **fold**, **call** or **raise** the previous bet. Player makes the first bet based on those two cards. ![](https://i.imgur.com/Yn6J1rV.png) ![](https://i.imgur.com/9h3Y2HU.jpg) **Flop**: At the start of the Flop round, the Dealer places three community cards upright in the middle of the table in person. Normal play then proceeds starting with the player clockwise from the Dealer. ![](https://i.imgur.com/0Tyqk2S.png) ![](https://i.imgur.com/Kog3HDy.jpg) **Turn**: At the start of the Turn Round, or Fourth Street, the Dealer places a fourth card in the community. ![](https://i.imgur.com/fKKPvxi.png) ![](https://i.imgur.com/gCa0yaa.jpg) **River**: At the start of the River Round, the Dealer places a fifth and final card in the community. ![](https://i.imgur.com/IKRvVbs.png) ![](https://i.imgur.com/FoTBAFw.jpg) **Wait for new game**: This is the time to declare a winner from the game. And the winner or winners would collect all of the chips in the pot. ![](https://i.imgur.com/4cmNkbc.png) ::: :::success ### 3. During Game: - **Detect Dealer** - Once the players have taken the seat, js will view the player with the lowest number of seat and visualize its dealer sign as visable, to indicate the chosen player as dealer.<br> - Then it will detect the nearest player to the dealer and highlight its border to red, mean while enable this player to bet, check or raise. - ![](https://i.imgur.com/JRBrt2I.png) - **Order of players taking action** - We set the order of players taking action by Javascript. Once the player has taken any actions (bet,check or fold), this program will disable this player and automatically turn to next player, empower the next one to take following action. - The order is from small seat number to big seat number; for example, if player seat-number 2 is taking action, the next player to take action will be player seat-number 3. If the current player is seat-number 6, the next player will be player seat-number 1. ![](https://i.imgur.com/hbYM6Fq.png) - **Calculation and Settlement** - Mentioned above, the enabled player can take action, and his/her action will be reflected in the chip pool at the center. After the first one taken action, next player can choose to **bet** (give certain money), **call** (give the same money as the prior player) or **fold**. At the same time Js calculator will calculate the sum of money and display it at the center part. - ![](https://i.imgur.com/GuLyJnL.png) - If it turns to one player who thinks the chips is not worth taking, he/she can **fold** the card and quit the game. Once the fold button is triggered, the player's border will be assigned black, indicating he is not available for the following turns. ![](https://i.imgur.com/eORc8sB.png) - **Check** function will only be activated if the previous player chooses to check. - The round will only end when each player has taken the same amount of money. As you can see below, although everyone has take one turn action, it is still the pre-flop round. This turn will only end when every available players have taken the same amount of chips. ![](https://i.imgur.com/qHAp9OM.png) :::