4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4f:T7221,"use client"; import * as React from "react"; import { cn } from "@/lib/utils"; /* -------------------------------------------------------------------------- */ /* Theme helpers */ /* -------------------------------------------------------------------------- */ const THEME_TOKENS = [ "background", "foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "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 (design) coordinate space. All drawing & physics happen in this space; // the canvas is scaled to its rendered CSS size via setTransform. const LOGW = 360; const LOGH = 300; const BRICK_COLS = 8; const BRICK_ROWS = 5; const BRICK_GAP = 4; const PADDLE_HEIGHT = 10; const PADDLE_WIDTH_RATIO = 0.22; // fraction of logical width const BALL_RADIUS = 7; const INITIAL_LIVES = 3; const POINTS_PER_BRICK = 10; const SPEED_GROWTH = 1.07; // per-level ball speed multiplier const MAX_SPEED_MULT = 2.2; // clamp on level-based speed growth /* -------------------------------------------------------------------------- */ /* Game state types */ /* -------------------------------------------------------------------------- */ interface Ball { x: number; y: number; vx: number; vy: number; } interface Paddle { x: number; // left edge width: number; } interface Brick { col: number; row: number; alive: boolean; } interface BreakoutState { ball: Ball; paddle: Paddle; bricks: Brick[]; lives: number; score: number; level: number; // 1-based; increments forever launched: boolean; // false = ball sitting on paddle, not yet launched } /* -------------------------------------------------------------------------- */ /* Engine factory */ /* -------------------------------------------------------------------------- */ function makeBricks(): Brick[] { const bricks: Brick[] = []; for (let r = 0; r < BRICK_ROWS; r++) { for (let c = 0; c < BRICK_COLS; c++) { bricks.push({ col: c, row: r, alive: true }); } } return bricks; } function initState(): BreakoutState { const paddleW = LOGW * PADDLE_WIDTH_RATIO; const paddle: Paddle = { x: (LOGW - paddleW) / 2, width: paddleW }; const ball: Ball = { x: LOGW / 2, y: LOGH - PADDLE_HEIGHT - 20 - BALL_RADIUS, vx: 0, vy: 0, }; return { ball, paddle, bricks: makeBricks(), lives: INITIAL_LIVES, score: 0, level: 1, launched: false, }; } /* -------------------------------------------------------------------------- */ /* Props */ /* -------------------------------------------------------------------------- */ export interface BreakoutProps { 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; } /* -------------------------------------------------------------------------- */ /* Component */ /* -------------------------------------------------------------------------- */ export function Breakout({ className, width, paused = false, autoFocus = true, captureGlobalKeys = true, persistHighScore = true, onScoreChange, onGameOver, onStart, }: BreakoutProps) { const wrapperRef = React.useRef(null); const playfieldRef = React.useRef(null); const canvasRef = React.useRef(null); const theme = useGameTheme(wrapperRef); const reduce = usePrefersReducedMotion(); const [status, setStatus] = React.useState<"idle" | "playing" | "gameover">("idle"); const [score, setScore] = React.useState(0); const [lives, setLives] = React.useState(INITIAL_LIVES); const [level, setLevel] = React.useState(1); const [high, setHigh] = React.useState(0); const [offscreen, setOffscreen] = React.useState(false); const storageKey = typeof persistHighScore === "string" ? persistHighScore : persistHighScore === false ? null : "gamekitui:breakout:hi"; // Mutable refs for the rAF loop — never cause re-renders. const stateRef = React.useRef(null); 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 onScoreChangeRef = React.useRef(onScoreChange); const onGameOverRef = React.useRef(onGameOver); const submitHighRef = React.useRef<(s: number) => void>(() => undefined); statusRef.current = status; pausedRef.current = paused; offscreenRef.current = offscreen; themeRef.current = theme; reduceRef.current = reduce; onScoreChangeRef.current = onScoreChange; onGameOverRef.current = onGameOver; // Load high score. React.useEffect(() => { if (!storageKey) return; try { const raw = window.localStorage.getItem(storageKey); if (raw) setHigh(Number(raw) || 0); } catch { /* ignore */ } }, [storageKey]); const submitHigh = React.useCallback( (s: number) => { setHigh((prev) => { if (s <= prev) return prev; if (storageKey) { try { window.localStorage.setItem(storageKey, String(s)); } catch { /* ignore */ } } return s; }); }, [storageKey], ); submitHighRef.current = submitHigh; // 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(() => { stateRef.current = initState(); setScore(0); setLives(INITIAL_LIVES); setLevel(1); setStatus("playing"); onStart?.(); onScoreChangeRef.current?.(0); // Focus the wrapper so keyboard controls work after the Start button unmounts. wrapperRef.current?.focus(); }, [onStart]); // Brick layout helpers (computed in logical space). const getBrickLayout = React.useCallback(() => { const topMargin = 30; const sideMargin = 8; const totalW = LOGW - sideMargin * 2; const brickW = (totalW - BRICK_GAP * (BRICK_COLS - 1)) / BRICK_COLS; const brickH = 14; return { topMargin, sideMargin, brickW, brickH }; }, []); // Responsive canvas sizing: match the playfield's rendered CSS size × DPR, // then scale the drawing context so all rendering happens in LOGW×LOGH 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, rect.width); const h = Math.max(1, rect.height); const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.round(w * dpr); canvas.height = Math.round(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(); }, []); // Main rAF loop + drawing. React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; // ------------------------------------------------------------------ // Draw helpers // ------------------------------------------------------------------ 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 = () => { const t = themeRef.current; const gs = stateRef.current; // Background. ctx.clearRect(0, 0, LOGW, LOGH); ctx.fillStyle = t.background || "#fff"; ctx.fillRect(0, 0, LOGW, LOGH); // Border line at top. ctx.fillStyle = t.border || "rgba(0,0,0,.15)"; ctx.fillRect(0, 0, LOGW, 2); if (!gs) return; const { topMargin, sideMargin, brickW, brickH } = getBrickLayout(); // Draw bricks. for (const brick of gs.bricks) { if (!brick.alive) continue; const bx = sideMargin + brick.col * (brickW + BRICK_GAP); const by = topMargin + brick.row * (brickH + BRICK_GAP); // Alternating primary / muted-foreground bricks — themeable and visible // on both light and dark backgrounds. (Tokens are already full color // strings like "oklch(…)", so use them directly — no extra wrapping.) const fill = brick.row % 2 === 0 ? t.primary || "#3b82f6" : t["muted-foreground"] || "#64748b"; drawRoundRect(bx, by, brickW, brickH, 3, fill); // Shine highlight. ctx.globalAlpha = 0.25; ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.roundRect(bx + 2, by + 2, brickW - 4, 3, 1); ctx.fill(); ctx.globalAlpha = 1; } // Paddle. const paddleY = LOGH - PADDLE_HEIGHT - 10; const pFill = t.primary || "#3b82f6"; drawRoundRect(gs.paddle.x, paddleY, gs.paddle.width, PADDLE_HEIGHT, 5, pFill); // Ball. const bFill = t.primary || "#3b82f6"; ctx.fillStyle = bFill; ctx.beginPath(); ctx.arc(gs.ball.x, gs.ball.y, BALL_RADIUS, 0, Math.PI * 2); ctx.fill(); // Ball glint. ctx.globalAlpha = 0.45; ctx.fillStyle = "#ffffff"; ctx.beginPath(); ctx.arc(gs.ball.x - 2, gs.ball.y - 2, BALL_RADIUS * 0.38, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; }; // ------------------------------------------------------------------ // Physics step // ------------------------------------------------------------------ const step = (dt: number) => { const gs = stateRef.current; if (!gs || !gs.launched) return; // Speed scales with level (clamped) and reduced-motion preference. const levelMult = Math.min(SPEED_GROWTH ** (gs.level - 1), MAX_SPEED_MULT); const maxSpeed = (reduceRef.current ? 180 : 320) * levelMult; // px/s // Cap speed. const speed = Math.sqrt(gs.ball.vx ** 2 + gs.ball.vy ** 2); let vx = gs.ball.vx; let vy = gs.ball.vy; if (speed > maxSpeed) { const scale = maxSpeed / speed; vx *= scale; vy *= scale; } let nx = gs.ball.x + vx * dt; let ny = gs.ball.y + vy * dt; // Wall collisions (left, right, top). if (nx - BALL_RADIUS < 0) { nx = BALL_RADIUS; vx = Math.abs(vx); } if (nx + BALL_RADIUS > LOGW) { nx = LOGW - BALL_RADIUS; vx = -Math.abs(vx); } if (ny - BALL_RADIUS < 0) { ny = BALL_RADIUS; vy = Math.abs(vy); } // Paddle collision. const paddleY = LOGH - PADDLE_HEIGHT - 10; const paddleLeft = gs.paddle.x; const paddleRight = gs.paddle.x + gs.paddle.width; if ( vy > 0 && ny + BALL_RADIUS >= paddleY && ny - BALL_RADIUS <= paddleY + PADDLE_HEIGHT && nx >= paddleLeft - BALL_RADIUS && nx <= paddleRight + BALL_RADIUS ) { ny = paddleY - BALL_RADIUS; // Angle based on hit position relative to paddle center. const hitPos = (nx - (paddleLeft + gs.paddle.width / 2)) / (gs.paddle.width / 2); const angle = hitPos * (Math.PI / 3); // max ±60° const currSpeed = Math.max(Math.sqrt(vx ** 2 + vy ** 2), reduceRef.current ? 130 : 200); vx = currSpeed * Math.sin(angle); vy = -Math.abs(currSpeed * Math.cos(angle)); } // Brick collisions. Resolve at most ONE brick hit per step: find the first // alive brick the ball overlaps, reflect the correct axis (minimal-penetration // resolution), push the ball out of the brick, destroy it, then stop. This // prevents the ball from tunnelling through (and flattening) a whole column // of bricks in a single frame. const { topMargin, sideMargin, brickW, brickH } = getBrickLayout(); let scoreGain = 0; let bricksRemaining = 0; let hitBrick: Brick | null = null; let hitBx = 0; let hitBy = 0; for (const brick of gs.bricks) { if (!brick.alive) continue; bricksRemaining++; if (hitBrick) continue; // already found this step's collision; just keep counting const bx = sideMargin + brick.col * (brickW + BRICK_GAP); const by = topMargin + brick.row * (brickH + BRICK_GAP); // AABB + circle collision. const closestX = Math.max(bx, Math.min(nx, bx + brickW)); const closestY = Math.max(by, Math.min(ny, by + brickH)); const distX = nx - closestX; const distY = ny - closestY; const distSq = distX ** 2 + distY ** 2; if (distSq < BALL_RADIUS ** 2) { hitBrick = brick; hitBx = bx; hitBy = by; } } if (hitBrick) { hitBrick.alive = false; bricksRemaining--; scoreGain += POINTS_PER_BRICK; // Pick the reflection axis by minimal penetration. Compare how far the ball // has entered the brick on each axis (using its expanded AABB by BALL_RADIUS); // reflect whichever axis the ball is shallowest in, which corresponds to the // side it actually crossed. const penLeft = nx + BALL_RADIUS - hitBx; // entering from the left edge const penRight = hitBx + brickW + BALL_RADIUS - nx; // from the right edge const penTop = ny + BALL_RADIUS - hitBy; // from the top edge const penBottom = hitBy + brickH + BALL_RADIUS - ny; // from the bottom edge const penX = Math.min(penLeft, penRight); const penY = Math.min(penTop, penBottom); if (penX < penY) { // Horizontal hit — reflect vx and push the ball clear on the x axis. vx = penLeft < penRight ? -Math.abs(vx) : Math.abs(vx); nx = penLeft < penRight ? hitBx - BALL_RADIUS : hitBx + brickW + BALL_RADIUS; } else { // Vertical hit — reflect vy and push the ball clear on the y axis. vy = penTop < penBottom ? -Math.abs(vy) : Math.abs(vy); ny = penTop < penBottom ? hitBy - BALL_RADIUS : hitBy + brickH + BALL_RADIUS; } } // Update score. if (scoreGain > 0) { gs.score += scoreGain; const newScore = gs.score; setScore(newScore); onScoreChangeRef.current?.(newScore); } // Ball fell below paddle. if (ny - BALL_RADIUS > LOGH) { gs.lives -= 1; const newLives = gs.lives; setLives(newLives); if (newLives <= 0) { // The only terminal state: out of lives. const finalScore = gs.score; submitHighRef.current(finalScore); onGameOverRef.current?.({ score: finalScore, won: false }); setStatus("gameover"); return; } // Reset ball to paddle. gs.ball = { x: gs.paddle.x + gs.paddle.width / 2, y: paddleY - BALL_RADIUS - 1, vx: 0, vy: 0, }; gs.launched = false; return; } // All bricks cleared — advance to the next level (endless). Keep score & // lives, regenerate the grid, and reset the ball onto the paddle so the // player re-launches. Difficulty rises via the level-based speed multiplier. if (bricksRemaining === 0) { gs.level += 1; gs.bricks = makeBricks(); gs.ball = { x: gs.paddle.x + gs.paddle.width / 2, y: paddleY - BALL_RADIUS - 1, vx: 0, vy: 0, }; gs.launched = false; setLevel(gs.level); return; } gs.ball.x = nx; gs.ball.y = ny; gs.ball.vx = vx; gs.ball.vy = vy; }; let raf = 0; let last = 0; const frame = (now: number) => { raf = requestAnimationFrame(frame); if (last === 0) last = now; const rawDt = Math.min((now - last) / 1000, 0.05); // seconds, capped at 50ms last = now; const active = statusRef.current === "playing" && !pausedRef.current && !offscreenRef.current; if (active) { step(rawDt); } draw(); }; raf = requestAnimationFrame(frame); return () => cancelAnimationFrame(raf); }, [getBrickLayout]); // Keyboard handler. React.useEffect(() => { const PADDLE_SPEED = 280; // px/s — but we use key-held logic let leftHeld = false; let rightHeld = false; let moveRaf = 0; let moveLast = 0; const movePaddle = (now: number) => { const gs = stateRef.current; if (!gs) { moveRaf = requestAnimationFrame(movePaddle); return; } if (moveLast === 0) moveLast = now; const dt = Math.min((now - moveLast) / 1000, 0.05); moveLast = now; if (leftHeld) { gs.paddle.x = Math.max(0, gs.paddle.x - PADDLE_SPEED * dt); } if (rightHeld) { gs.paddle.x = Math.min(LOGW - gs.paddle.width, gs.paddle.x + PADDLE_SPEED * dt); } // Keep ball on paddle if not launched. if (!gs.launched) { const paddleY = LOGH - PADDLE_HEIGHT - 10; gs.ball.x = gs.paddle.x + gs.paddle.width / 2; gs.ball.y = paddleY - BALL_RADIUS - 1; } if (leftHeld || rightHeld) { moveRaf = requestAnimationFrame(movePaddle); } }; const launchBall = () => { const gs = stateRef.current; if (!gs || gs.launched) return; const angle = -Math.PI / 2 + (Math.random() - 0.5) * (Math.PI / 4); // upward, slight random spread const levelMult = Math.min(SPEED_GROWTH ** (gs.level - 1), MAX_SPEED_MULT); const speed = (reduceRef.current ? 150 : 230) * levelMult; gs.ball.vx = speed * Math.cos(angle); gs.ball.vy = speed * Math.sin(angle); gs.launched = true; }; 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; if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") { e.preventDefault(); if (statusRef.current === "idle") start(); if (!leftHeld) { leftHeld = true; moveLast = 0; moveRaf = requestAnimationFrame(movePaddle); } } else if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") { e.preventDefault(); if (statusRef.current === "idle") start(); if (!rightHeld) { rightHeld = true; moveLast = 0; moveRaf = requestAnimationFrame(movePaddle); } } else if (e.key === " " || e.key === "Enter") { e.preventDefault(); if (statusRef.current === "idle" || statusRef.current === "gameover") { start(); } else if (statusRef.current === "playing") { launchBall(); } } }; const onKeyUp = (e: KeyboardEvent) => { if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") { leftHeld = false; cancelAnimationFrame(moveRaf); } else if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") { rightHeld = false; cancelAnimationFrame(moveRaf); } }; // 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); cancelAnimationFrame(moveRaf); }; }, [start, captureGlobalKeys]); // Pointer / touch — move paddle to pointer x. React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; // Map a client X coordinate into logical (LOGW) space. const getLogicalX = (clientX: number): number => { const rect = canvas.getBoundingClientRect(); return ((clientX - rect.left) / rect.width) * LOGW; }; const movePaddleTo = (logicalX: number) => { const gs = stateRef.current; if (!gs) return; const half = gs.paddle.width / 2; gs.paddle.x = Math.max(0, Math.min(LOGW - gs.paddle.width, logicalX - half)); // Keep ball on paddle if not launched. if (!gs.launched) { const paddleY = LOGH - PADDLE_HEIGHT - 10; gs.ball.x = gs.paddle.x + gs.paddle.width / 2; gs.ball.y = paddleY - BALL_RADIUS - 1; } }; let pointerDown = false; const onPointerDown = (e: PointerEvent) => { pointerDown = true; if (statusRef.current === "idle") start(); movePaddleTo(getLogicalX(e.clientX)); }; const onPointerMove = (e: PointerEvent) => { if (!pointerDown) return; movePaddleTo(getLogicalX(e.clientX)); }; const onPointerUp = (e: PointerEvent) => { if (pointerDown && statusRef.current === "playing") { const gs = stateRef.current; if (gs && !gs.launched) { // Tap/click launches the ball. const angle = -Math.PI / 2 + (Math.random() - 0.5) * (Math.PI / 4); const levelMult = Math.min(SPEED_GROWTH ** (gs.level - 1), MAX_SPEED_MULT); const speed = (reduceRef.current ? 150 : 230) * levelMult; gs.ball.vx = speed * Math.cos(angle); gs.ball.vy = speed * Math.sin(angle); gs.launched = true; } movePaddleTo(getLogicalX(e.clientX)); } pointerDown = false; }; canvas.addEventListener("pointerdown", onPointerDown); canvas.addEventListener("pointermove", onPointerMove); canvas.addEventListener("pointerup", onPointerUp); canvas.addEventListener("pointerleave", onPointerUp); return () => { canvas.removeEventListener("pointerdown", onPointerDown); canvas.removeEventListener("pointermove", onPointerMove); canvas.removeEventListener("pointerup", onPointerUp); canvas.removeEventListener("pointerleave", onPointerUp); }; }, [start]); // Auto-focus. React.useEffect(() => { if (autoFocus) wrapperRef.current?.focus(); }, [autoFocus]); const isOver = status === "gameover"; return (

{/* Score bar */}

Score {score} Lvl {level} {lives > 0 && ( )} {lives === 0 ? "no lives" : lives === 1 ? "1 life" : `${lives} lives`} Best {high}

{/* aria-live region */}

{status === "playing" ? `Level ${level}, score ${score}, ${lives} lives remaining` : status === "gameover" ? `Game over. Final score ${score}` : "Breakout game. Press Start to play."}

{/* Canvas container */}

); } export default Breakout; 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4e",null,{"files":[{"path":"registry/games/breakout.tsx","content":"$4f","type":"registry:component","target":"@/components/games/breakout.tsx"}],"className":"h-[70svh] min-h-80"}]]}]