End game screen styling & README

• I added some styling for the end game screen
• Made an actual README
  This will be my last devlog before I ship the project!

Changelog

• updated README
• added styling for end game screen

UNO Call button

After placing a card, if there is only one card left in a players hand, they will need to press the ‘Call UNO’ button within 5 seconds, otherwise 2 cards will be dealt to them and an alert will be shown.

Changelog

• added UNO calling button

Draw Card Stacking

I implemented draw card stacking, which was a very requested feature. +4 and +2 cards add up, so the player without any draw cards must pick up the stack. The button on the UI shows how many cards that will be picked up! This change also means that the game no longer draws cards for you, which was the previous behaviour.

Changelog

• added card stacking
• added console logs

Styling for the game page

I made the game page look good! I also added some wild colour choice logic. I am pretty pleased with the results. The player that is playing gets highlighted yellow.

Changelog

• styling for game page with colour picking logic

Changes

• The HTML for each page is now seperate, rather than being in one big file. This makes managing stuff easier as you only see the code related to the page.
• Tidied up file structure, with better naming and separated some code out to a helper file.

This was kinda challenging because there were so many bugs with state management, re-connections, etc. as pages redirect to others based on authentication and game state.

Changelog

• separate HTML pages for each view and tidied up file structure

Better error handling

Lots of miscellaneous improvements and bug fixes, including:

• Improved UI adaptability to different screen sizes
• Improved error hanling, with red text that appears below a menu rather than an alert box
• More descriptive errors vs. “Invalid input”

Changelog

• better error handling

Lobby UI design

I dis some styling for the lobby page! It is also quite adaptable to the window size.

Changelog

• lobby styling

More UI design: landing page -> game working

ngl I kind of forgot to devlog before, I literally typed it out and everything, just didn’t press create so there is a lot of stuff I did

Changes

• I improved the style of the site, it now has a dark-purple theme!
• You can now join games from the landing page
• The flow from the landing page into the game is working now
• I have added some styling for the lobby header (still needs some work)

Todo

• Fix the SVG text not displaying properly if the font is not installed on the computer
• Add more styling to lobby and game

Commits

• landing page to game flow working and some lobby styling
• landing page UI flow complete
• UI for entering player name
• frontend design for joining game

Card Carousel on landing page

I made an infinite scrolling carousel for the landing page, it looks so cool! The cards are randomly generated on page load.

Changelog

• added card carousel
• styling for landing page

I added some CSS for the landing page! I think it looks decent, but I have some plans for the future to improve it, such as making it more adaptable to different window sizes.

Changes:

• imroved end game experience, the back to lobby button works properly even after refreshes.
• I fixed the update handling, I simplified it and fixed an annoying bug where the wrong page was being loaded after a refresh, turns out the page was being loaded before the reconenct success was recieved, then when it was recieved, it had changed and loaded wrong. Simple fix, but took ages as it wasn’t what I was expecting and was working when i had the debugger open (because it was a race condition bug)

Changelog

• improved end of game logic and event handling
• update event handling for card placement

I added the card assets to the game! It makes it feel like you are actually playing now.
Next I am going to update the client updating system, it is getting a bit messy. I have been working on it before this devlog but I think I need to go back to the drawing board a bit because it is not going great.
Anyway, I will continue to make UI improvements

I designed some UNO game cards for the website! This was my first time using Adobe Illustrator so there were some hiccups here and there. But I am very happy wit the result!

BIG updates:

• Added bots!! - you can add bots to your room when in the lobby.
• New game updating system - clients are sent specific updates for each event e.g. on card place, which will be very useful once I made the actual UI (I’ll stop procrastinating and learn CSS at some point lol)

The updating system took forever because I was battling with typescript to get it to be happy, eventually I gave in and used ‘any’ type for the data (i know not great) but this is my first TS project so I can forgive myself.

Updates:

• Added reconnection logic, which allows users to refresh pages and carry on where they left off
• Added game end handling (shown in video) that also can reset the game for a rematch
• Improved some server-side code, such as input validation.

I added the game engine functionality to the site! It is now playable, albeit with a very basic UI. In the next updates, I will imrprove the UI from just raw HTML

I made several backend improvements, such as proper auth with tokens that are mapped to the websocket ID. Clients store their token in localStorage.
I also implemented the ability to start the game, which triggers a different page.
Next: I will implement more game functionality, such as placing and drawing cards!

Changes:

• I added room joining functionality, player list is updated in real time
• Made improvements to the website by making it a single page application (SPA)
• Improved robustness with input verification
  Next steps will be to get the game running on the browser!

Updates:

• Improved game engine with support for getting a public state of the game
• Added room functionality, so multiple games can be going at the same time
• Implemented websockets and a web interface that lets you create a room (see video)

I created a basic UNO game engine:

• supports multiple players
• checks if a card is valid
• deck and discard piles
• deals 7 cards to each player
• supports card effects (draw, reverse, wild etc.)

First Devlog! To kick my project off, I made a function that generates a shuffled UNO deck.