"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Shared primitives */ /* -------------------------------------------------------------------------- */ const THEME_TOKENS = [ "background", "foreground", "primary", "primary-foreground", "secondary", "accent", "muted", "muted-foreground", "border", "ring", "destructive", ] as const; type ThemeTokens = Record<(typeof THEME_TOKENS)[number], string>; function readTheme(el: HTMLElement | null): ThemeTokens { const target = el ?? (typeof document !== "undefined" ? document.documentElement : null); const cs = target ? getComputedStyle(target) : null; const out = {} as ThemeTokens; for (const t of THEME_TOKENS) out[t] = cs ? cs.getPropertyValue(`--${t}`).trim() : ""; return out; } function useGameTheme(ref: React.RefObject): ThemeTokens { const [theme, setTheme] = React.useState(() => readTheme(null)); React.useEffect(() => { const read = () => setTheme(readTheme(ref.current)); read(); const mo = new MutationObserver(read); mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style", "data-theme"], }); return () => mo.disconnect(); }, [ref]); return theme; } function usePrefersReducedMotion(): boolean { const [reduce, setReduce] = React.useState(false); React.useEffect(() => { const mq = window.matchMedia("(prefers-reduced-motion: reduce)"); setReduce(mq.matches); const onChange = (e: MediaQueryListEvent) => setReduce(e.matches); mq.addEventListener("change", onChange); return () => mq.removeEventListener("change", onChange); }, []); return reduce; } /* -------------------------------------------------------------------------- */ /* Game constants */ /* -------------------------------------------------------------------------- */ // Logical drawing space — all physics/layout/drawing happen in this coordinate // system; the canvas is scaled to fit its container while preserving aspect. const LOGW = 360; const LOGH = 240; const PADDLE_W = 8; const PADDLE_H = 50; const PADDLE_RADIUS = 4; const BALL_SIZE = 10; const BALL_RADIUS = 5; const PADDLE_MARGIN = 14; const MAX_SCORE = 7; // Ball speed in px/s at normal motion const BALL_SPEED_NORMAL = 220; const BALL_SPEED_REDUCED = 80; const CPU_SPEED_NORMAL = 170; // px/s const CPU_SPEED_REDUCED = 60; /* -------------------------------------------------------------------------- */ /* Game state (refs) */ /* -------------------------------------------------------------------------- */ interface BallState { x: number; y: number; vx: number; vy: number; } interface GameState { playerY: number; cpuY: number; ball: BallState; playerScore: number; cpuScore: number; pointFlash: number; // timestamp of last point, for flash pointWinner: "player" | "cpu" | null; } function initBall(towardPlayer: boolean, speed: number): BallState { const angle = (Math.random() * 0.6 - 0.3); // -0.3 to 0.3 radians const vx = towardPlayer ? -speed * Math.cos(angle) : speed * Math.cos(angle); const vy = speed * Math.sin(angle); return { x: LOGW / 2, y: LOGH / 2, vx, vy }; } function initGameState(speed: number): GameState { return { playerY: LOGH / 2 - PADDLE_H / 2, cpuY: LOGH / 2 - PADDLE_H / 2, ball: initBall(Math.random() > 0.5, speed), playerScore: 0, cpuScore: 0, pointFlash: 0, pointWinner: null, }; } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ export interface PongProps { className?: string; width?: number; height?: number; paused?: boolean; autoFocus?: boolean; /** * When true (the default), the game listens for keys on `window` so it works * without being focused first — ideal for single-game pages (404s, loading / * empty states). Set false when multiple games share a page, or the game sits * in scrollable content, so it only responds while focused. Ignores keys aimed * at form fields. */ captureGlobalKeys?: boolean; persistHighScore?: boolean | string; onScoreChange?: (score: number) => void; onGameOver?: (r: { score: number; won: boolean }) => void; onStart?: () => void; } export function Pong({ className, width, paused = false, autoFocus = true, captureGlobalKeys = true, persistHighScore: _persistHighScore, onScoreChange, onGameOver, onStart, }: PongProps) { const wrapperRef = React.useRef(null); const playfieldRef = React.useRef(null); const canvasRef = React.useRef(null); const theme = useGameTheme(wrapperRef as React.RefObject); const reduce = usePrefersReducedMotion(); const [status, setStatus] = React.useState<"idle" | "playing" | "gameover">("idle"); const [playerScore, setPlayerScore] = React.useState(0); const [cpuScore, setCpuScore] = React.useState(0); const [winner, setWinner] = React.useState<"player" | "cpu" | null>(null); const [offscreen, setOffscreen] = React.useState(false); // Mutable refs the rAF loop reads without re-subscribing const statusRef = React.useRef(status); const pausedRef = React.useRef(paused); const offscreenRef = React.useRef(offscreen); const themeRef = React.useRef(theme); const reduceRef = React.useRef(reduce); const gameStateRef = React.useRef(null); // Track pointer drag y for player paddle const pointerYRef = React.useRef(null); // Track pressed keys const keysRef = React.useRef>(new Set()); statusRef.current = status; pausedRef.current = paused; offscreenRef.current = offscreen; themeRef.current = theme; reduceRef.current = reduce; // Announce score changes const [announcement, setAnnouncement] = React.useState(""); // Pause when scrolled offscreen or tab hidden React.useEffect(() => { const el = wrapperRef.current; if (!el) return; const io = new IntersectionObserver(([e]) => { if (e) setOffscreen(!e.isIntersecting); }); io.observe(el); const onVis = () => setOffscreen(document.hidden); document.addEventListener("visibilitychange", onVis); return () => { io.disconnect(); document.removeEventListener("visibilitychange", onVis); }; }, []); const start = React.useCallback(() => { const speed = reduceRef.current ? BALL_SPEED_REDUCED : BALL_SPEED_NORMAL; gameStateRef.current = initGameState(speed); setPlayerScore(0); setCpuScore(0); setWinner(null); setStatus("playing"); setAnnouncement("Game started"); onStart?.(); onScoreChange?.(0); // Focus the wrapper so keyboard controls work after the Start button unmounts. wrapperRef.current?.focus(); }, [onScoreChange, onStart]); // Responsive canvas sizing: match the playfield's rendered CSS size × DPR, // then scale the transform so all drawing happens in LOGW×LOGH logical space. React.useEffect(() => { const canvas = canvasRef.current; const field = playfieldRef.current; if (!canvas || !field) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const resize = () => { const rect = field.getBoundingClientRect(); const w = Math.max(1, Math.round(rect.width)); const h = Math.max(1, Math.round(rect.height)); const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = w * dpr; canvas.height = h * dpr; const scale = w / LOGW; ctx.setTransform(scale * dpr, 0, 0, scale * dpr, 0, 0); }; resize(); const ro = new ResizeObserver(resize); ro.observe(field); return () => ro.disconnect(); }, []); // Drawing + main loop React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; const drawRoundRect = ( x: number, y: number, w: number, h: number, r: number, fill: string, ) => { ctx.fillStyle = fill; ctx.beginPath(); ctx.roundRect(x, y, w, h, r); ctx.fill(); }; const draw = (gs: GameState | null) => { const t = themeRef.current; // Clear (transform already maps logical space onto the device canvas) ctx.clearRect(0, 0, LOGW, LOGH); // Background ctx.fillStyle = t.background || "#000"; ctx.fillRect(0, 0, LOGW, LOGH); // Border ctx.strokeStyle = t.border || "rgba(255,255,255,0.2)"; ctx.lineWidth = 1; ctx.strokeRect(0.5, 0.5, LOGW - 1, LOGH - 1); // Dashed center line const now = performance.now(); const flashActive = gs && (now - gs.pointFlash) < 400; const midLineColor = flashActive ? t.primary || "#ff0" : t["muted-foreground"] || "rgba(255,255,255,0.15)"; ctx.strokeStyle = midLineColor; ctx.lineWidth = 1; ctx.setLineDash([6, 6]); ctx.beginPath(); ctx.moveTo(LOGW / 2, 4); ctx.lineTo(LOGW / 2, LOGH - 4); ctx.stroke(); ctx.setLineDash([]); if (!gs) return; // Player paddle (left) — primary drawRoundRect( PADDLE_MARGIN, gs.playerY, PADDLE_W, PADDLE_H, PADDLE_RADIUS, t.primary || "#fff", ); // CPU paddle (right) — muted-foreground (visible on both light/dark, distinct from the primary player) drawRoundRect( LOGW - PADDLE_MARGIN - PADDLE_W, gs.cpuY, PADDLE_W, PADDLE_H, PADDLE_RADIUS, t["muted-foreground"] || "#888", ); // Ball — primary (rounded square) drawRoundRect( gs.ball.x - BALL_SIZE / 2, gs.ball.y - BALL_SIZE / 2, BALL_SIZE, BALL_SIZE, BALL_RADIUS, t.primary || "#fff", ); }; let raf = 0; let last = 0; const frame = (now: number) => { raf = requestAnimationFrame(frame); if (last === 0) last = now; const dt = Math.min((now - last) / 1000, 0.05); // seconds, capped last = now; const active = statusRef.current === "playing" && !pausedRef.current && !offscreenRef.current; const gs = gameStateRef.current; if (active && gs) { const speed = reduceRef.current ? BALL_SPEED_REDUCED : BALL_SPEED_NORMAL; const cpuSpeed = reduceRef.current ? CPU_SPEED_REDUCED : CPU_SPEED_NORMAL; // Player paddle movement via keys const keys = keysRef.current; const paddleSpeed = cpuSpeed * 1.3; // player paddle speed if (keys.has("ArrowUp") || keys.has("w") || keys.has("W")) { gs.playerY = Math.max(0, gs.playerY - paddleSpeed * dt); } if (keys.has("ArrowDown") || keys.has("s") || keys.has("S")) { gs.playerY = Math.min(LOGH - PADDLE_H, gs.playerY + paddleSpeed * dt); } // Player paddle movement via pointer const ptrY = pointerYRef.current; if (ptrY !== null) { const targetY = ptrY - PADDLE_H / 2; const clamped = Math.max(0, Math.min(LOGH - PADDLE_H, targetY)); // Snap to pointer position (within capped speed) const diff = clamped - gs.playerY; const maxMove = paddleSpeed * dt; if (Math.abs(diff) <= maxMove) { gs.playerY = clamped; } else { gs.playerY += Math.sign(diff) * maxMove; } } // CPU paddle AI — track ball with capped speed const cpuCenter = gs.cpuY + PADDLE_H / 2; const diff = gs.ball.y - cpuCenter; const maxMove = cpuSpeed * dt; if (Math.abs(diff) > 2) { gs.cpuY += Math.sign(diff) * Math.min(Math.abs(diff), maxMove); gs.cpuY = Math.max(0, Math.min(LOGH - PADDLE_H, gs.cpuY)); } // Move ball gs.ball.x += gs.ball.vx * dt; gs.ball.y += gs.ball.vy * dt; // Wall bounce (top/bottom) if (gs.ball.y - BALL_SIZE / 2 < 0) { gs.ball.y = BALL_SIZE / 2; gs.ball.vy = Math.abs(gs.ball.vy); } if (gs.ball.y + BALL_SIZE / 2 > LOGH) { gs.ball.y = LOGH - BALL_SIZE / 2; gs.ball.vy = -Math.abs(gs.ball.vy); } // Player paddle collision (left) const playerLeft = PADDLE_MARGIN; const playerRight = PADDLE_MARGIN + PADDLE_W; if ( gs.ball.vx < 0 && gs.ball.x - BALL_SIZE / 2 <= playerRight && gs.ball.x + BALL_SIZE / 2 >= playerLeft && gs.ball.y + BALL_SIZE / 2 >= gs.playerY && gs.ball.y - BALL_SIZE / 2 <= gs.playerY + PADDLE_H ) { gs.ball.x = playerRight + BALL_SIZE / 2; // Angle based on hit position (-1 to 1 relative to paddle center) const hitPos = (gs.ball.y - (gs.playerY + PADDLE_H / 2)) / (PADDLE_H / 2); const angle = hitPos * (Math.PI / 4); // max 45 degrees const currentSpeed = Math.hypot(gs.ball.vx, gs.ball.vy); const newSpeed = Math.max(currentSpeed, speed); gs.ball.vx = newSpeed * Math.cos(angle); gs.ball.vy = newSpeed * Math.sin(angle); } // CPU paddle collision (right) const cpuLeft = LOGW - PADDLE_MARGIN - PADDLE_W; const cpuRight = LOGW - PADDLE_MARGIN; if ( gs.ball.vx > 0 && gs.ball.x + BALL_SIZE / 2 >= cpuLeft && gs.ball.x - BALL_SIZE / 2 <= cpuRight && gs.ball.y + BALL_SIZE / 2 >= gs.cpuY && gs.ball.y - BALL_SIZE / 2 <= gs.cpuY + PADDLE_H ) { gs.ball.x = cpuLeft - BALL_SIZE / 2; const hitPos = (gs.ball.y - (gs.cpuY + PADDLE_H / 2)) / (PADDLE_H / 2); const angle = hitPos * (Math.PI / 4); const currentSpeed = Math.hypot(gs.ball.vx, gs.ball.vy); const newSpeed = Math.max(currentSpeed, speed); gs.ball.vx = -(newSpeed * Math.cos(angle)); gs.ball.vy = newSpeed * Math.sin(angle); } // Score check let scored = false; if (gs.ball.x < 0) { // CPU scores gs.cpuScore += 1; gs.pointFlash = performance.now(); gs.pointWinner = "cpu"; scored = true; const newCpuScore = gs.cpuScore; const newPlayerScore = gs.playerScore; setCpuScore(newCpuScore); onScoreChange?.(newPlayerScore); setAnnouncement(`CPU scores. Player ${newPlayerScore}, CPU ${newCpuScore}`); if (gs.cpuScore >= MAX_SCORE) { setStatus("gameover"); setWinner("cpu"); setAnnouncement("Game over. CPU wins!"); onGameOver?.({ score: gs.playerScore, won: false }); gameStateRef.current = gs; } else { gs.ball = initBall(true, speed); // serve toward player (they lost) } } else if (gs.ball.x > LOGW) { // Player scores gs.playerScore += 1; gs.pointFlash = performance.now(); gs.pointWinner = "player"; scored = true; const newPlayerScore = gs.playerScore; const newCpuScore = gs.cpuScore; setPlayerScore(newPlayerScore); onScoreChange?.(newPlayerScore); setAnnouncement(`Player scores. Player ${newPlayerScore}, CPU ${newCpuScore}`); if (gs.playerScore >= MAX_SCORE) { setStatus("gameover"); setWinner("player"); setAnnouncement("Game over. You win!"); onGameOver?.({ score: gs.playerScore, won: true }); gameStateRef.current = gs; } else { gs.ball = initBall(false, speed); // serve toward CPU (they lost) } } if (scored) { // Reset paddle positions gently gs.playerY = LOGH / 2 - PADDLE_H / 2; gs.cpuY = LOGH / 2 - PADDLE_H / 2; } } else if (!active) { // Nothing } draw(gameStateRef.current); }; raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [onGameOver, onScoreChange]); // Keyboard React.useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { // In global mode, ignore keys aimed at form fields / editable content. const t = e.target as HTMLElement | null; if (t && (t.isContentEditable || /^(input|textarea|select)$/i.test(t.tagName))) return; const gameKeys = new Set(["ArrowUp", "ArrowDown", "w", "s", "W", "S"]); if (gameKeys.has(e.key)) { e.preventDefault(); keysRef.current.add(e.key); if (statusRef.current !== "playing") start(); } else if (e.key === " " || e.key === "Enter") { e.preventDefault(); if (statusRef.current !== "playing") start(); } }; const onKeyUp = (e: KeyboardEvent) => { keysRef.current.delete(e.key); }; // Single-game pages can opt into window-level capture so keys work without // focusing the game; otherwise listen on the wrapper (focus-scoped). const target: Window | HTMLElement | null = captureGlobalKeys ? window : wrapperRef.current; target?.addEventListener("keydown", onKeyDown as EventListener); target?.addEventListener("keyup", onKeyUp as EventListener); return () => { target?.removeEventListener("keydown", onKeyDown as EventListener); target?.removeEventListener("keyup", onKeyUp as EventListener); }; }, [start, captureGlobalKeys]); // Pointer / touch drag for player paddle React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const getRelativeY = (clientY: number) => { const rect = canvas.getBoundingClientRect(); return ((clientY - rect.top) / rect.height) * LOGH; }; const onPointerDown = (e: PointerEvent) => { canvas.setPointerCapture(e.pointerId); pointerYRef.current = getRelativeY(e.clientY); if (statusRef.current !== "playing") start(); }; const onPointerMove = (e: PointerEvent) => { if (e.buttons === 0) return; pointerYRef.current = getRelativeY(e.clientY); }; const onPointerUp = () => { pointerYRef.current = null; }; canvas.addEventListener("pointerdown", onPointerDown); canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerup", onPointerUp); canvas.addEventListener("pointercancel", onPointerUp); return () => { canvas.removeEventListener("pointerdown", onPointerDown); canvas.removeEventListener("pointermove", onPointerMove); canvas.removeEventListener("pointerup", onPointerUp); canvas.removeEventListener("pointercancel", onPointerUp); }; }, [start]); React.useEffect(() => { if (autoFocus) wrapperRef.current?.focus(); }, [autoFocus]); return (

{/* Score bar */}

You {playerScore} First to {MAX_SCORE} CPU {cpuScore}

{/* aria-live region */}

{announcement}

); } export default Pong;