lila-games/tic-tac-toe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI updated

Browse Source
This commit is contained in:
Vishesh 'ironeagle' Bangotra
2025-11-28 20:09:15 +05:30
parent f1f40f5799
commit 840d7701ca
1 changed files with 160 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
README.md
View File

@@ -12,28 +12,31 @@
## **1. Objective**
Design and implement a lightweight, scalable, server-authoritative multiplayer game system using **Nakama + Go plugins**, supporting authentication, matchmaking, authoritative gameplay, and leaderboards — deployable to Google Cloud for demonstration.
Design and implement a lightweight, scalable, server-authoritative multiplayer game system using **Nakama + Go plugins
**, supporting authentication, matchmaking, authoritative gameplay, leaderboards, and a functional UI — deployable to
Google Cloud for demonstration.
---
## **2. Current Completion Summary**
| Requirement | Status |
| -------------------------------------------- | --------------------------------- |
| Install Nakama + PostgreSQL | ✅ Completed |
| Custom Go server plugins | ✅ Completed |
| Server-authoritative Tic-Tac-Toe | ✅ Completed |
| Real-time WebSocket communication | ✅ Completed |
| Device-based authentication | ✅ Completed |
| JWT-based session management | ✅ Completed |
| Match creation & joining | ✅ Completed |
| **Matchmaking queue support** | 🟡 **In Progress** (Go side done) |
| **Game state validation & turn enforcement** | ✅ Completed (Go authoritative) |
| **Leaderboard/tracking foundation** | 🟡 **In Progress** (Go side done) |
| UI Game Client | 🟡 Not Started |
| Google Cloud deployment | 🟡 Not Started |
| Requirement | Status |
|----------------------------------------------|--------------------------|
| Install Nakama + PostgreSQL | ✅ Completed |
| Custom Go server plugins | ✅ Completed |
| Server-authoritative Tic-Tac-Toe | ✅ Completed |
| Real-time WebSocket communication | ✅ Completed |
| Device-based authentication | ✅ Completed |
| JWT-based session management | ✅ Completed |
| Match creation & joining | ✅ Completed |
| **Matchmaking queue support** | ✅ Completed |
| **Game state validation & turn enforcement** | ✅ Completed |
| **Leaderboard system** | ✅ Completed |
| **UI Game Client** | 🟡 Partially Implemented |
| Google Cloud deployment | 🟡 Not Started |
✅ **Major backend upgrade delivered — authoritative matchmaking and leaderboard logic implemented in Go**
✅ **Backend is fully authoritative and complete**
🟡 **UI functional but missing polish, UX, and failure handling**
---
@@ -41,175 +44,188 @@ Design and implement a lightweight, scalable, server-authoritative multiplayer g
* **Backend Framework:** Nakama 3.x
* **Business Logic:** Custom Go runtime module
* **Frontend:** React + Vite + Nakama JS
* **Database:** PostgreSQL 14
* **Transport:** WebSockets (real-time)
* **Authentication:** Device-ID based auth → JWT session returned
* **State Management:** Server-authoritative, deterministic
* **Protocol:** Nakama RT JSON envelopes
* **State Management:** Fully server-authoritative
* **Build & Deployment:** Docker-based
---
## **4. Authentication**
Implemented **Nakama device authentication flow**:
### Backend
1. Client provides device UUID
2. Nakama validates & creates account if needed
3. Server responds with **JWT session token**
4. Client uses JWT for all WebSocket connections
* Device authentication, auto-account creation
* JWT returned and used for RT connections
### UI
* Generates a device UUID and authenticates via `client.authenticateDevice()`
* Stores and manages session state in React context
---
## **5. Game Server Logic (Go)**
The authoritative match module was enhanced significantly:
Significant enhancements made:
### **New Features Added:**
### **✔ Initial State Broadcast**
#### **✔ Initial State Broadcast on Match Join**
* When the second player joins, the server immediately sends the full authoritative state.
The server now broadcasts the **initial game state immediately when both players join**, eliminating race conditions.
### **✔ Complete Turn + Move Validation**
#### **✔ Forfeit Handling**
Rejects:
If a player disconnects or leaves:
* out-of-bounds moves
* occupied cells
* wrong player's turn
* invalid payloads
* Match is marked as `forfeit`
* Final state broadcast to the remaining player
### **✔ Forfeit Handling**
#### **✔ Stronger Validation & Logging**
* When a user disconnects or leaves, match ends in `forfeit`
* Final state broadcast to remaining player
New server-side checks include:
### **✔ Authoritative State Updates**
* Turn validation
* Out-of-bounds move rejection
* Occupied cell rejection
* Player not part of the match
* Invalid payloads
* Only broadcasts when state actually changes
* Robust structured logging
All validations produce detailed log output for troubleshooting.
### **Result:**
The entire gameplay lifecycle is now **fully enforced and validated server-side**, eliminating all trust on the client.
Result:
**Absolute server authority, zero trust in client.**
---
## **6. Real-Time Networking**
Clients communicate via:
Communication validated end-to-end:
* `match_create`
* `match_join`
* `match_data_send` (OpCode 1) → moves
* Server broadcast state (OpCode 2)
* `matchmaker_add` / `matchmaker_matched`
* `match_data_send` for moves (OpCode 1)
* Server broadcasts state (OpCode 2)
Validated with Python WebSocket simulation:
Python simulators and UI both confirm:
* Move sequencing
* State broadcast
* Disconnect handling
* Multi-game scenarios
* move ordering
* correct enforcement of turn rules
* correct state sync
* stable WebSocket behavior
---
## **7. Matchmaking (Go Plugin) — NEW**
## **7. Matchmaking System (Go + UI)**
Matchmaking is now **implemented in Go** via Nakama's `MatchmakerMatched` hook.
### **Backend (Go)**
### **✔ Mode-Validated Matchmaking**
* Implements `MatchmakerMatched` hook
* Ensures both players:
The server ensures:
* have valid `mode`
* match modes
* exactly two players
* Creates authoritative matches server-side
* RPC `leave_matchmaking` added
* Exactly two players
* Both provided a valid game mode (`classic` or `blitz`)
* Modes match before pairing
### **UI**
### **✔ Server-Created Matches**
* Integrates matchmaking: mode selection → queue → ticket → matched → auto-join
* Uses Nakama JS `socket.addMatchmaker()`
If valid, the Go module creates authoritative matches:
```go
nk.MatchCreate(ctx, "tictactoe", matchParams)
```
### **✔ RPC for Leaving Matchmaking**
A new RPC `leave_matchmaking`:
* Validates JSON
* Logs removal
**Client UX improvements and queue removal logic are planned.**
**Status:** Fully functional end-to-end
---
## **8. Leaderboard System (Go) — NEW**
## **8. Leaderboard System (Go + UI)**
Leaderboard integration is now implemented server-side.
### **Backend (Go)**
### **✔ Auto Leaderboard Creation (On Module Init)**
* Leaderboard auto-created on startup
* On win:
```go
nk.LeaderboardCreate("tictactoe", true, "desc", "incr", "", metadata)
```
* winner identified
* username resolved
* score incremented (+1 win)
* metadata logged
### **✔ Automatic Win Tracking**
### **UI**
On game conclusion:
* Implements leaderboard view using `client.listLeaderboardRecords()`
* Read-only UI display works
1. Winner is determined from the board
2. Username resolved via `AccountGetId`
3. Score +1 written to the leaderboard
4. Metadata `{result: "win"}` stored
### **Remaining**
This enables:
* Win counts
* Ranking
* Long-term player results
* UI sorting, layout, styling
* No leaderboard write actions needed from UI
---
## **9. Testing & Validation**
## **9. UI Implementation Status (React + Vite)**
The Go-side implementation now supports extended scenario testing including:
### **What Is Implemented**
* Happy path games
* Win/draw scenarios
* Illegal moves
* Mid-game disconnects
* Forfeits
* Random playthroughs
- ✔ Authentication flow (device auth)
- ✔ WebSocket session handling
- ✔ Matchmaking (classic/blitz modes)
- ✔ Automatic match join
- ✔ Move sending (OpCode 1)
- ✔ State updates (OpCode 2)
- ✔ Board rendering and interactive cells
- ✔ End-of-game messaging
- ✔ Leaderboard display
Stress testing with matchmaking simulation is available.
### **Partially Implemented**
- 🟡 Match mode UI selection wired but not visually emphasized
- 🟡 Context handles all RT states but missing error handling
### **Not Implemented / Missing**
- 🔴 Reconnect flow (UI does not recover session after WS drop)
- 🔴 No error UI for: matchmaking failure, move rejection, disconnects
- 🔴 No UI for leaving match or returning to lobby
- 🔴 No rematch button / flow
- 🔴 No transitions, animations, or mobile layout
- 🔴 No global app shell (Routing, Home Screen, etc.)
**Summary:** UI is *functional* and capable of playing full authoritative games, but lacks UX polish and failure
handling.
---
## **10. UI Status**
## **10. Testing & Validation**
Not implemented yet — intentionally deferred.
### Backend
Planned:
* Extensive scenario tests: draws, wins, illegal moves, disconnects
* Matchmaking simulation across N clients
* Simple browser/mobile client
* WebSocket integration
* Game board rendering
* Leaderboard display
### UI
Estimated time: **6–10 hours**
* Verified:
* matchmaking
* game correctness
* leaderboard retrieval
* state sync
* Missing:
* stress testing
* reconnection scenarios
* mobile layout testing
---
## **11. Google Cloud Deployment**
Goal: **Simple, affordable, demo-ready deployment**
### Planned architecture:
Planned architecture remains:
| Component | GCP Service |
| ------------- | ----------------------------- |
|---------------|-------------------------------|
| Nakama server | Compute Engine VM (Docker) |
| PostgreSQL | Cloud SQL (shared tier) |
| Game UI | Cloud Run or Firebase Hosting |
@@ -222,33 +238,50 @@ Estimated setup time: **6–8 hours**
## **12. Risks & Considerations**
| Risk | Mitigation |
| ------------------------------- | -------------------------------- |
| No UI yet | Prioritized next |
| Stress testing incomplete | Will be run after UI integration |
| Final matchmaking polish needed | Go foundation already complete |
| Leaderboard client UI pending | Backend implementation complete |
| Risk | Mitigation |
|--------------------------------|--------------------------------|
| UI lacks error/reconnect logic | Add retry + reconnection flows |
| No rematch or lobby UX | Add match lifecycle UI |
| No mobile layout | Add responsive CSS |
| Cloud deployment pending | Prioritize after UI polish |
| Matchmaking UX is minimal | Add feedback, loading states |
No major backend risks remain.
None of these affect core backend stability.
---
## **13. Next Steps**
1. Implement browser/mobile UI
2. Integrate matchmaking & leaderboard endpoints into UI
3. Perform stress + edge case testing
4. Deploy to Google Cloud
5. Prepare demo video + documentation
### **UI Tasks**
Estimated remaining effort: **1.5–2.5 days**
1. Add reconnect + error-handling UI
2. Create lobby → gameplay → results, flow
3. Add rematch capability
4. Add responsive + polished UI
5. Add loading indicators & animations
Estimated remaining effort: **6 to 8 hours**
---
## **Executive Summary**
The backend has undergone a major upgrade: matchmaking logic and leaderboard management are now fully implemented in Go, making the server authoritative across the entire gameplay lifecycle.
### Issues faced
Several unexpected integration challenges during UI setup contributed to the additional day of work. These included:
- Aligning the UI’s matchmaking flow with the new authoritative Go-based matchmaking logic.
- Handling Nakama JS WebSocket behaviors, especially around session timing, matchmaker ticket handling, and match join events.
- Ensuring OpCode handling and server-produced state updates matched the server’s authoritative model.
- Resolving environment-related issues (Vite dev server, Node version mismatches, and WebSocket URL configuration).
- Debugging cross-origin and connection-reset issues during early WebSocket initialization.
All core systems — authentication, state management, gameplay logic, and matchmaking — are now functional and validated. Only UI and deployment tasks remain, both low-risk and well-scoped.
These challenges required deeper synchronization between the backend and frontend layers, resulting in an additional **+1 day** of engineering time.
**The system is production-grade on the backend and ready for frontend integration and final deployment.**
### Project Progress
The system now features a fully authoritative backend with matchmaking, gameplay logic, and leaderboards implemented
completely in Go. The UI is functional and integrates correctly with all backend systems, supporting end-to-end
matchmaking and gameplay.
Key remaining work involves UI polish, recovery/error handling, and deployment setup. No major architectural risks
remain.
**The project is now fully playable, technically solid, and ready for final UI enhancements and cloud deployment.**