4e:I[707087,["/_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"],"RegistryDependencies"] 4f: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"] 50:T6b4,// Component export { BrickBreaker } from './brick-breaker' // Hook (for advanced usage) export { useBrickBreaker } from './use-brick-breaker' // UI Components (for custom layouts) export { useBrickBreakerUI, BrickBreakerUIProvider, BrickBreakerCanvas, BrickBreakerScore, BrickBreakerHighScore, BrickBreakerLevel, BrickBreakerLives, BrickBreakerHUD, BrickBreakerOverlay, BrickBreakerTitle, BrickBreakerMessage, BrickBreakerHint, BrickBreakerScoreDisplay, BrickBreakerActionButton, BrickBreakerDefaultUI, } from './ui' // Types export type { // Core game types GameState, GameSnapshot, GameEndResult, // Geometry Vector2D, Bounds, CollisionSide, CollisionResult, // Game objects Brick, BrickType, BrickDefinition, Ball, Paddle, // Levels Level, // Configuration BrickBreakerConfig, BrickBreakerProps, BrickBreakerColors, BrickBreakerLayout, BrickBreakerSizing, BrickBreakerPhysics, BrickBreakerScoring, BrickBreakerGameplay, BrickBreakerEffects, BrickBreakerStorage, // Utilities DeepPartial, CanvasDimensions, } from './types' // Config presets export { DEFAULT_CONFIG, DEFAULT_COLORS, GAME_CONSTANTS, KEY_BINDINGS, BRICK_VISUALS, } from './config' // Level utilities export { DEFAULT_LEVELS, createLevelFromPattern, generateRandomLevel, getBrickHealth, isLevelCompletable, countDestructibleBricks, } from './levels' // Utility functions export { mergeConfig, detectCollision, resolveBallBrickCollision, resolveBallPaddleCollision, resolveCssColor, formatScore, normalize, magnitude, scale, add, subtract, dot, reflect, clamp, lerp, storage, } from './utils' 51:T513a,'use client' import * as React from 'react' import { cn } from '@/lib/utils' import type { BrickBreakerProps, BrickBreakerConfig, CanvasDimensions, GameSnapshot, Brick, BrickType, } from './types' import { DEFAULT_CONFIG, GAME_CONSTANTS, KEY_BINDINGS, BRICK_VISUALS, } from './config' import { DEFAULT_LEVELS } from './levels' import { useBrickBreaker } from './use-brick-breaker' import { mergeConfig, resolveCssColor } from './utils' import { BrickBreakerUIProvider, BrickBreakerCanvas, BrickBreakerDefaultUI, } from './ui' /** * Draw rounded rectangle */ function drawRoundedRect( ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, radius: number ): void { ctx.beginPath() ctx.moveTo(x + radius, y) ctx.lineTo(x + width - radius, y) ctx.quadraticCurveTo(x + width, y, x + width, y + radius) ctx.lineTo(x + width, y + height - radius) ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height) ctx.lineTo(x + radius, y + height) ctx.quadraticCurveTo(x, y + height, x, y + height - radius) ctx.lineTo(x, y + radius) ctx.quadraticCurveTo(x, y, x + radius, y) ctx.closePath() ctx.fill() } /** * Draw brick with type-specific patterns */ function drawBrick( ctx: CanvasRenderingContext2D, brick: Brick, baseColor: string, borderRadius: number ): void { const { x, y, width, height } = brick.bounds const visual = BRICK_VISUALS[brick.type] ctx.globalAlpha = visual.opacity // Health-based opacity for damaged bricks if (brick.maxHealth > 1 && brick.health < brick.maxHealth) { const healthRatio = brick.health / brick.maxHealth ctx.globalAlpha *= 0.5 + healthRatio * 0.5 } ctx.fillStyle = baseColor drawRoundedRect(ctx, x, y, width, height, borderRadius) // Draw pattern overlay for special bricks if (visual.pattern && brick.type !== 'normal') { ctx.globalAlpha = 0.15 if (visual.pattern === 'diagonal') { // Strong brick: diagonal lines ctx.strokeStyle = baseColor ctx.lineWidth = 1 const step = 6 for (let i = -height; i < width + height; i += step) { ctx.beginPath() ctx.moveTo(x + i, y) ctx.lineTo(x + i + height, y + height) ctx.stroke() } } else if (visual.pattern === 'cross') { // Metal brick: cross pattern ctx.strokeStyle = baseColor ctx.lineWidth = 2 ctx.beginPath() ctx.moveTo(x + width * 0.2, y + height * 0.5) ctx.lineTo(x + width * 0.8, y + height * 0.5) ctx.moveTo(x + width * 0.5, y + height * 0.2) ctx.lineTo(x + width * 0.5, y + height * 0.8) ctx.stroke() } } ctx.globalAlpha = 1 } /** * Render game to canvas */ function renderGame( ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, snapshot: GameSnapshot, config: BrickBreakerConfig, dimensions: CanvasDimensions ): void { const { width, height, dpr } = dimensions ctx.setTransform(1, 0, 0, 1, 0, 0) ctx.scale(dpr, dpr) ctx.clearRect(0, 0, width, height) // Resolve colors const bgColor = resolveCssColor(config.colors.background, canvas) const paddleColor = resolveCssColor(config.colors.paddle, canvas) const ballColor = resolveCssColor(config.colors.ball, canvas) const trailColor = resolveCssColor(config.colors.ballTrail, canvas) const brickColors: Record = { normal: resolveCssColor(config.colors.bricks.normal, canvas), strong: resolveCssColor(config.colors.bricks.strong, canvas), metal: resolveCssColor(config.colors.bricks.metal, canvas), indestructible: resolveCssColor( config.colors.bricks.indestructible, canvas ), } // Background ctx.fillStyle = bgColor ctx.fillRect(0, 0, width, height) // Draw bricks const now = Date.now() for (const brick of snapshot.bricks) { if (brick.destroyed) { // Fade out animation if (brick.destroyedAt) { const elapsed = now - brick.destroyedAt const progress = elapsed / config.effects.destroyAnimationDuration if (progress < 1) { ctx.globalAlpha = 1 - progress drawBrick( ctx, brick, brickColors[brick.type], config.layout.brickBorderRadius ) ctx.globalAlpha = 1 } } continue } drawBrick( ctx, brick, brickColors[brick.type], config.layout.brickBorderRadius ) } // Helper to draw ball based on style const drawBall = ( x: number, y: number, radius: number, color: string, alpha = 1 ) => { ctx.globalAlpha = alpha ctx.fillStyle = color if (config.layout.ballStyle === 'custom' && config.layout.renderBall) { config.layout.renderBall(ctx, x, y, radius, color) } else if (config.layout.ballStyle === 'square') { const size = radius * 2 ctx.fillRect(x - radius, y - radius, size, size) } else { ctx.beginPath() ctx.arc(x, y, radius, 0, Math.PI * 2) ctx.fill() } ctx.globalAlpha = 1 } // Draw ball trail if (config.effects.showTrail && snapshot.ball.trail.length > 0) { for (let i = 0; i < snapshot.ball.trail.length; i++) { const pos = snapshot.ball.trail[i] const progress = (i + 1) / snapshot.ball.trail.length const opacity = progress * config.effects.trailOpacity const trailRadius = snapshot.ball.radius * (0.3 + 0.7 * progress) drawBall(pos.x, pos.y, trailRadius, trailColor, opacity) } } // Draw ball drawBall( snapshot.ball.position.x, snapshot.ball.position.y, snapshot.ball.radius, ballColor ) // Draw paddle ctx.fillStyle = paddleColor const paddleRadius = config.layout.paddleBorderRadius === 'auto' ? snapshot.paddle.bounds.height / 2 : config.layout.paddleBorderRadius drawRoundedRect( ctx, snapshot.paddle.bounds.x, snapshot.paddle.bounds.y, snapshot.paddle.bounds.width, snapshot.paddle.bounds.height, paddleRadius ) // Note: HUD and overlays are now rendered as React components via children } /** * Brick Breaker Game Component */ /** Input mode - once locked, other input types are ignored for movement */ type InputMode = 'none' | 'keyboard' | 'pointer' export function BrickBreaker({ config: configOverrides, levels: customLevels, startLevel = 1, onGameEnd, onScoreChange, onStateChange, onLevelChange, className, autoFocus = true, showFocusRing = true, children, }: BrickBreakerProps & { children?: React.ReactNode }) { const containerRef = React.useRef(null) const canvasWrapperRef = React.useRef(null) const canvasRef = React.useRef(null) const [dimensions, setDimensions] = React.useState({ width: 400, height: 300, dpr: 1, }) const [theme, setTheme] = React.useState('') // Input mode locking - prevents keyboard/mouse conflicts const inputModeRef = React.useRef('none') const config = React.useMemo( () => mergeConfig(DEFAULT_CONFIG, configOverrides), [configOverrides] ) const levels = customLevels || DEFAULT_LEVELS const { snapshot, startGame, pauseGame, resumeGame, resetGame, nextLevel, movePaddle, setPaddlePosition, launchBall, } = useBrickBreaker({ config, levels, startLevel, canvasDimensions: dimensions, onGameEnd, onScoreChange, onStateChange, onLevelChange, }) // Reset input mode when game is not playing React.useEffect(() => { if (snapshot.state !== 'playing') { inputModeRef.current = 'none' } }, [snapshot.state]) // Responsive sizing - follows container width, maintains aspect ratio React.useEffect(() => { const wrapper = canvasWrapperRef.current if (!wrapper) return const updateSize = () => { const rect = wrapper.getBoundingClientRect() const wrapperWidth = Math.max(rect.width, 1) const wrapperHeight = Math.max(rect.height, 1) const dpr = window.devicePixelRatio || 1 // Calculate dimensions that fit within wrapper while maintaining aspect ratio const heightFromWidth = wrapperWidth / GAME_CONSTANTS.ASPECT_RATIO const widthFromHeight = wrapperHeight * GAME_CONSTANTS.ASPECT_RATIO let width: number let height: number if (heightFromWidth <= wrapperHeight) { // Width is the constraint - use full width width = wrapperWidth height = heightFromWidth } else { // Height is the constraint - use full height width = widthFromHeight height = wrapperHeight } setDimensions({ width, height, dpr }) } updateSize() const resizeObserver = new ResizeObserver(updateSize) resizeObserver.observe(wrapper) return () => resizeObserver.disconnect() }, []) // Theme changes React.useEffect(() => { const html = document.documentElement setTheme(html.className) const observer = new MutationObserver((mutations) => { for (const mutation of mutations) { if (mutation.attributeName === 'class') { setTheme(html.className) } } }) observer.observe(html, { attributes: true, attributeFilter: ['class'] }) return () => observer.disconnect() }, []) // Render React.useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext('2d') if (!ctx) return canvas.width = dimensions.width * dimensions.dpr canvas.height = dimensions.height * dimensions.dpr renderGame(ctx, canvas, snapshot, config, dimensions) }, [snapshot, config, dimensions, theme]) // Keyboard controls React.useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { // only if is focusing on the canvas if ( !document.activeElement?.closest('[data-slot="brick-breaker-canvas"]') ) return const code = e.code // Movement keys - switch to keyboard mode (allows taking over from pointer) if ( KEY_BINDINGS.LEFT.includes(code) || KEY_BINDINGS.RIGHT.includes(code) ) { // Switch to keyboard mode - keyboard can always take over inputModeRef.current = 'keyboard' e.preventDefault() if (KEY_BINDINGS.LEFT.includes(code)) { movePaddle('left') } else { movePaddle('right') } return } // Action keys (always allowed regardless of input mode) if (KEY_BINDINGS.START.includes(code)) { e.preventDefault() if (snapshot.state === 'idle') { startGame() } else if (snapshot.state === 'paused') { resumeGame() } else if (snapshot.state === 'playing') { if (!snapshot.ball.isLaunched) { launchBall() } else { pauseGame() } } else if (snapshot.state === 'levelComplete') { nextLevel() } } if (KEY_BINDINGS.PAUSE.includes(code)) { e.preventDefault() if (snapshot.state === 'playing') { pauseGame() } else if (snapshot.state === 'paused') { resumeGame() } } if (KEY_BINDINGS.RESTART.includes(code)) { if (snapshot.state === 'won' || snapshot.state === 'lost') { resetGame() setTimeout(startGame, 100) } } } const handleKeyUp = (e: KeyboardEvent) => { const code = e.code if ( KEY_BINDINGS.LEFT.includes(code) || KEY_BINDINGS.RIGHT.includes(code) ) { // Only respond if in keyboard mode if (inputModeRef.current === 'keyboard') { movePaddle('none') // Reset so pointer can take over inputModeRef.current = 'none' } } } window.addEventListener('keydown', handleKeyDown) window.addEventListener('keyup', handleKeyUp) return () => { window.removeEventListener('keydown', handleKeyDown) window.removeEventListener('keyup', handleKeyUp) } }, [ snapshot.state, snapshot.ball.isLaunched, startGame, pauseGame, resumeGame, resetGame, nextLevel, movePaddle, launchBall, ]) // Mouse controls React.useEffect(() => { const canvas = canvasRef.current if (!canvas) return const handleMouseMove = (e: MouseEvent) => { if (snapshot.state !== 'playing') return // Mouse can take over from null or pointer mode, but not keyboard if (inputModeRef.current === 'keyboard') return inputModeRef.current = 'pointer' const rect = canvas.getBoundingClientRect() const x = ((e.clientX - rect.left) / rect.width) * dimensions.width setPaddlePosition(x) } const handleClick = () => { // Click actions are always allowed (start, launch, resume, etc.) if (snapshot.state === 'idle') { startGame() } else if (snapshot.state === 'paused') { resumeGame() } else if (snapshot.state === 'playing' && !snapshot.ball.isLaunched) { launchBall() } else if (snapshot.state === 'levelComplete') { nextLevel() } else if (snapshot.state === 'won' || snapshot.state === 'lost') { resetGame() setTimeout(startGame, 100) } } const handleMouseLeave = () => { // Reset pointer mode when mouse leaves canvas if (inputModeRef.current === 'pointer') { inputModeRef.current = 'none' } } canvas.addEventListener('mousemove', handleMouseMove) canvas.addEventListener('click', handleClick) canvas.addEventListener('mouseleave', handleMouseLeave) return () => { canvas.removeEventListener('mousemove', handleMouseMove) canvas.removeEventListener('click', handleClick) canvas.removeEventListener('mouseleave', handleMouseLeave) } }, [ snapshot.state, snapshot.ball.isLaunched, dimensions, startGame, resumeGame, resetGame, nextLevel, setPaddlePosition, launchBall, ]) // Touch controls React.useEffect(() => { const canvas = canvasRef.current if (!canvas) return const handleTouchStart = (e: TouchEvent) => { e.preventDefault() // Touch always takes over input mode inputModeRef.current = 'pointer' // Position paddle immediately on touch if (snapshot.state === 'playing' && e.touches[0]) { const touch = e.touches[0] const rect = canvas.getBoundingClientRect() const x = ((touch.clientX - rect.left) / rect.width) * dimensions.width setPaddlePosition(x) } // Touch actions (start, launch, etc.) if (snapshot.state === 'idle') { startGame() } else if (snapshot.state === 'paused') { resumeGame() } else if (snapshot.state === 'playing' && !snapshot.ball.isLaunched) { launchBall() } else if (snapshot.state === 'levelComplete') { nextLevel() } else if (snapshot.state === 'won' || snapshot.state === 'lost') { resetGame() setTimeout(startGame, 100) } } const handleTouchMove = (e: TouchEvent) => { e.preventDefault() if (snapshot.state !== 'playing') return if (!e.touches[0]) return const touch = e.touches[0] const rect = canvas.getBoundingClientRect() const x = ((touch.clientX - rect.left) / rect.width) * dimensions.width setPaddlePosition(x) } const handleTouchEnd = () => { // Reset input mode when touch ends so keyboard can take over if (inputModeRef.current === 'pointer') { inputModeRef.current = 'none' } } canvas.addEventListener('touchstart', handleTouchStart, { passive: false }) canvas.addEventListener('touchmove', handleTouchMove, { passive: false }) canvas.addEventListener('touchend', handleTouchEnd) canvas.addEventListener('touchcancel', handleTouchEnd) return () => { canvas.removeEventListener('touchstart', handleTouchStart) canvas.removeEventListener('touchmove', handleTouchMove) canvas.removeEventListener('touchend', handleTouchEnd) canvas.removeEventListener('touchcancel', handleTouchEnd) } }, [ snapshot.state, snapshot.ball.isLaunched, dimensions, startGame, resumeGame, resetGame, nextLevel, setPaddlePosition, launchBall, ]) // Auto-focus React.useEffect(() => { if (autoFocus) { canvasRef.current?.focus() } }, [autoFocus]) // Context value for UI components const uiContextValue = React.useMemo( () => ({ snapshot, startGame, pauseGame, resumeGame, resetGame, nextLevel, }), [snapshot, startGame, pauseGame, resumeGame, resetGame, nextLevel] ) // Canvas element to render const canvasElement = (

{children ?? defaultTitles[snapshot.state]}