Uno Card Game banner

Uno Card Game

7 devlogs
13h 6m 35s

A simple online UNO card game built with web technologies.
2-4 Players join via a room code and play in real time.
Clean UI, fast gameplay, and minimal setup for playing.

This project uses AI

NOT VIBECODED!
I used AI for debugging issues that I simply couldn’t reliably recreate/couldn’t find in the logic

Demo Repository

Loading README...

Saif

CHANGES

  • Game results show at the end of the game!
  • Fixed some player card issues, the client would recieve the full deck of all players
  • Fixed some action card bugs

Goals for next devlog

  • Fix card-back to show uno logo (not blank)
  • Find some music to play
  • Fix some animation bugs and transitions (add card animation)
Attachment
0
Saif

CHANGES

  • Home screen has been fixed: there was some animation glitches
  • Join game button works: used to just rejoin into 1 room no matter what
  • Can’t change name in-game now
  • The colours would not updated for actions cards: fixed!
  • Made README a bit more detailed to explain where some of the logic lies

Goals for next devlog

  • Create the design for the back of the uno-cards
  • Fix some inconsistencies in the sizing and placement of things
  • Add an actual win/lost modal showing game results
Attachment
Attachment
0
Saif

Fixed up the home page to use nice cards instead of just text
Added a settings option to control sound volume (no music yet!) AND display name
Room creators have a crown icon and can:

  • kick players
  • start game
  • leave and the admin gets passed to someone else

Updates the game UI to look nicer, added draw and discard piles and an indicator for what colour (will move the indicator though) Added a turn indicator

Ran into a lotta issues with draw rules and turn flow, and it broke like 4 times before I could progress

I’ll focus on refining some logic since sometimes it breaks, move around some things and maybe add a “results” div at the end of the game (haven’t figured out spectating options yet)

Later I plan to let you start a new game after one is done, and add some animations since it’s still kinda snappy

Attachment
Attachment
Attachment
Attachment
Attachment
0
Saif

I was in the mindset of “making a website” and not “making a game”, and I ended up with a navbar lol. I removed it and added an animating UNO logo = MUCH BETTER.
I decided to remove the quick-play for now since I need to core game first, and I managed to setup the rooms system and joining/reconnecting. The UI shows the players discconected or when you reconnect and the room code aswell.
I also decided to setup a “Smoke Test”, since that would be very helpful and 10x faster than doing it manually.

Next I’m going to setup the game UI for real gameplay. Then after add some SVGs for the cards, they all look pretty bad.

Attachment
Attachment
Attachment
1

Comments

developergirishgiri

nice plz give me vote also and follow me

Saif

I’ve worked on the backend for room creation/joining/leaving. Redirects to the game.html page with a URL param: “?code=”. So far the UI doesn’t update but I have html templates for the players list.
I’m going to add options to kick players or lock rooms so no one else can join. The options should only be visible to room creators though. I’ve also started to make SVGs for the UNO cards since changing colours and then just overlaying a value like “8” or “+4”.

Next I plan to connect the UI of the game-page, with the actual state instead of just logging to the terminal. After I’ll focus on verifying info with the server for player decks, and game state.

I’m kinda avoiding the card-fanning issue for now, but I promise I’ll fix it
:)

Attachment
Attachment
Attachment
Attachment
Attachment
0
Saif

Added some play buttons to the main page, and gave them a nice transition. The card fans are still broken but I’ll probably make anchor points or find a solution with CSS. I created the UI for the lobby list and create lobby. I also changed the font to Poppins which I got from Google Fonts. I

Next I’m going to connect the buttons with the UI elements, and work on server-side to create “rooms” and validation code.

Attachment
Attachment
Attachment
Attachment
Attachment
1

Comments

D-Pod
D-Pod 4 months ago

I can see the potential here… great project!

Saif

I created the entire repo structure, I worked on VERY basic WebSocket connection. So far it just logs a message saying “Client Connected/Disconnected”.
I started with the “game” page, I have the player deck and the opponent decks.
I’m having issues with the “card-fans” for the opponents they are not lined up properly and I need to add the “value” on the corner instead of only center.
I added some basic animation and a table wood texture I found (ignore the orange div).

Next I’m going to make a proper lobby area and try to fix that issue with the cards.

Attachment
Attachment
Attachment
Attachment
0