Devlog #2

TL;DR

Friends can now be invited directly from a room. A toast notification allows accepting or declining the invite. A new admin page was added to manage users, including role changes and banning. Spielo is now publicly available on GitHub, and a demo version is online.

Direct Friend Invites

I implemented a feature that allows inviting friends directly from within a room.

For this, I created a new socket event invite_friend, which is emitted by the client when a button is pressed. The button only appears if the friend is online and the user is currently in a room, since the friend overlay can be accessed both from the lobby and from within a room.

On the server side, several validations are performed:

• rate limiting (3 invites per 5 seconds)
• user must be online
• user must not already be in the same room

If all conditions are met, the invite is sent via the friend_invite event. The sender also receives a confirmation that the invitation was successfully delivered.

The receiving user sees a toast notification (inviteToastContainer) that stays visible for 15 seconds. They can either accept or decline the invite. Accepting the invite automatically moves them into the room, while declining simply closes the notification.

This significantly improves usability, as users no longer need to manually share room codes.

Admin Page

I created a new admin page to manage all registered users.

The admin section is placed in a separate admin folder with its own index.html, keeping it isolated from the main client. This improves the overall project structure and separation of concerns.

In userService.js, I added three asynchronous functions:

• updateUser(userId, newRole, isBanned)
• getAllUsers()
• getBannedStatus(userId)

The admin page includes a simple authentication check using a JWT token and user ID stored in localStorage. The server verifies whether the user has the admin role before returning sensitive data.

The client renders a table sorted by created_at. It displays:

• user_id
• username
• role
• is_banned

Additionally, two actions are available:

• toggle role between user and admin
• ban users by setting is_banned

A protection mechanism was added to prevent users from modifying their own account (e.g., self-demotion or self-ban).

Ban Check

To make is_banned effective, a ban check was added during login. Users with a banned account are now prevented from logging in.

Additionally, if a user is already authenticated (valid token stored in localStorage), the server rejects the token if the account has been banned.

However, automatic logout for already active sessions still needs to be implemented.

Documentation, GitHub & Demo Website

The remaining time was spent improving documentation. The README was rewritten (a preview GIF is still missing), and the repository was made public.

A separate demo environment was also created to avoid exposing my private one for testing purposes.

Devlog #1

Overview

Spielo is a web-based multiplayer gaming platform focused on real-time browser games, starting with an UNO-styled card game. The goal of the project is to create a smooth, fast and social multiplayer experience where players can join games instantly, interact with others and track their progress over time.

The system includes a custom backend with real-time socket communication, a database for persistent data such as user accounts and match history and a responsive frontend. In the future, Spielo is intended to grow beyond a single game into multiple games with even more features.

Initial development period

This initial development period phase focused on building the core foundation of the platform and turning an early prototype into a functional multiplayer system with user accounts, stable gameplay and basic social features.

Core Game and multiplayer system

The first major step was implementing the UNO-style game mechanics and establishing a working real-time multiplayer system. This included room management, turn handling and basic game flow logic.

The socket-based architecture was refined to ensure stable synchronization between players and proper handling of edge cases such as disconnects and reconnects. Game state management was also improved to prevent inconsistent behavior during active matches.

Authentication and user system

An user system was introduced with authentication and authorization for both registered and guest users. Input validation and error handling were improved to make login and registration more stable and secure.

User profiles were added, allowing players to manage and display their identity within Spielo. This also laid the foundation for persistent user-related features.

Match tracking

A match history system was implemented and connected to the database. This allows completed games to be stored and later used for statistics or profile-related features.

Friends and social features

A friends system was added, enabling users to search for others, send and manage friend requests and maintain a list of connected players. This required both backend services and frontend UI components, as well as database integration for persistent relationships.

Additionally, profile updates are now propagated so that friends automatically see updated user information in real time.

Gameplay improvements and edge cases

Several improvements were made to refine gameplay behavior and fix edge case:

• improved handling of UNO calls and challenges, including timing validation
• fixed incorrect win handling in single-player edge cases
• added better control for wild card color selection, including the ability to cancel a selection
• improved game flow logic and turn handling

User experience and interface improvements

The frontend was significantly refined to improve usability across devices:

• responsive design improvements for mobile and large screens
• collapsible chat interface for better space usage
• improved scrolling behavior on mobile devices
• cleaner status messaging using temporary popup notifications instead of persistent headers
• improved animations for winner display and game events
• better handling of forms and inputs (e.g. Enter-to-submit support)

Bug fixes and stability improvements

Multiple bugs were fixed to improve stability and consistency:

• logout behavior corrected
• guest user restrictions enforced properly
• display name inconsistencies resolved
• UI spacing and layout issues fixed
• error handling improved in authentication and game systems

Summary

In this initial development phase, Spielo evolved from a basic multiplayer prototype into a structured and feature-complete foundation. The project now includes a working real-time game engine, persistent user system, match tracking and early social features, along with a significantly improved user interface and stability layer.