I created the Connect Four game for my web application project based on the multi-user interactive turn-based environment. It will indicate the login and registration page when a user visits the landed site. A user will be required to verify the account by clicking a link through the email that contains the activation token. Once a user login, there will be an available public chatroom to send messages to all online players.
The rule of this game is each player will drop in one checker piece at a time. The object of the game is to connect four of the player’s colored checker pieces, red or blue, in a row based on horizontally, vertically, or diagonally. By default, a proponent’s checker color will be red, and an opponent’s checker color will be blue. If a player is attempting to reload the page during the match game, then they will forfeit automatically. However, a player may make a request to start the game by clicking “start over” button.
This project is using Bolzen, which is a powerful PHP skeleton web framework that is built using Symfony components and Twig for the template engine.
- Bolzen link can be found at https://github.com/kemoycampbell/bolzen
A server-sent event is when a web page automatically gets updates from a server.
This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.
- Google Chrome (6.0)
- Firefox (6.0)
- Safari (5.0)
- Opera (11.5)
Note: Microsoft Edge is not supported by SSE.
Source: HTML5 Server-Sent Events - W3Schools
- Comes with a user registration and login forms.
- Comes with the public and private chat rooms and stores the messages into the database.
- Initialize the interactive board by using the combination of SVG and HTML.
- Insert and fetch the data from phpMyAdmin by using prepared statements with PHP PDO.
- Determine a player’s turn through the Ajax through jQuery that is used for interactive communication with a database.
- Using HTML5 Server-Sent Events to get updates from a server, such as notifying a player that it is their turn to make a move.
- Using Bolzen as a primary architecture for this project.
- Sanitize and validate the data on the server side.
- Built-in with the responsive design for desktop and mobile websites with the Bootstrap and Tailwind CSS framework.
- Using the reCAPTCHA widget to protect my site from spam and abuse without a user interaction in the activation page.
- Using CSRF token that is generated by the server-side application to prevent Cross-site Request Forgery (CSRF) attack.
On the left-side bar will list all online players based on the timestamp. The player’s last activity must be under 5 minutes. You may notice the player’s online status that turns into the away due to idle, which is normal.
In the desktop website, once you are on the lobby page and you will see the left-side on the bar that shows all available players as long as the player’s last activity is only under 5 minutes. For the mobile website, it’s similar to the desktop website. You will need to click the circle that shows the initial of opponent's first and last names and it will show up a dialog box/popup window to ask you if you want to send a requested challenge to that opponent with two options: Yes and no. Once you clicked “yes” button, it will proceed with the request; otherwise, it will be cancelled.
The simple rule of this process is first come, first served. You are expected to see a dialog box/pop window to view the request challenge from proponent. You will see accept and reject buttons inside of the dialog box window. It gives you two options to respond to the request.
Once the opponent has accepted your requested challenge. You and opponent will see a new dialog box/popup window with a button that is ready to begin the game. Once you and opponent click the button, and it will redirect to a different page that contains the board Connect Four and private chat room. A board has 42 spaces: 7 columns (vertical lines) and 6 rows (horizontal lines).
If you want to start over the game during the match, you may click the top center of the board Connect Four, “Start Over” button to send a request to an opponent. Once an opponent has approved your request, you and the opponent will see the dialog box/popup window that is ready to reload the page right after clicking the button. Keep in mind, if you reload the page during the match game, you will be forfeit automatically due to the cheating and the board will be clear as fresh automatically when the page is reloaded.