Although I wanted to get this out a year ago, the other group project I wished to discuss from my Spring ‘22 semester was a result of CSE 312 Web Applications. While the one I talked about in this blog had a focus on front-end, this one focused on back-end. We covered topics in individual homework such as security, sending the different response codes based on if it was a valid link, and even some live chat.
Even the homework was enjoyable—and I would be the one to find and point out an interesting point that would go on to be something directly clarified by the instructor in later semesters. We were going over WebSocket features and handling messages of different sizes—those over 131000 bytes end up being sent over multiple frames in Chrome. This wasn’t recognized before this point as I was testing my implementation of things, and in the very least I know I managed to save someone’s time.
While we had these assignments to solve, partway through the semester we started on a group project. There were some requirements that we had to meet, such as using a Web Framework (we ended up utilizing Flask) so we would get practice writing up documentation of the use, having user accounts, users being able to see data for other users...But other than the few guidelines, we had a lot of open space to work with. So we decided to go above and beyond.
Even if it wasn’t a front-end focused class, we wanted it to look presentable. Something that could be enjoyed even out of class. We decided to take the lovely original Pong and add a twist to it. Pulsar’s Produce Pong is where you compete to make the best dishes, and you get achievements for the dishes you succeed in making as well.
I did art other than the ones made for the ingredients, implemented altering the profile picture and the relevant error handling, worked on the achievements display, and dedicated time to ensure a thorough run-through of how Flask worked: at what level it did what we had learned how to do in class.
The overall result can currently be found here . But if you would just like a walkthrough, here it is! Starting with the landing page.
If you hit “Play” from here, you are brought to
Whether you’re a new or returning user, you’re able to use the same form! It’ll let you know if a username is taken.
You’ll be greeted by a warm welcome message, and then it is up to you where you end up going! You can check out the team behind the site by going to Contact
Or you can check out your profile page—it will likely be pretty bare bones at first.
But if you want to try for a different random default picture, or even update one you have on hand yourself, you can do that any time when you have an account!
Say that you’re ready for the real action...Click on the logo in the top left corner, and you’re brought to the Chat. In this case, “new” has selected the user “hannabellz” to start chatting with the competition.
And hannabellz gets notified that they have a message!
When either one hits the “Play Pong” button, an invitation is sent out!
Both players are led to this screen.
And as soon as both press their readied up keys, the game begins! While the game is in motion, there will always be an ingredient at the top that is being vied for during the particular round.
While at the bottom of the screen, the ingredients that each player has is being kept track of.
As soon as BOTH players have ingredients to make at least one recipe, the game halts. The winner is declared based on the recipes made. If you could’ve made multiple, the best recipe is the one counted for you.
You see the final list of ingredients.
But at the top of it all...is where the Winner is declared.