Skip to content

Slither quest#23

Open
prabii wants to merge 18 commits into
reacthyderabad:mainfrom
prabii:slither-quest
Open

Slither quest#23
prabii wants to merge 18 commits into
reacthyderabad:mainfrom
prabii:slither-quest

Conversation

@prabii

@prabii prabii commented Jun 21, 2026

Copy link
Copy Markdown

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

  • On join → searches player history (POST /v1/search) → shows a personalised greeting banner: "Run Submission: Sigrun AI Support Assistant - Gen Alfha #4 for Prabhas! Your best was length 67.
    Last time you were eaten by Alice."
  • On death → stores the run as a memory episode (POST /v1/episodes): "Player Prabhas reached length 45 and was killed by Bob."
  • Full in-memory fallback if no API key — game always works

Key Features

  1. Real-time multiplayer — WebSocket broadcasts to all players every 40ms
  2. Valkey leaderboard + killfeed — live top-10, death events via pub/sub
  3. Breeth AI memory — personalized cross-session player history
  4. WASD + arrow keys + mouse — full keyboard steering with diagonals
  5. Boost mechanic — burns length, drops pellets, creates strategy
  6. Room password — private rooms, shared via a single URL
  7. One-URL hosting — Express serves the built client, tunnel with localtunnel/ngrok
  8. Mini-map — always-visible world overview
  9. 30/30 flight-test suite — automated end-to-end verification

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.

prabii and others added 7 commits June 21, 2026 12:12
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.)
@prabii

prabii commented Jun 21, 2026

Copy link
Copy Markdown
Author

done

prabii added 2 commits June 21, 2026 13:18
- 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

@prabii prabii left a comment

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

prabii and others added 9 commits June 21, 2026 13:30
- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant