- {phase !== 'playing' && (
-
-
- Snake
-
-
-
-
-
-
- {T.description}
-
-
-
+
+ {(phase === 'menu' || phase === 'gameover') && (
+
)}
-
- {paused && phase === 'playing' && (
-
- Paused (P)
-
- )}
+
+
+ {phase === 'countdown' && (
+
+ )}
+ {paused && phase === 'playing' && (
+
+ Paused (P)
+
+ )}
+ {!alive && phase === 'gameover' && (
+
+ )}
+
-
+ {(phase === 'playing' || phase === 'countdown') && (
+
+ )}
-
- {(1000 / delayMs).toFixed(1)} moves/s · Arrows / WASD / Swipe · P pause
-
+ {(phase === 'playing' || phase === 'countdown') && (
+
+ {(1000 / delayMs).toFixed(1)} moves/s · Arrows / WASD / Swipe / Tap ·
+ P pause
+
+ )}
+
+
);
}
diff --git a/src/app/hooks/useGameScale.ts b/src/app/hooks/useGameScale.ts
new file mode 100644
index 0000000..dc03dbe
--- /dev/null
+++ b/src/app/hooks/useGameScale.ts
@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+
+export function useGameScale(gameWidth: number, gameHeight: number) {
+ const [scale, setScale] = useState(1);
+
+ useEffect(() => {
+ const update = () => {
+ const padding = 24;
+ const controlsHeight = 180;
+ const maxW = window.innerWidth - padding * 2;
+ const maxH = window.innerHeight - controlsHeight - padding * 2;
+ const scaleW = maxW / gameWidth;
+ const scaleH = maxH / gameHeight;
+ setScale(Math.min(1, scaleW, scaleH));
+ };
+
+ update();
+ window.addEventListener('resize', update);
+ return () => window.removeEventListener('resize', update);
+ }, [gameWidth, gameHeight]);
+
+ return scale;
+}
diff --git a/src/app/hooks/useGameSetup.ts b/src/app/hooks/useGameSetup.ts
new file mode 100644
index 0000000..1c165c1
--- /dev/null
+++ b/src/app/hooks/useGameSetup.ts
@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { DIFFICULTY_PRESETS, type GameDifficulty } from '@/constants/game';
+
+export type Phase = 'menu' | 'countdown' | 'playing' | 'gameover';
+
+export function useGameSetup(opts?: {
+ muted?: boolean;
+ initialDifficulty?: GameDifficulty;
+}) {
+ const muted = opts?.muted ?? false;
+ const [phase, setPhase] = useState
('menu');
+ const [difficulty, setDifficulty] = useState(
+ opts?.initialDifficulty ?? 'classic'
+ );
+ const [paused, setPaused] = useState(false);
+ const [bump, setBump] = useState(false);
+
+ const eatSnd = useMemo(() => new Audio('/sounds/food.mp3'), []);
+ const dieSnd = useMemo(() => new Audio('/sounds/gameover.mp3'), []);
+ const keySnd = useMemo(() => new Audio('/sounds/move.mp3'), []);
+
+ useEffect(() => {
+ eatSnd.volume = 0.7;
+ dieSnd.volume = 0.9;
+ keySnd.volume = 0.4;
+ }, [eatSnd, dieSnd, keySnd]);
+
+ const play = useCallback(
+ (a: HTMLAudioElement) => {
+ if (muted) return;
+ try {
+ a.currentTime = 0;
+ void a.play();
+ } catch (err) {
+ console.error('Audio play exception:', err);
+ }
+ },
+ [muted]
+ );
+
+ const playEat = useCallback(() => play(eatSnd), [play, eatSnd]);
+ const playDie = useCallback(() => play(dieSnd), [play, dieSnd]);
+ const playMove = useCallback(() => play(keySnd), [play, keySnd]);
+
+ const triggerBump = useCallback(() => {
+ setBump(true);
+ const id = setTimeout(() => setBump(false), 200);
+ return () => clearTimeout(id);
+ }, []);
+
+ return {
+ phase,
+ setPhase,
+ difficulty,
+ setDifficulty,
+ paused,
+ setPaused,
+ bump,
+ triggerBump,
+ tuning: DIFFICULTY_PRESETS[difficulty],
+ sounds: { playEat, playDie, playMove },
+ };
+}
diff --git a/src/app/hooks/useLeaderboard.ts b/src/app/hooks/useLeaderboard.ts
index 23ffe8a..f96082b 100644
--- a/src/app/hooks/useLeaderboard.ts
+++ b/src/app/hooks/useLeaderboard.ts
@@ -1,7 +1,9 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
import type { GameDifficulty } from '@/constants/game';
+import { submitScore as submitToSupabase } from '@/services/leaderboardService';
+import { isSupabaseConfigured } from '@/supabase/client';
-export type LeaderboardEntry = {
+export type LocalLeaderboardEntry = {
score: number;
difficulty: GameDifficulty;
date: number;
@@ -10,18 +12,18 @@ export type LeaderboardEntry = {
const STORAGE_KEY = 'snake-leaderboard';
const MAX_ENTRIES = 10;
-function loadLeaderboard(): LeaderboardEntry[] {
+function loadLocalLeaderboard(): LocalLeaderboardEntry[] {
try {
const raw = localStorage.getItem(STORAGE_KEY);
if (!raw) return [];
- const parsed = JSON.parse(raw) as LeaderboardEntry[];
+ const parsed = JSON.parse(raw) as LocalLeaderboardEntry[];
return Array.isArray(parsed) ? parsed : [];
} catch {
return [];
}
}
-function saveLeaderboard(entries: LeaderboardEntry[]) {
+function saveLocalLeaderboard(entries: LocalLeaderboardEntry[]) {
try {
localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
} catch {
@@ -30,21 +32,25 @@ function saveLeaderboard(entries: LeaderboardEntry[]) {
}
export function useLeaderboard() {
- const [entries, setEntries] = useState(loadLeaderboard);
+ const [localEntries, setLocalEntries] =
+ useState(loadLocalLeaderboard);
const submitScore = useCallback(
- (score: number, difficulty: GameDifficulty) => {
- const next: LeaderboardEntry[] = [
- ...entries,
+ (score: number, difficulty: GameDifficulty, playerName?: string) => {
+ if (isSupabaseConfigured()) {
+ void submitToSupabase(score, difficulty, playerName);
+ }
+ const next: LocalLeaderboardEntry[] = [
+ ...localEntries,
{ score, difficulty, date: Date.now() },
]
.sort((a, b) => b.score - a.score)
.slice(0, MAX_ENTRIES);
- setEntries(next);
- saveLeaderboard(next);
+ setLocalEntries(next);
+ saveLocalLeaderboard(next);
},
- [entries]
+ [localEntries]
);
- return { entries, submitScore };
+ return { localEntries, submitScore };
}
diff --git a/src/app/hooks/useSettings.ts b/src/app/hooks/useSettings.ts
new file mode 100644
index 0000000..ce9e98f
--- /dev/null
+++ b/src/app/hooks/useSettings.ts
@@ -0,0 +1,79 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { GameDifficulty } from '@/constants/game';
+
+const MUTE_KEY = 'snake-muted';
+const DIFFICULTY_KEY = 'snake-difficulty';
+const PLAYER_NAME_KEY = 'snake-player-name';
+
+function loadMuted(): boolean {
+ try {
+ return localStorage.getItem(MUTE_KEY) === 'true';
+ } catch {
+ return false;
+ }
+}
+
+function loadDifficulty(): GameDifficulty {
+ try {
+ const v = localStorage.getItem(DIFFICULTY_KEY);
+ if (
+ v === 'relaxed' ||
+ v === 'classic' ||
+ v === 'expert' ||
+ v === 'blitz' ||
+ v === 'endless'
+ )
+ return v;
+ } catch {
+ // ignore
+ }
+ return 'classic';
+}
+
+function loadPlayerName(): string {
+ try {
+ return localStorage.getItem(PLAYER_NAME_KEY) ?? '';
+ } catch {
+ return '';
+ }
+}
+
+export function useSettings() {
+ const [muted, setMutedState] = useState(loadMuted);
+ const [playerName, setPlayerNameState] = useState(loadPlayerName);
+
+ const setMuted = useCallback((v: boolean) => {
+ setMutedState(v);
+ try {
+ localStorage.setItem(MUTE_KEY, String(v));
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ const setPlayerName = useCallback((v: string) => {
+ setPlayerNameState(v);
+ try {
+ localStorage.setItem(PLAYER_NAME_KEY, v);
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ const persistDifficulty = useCallback((d: GameDifficulty) => {
+ try {
+ localStorage.setItem(DIFFICULTY_KEY, d);
+ } catch {
+ // ignore
+ }
+ }, []);
+
+ return {
+ muted,
+ setMuted,
+ playerName,
+ setPlayerName,
+ persistDifficulty,
+ initialDifficulty: loadDifficulty(),
+ };
+}
diff --git a/src/app/hooks/useSnake.ts b/src/app/hooks/useSnake.ts
deleted file mode 100644
index 704e1a1..0000000
--- a/src/app/hooks/useSnake.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { useState, useCallback } from 'react';
-import type { XY, Dir } from '@/types';
-
-export function useSnake(initial: XY[]) {
- const [snake, setSnake] = useState(initial);
- const [dir, setDir] = useState('right');
-
- const turn = useCallback((d: Dir) => setDir(d), []);
- const step = useCallback((nextHead: XY, grow = false) => {
- setSnake((s) => (grow ? [nextHead, ...s] : [nextHead, ...s.slice(0, -1)]));
- }, []);
-
- return { snake, dir, turn, step, setSnake, setDir };
-}
diff --git a/src/app/hooks/useSnakeGame.ts b/src/app/hooks/useSnakeGame.ts
index c30a488..b140d04 100644
--- a/src/app/hooks/useSnakeGame.ts
+++ b/src/app/hooks/useSnakeGame.ts
@@ -2,12 +2,16 @@ import { useCallback, useRef, useState } from 'react';
import type { XY, Dir, Food, FoodKind } from '@/types';
import {
eq,
- nextHead,
initSnake,
- wrapPoint,
randomFreeCell,
generateObstacles,
} from '@/utils/logic';
+import {
+ computeNextHead,
+ isOutOfBounds,
+ checkCollisions,
+ willEatFood,
+} from '@/utils/gameTick';
import { FOOD_EMOJIS, POWER_UP_CONFIG } from '@/constants/game';
export type GameConfig = {
@@ -36,6 +40,8 @@ export function useSnakeGame(
const snakeRef = useRef(initSnake(cols, rows));
const foodRef = useRef(null);
const obstaclesRef = useRef([]);
+ const freezeUntilRef = useRef(0);
+ const ghostUntilRef = useRef(0);
const [alive, setAlive] = useState(true);
const [score, setScore] = useState(0);
@@ -74,6 +80,8 @@ export function useSnakeGame(
nextDirRef.current = null;
obstaclesRef.current = generateObstacles(obstacleCount, cols, rows, snake);
foodRef.current = spawnFood(snake);
+ freezeUntilRef.current = 0;
+ ghostUntilRef.current = 0;
setAlive(true);
setScore(0);
}, [cols, rows, obstacleCount, spawnFood]);
@@ -83,6 +91,9 @@ export function useSnakeGame(
}, []);
const tick = useCallback(() => {
+ const now = Date.now();
+ if (now < freezeUntilRef.current) return;
+
if (nextDirRef.current) {
dirRef.current = nextDirRef.current;
nextDirRef.current = null;
@@ -92,38 +103,39 @@ export function useSnakeGame(
const head = snake[0];
if (!head) return;
- let nh = nextHead(head, dirRef.current);
+ const nh = computeNextHead(head, dirRef.current, cols, rows, wrap);
- if (wrap) {
- nh = wrapPoint(nh, cols, rows);
- } else {
- const oob = nh.x < 0 || nh.x >= cols || nh.y < 0 || nh.y >= rows;
- if (oob) {
- setAlive(false);
- opts?.onDie?.();
- return;
- }
+ if (!wrap && isOutOfBounds(nh, cols, rows)) {
+ setAlive(false);
+ opts?.onDie?.();
+ return;
}
const food = foodRef.current;
- const willEat = !!food && eq(nh, food);
- const bodyToCheck = willEat ? snake : snake.slice(0, -1);
-
- const hitBody = bodyToCheck.some((s) => eq(s, nh));
- const hitObstacle = obstaclesRef.current.some((o) => eq(o, nh));
-
- if (hitBody || hitObstacle) {
+ const eating = willEatFood(nh, food);
+ const bodyToCheck = eating ? snake : snake.slice(0, -1);
+ const ghostActive = now < ghostUntilRef.current;
+ const collision = checkCollisions(
+ nh,
+ bodyToCheck,
+ obstaclesRef.current,
+ ghostActive
+ );
+
+ if (collision !== 'none') {
setAlive(false);
opts?.onDie?.();
return;
}
- if (willEat) {
+ if (eating && food) {
snake.unshift(nh);
const value = food.value ?? 1;
setScore((s) => s + value);
foodRef.current = spawnFood(snake);
opts?.onEat?.(value, food.kind);
+ if (food.kind === 'freeze') freezeUntilRef.current = now + 2500;
+ if (food.kind === 'ghost') ghostUntilRef.current = now + 4000;
} else {
snake.unshift(nh);
snake.pop();
diff --git a/src/app/services/leaderboardService.ts b/src/app/services/leaderboardService.ts
new file mode 100644
index 0000000..6acae9a
--- /dev/null
+++ b/src/app/services/leaderboardService.ts
@@ -0,0 +1,52 @@
+import { supabase, isSupabaseConfigured } from '@/supabase/client';
+import type { GameDifficulty } from '@/constants/game';
+
+export type LeaderboardScore = {
+ rank: number;
+ score: number;
+ difficulty: GameDifficulty;
+ playerName: string | null;
+ createdAt: string;
+};
+
+/** Fetch global leaderboard for a difficulty. */
+export async function fetchLeaderboard(
+ difficulty: GameDifficulty,
+ limit = 10
+): Promise {
+ if (!isSupabaseConfigured() || !supabase) return [];
+
+ const { data, error } = await supabase
+ .from('snake_scores')
+ .select('score, player_name, created_at')
+ .eq('difficulty', difficulty)
+ .order('score', { ascending: false })
+ .limit(limit);
+
+ if (error) return [];
+
+ return (data ?? []).map((row, i) => ({
+ rank: i + 1,
+ score: row.score,
+ difficulty,
+ playerName: row.player_name ?? 'Anonymous',
+ createdAt: row.created_at,
+ }));
+}
+
+/** Submit a score to the global leaderboard. */
+export async function submitScore(
+ score: number,
+ difficulty: GameDifficulty,
+ playerName?: string
+): Promise {
+ if (!isSupabaseConfigured() || !supabase) return false;
+
+ const { error } = await supabase.from('snake_scores').insert({
+ score,
+ difficulty,
+ player_name: playerName?.trim() || null,
+ });
+
+ return !error;
+}
diff --git a/src/app/styles/App.css b/src/app/styles/App.css
index ad17777..a065869 100644
--- a/src/app/styles/App.css
+++ b/src/app/styles/App.css
@@ -26,12 +26,18 @@
}
/* ——— Optional extras ——— */
-/* Slight body padding + dark background (helps with layout) */
body {
@apply bg-black font-mono text-white;
+ -webkit-tap-highlight-color: transparent;
+ touch-action: manipulation;
}
-/* Center canvas nicely when needed */
canvas {
@apply mx-auto block rounded;
}
+
+/* Prevent pull-to-refresh and overscroll on mobile */
+html,
+body {
+ overscroll-behavior: none;
+}
diff --git a/src/app/supabase/client.ts b/src/app/supabase/client.ts
new file mode 100644
index 0000000..a7ef291
--- /dev/null
+++ b/src/app/supabase/client.ts
@@ -0,0 +1,13 @@
+import { createClient, type SupabaseClient } from '@supabase/supabase-js';
+
+const supabaseUrl = String(import.meta.env.VITE_SUPABASE_URL ?? '').trim();
+const supabaseAnonKey = String(
+ import.meta.env.VITE_SUPABASE_ANON_KEY ?? ''
+).trim();
+
+export const supabase: SupabaseClient | null =
+ supabaseUrl && supabaseAnonKey
+ ? createClient(supabaseUrl, supabaseAnonKey)
+ : null;
+
+export const isSupabaseConfigured = (): boolean => !!supabase;
diff --git a/src/app/utils/gameTick.ts b/src/app/utils/gameTick.ts
new file mode 100644
index 0000000..6ee8366
--- /dev/null
+++ b/src/app/utils/gameTick.ts
@@ -0,0 +1,35 @@
+import type { XY, Dir, Food } from '@/types';
+import { eq, nextHead, wrapPoint } from './logic';
+
+export function computeNextHead(
+ head: XY,
+ dir: Dir,
+ cols: number,
+ rows: number,
+ wrap: boolean
+): XY {
+ let nh = nextHead(head, dir);
+ if (wrap) nh = wrapPoint(nh, cols, rows);
+ return nh;
+}
+
+export function isOutOfBounds(p: XY, cols: number, rows: number): boolean {
+ return p.x < 0 || p.x >= cols || p.y < 0 || p.y >= rows;
+}
+
+export function checkCollisions(
+ nh: XY,
+ bodyToCheck: XY[],
+ obstacles: XY[],
+ ghostActive: boolean
+): 'body' | 'obstacle' | 'none' {
+ const hitBody = bodyToCheck.some((s) => eq(s, nh));
+ const hitObstacle = obstacles.some((o) => eq(o, nh));
+ if (hitBody && !ghostActive) return 'body';
+ if (hitObstacle) return 'obstacle';
+ return 'none';
+}
+
+export function willEatFood(nh: XY, food: Food | null): boolean {
+ return !!food && eq(nh, food);
+}
diff --git a/src/app/utils/speed.ts b/src/app/utils/speed.ts
new file mode 100644
index 0000000..0e7b6d1
--- /dev/null
+++ b/src/app/utils/speed.ts
@@ -0,0 +1,18 @@
+import type { GameDifficulty } from '@/constants/game';
+import { DIFFICULTY_PRESETS } from '@/constants/game';
+
+export function computeDelayMs(
+ difficulty: GameDifficulty,
+ score: number
+): number {
+ const T = DIFFICULTY_PRESETS[difficulty];
+ const linear = T.TICK_START_MS - score * T.TICK_STEP_MS;
+ const curve = T.speedCurve;
+ let delay = linear;
+ if (curve === 'ease-in') {
+ delay = T.TICK_START_MS - score * score * 0.08;
+ } else if (curve === 'ease-out') {
+ delay = T.TICK_START_MS - score * T.TICK_STEP_MS * 0.85;
+ }
+ return Math.max(T.TICK_MIN_MS, delay);
+}
diff --git a/supabase/migrations/001_snake_scores.sql b/supabase/migrations/001_snake_scores.sql
new file mode 100644
index 0000000..762f50f
--- /dev/null
+++ b/supabase/migrations/001_snake_scores.sql
@@ -0,0 +1,23 @@
+-- Snake game leaderboard (anonymous, no auth required)
+CREATE TABLE IF NOT EXISTS snake_scores (
+ id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+ score INTEGER NOT NULL,
+ difficulty TEXT NOT NULL,
+ player_name TEXT,
+ created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX IF NOT EXISTS idx_snake_scores_difficulty_score
+ ON snake_scores(difficulty, score DESC);
+
+CREATE INDEX IF NOT EXISTS idx_snake_scores_created
+ ON snake_scores(created_at DESC);
+
+-- Allow anonymous inserts and reads (no RLS for simplicity, or enable RLS with permissive policies)
+ALTER TABLE snake_scores ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "Anyone can insert scores" ON snake_scores
+ FOR INSERT WITH CHECK (true);
+
+CREATE POLICY "Anyone can read scores" ON snake_scores
+ FOR SELECT USING (true);