scoreboard

scoreboard and game lobby for tailuge/billiards running on vercel.com with nchan running on render.com.

This project is a work in progress experiment to get AI LLMs to code a complex task. About half the code is generated by combinations of github copilot, gpt, claude, cline, deepseek, gemini-code, opencode, antigravity and even webarena.

I have to intervene and untangle things now and then but these tools allowed me to get away with minimal understanding of react and nextjs. I am blown away with it all - could never have imagined this a couple of years ago. It is a thrill to witness these advances (being put use to nonsense).

multi lobby

usage

logs

scripts

dev

yarn dev
yarn build
yarn deps
yarn prettify

lint

yarn lint
yarn lint:smells

test

yarn test
yarn coverage
yarn e2e
yarn e2e:headed
yarn e2e:local

docker

yarn docker:build
yarn docker:push

Online Billiards Lobby System - Specification

Overview

A minimalist, login-free online billiards lobby system where players can:

• Find opponents for live games
• Spectate ongoing matches
• View game results
• Experience a lively, engaging lobby atmosphere

---

Features

1. Lobby Interface (UI/UX Analysis Required)

Status: Existing, needs analysis and improvement

• Current UI: [Brief description of existing UI elements and layout]
• Improvement Goals:
  • Minimalist design: clean lines, ample whitespace, intuitive navigation
  • Visual cues for active tables, spectator counts, and game results
  • Dynamic elements to create a "busy" atmosphere (e.g., real-time updates, animations)

2. Table Management

Status: Done

• Create a New Table: Players can create a new billiards table for a game.
• Join a Table: Players can join an open table to play against an opponent.
• Spectate a Table: Players can watch ongoing games as spectators.

3. Game Results Display

Status: To be implemented

• Requirements:
  • Display recent game results (winner, score, duration) in the lobby.
  • Minimalist design: subtle but visible, e.g., a sidebar or overlay.
  • Optional: Highlight notable wins or streaks to encourage engagement.

4. Lobby Atmosphere

Status: To be implemented

• Requirements:
  • Visual/sound cues to simulate a busy, social environment (e.g., ambient sounds, animated player avatars).
  • Real-time updates for table statuses (e.g., "Player X joined Table Y").
  • Optional: Chat or emote system for minimal social interaction.

5. Spectator Experience

Status: Done (basic functionality)

• Improvement Goals:
  • Enhance spectator UI: clear view of the table, player stats, and game progress.
  • Optional: Allow spectators to "cheer" or react minimally (e.g., emojis).

---

Technical Considerations

• No Login Required: Anonymous play with optional guest IDs for continuity.
• Real-Time Updates: Use WebSockets or similar for live table statuses and game results.
• Scalability: Ensure the system can handle multiple concurrent games and spectators.

---

UI/UX Analysis Tasks

1. Audit Existing UI:
   • Identify clutter, confusing elements, or missing visual cues.
   • Test usability for creating/joining tables and spectating.
2. Propose Improvements:
   • Wireframes or mockups for a minimalist redesign.
   • Focus on clarity, accessibility, and the "busy lobby" feel.
3. Prototype and Test:
   • Iterate based on user feedback for intuitiveness and engagement.

---

Roadmap

Feature	Status	Priority
Table Management	Done	High
Game Results Display	To Implement	High
Lobby Atmosphere	To Implement	Medium
UI/UX Analysis	Ongoing	High
Spectator Enhancements	To Improve	Low

---

Open Questions

1. Should game results persist after a session, or only show recent games?
2. What minimal social features (e.g., chat, emotes) would enhance the lobby without clutter?
3. Are there specific visual themes or animations preferred for the "busy" atmosphere?

---

Minimal Effort Vercel Solution

Tech Stack:

1. Next.js App Router (you're already using)
2. Vercel KV (Redis) - Free tier available
3. HTTP-only cookies - No JWT complexity needed

Approach: Simple Session Flow

1. Cookie-Based Sessions (No JWT)

· Set anonymous session ID in HTTP-only cookie · Store session data in Vercel KV (Redis) · Sessions persist for 30 days · No token encoding/decoding needed

2. Database Schema Ready for Migration

Resources table:
- id
- data
- session_id (for anonymous users)
- user_id (null initially, populated after registration)
- created_at

3. Migration Path

4. Now: All resources linked to session_id

5. Later: User registers with email

6. Migration: Transfer session_id → user_id records

7. Auth: Use NextAuth.js or similar (add later)

Why This is Minimal Effort:

1. No JWT setup - Just cookies + KV
2. Vercel-native - Uses their Redis service
3. Zero auth code now - Add authentication later
4. Automatic migration - Schema already supports both
5. Edge compatible - Works with Vercel Edge Runtime

Implementation Steps:

1. Enable Vercel KV in dashboard
2. Create 3 API routes: session, resources, register
3. Use cookies middleware for session handling
4. Store everything with session_id
5. Add auth later with NextAuth.js

This gives you security, scalability, and easy future migration with almost no upfront auth work.