Poker Chip Simulator

What it does

Poker Chips Simulator is a web app that simulates the betting of poker chips. It is best used with friends in a real-life setting with a deck of cards. The web app is NOT the full implementation of poker; it only simulates the chips.

Website:

To access our final project, Poker Chips Simulator, please go to http://54.218.193.60:3000/. You must have an internet connection and JavaScript must be enabled.

Features:

You may choose to host or to join a poker table on the menu screen. If you choose to host a table, you will be prompted to input game settings. Some defaults are set for you, but you are free to change them. Upon hitting the “CREATE” button you will be sent to a waiting screen that will have a join code to share with your friends. This join code may be entered under the “JOIN TABLE” page seen on the menu screen.

Upon hitting the “START GAME” button on the waiting screen you will be sent to your game table. This is where you will see the numerical value of your chips, your friends’ chips, and the pot. You are now ready to play poker.

Important Notes:

Usernames must be at least one character long.
The valid Number of Players for a table is constrained to 3, 4, and 5.
The Starting Amount and Big Blind must be positive integers.
The Big Blind’s name for the round is Gold while the Small Blind’s name is Blue.
Some large tablets will cause the table to improperly display. Please tilt your device horizontally or use a different device for the best experience. It will be easy to tell if the table is displayed incorrectly.

How we built it

Front-End Development (Winston Bullen):

We opted to use a web app because it is accessible on almost every device and requires minimal overhead to deploy. Basic HTML and CSS was used to implement the front end web app, along with a little JavaScript/jQuery to streamline the user experience. Each .html file was handwritten starting from a (very) basic personal template for responsive web pages. The style.css file was handwritten as well as part of style2.css, which is a free-to-use template stylesheet from my personal collection. Bootstrap was also used for styling responsively.

The main HTML file, index.html, was styled using style.css, style2.css, and Bootstrap. The small parts of JavaScript/jQuery used exclusively for the front-end are embedded in the HTML code. Graphics were curated with Windows Photos and BeFunky Photo Editing. The total front end development process took approximately 25 hours.

Game Logic Development (Nile Camai):

We modeled our application's game logic based on the rules for Texas Hold'em, the most popular version of poker in America.

A "game" of Texas Hold'em consists of an indefinite number of "hands", and each hand consists of four "rounds": the pre-flop, the flop, the turn, and the river. Each round of play continues until all players have "called" (matched the current wager) or "folded" (forfeited their hand). The current wager is increased whenever a player plays "raise" (to bet an amount). If a player folds, they are skipped for the rest of the hand. Additionally, in the first round (the pre-flop), the player immediately after the "dealer" is the designated "small blind" and is forced to play half the ante and the player immediately after the "small blind" is the designated "big blind" and is forced to play the full ante.

When the "hand" is over, the "dealer" rotates and the players are able to designate the winner of the round, awarding that player the previous hand's pot.

In order to progress through this game logic, the server implements indefinite looping by storing the game's state and checking the state to determine whether or not to progress the next round or hand. Indices for the dealer, the last person who raised, and the current turn are stored. By using these indices, we are able to preserve the round and hand states as we progress through their subtasks: progressing through each player's turns and progressing through each round, respectively.

AWS Hosting, Room Development (Kelvin Ng):

We used Amazon's Elastic Compute Cloud (AWS EC2) to host our website. My AWS account has an instance with the IP address http://34.221.107.58/ that continuously runs our node.js javascript on port 3000. Thus, anytime a user connects to http://34.221.107.58:3000/, they are able to access our web application.

The rooms were made using javascript's socket.io library. A user creates a socket whenever they make a connection to the port that serves as the user's identifier. When they use the onsite's host buttons, they can create a room that generates a randomized 4 digit code that other users may enter using the onsite's join buttons. When a user hosts or joins a room, they are added to a socket group so that events pertaining to their poker game may be specifically sent to them.

What did we learn during this project?

Using personal templates/tools are helpful for getting started on a project, especially when doing front-end.
Regularly meeting with the development team is crucial for a constructive environment.
Communicating roles/responsibilities is half the battle.
How to use Amazon EC2
How to use Linux
How to use Socket.io
Using features packaged with code editors such as Eclipse and VSCode to make development easier.

What did we enjoy during this project?

Working on a deployed web app with collaborative friends.
Fully scaling a dynamic web app using some of Edge’s development tools.
Planning the structure of the app and achieving development goals.
Bringing together several layers of the software development stack.

What did we find challenging or frustrating during this project?

Finding appropriate meeting times.
Testing the web app was difficult before we started using built-in browser development tools for scaling.
Resolving merge conflicts using git and command-line interface.
Designing turn-based (sequential) game logic in a way that can be played with input/output listeners.
Understanding the project outline and grading. The spec was a bit vague.

What did you find particularly helpful for your learning during this project?

Prior experience in web development through independent study and/or dubhacks.
Accessible TAs via Zoom and Email.
Online resources such as Stack Overflow, Socket.IO documentation, App/Play Stores, and Reddit.