Slither quest#23
Open
prabii wants to merge 18 commits into
Open
Conversation
Full Slither.io-style game with server-authoritative 25Hz game loop, React+Canvas client, Valkey leaderboard/pub-sub, and Breeth AI player memory. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- GameCanvas: WASD + arrow keys steer the snake (diagonals supported), 30Hz interval streams direction while keys held, mouse and keyboard coexist - HUD/JoinScreen: updated control hints to mention keyboard - server/index.js: retryStrategy stops after 3 attempts to silence repeated WRONGPASS log spam Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
End-to-end test covering: health endpoint, WebSocket join/snapshot, 3-player multiplayer, movement+boost, Valkey (PING, world, leaderboard, names, pub/sub), Breeth AI (episodes write, search recall, in-game greeting), and respawn flow. Run with: node server/flight-test.js Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Fills in all required sections: attendee details, problem statement, project description, approach, tech stack, key features, working status, challenges, learnings, and future improvements. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- server/index.js: ROOM_PASSWORD env var; validates password on join, returns error message on mismatch; serves client/dist as static files; health endpoint exposes passwordRequired flag - JoinScreen: fetches /api/health on mount to show password field only when server requires it; shows error banner on wrong password - App.jsx: passes password with join message; handles wrong_password error; auto-detects WS URL from window.location so one build works behind any tunnel (localtunnel, ngrok, etc.)
Author
|
done |
- server/room-manager.js: RoomManager class — isolated GameEngine per room, 4-char room codes, optional password, auto-cleanup 30s after last player - server/index.js: master tick loop across all rooms; create_room / join_room / check_room / check_name WS messages; SHA-256 PIN auth stored in Valkey game:users hash with in-memory fallback; Valkey keys namespaced per room - client/src/components/LobbyScreen.jsx: two-tab lobby — Create Room (name, PIN, optional room password, shows shareable code card) and Join Room (code auto-validates, shows password field only if room requires it) - client/src/App.jsx: lobby phase state machine; promise-based check_room; passes roomCode to HUD - client/src/components/HUD.jsx: room code badge top-left, click to copy
- Renamed SlitherQuest_prabii.md -> SlitherQuest_ICSCoreTeam.md - Updated team name to ICS Core Team - Updated GitHub project link to dedicated repo: prabii/slither-quest-game - Added multi-room and PIN login to feature list
- Animated neon block grid background with rising particles - Web Audio API sound FX (eat, kill, boost, death, achievements, join) - Lobby: 4-section nav (Play / Profile / Arena / Hall of Fame) - Player Profile: 7 stat cards + 5-achievement grid with shimmer unlock - Achievements: First Blood, Titanium Tail, Speed Demon, Cosmic Giant, Black Hole Eater - Player Arena: snake skin picker (8 colours) + avatar emoji picker + credential display - Hall of Fame: personal best hero card + stat grid; Weekly/Daily stubs - Open Room Browser: browse & click-to-join public rooms in Join tab - 5-minute round timer per room — broadcasts game_over with podium + leaderboard - GameOverScreen: trophy podium, full leaderboard, 10-sec countdown to auto-respawn - HUD: MM:SS round timer (turns red <30s), medal leaderboard, score/length pills - DeathScreen: SVG countdown ring, session kills + survival time chips - Achievement toast notifications with slide-in animation - Stats tracked per session and persisted to localStorage
…ewport rect, direction arrow - 140px → 180px with R=12 rounded corners (manual quadraticCurveTo for compatibility) - Cyan glowing border with shadowBlur - Subtle grid overlay and world-border red outline hint - Colored pellet dots matching hue from server data - Viewport rectangle shows visible area (cyan fill + stroke) - Own snake: white glow dot + cyan direction triangle - Player count badge and MAP label Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… UI polish AnimatedBg: 7 snakes chase 11 glowing prey dots on the lobby canvas. Snakes steer smoothly toward prey, eat them (burst → respawn), wander when no prey nearby. Prey glows with pulsing radial gradient. Keeps existing neon block grid + rising particles + vignette underneath. ArenaPanel: Added editable Name + PIN inputs with Save button. Writes to sq_last_name / sq_last_pin localStorage keys so they auto-fill in Create Room and Join Room tabs. Shows confirmation on save. LobbyScreen: Imported Space Grotesk font, pill-style nav with border glow on active, icon logo badge, section headers with icon cards, pill Create/Join subtabs, cleaner panel borders (cyan top accent). CreateTab + JoinTab: Both now read initial PIN from sq_last_pin so Arena-set credentials carry through automatically. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… HUD GameCanvas: - Boom/explosion on snake death: 36 particles + 2 expanding rings burst from the dead snake's last position (detects disappearance from snapshot) - 10 wandering rat/mouse creatures drawn with canvas (body, head, ear, eye, tail); they flee from snakes within 220px radius - Varied pellet types by id%5: glowing dot (3 types), 5-pt rotating star, fruit emoji (apple/orange/lemon/grape/strawberry/blueberry/peach/cherry) - Background: #080c18 with subtle center radial gradient for depth - Snake body gains highlight streak for 3D look - Head glow shadowBlur on render - Space Grotesk font on name labels HUD: - Space Grotesk font across all elements - Leaderboard: colored player dot matching snake color with glow - Leaderboard: cyan top border accent, better row highlight for own player - Timer: larger (24px), better glow on urgent - Score bar: larger pills with textShadow glow on values - Killfeed: subtle box-shadow Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… glass panels Design system: replaced cyan/purple palette with #00d4aa teal + #38bdf8 blue. T tokens (teal, tealDim, tealGlow, tealBorder, panel, input, glass, border, etc.) used consistently across all lobby components. Navbar: 56px height, logo badge (snake icon + gradient text), centered pill nav tabs (active = tealDim bg + teal border + glow), mute icon button. Panel: darker glass rgba(8,13,30,0.96) with teal top border accent and glow shadow. SectionHeader component with icon badge, title, subtitle. Play section: pulsing live-dot badge, pill CREATE/JOIN switcher with teal gradient fill on active, form fields with teal focus ring, primary button with teal gradient + glow. AnimatedBg: updated bg gradient to #0a1228 navy (more vivid than pure black). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…s bar) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…n canvas state Removed entire creature drawing system that corrupted canvas state (ctx.ellipse caused issues or save/restore imbalance). Fixed drawSnake to always draw head even when body is empty. Added explicit globalAlpha/shadowBlur/textBaseline resets after drawPellets. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Name + PIN entry gated behind an AuthScreen before the lobby loads. Returning users get 'login' mode, new users get 'register' mode. Credentials auto-fill into CreateRoom/JoinRoom after auth. Navbar shows active user badge with Switch User button. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Slither Quest — Multiplayer Snake Game -Track b -63
A real-time browser-based multiplayer snake game (Slither.io-style) built for the Build Beyond Limits 2.0 Hackathon, powered by Valkey and
Breeth AI.
What It Does
Players control a growing snake on a shared 4000×4000 world. Move your snake with the mouse or WASD/arrow keys, eat glowing pellets to grow
longer, and avoid crashing into other players. Hold click or space to boost — but boosting burns your length and drops pellets for others
to eat. The last snake standing wins.
Architecture
The game is server-authoritative — the browser never touches game logic. It only sends two things: direction and boost. The Node.js server
runs a 25 ticks/second game loop that owns every position, collision, and score. This prevents cheating and keeps all players perfectly in
sync.
Browser ──{ dir, boost }──► Node.js Game Loop (25 Hz)
◄──{ world snapshot }──
│
┌───────┴────────┐
Valkey (Aiven) Breeth AI
leaderboard player memory
pub/sub killfeed recall on join
world snapshot remember deaths
Valkey Integration
┌──────────────────┬─────────────────┬────────────────────────────────────┐
│ Key │ Type │ Purpose │
├──────────────────┼─────────────────┼────────────────────────────────────┤
│ game:leaderboard │ Sorted Set │ Top 10 scores, updated every 2 sec │
├──────────────────┼─────────────────┼────────────────────────────────────┤
│ game:names │ Hash │ Maps player IDs to names │
├──────────────────┼─────────────────┼────────────────────────────────────┤
│ game:world │ String (TTL 5s) │ Live world snapshot │
├──────────────────┼─────────────────┼────────────────────────────────────┤
│ game:events │ Pub/Sub │ Kill feed broadcast to all players │
└──────────────────┴─────────────────┴────────────────────────────────────┘
Valkey is not hit every tick — updates are batched every 2 seconds to keep latency low on the remote Aiven cloud instance.
Breeth AI Integration
Last time you were eaten by Alice."
Key Features
Tech Stack
┌─────────────┬─────────────────────────────────────────────────┐
│ │ │
├─────────────┼─────────────────────────────────────────────────┤
│ Frontend │ React 18, Vite, HTML5 Canvas (no game engine) │
├─────────────┼─────────────────────────────────────────────────┤
│ Backend │ Node.js, Express, ws WebSocket │
├─────────────┼─────────────────────────────────────────────────┤
│ State Store │ Valkey (Aiven cloud) via ioredis │
├─────────────┼─────────────────────────────────────────────────┤
│ AI Memory │ Breeth AI REST API │
├─────────────┼─────────────────────────────────────────────────┤
│ Hosting │ localtunnel / ngrok over Express static serving │
└─────────────┴─────────────────────────────────────────────────┘
Run It
Build client once
cd client && npm install && npm run build
Start server (serves game + API on :3001)
cd server && npm install && npm run dev
Share with the world
npx localtunnel --port 3001
Set ROOM_PASSWORD=yourpassword in server/.env to lock the room. Players see a password field automatically.