4f: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"] 50: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"] 51:T2568,"use client" import { useEffect, useRef, useState } from "react" import { GameEngine, type GameState, } from "@/lib/game-engine" import { PlayerIndicator } from "@/components/player-indicator" import { digits, Matrix, type Frame } from "@/components/ui/matrix" export function PongGame() { const [gameState, setGameState] = useState("title") const [playerScore, setPlayerScore] = useState(0) const [aiScore, setAIScore] = useState(0) const [currentFrame, setCurrentFrame] = useState(() => Array(7) .fill(0) .map(() => Array(21).fill(0)) ) const engineRef = useRef(null) const playerInputRef = useRef(0) const lastTimeRef = useRef(0) const animationFrameRef = useRef(0) const renderFrameFromEngine = (): Frame => { const frame: Frame = Array(7) .fill(0) .map(() => Array(21).fill(0)) if (!engineRef.current || engineRef.current.data.state === "title") { const pongText = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0], [0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0], [0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0], [0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0], [0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ] return pongText } if (engineRef.current.data.state === "gameOver") { if (engineRef.current.data.winner === "player") { // WIN const winText = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 0], [0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ] return winText } else { // LOSE const loseText = [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 0, 1, 1, 1, 1, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ] return loseText } } const data = engineRef.current.data for (let col = 0; col < 21; col++) { if (col === 10) { for (let row = 0; row < 7; row += 2) { frame[row][col] = 0.2 } } } const playerPaddleTop = Math.floor(data.playerPaddle.y) for (let i = 0; i < 3; i++) { const row = playerPaddleTop + i if (row >= 0 && row < 7) { frame[row][0] = 1 } } const aiPaddleTop = Math.floor(data.aiPaddle.y) for (let i = 0; i < 3; i++) { const row = aiPaddleTop + i if (row >= 0 && row < 7) { frame[row][20] = 1 } } const ballCol = Math.floor(data.ball.x) const ballRow = Math.floor(data.ball.y) if (ballCol >= 0 && ballCol < 21 && ballRow >= 0 && ballRow < 7) { frame[ballRow][ballCol] = 1 } for (let i = 0; i < data.ball.trail.length; i++) { const trailCol = Math.floor(data.ball.trail[i].x) const trailRow = Math.floor(data.ball.trail[i].y) if (trailCol >= 0 && trailCol < 21 && trailRow >= 0 && trailRow < 7) { frame[trailRow][trailCol] = Math.max( frame[trailRow][trailCol], 0.5 - i * 0.15 ) } } return frame } useEffect(() => { engineRef.current = new GameEngine() setCurrentFrame(renderFrameFromEngine()) function gameLoop(timestamp: number) { if (!engineRef.current) return if (lastTimeRef.current === 0) { lastTimeRef.current = timestamp } const deltaTime = Math.min((timestamp - lastTimeRef.current) / 1000, 0.1) lastTimeRef.current = timestamp engineRef.current.update(deltaTime, playerInputRef.current) const data = engineRef.current.data setGameState(data.state) setPlayerScore(data.playerScore) setAIScore(data.aiScore) setCurrentFrame(renderFrameFromEngine()) if (data.state === "playing" || data.state === "paused") { animationFrameRef.current = requestAnimationFrame(gameLoop) } } const handleKeyDown = (e: KeyboardEvent) => { if (e.key === "ArrowUp") { e.preventDefault() playerInputRef.current = -1 } else if (e.key === "ArrowDown") { e.preventDefault() playerInputRef.current = 1 } else if (e.key === " ") { e.preventDefault() const state = engineRef.current?.data.state if (state === "title" || state === "gameOver") { if (engineRef.current) { engineRef.current.startGame() setCurrentFrame(renderFrameFromEngine()) lastTimeRef.current = 0 if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } animationFrameRef.current = requestAnimationFrame(gameLoop) } } } else if (e.key === "p" || e.key === "P") { e.preventDefault() const state = engineRef.current?.data.state if (state === "playing" || state === "paused") { if (engineRef.current) { engineRef.current.togglePause() if (engineRef.current.data.state === "playing") { lastTimeRef.current = 0 if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } animationFrameRef.current = requestAnimationFrame(gameLoop) } else { if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } } } } } const handleKeyUp = (e: KeyboardEvent) => { if (e.key === "ArrowUp" || e.key === "ArrowDown") { playerInputRef.current = 0 } } window.addEventListener("keydown", handleKeyDown) window.addEventListener("keyup", handleKeyUp) return () => { window.removeEventListener("keydown", handleKeyDown) window.removeEventListener("keyup", handleKeyUp) if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current) } } }, []) return (

Player

ELEVENLABS

{gameState === "title" && (

Press Space to start

)} {gameState === "playing" && (

↑ ↓ Move · P Pause

)} {gameState === "paused" && (

PAUSED - Press P{" "} to resume

)} {gameState === "gameOver" && (

Press Space to play again

)}

) } 52:T9e0,"use client" import { useEffect, useState } from "react" import { updatePlayerHeartbeat } from "@/actions/pong-actions" import { digits, Matrix, type Frame } from "@/components/ui/matrix" const HEARTBEAT_INTERVAL_MS = 5000 const PULSE_INTERVAL_MS = 1000 const PLAYER_COUNT_DIGITS = 4 /** * PlayerIndicator displays a live count of active players * with a pulsing dot indicator and matrix-style digit display. * * @remarks * Uses Upstash Redis via server actions to track active players. * Each player sends a heartbeat every 5 seconds. */ export function PlayerIndicator() { const [userCount, setUserCount] = useState(1) const [pulse, setPulse] = useState(1) const [playerId] = useState(() => Math.random().toString(36).substring(7) ) useEffect(() => { // Pulse animation for the live indicator dot const pulseInterval = setInterval(() => { setPulse((prev) => (prev === 1 ? 0.5 : 1)) }, PULSE_INTERVAL_MS) // Heartbeat to track active players via server action const sendHeartbeat = async () => { try { const count = await updatePlayerHeartbeat(playerId) setUserCount(count) } catch (error) { console.error("Failed to send heartbeat:", error) } } // Send initial heartbeat immediately void sendHeartbeat() const heartbeatInterval = setInterval(sendHeartbeat, HEARTBEAT_INTERVAL_MS) return () => { clearInterval(pulseInterval) clearInterval(heartbeatInterval) } }, [playerId]) // Single pixel pulse indicator const pulsePattern: Frame = [[pulse]] // Convert count to array of digits with leading zeros (e.g., 0042) const countDigits: number[] = userCount .toString() .padStart(PLAYER_COUNT_DIGITS, "0") .split("") .map(Number) return (

{countDigits.map((digit, index) => ( ))} playing

) } 53:T18fa,import { soundManager } from "@/lib/sound-manager" export type GameState = | "title" | "countdown" | "playing" | "paused" | "gameOver" export interface Ball { x: number y: number velX: number velY: number trail: Array<{ x: number; y: number }> } export interface Paddle { y: number targetY: number } export interface GameData { state: GameState ball: Ball playerPaddle: Paddle aiPaddle: Paddle playerScore: number aiScore: number countdown: number winner: "player" | "ai" | null } const FIELD_WIDTH = 21 const FIELD_HEIGHT = 7 const PADDLE_HEIGHT = 3 const MAX_SPEED = 0.4 const INITIAL_SPEED = 0.15 const SPEED_INCREASE = 1.08 const WIN_SCORE = 3 const AI_REACTION_SPEED = 0.14 const AI_PREDICTION_ERROR = 1.2 export class GameEngine { data: GameData constructor() { this.data = this.createInitialState() } private createInitialState(): GameData { return { state: "title", ball: { x: FIELD_WIDTH / 2, y: FIELD_HEIGHT / 2, velX: INITIAL_SPEED, velY: INITIAL_SPEED * 0.8, trail: [], }, playerPaddle: { y: FIELD_HEIGHT / 2 - PADDLE_HEIGHT / 2, targetY: FIELD_HEIGHT / 2 - PADDLE_HEIGHT / 2, }, aiPaddle: { y: FIELD_HEIGHT / 2 - PADDLE_HEIGHT / 2, targetY: FIELD_HEIGHT / 2 - PADDLE_HEIGHT / 2, }, playerScore: 0, aiScore: 0, countdown: 3, winner: null, } } startGame() { this.data = { ...this.createInitialState(), state: "playing", } soundManager.play("gameStart") } resetBall(toPlayer: boolean) { this.data.ball = { x: FIELD_WIDTH / 2, y: FIELD_HEIGHT / 2, velX: toPlayer ? -INITIAL_SPEED : INITIAL_SPEED, velY: (Math.random() - 0.5) * INITIAL_SPEED * 1.5, trail: [], } } update(deltaTime: number, playerInput: number) { if (this.data.state !== "playing") return this.updatePaddles(deltaTime, playerInput) this.updateBall(deltaTime) this.checkCollisions() } private updatePaddles(deltaTime: number, playerInput: number) { if (playerInput !== 0) { const moveSpeed = 50 const movement = playerInput * deltaTime * moveSpeed this.data.playerPaddle.y = Math.max( 0, Math.min( FIELD_HEIGHT - PADDLE_HEIGHT, this.data.playerPaddle.y + movement ) ) this.data.playerPaddle.targetY = this.data.playerPaddle.y } const predictedY = this.data.ball.y + (this.data.ball.velY / Math.abs(this.data.ball.velX)) * (FIELD_WIDTH - 2 - this.data.ball.x) + (Math.random() - 0.5) * AI_PREDICTION_ERROR this.data.aiPaddle.targetY = Math.max( 0, Math.min(FIELD_HEIGHT - PADDLE_HEIGHT, predictedY - PADDLE_HEIGHT / 2) ) const aiDiff = this.data.aiPaddle.targetY - this.data.aiPaddle.y this.data.aiPaddle.y += Math.sign(aiDiff) * Math.min(Math.abs(aiDiff), AI_REACTION_SPEED * deltaTime * 60) } private updateBall(deltaTime: number) { this.data.ball.trail.unshift({ x: this.data.ball.x, y: this.data.ball.y, }) if (this.data.ball.trail.length > 3) { this.data.ball.trail.pop() } this.data.ball.x += this.data.ball.velX * deltaTime * 60 this.data.ball.y += this.data.ball.velY * deltaTime * 60 } private checkCollisions() { if (this.data.ball.y <= 0.5) { this.data.ball.y = 0.5 this.data.ball.velY = Math.abs(this.data.ball.velY) soundManager.play("wallHit") } if (this.data.ball.y >= FIELD_HEIGHT - 0.5) { this.data.ball.y = FIELD_HEIGHT - 0.5 this.data.ball.velY = -Math.abs(this.data.ball.velY) soundManager.play("wallHit") } if ( this.data.ball.x <= 1 && this.data.ball.velX < 0 && this.data.ball.y >= this.data.playerPaddle.y - 0.5 && this.data.ball.y <= this.data.playerPaddle.y + PADDLE_HEIGHT + 0.5 ) { this.data.ball.x = 1 this.data.ball.velX = Math.abs(this.data.ball.velX) * SPEED_INCREASE const hitPos = (this.data.ball.y - this.data.playerPaddle.y - PADDLE_HEIGHT / 2) / (PADDLE_HEIGHT / 2) this.data.ball.velY += hitPos * 0.15 const speed = Math.sqrt( this.data.ball.velX ** 2 + this.data.ball.velY ** 2 ) if (speed > MAX_SPEED) { this.data.ball.velX = (this.data.ball.velX / speed) * MAX_SPEED this.data.ball.velY = (this.data.ball.velY / speed) * MAX_SPEED } soundManager.play("paddleHit") } if ( this.data.ball.x >= FIELD_WIDTH - 2 && this.data.ball.velX > 0 && this.data.ball.y >= this.data.aiPaddle.y - 0.5 && this.data.ball.y <= this.data.aiPaddle.y + PADDLE_HEIGHT + 0.5 ) { this.data.ball.x = FIELD_WIDTH - 2 this.data.ball.velX = -Math.abs(this.data.ball.velX) * SPEED_INCREASE const hitPos = (this.data.ball.y - this.data.aiPaddle.y - PADDLE_HEIGHT / 2) / (PADDLE_HEIGHT / 2) this.data.ball.velY += hitPos * 0.15 const speed = Math.sqrt( this.data.ball.velX ** 2 + this.data.ball.velY ** 2 ) if (speed > MAX_SPEED) { this.data.ball.velX = (this.data.ball.velX / speed) * MAX_SPEED this.data.ball.velY = (this.data.ball.velY / speed) * MAX_SPEED } soundManager.play("paddleHit") } if (this.data.ball.x < 0) { this.data.aiScore++ soundManager.play("score") if (this.data.aiScore >= WIN_SCORE) { this.data.state = "gameOver" this.data.winner = "ai" soundManager.play("win") } else { this.resetBall(false) } } if (this.data.ball.x > FIELD_WIDTH) { this.data.playerScore++ soundManager.play("score") if (this.data.playerScore >= WIN_SCORE) { this.data.state = "gameOver" this.data.winner = "player" soundManager.play("win") } else { this.resetBall(true) } } } togglePause() { if (this.data.state === "playing") { this.data.state = "paused" } else if (this.data.state === "paused") { this.data.state = "playing" } } tickCountdown() { if (this.data.state !== "countdown") return this.data.countdown-- if (this.data.countdown <= 0) { this.data.state = "playing" } } } 54:T5a8,type SoundType = "paddleHit" | "wallHit" | "score" | "gameStart" | "win" class SoundManager { private sounds: Map = new Map() private volume = 0.3 constructor() { if (typeof window !== "undefined") { this.loadSounds() } } private loadSounds() { const soundFiles: Record = { paddleHit: "https://ui.elevenlabs.io/sounds/pong/paddle_hit.mp3", wallHit: "https://ui.elevenlabs.io/sounds/pong/wall_hit.mp3", score: "https://ui.elevenlabs.io/sounds/pong/score.mp3", gameStart: "https://ui.elevenlabs.io/sounds/pong/game_start.mp3", win: "https://ui.elevenlabs.io/sounds/pong/win.mp3", } for (const [key, path] of Object.entries(soundFiles)) { try { const audio = new Audio(path) audio.volume = this.volume audio.preload = "auto" this.sounds.set(key as SoundType, audio) } catch { console.warn(`Failed to load sound: ${path}`) } } } play(sound: SoundType) { const audio = this.sounds.get(sound) if (!audio) return audio.currentTime = 0 audio.play().catch(() => { // Ignore play errors (e.g., user hasn't interacted with page yet) }) } setVolume(vol: number) { this.volume = Math.max(0, Math.min(1, vol)) this.sounds.forEach((audio) => { audio.volume = this.volume }) } } export const soundManager = new SoundManager() 55:T527,"use server" import { Redis } from "@upstash/redis" const redis = new Redis({ url: process.env.KV_REST_API_URL!, token: process.env.KV_REST_API_TOKEN!, }) /** Player is considered inactive after 10 seconds without a heartbeat */ const PLAYER_TIMEOUT_MS = 10_000 /** Redis key for the sorted set storing player timestamps */ const PLAYERS_KEY = "pong:players" /** * Updates a player's heartbeat and returns the current count of active players. * * @param playerId - Unique identifier for the player * @returns The total number of currently active players * * @remarks * This function performs three operations: * 1. Updates or adds the player's timestamp in Redis * 2. Removes players who haven't sent a heartbeat in 10 seconds * 3. Returns the count of remaining active players * * Uses Redis sorted sets with timestamps as scores for efficient * range-based cleanup of stale entries. */ export async function updatePlayerHeartbeat(playerId: string): Promise { if (!playerId || typeof playerId !== "string") { throw new Error("Invalid playerId") } const now = Date.now() await redis.zadd(PLAYERS_KEY, { score: now, member: playerId }) await redis.zremrangebyscore(PLAYERS_KEY, 0, now - PLAYER_TIMEOUT_MS) const count = await redis.zcard(PLAYERS_KEY) return count } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@upstash/redis",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40upstash%2Fredis","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@upstash/redis"}]]}]}]]}],["$","$L4f",null,{"namespace":"@elevenlabs-ui","registryDependencies":["https://ui.elevenlabs.io/r/matrix.json","card"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"blocks/pong-01/page.tsx","content":"import { PongGame } from \"@/components/pong-game\"\n\nexport default function Page() {\n return \n}\n","type":"registry:page","target":"app/pong/page.tsx"},{"path":"blocks/pong-01/components/pong-game.tsx","content":"$51","type":"registry:component","target":"components/pong-game.tsx"},{"path":"blocks/pong-01/components/player-indicator.tsx","content":"$52","type":"registry:component","target":"components/player-indicator.tsx"},{"path":"blocks/pong-01/components/game-engine.ts","content":"$53","type":"registry:file","target":"lib/game-engine.ts"},{"path":"blocks/pong-01/components/sound-manager.ts","content":"$54","type":"registry:file","target":"lib/sound-manager.ts"},{"path":"blocks/pong-01/actions.ts","content":"$55","type":"registry:file","target":"actions/pong-actions.ts"}],"className":"h-[70svh] min-h-80"}]]}]