QBAT

\n\n \n \n\n \n\n \n\n \n \n \n \n \n",[],[158,196],{"_104":205,"_96":206,"_159":207,"_161":160,"_162":142,"_163":208,"_165":119,"_106":209,"_101":210,"_167":181,"_169":211,"_170":22,"_171":-5,"_172":212,"_100":213},"da98f032-930c-11f0-b76f-0224a6c84d84","index.tsx","019952ef-4c74-71fc-8150-5aa0e9405e9d",49,["D",1758034386470],17,"// Declare THREE as global to avoid TypeScript errors\ndeclare const THREE: any;\n\n// Import Bluesky OAuth functionality\nimport { LoginComponent } from \"./login-component.ts\";\nimport { blueskyAuth, type BlueskySession } from \"./bluesky-oauth.ts\";\n\n// UI Template Manager\nclass UITemplateManager {\n static getTemplate(id: string): DocumentFragment {\n const template = document.getElementById(id) as HTMLTemplateElement;\n if (!template) {\n throw new Error(`Template with id \"${id}\" not found`);\n }\n return template.content.cloneNode(true) as DocumentFragment;\n }\n\n static updateElement(container: HTMLElement, selector: string, content: string) {\n const element = container.querySelector(selector);\n if (element) {\n element.textContent = content;\n }\n }\n\n static updateElementHTML(container: HTMLElement, selector: string, content: string) {\n const element = container.querySelector(selector);\n if (element) {\n element.innerHTML = content;\n }\n }\n\n static addEventListeners(container: HTMLElement, listeners: { [selector: string]: (e: Event) => void }) {\n Object.entries(listeners).forEach(([selector, handler]) => {\n const element = container.querySelector(selector);\n if (element) {\n element.addEventListener('click', handler);\n }\n });\n }\n}\n\n// Game configuration\nconst CONFIG = {\n gridSize: 8,\n minGridSize: 4,\n maxGridSize: 16,\n animationDuration: 300,\n cameraPosition: { x: 8, y: 8, z: 8 },\n canvasSize: 600,\n initialMoves: 10,\n movesPerApple: 3,\n idleAnimationSpeed: 0.02,\n colors: {\n sky: 0x87CEEB,\n ambient: 0x404040,\n directional: 0xffffff,\n player: 0xFF6B6B,\n floor: 0x90EE90, // Light green\n wall: 0x8B4513, // Brown\n apple: 0xFF0000, // Red\n goal: 0xFFD700, // Gold\n edge: 0x2F1B14\n }\n};\n\n// Game state\nclass GameState {\n playerX = 1;\n playerY = 1;\n grid: number[][] = []; // 0 = floor, 1 = wall\n apples: { x: number; y: number }[] = [];\n goalX = 6;\n goalY = 6;\n movesRemaining = CONFIG.initialMoves;\n applesCollected = 0;\n isAnimating = false;\n animationStartTime = 0;\n startPosition = { x: 0, y: 0, z: 0 };\n targetPosition = { x: 0, y: 0, z: 0 };\n gameWon = false;\n gameLost = false;\n editorMode = false;\n selectedTileType = 'floor'; // 'floor', 'wall', 'apple', 'player', 'goal'\n gridSize = CONFIG.gridSize;\n\n reset() {\n this.playerX = 1;\n this.playerY = 1;\n this.grid = [];\n this.apples = [];\n this.goalX = Math.max(1, this.gridSize - 2);\n this.goalY = Math.max(1, this.gridSize - 2);\n this.movesRemaining = CONFIG.initialMoves;\n this.applesCollected = 0;\n this.isAnimating = false;\n this.animationStartTime = 0;\n this.startPosition = { x: 0, y: 0, z: 0 };\n this.targetPosition = { x: 0, y: 0, z: 0 };\n this.gameWon = false;\n this.gameLost = false;\n this.editorMode = false;\n this.selectedTileType = 'floor';\n }\n\n setGridSize(newSize: number) {\n if (newSize < CONFIG.minGridSize || newSize > CONFIG.maxGridSize) return false;\n \n const oldSize = this.gridSize;\n this.gridSize = newSize;\n \n // Adjust player and goal positions if they're outside the new grid\n if (this.playerX >= newSize) this.playerX = Math.max(1, newSize - 2);\n if (this.playerY >= newSize) this.playerY = Math.max(1, newSize - 2);\n if (this.goalX >= newSize) this.goalX = Math.max(1, newSize - 2);\n if (this.goalY >= newSize) this.goalY = Math.max(1, newSize - 2);\n \n // Remove apples that are outside the new grid\n this.apples = this.apples.filter(apple => \n apple.x < newSize && apple.y < newSize\n );\n \n // Resize grid array\n const newGrid: number[][] = [];\n for (let x = 0; x < newSize; x++) {\n newGrid[x] = [];\n for (let y = 0; y < newSize; y++) {\n if (x < oldSize && y < oldSize && this.grid[x] && this.grid[x][y] !== undefined) {\n newGrid[x][y] = this.grid[x][y];\n } else {\n newGrid[x][y] = 0; // Default to floor\n }\n }\n }\n this.grid = newGrid;\n \n return true;\n }\n\n toTextRepresentation(): string {\n let result = `QBAT Board State\\n`;\n result += `Grid Size: ${this.gridSize}\\n`;\n result += `Moves: ${this.movesRemaining} | Apples: ${this.applesCollected}\\n`;\n result += `Player: (${this.playerX}, ${this.playerY}) | Goal: (${this.goalX}, ${this.goalY})\\n\\n`;\n \n for (let y = 0; y < this.gridSize; y++) {\n let row = '';\n for (let x = 0; x < this.gridSize; x++) {\n if (x === this.playerX && y === this.playerY) {\n row += '🔴'; // Player\n } else if (x === this.goalX && y === this.goalY) {\n row += '🏆'; // Goal\n } else if (this.apples.some(apple => apple.x === x && apple.y === y)) {\n row += '🍎'; // Apple\n } else if (this.grid[x] && this.grid[x][y] === 1) {\n row += '🧱'; // Wall\n } else {\n row += '🟢'; // Floor\n }\n row += ' ';\n }\n result += row.trim() + '\\n';\n }\n \n return result;\n }\n\n fromTextRepresentation(text: string): boolean {\n try {\n const lines = text.trim().split('\\n');\n if (lines.length < 4) return false;\n\n // Parse header info\n const gridSizeMatch = lines[1].match(/Grid Size: (\\d+)/);\n const movesMatch = lines[2].match(/Moves: (\\d+)/);\n const applesMatch = lines[2].match(/Apples: (\\d+)/);\n const playerMatch = lines[3].match(/Player: \$(\\d+), (\\d+)\$/);\n const goalMatch = lines[3].match(/Goal: \$(\\d+), (\\d+)\$/);\n\n if (!movesMatch || !applesMatch || !playerMatch || !goalMatch) return false;\n\n // Set grid size (default to 8 if not specified for backward compatibility)\n if (gridSizeMatch) {\n const newSize = parseInt(gridSizeMatch[1]);\n if (newSize >= CONFIG.minGridSize && newSize <= CONFIG.maxGridSize) {\n this.setGridSize(newSize);\n }\n }\n\n this.movesRemaining = parseInt(movesMatch[1]);\n this.applesCollected = parseInt(applesMatch[1]);\n this.playerX = parseInt(playerMatch[1]);\n this.playerY = parseInt(playerMatch[2]);\n this.goalX = parseInt(goalMatch[1]);\n this.goalY = parseInt(goalMatch[2]);\n\n // Parse board\n this.grid = [];\n this.apples = [];\n \n // Initialize grid properly\n for (let x = 0; x < this.gridSize; x++) {\n this.grid[x] = [];\n for (let y = 0; y < this.gridSize; y++) {\n this.grid[x][y] = 0; // Default to floor\n }\n }\n \n for (let y = 0; y < this.gridSize; y++) {\n const lineIndex = y + 5; // Skip header lines (line 0: title, line 1: grid size, line 2: moves/apples, line 3: player/goal, line 4: empty)\n if (lineIndex >= lines.length) break;\n \n // Split by spaces and filter out empty strings\n const row = lines[lineIndex].split(' ').filter(item => item.trim() !== '');\n \n for (let x = 0; x < Math.min(this.gridSize, row.length); x++) {\n const emoji = row[x];\n switch (emoji) {\n case '🧱':\n this.grid[x][y] = 1; // Wall\n break;\n case '🍎':\n this.apples.push({ x, y });\n break;\n case '🔴':\n case '🏆':\n case '🟢':\n default:\n this.grid[x][y] = 0; // Floor\n break;\n }\n }\n }\n\n // Reset game state\n this.isAnimating = false;\n this.gameWon = false;\n this.gameLost = false;\n\n return true;\n } catch (error) {\n console.error('Error parsing board state:', error);\n return false;\n }\n }\n\n // Editor methods\n clearBoard() {\n // Initialize empty grid\n for (let x = 0; x < this.gridSize; x++) {\n this.grid[x] = [];\n for (let y = 0; y < this.gridSize; y++) {\n this.grid[x][y] = 0; // All floor\n }\n }\n this.apples = [];\n this.playerX = 1;\n this.playerY = 1;\n this.goalX = Math.max(1, this.gridSize - 2);\n this.goalY = Math.max(1, this.gridSize - 2);\n }\n\n placeTile(x: number, y: number, tileType: string) {\n if (x < 0 || x >= this.gridSize || y < 0 || y >= this.gridSize) return;\n\n switch (tileType) {\n case 'floor':\n this.grid[x][y] = 0;\n // Remove apple if it was here\n this.apples = this.apples.filter(apple => !(apple.x === x && apple.y === y));\n break;\n case 'wall':\n this.grid[x][y] = 1;\n // Remove apple if it was here\n this.apples = this.apples.filter(apple => !(apple.x === x && apple.y === y));\n // Move player/goal if they were here\n if (this.playerX === x && this.playerY === y) {\n this.playerX = 1;\n this.playerY = 1;\n }\n if (this.goalX === x && this.goalY === y) {\n this.goalX = 6;\n this.goalY = 6;\n }\n break;\n case 'apple':\n this.grid[x][y] = 0; // Ensure it's floor\n // Remove existing apple at this position\n this.apples = this.apples.filter(apple => !(apple.x === x && apple.y === y));\n // Add new apple\n this.apples.push({ x, y });\n break;\n case 'player':\n this.grid[x][y] = 0; // Ensure it's floor\n this.playerX = x;\n this.playerY = y;\n break;\n case 'goal':\n this.grid[x][y] = 0; // Ensure it's floor\n this.goalX = x;\n this.goalY = y;\n break;\n }\n }\n\n toggleEditorMode() {\n this.editorMode = !this.editorMode;\n if (this.editorMode) {\n // Reset game state when entering editor\n this.movesRemaining = CONFIG.initialMoves;\n this.applesCollected = 0;\n this.gameWon = false;\n this.gameLost = false;\n this.isAnimating = false;\n }\n }\n}\n\n// 3D Scene manager\nclass Scene3D {\n scene: THREE.Scene;\n camera: THREE.PerspectiveCamera;\n renderer: THREE.WebGLRenderer;\n player: THREE.Mesh;\n floorMeshes: THREE.Mesh[][] = [];\n wallMeshes: THREE.Mesh[][] = [];\n appleMeshes: THREE.Mesh[] = [];\n goalMesh: THREE.Mesh | null = null;\n uiContainer: HTMLElement;\n onTilePlace: ((x: number, y: number) => void) | null = null;\n currentGridSize = CONFIG.gridSize;\n animationTime = 0;\n gameState: GameState | null = null;\n\n constructor(container: HTMLElement) {\n this.scene = new THREE.Scene();\n this.camera = new THREE.PerspectiveCamera(100, 1, 0.1, 2000);\n this.renderer = new THREE.WebGLRenderer({ antialias: true });\n \n this.setupRenderer(container);\n this.setupLighting();\n this.setupCamera();\n this.createPlayer();\n this.createUIOverlay(container);\n this.setupClickHandling();\n }\n\n private setupRenderer(container: HTMLElement) {\n this.renderer.setSize(CONFIG.canvasSize, CONFIG.canvasSize);\n this.renderer.setClearColor(CONFIG.colors.sky);\n this.renderer.shadowMap.enabled = true;\n this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n container.appendChild(this.renderer.domElement);\n }\n\n private createUIOverlay(container: HTMLElement) {\n this.uiContainer = document.createElement(\"div\");\n this.uiContainer.style.position = \"absolute\";\n this.uiContainer.style.top = \"0\";\n this.uiContainer.style.left = \"0\";\n this.uiContainer.style.width = \"100%\";\n this.uiContainer.style.height = \"100%\";\n this.uiContainer.style.pointerEvents = \"none\";\n this.uiContainer.style.fontFamily = \"Arial, sans-serif\";\n this.uiContainer.style.color = \"white\";\n this.uiContainer.style.textShadow = \"2px 2px 4px rgba(0,0,0,0.8)\";\n \n container.style.position = \"relative\";\n container.appendChild(this.uiContainer);\n }\n\n private setupClickHandling() {\n this.renderer.domElement.addEventListener('click', (event) => {\n if (!this.onTilePlace) return;\n\n const rect = this.renderer.domElement.getBoundingClientRect();\n const mouse = new THREE.Vector2();\n mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1;\n mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1;\n\n // Create raycaster\n const raycaster = new THREE.Raycaster();\n raycaster.setFromCamera(mouse, this.camera);\n\n // Create a plane at y=0 for intersection\n const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);\n const intersection = new THREE.Vector3();\n raycaster.ray.intersectPlane(plane, intersection);\n\n // Convert world coordinates to grid coordinates\n const gridX = Math.round(intersection.x + this.currentGridSize / 2);\n const gridY = Math.round(intersection.z + this.currentGridSize / 2);\n\n // Check if click is within grid bounds\n if (gridX >= 0 && gridX < this.currentGridSize && gridY >= 0 && gridY < this.currentGridSize) {\n this.onTilePlace(gridX, gridY);\n }\n });\n }\n\n private setupLighting() {\n const ambientLight = new THREE.AmbientLight(CONFIG.colors.ambient, 0.6);\n this.scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(CONFIG.colors.directional, 0.8);\n directionalLight.position.set(5, 10, 5); // Light from diagonal for isometric view\n directionalLight.castShadow = true;\n this.scene.add(directionalLight);\n }\n\n private setupCamera() {\n // Initial camera position will be set dynamically in updateCameraPosition()\n this.camera.lookAt(0, 0, 0);\n this.camera.up.set(0, 1, 0); // Standard up vector for isometric view\n }\n\n private createPlayer() {\n const geometry = new THREE.SphereGeometry(0.3, 12, 8);\n const material = new THREE.MeshPhongMaterial({ \n color: CONFIG.colors.player,\n shininess: 100,\n specular: 0x222222\n });\n this.player = new THREE.Mesh(geometry, material);\n this.player.castShadow = true;\n this.scene.add(this.player);\n }\n\n createGrid(grid: number[][], gridSize: number) {\n this.currentGridSize = gridSize;\n const floorGeometry = new THREE.BoxGeometry(1, 0.1, 1);\n const wallGeometry = new THREE.BoxGeometry(1, 0.3, 1); // Shorter walls for isometric view\n const floorMaterial = new THREE.MeshPhongMaterial({ \n color: CONFIG.colors.floor,\n shininess: 10,\n specular: 0x111111\n });\n const wallMaterial = new THREE.MeshPhongMaterial({ \n color: CONFIG.colors.wall,\n shininess: 5,\n specular: 0x000000\n });\n\n // Create floor and wall meshes\n for (let x = 0; x < gridSize; x++) {\n this.floorMeshes[x] = [];\n this.wallMeshes[x] = [];\n for (let y = 0; y < gridSize; y++) {\n const cellType = grid[x][y];\n \n if (cellType === 0) { // Floor\n const floor = new THREE.Mesh(floorGeometry, floorMaterial);\n floor.position.set(x - gridSize/2, -0.05, y - gridSize/2);\n floor.receiveShadow = true;\n this.scene.add(floor);\n this.floorMeshes[x][y] = floor;\n } else if (cellType === 1) { // Wall\n const wall = new THREE.Mesh(wallGeometry, wallMaterial);\n wall.position.set(x - gridSize/2, 0.15, y - gridSize/2);\n this.scene.add(wall);\n this.wallMeshes[x][y] = wall;\n }\n }\n }\n }\n\n createApples(apples: { x: number; y: number }[], gridSize: number) {\n const appleGeometry = new THREE.SphereGeometry(0.2, 8, 6);\n const appleMaterial = new THREE.MeshPhongMaterial({ \n color: CONFIG.colors.apple,\n shininess: 50,\n specular: 0x444444\n });\n\n apples.forEach(apple => {\n const appleMesh = new THREE.Mesh(appleGeometry, appleMaterial);\n appleMesh.position.set(apple.x - gridSize/2, 0.2, apple.y - gridSize/2);\n appleMesh.castShadow = true;\n this.scene.add(appleMesh);\n this.appleMeshes.push(appleMesh);\n });\n }\n\n createGoal(goalX: number, goalY: number, gridSize: number) {\n const goalGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.1, 8);\n const goalMaterial = new THREE.MeshPhongMaterial({ \n color: CONFIG.colors.goal,\n shininess: 200,\n specular: 0x666666\n });\n \n this.goalMesh = new THREE.Mesh(goalGeometry, goalMaterial);\n this.goalMesh.position.set(goalX - gridSize/2, 0.1, goalY - gridSize/2);\n this.goalMesh.castShadow = true;\n this.scene.add(this.goalMesh);\n }\n\n removeApple(index: number) {\n if (index >= 0 && index < this.appleMeshes.length) {\n this.scene.remove(this.appleMeshes[index]);\n this.appleMeshes.splice(index, 1);\n }\n }\n\n clearScene() {\n // Remove all meshes from scene\n this.floorMeshes.forEach(row => {\n row.forEach(mesh => {\n if (mesh) this.scene.remove(mesh);\n });\n });\n this.wallMeshes.forEach(row => {\n row.forEach(mesh => {\n if (mesh) this.scene.remove(mesh);\n });\n });\n this.appleMeshes.forEach(mesh => {\n this.scene.remove(mesh);\n });\n if (this.goalMesh) {\n this.scene.remove(this.goalMesh);\n }\n\n // Clear arrays\n this.floorMeshes = [];\n this.wallMeshes = [];\n this.appleMeshes = [];\n this.goalMesh = null;\n }\n\n updatePlayerPosition(x: number, y: number, gridSize: number) {\n this.player.position.set(\n x - gridSize/2, \n 0.2, \n y - gridSize/2\n );\n }\n\n updateUIOverlay(gameState: GameState, onRestart: () => void, onCopy: () => void, onPaste: () => void, onToggleEditor: () => void, onClearBoard: () => void, onStartGame: () => void, onShareBluesky?: () => void, isLoggedIn?: boolean) {\n // Clear container\n this.uiContainer.innerHTML = '';\n \n if (gameState.editorMode) {\n // Use editor template\n const editorTemplate = UITemplateManager.getTemplate(\"editor-ui\");\n this.uiContainer.appendChild(editorTemplate);\n \n // Update dynamic content\n UITemplateManager.updateElement(this.uiContainer, \"#selected-tile-type\", gameState.selectedTileType);\n UITemplateManager.updateElement(this.uiContainer, \"#player-pos\", `${gameState.playerX}, ${gameState.playerY}`);\n UITemplateManager.updateElement(this.uiContainer, \"#goal-pos\", `${gameState.goalX}, ${gameState.goalY}`);\n UITemplateManager.updateElement(this.uiContainer, \"#grid-size-display\", gameState.gridSize.toString());\n \n // Update tile button selection\n this.updateTileButtonSelection(gameState.selectedTileType);\n \n // Add event listeners\n UITemplateManager.addEventListeners(this.uiContainer, {\n \"#start-game-btn\": () => onStartGame(),\n \"#copy-btn\": () => onCopy(),\n \"#paste-btn\": () => onPaste(),\n \"#clear-btn\": () => onClearBoard(),\n \"#editor-btn\": () => onToggleEditor(),\n \"#grid-size-minus\": () => document.dispatchEvent(new CustomEvent('gridSizeChange', { detail: { delta: -1 } })),\n \"#grid-size-plus\": () => document.dispatchEvent(new CustomEvent('gridSizeChange', { detail: { delta: 1 } }))\n });\n \n // Add tile selection listeners\n this.addTileSelectionListeners();\n \n } else {\n // Use play template\n const playTemplate = UITemplateManager.getTemplate(\"play-ui\");\n this.uiContainer.appendChild(playTemplate);\n \n // Update dynamic content\n UITemplateManager.updateElement(this.uiContainer, \"#player-position\", `${gameState.playerX}, ${gameState.playerY}`);\n UITemplateManager.updateElement(this.uiContainer, \"#moves-remaining\", gameState.movesRemaining.toString());\n UITemplateManager.updateElement(this.uiContainer, \"#apples-collected\", gameState.applesCollected.toString());\n \n const gameMessage = gameState.gameWon ? \"🎉 You Win! You reached the goal!\" : \n gameState.gameLost ? \"💀 Game Over! You ran out of moves!\" : \n \"Find the golden goal!\";\n UITemplateManager.updateElement(this.uiContainer, \"#game-message\", gameMessage);\n \n // Add event listeners\n const eventListeners: { [selector: string]: (e: Event) => void } = {\n \"#copy-btn\": () => onCopy(),\n \"#paste-btn\": () => onPaste(),\n \"#restart-btn\": () => onRestart(),\n \"#editor-btn\": () => onToggleEditor()\n };\n\n // Add share button listener if logged in and callback provided\n if (isLoggedIn && onShareBluesky) {\n eventListeners[\"#share-bluesky-btn\"] = () => onShareBluesky();\n }\n\n UITemplateManager.addEventListeners(this.uiContainer, eventListeners);\n\n // Show/hide share button based on login status\n const shareBtn = this.uiContainer.querySelector(\"#share-bluesky-btn\") as HTMLElement;\n if (shareBtn) {\n shareBtn.style.display = isLoggedIn ? \"block\" : \"none\";\n }\n }\n }\n\n private updateTileButtonSelection(selectedTileType: string) {\n const tileButtons = this.uiContainer.querySelectorAll('.tile-btn');\n tileButtons.forEach(btn => {\n btn.classList.remove('selected');\n if (btn.id === `tile-${selectedTileType}`) {\n btn.classList.add('selected');\n }\n });\n }\n\n private addTileSelectionListeners() {\n const tileButtons = this.uiContainer.querySelectorAll('.tile-btn');\n tileButtons.forEach(btn => {\n btn.addEventListener('click', (e) => {\n e.preventDefault();\n e.stopPropagation();\n const tileType = (e.target as HTMLElement).id.replace('tile-', '');\n document.dispatchEvent(new CustomEvent('tileSelect', { detail: { tileType } }));\n });\n });\n }\n\n render() {\n this.animationTime += CONFIG.idleAnimationSpeed;\n \n // Update idle animations\n this.updateIdleAnimations();\n \n // Dynamic camera positioning based on grid size\n this.updateCameraPosition();\n \n this.camera.lookAt(0, 0, 0);\n this.renderer.render(this.scene, this.camera);\n }\n\n private updateCameraPosition() {\n // Calculate dynamic camera position based on grid size\n // Much more zoomed in by default\n const baseDistance = 4;\n const scaleFactor = this.currentGridSize / CONFIG.gridSize;\n const distance = baseDistance * scaleFactor;\n \n // Maintain isometric angle but adjust distance\n const cameraX = distance;\n const cameraY = distance;\n const cameraZ = distance;\n \n this.camera.position.set(cameraX, cameraY, cameraZ);\n \n // Also update lighting position to match the camera distance\n const lightDistance = 3 * scaleFactor;\n const directionalLight = this.scene.children.find(child => child.type === 'DirectionalLight');\n if (directionalLight) {\n directionalLight.position.set(lightDistance, 8, lightDistance);\n }\n }\n\n private updateIdleAnimations() {\n // Player idle animation (gentle bobbing)\n if (this.player && !this.gameState?.isAnimating) {\n const bobOffset = Math.sin(this.animationTime * 2) * 0.1;\n this.player.position.y = 0.2 + bobOffset;\n }\n\n // Apple idle animations (gentle rotation and floating)\n this.appleMeshes.forEach((apple, index) => {\n const rotationSpeed = 0.5 + (index * 0.1); // Different speeds for variety\n const floatOffset = Math.sin(this.animationTime * 1.5 + index) * 0.05;\n \n apple.rotation.y += rotationSpeed * CONFIG.idleAnimationSpeed;\n apple.position.y = 0.2 + floatOffset;\n });\n\n // Goal idle animation (gentle pulsing and rotation)\n if (this.goalMesh) {\n const pulseScale = 1 + Math.sin(this.animationTime * 3) * 0.1;\n this.goalMesh.scale.set(pulseScale, pulseScale, pulseScale);\n this.goalMesh.rotation.y += 0.3 * CONFIG.idleAnimationSpeed;\n }\n }\n}\n\n// Animation manager\nclass AnimationManager {\n private gameState: GameState;\n private scene3D: Scene3D;\n\n constructor(gameState: GameState, scene3D: Scene3D) {\n this.gameState = gameState;\n this.scene3D = scene3D;\n }\n\n animateMove(newX: number, newY: number): boolean {\n if (this.gameState.isAnimating) return false;\n\n this.gameState.startPosition = {\n x: this.gameState.playerX - this.gameState.gridSize/2,\n y: 0.2,\n z: this.gameState.playerY - this.gameState.gridSize/2\n };\n\n this.gameState.targetPosition = {\n x: newX - this.gameState.gridSize/2,\n y: 0.2,\n z: newY - this.gameState.gridSize/2\n };\n\n this.gameState.isAnimating = true;\n this.gameState.animationStartTime = Date.now();\n\n return true;\n }\n\n updateAnimation() {\n if (!this.gameState.isAnimating) return;\n\n const elapsed = Date.now() - this.gameState.animationStartTime;\n const progress = Math.min(elapsed / CONFIG.animationDuration, 1);\n const easeProgress = 1 - Math.pow(1 - progress, 3);\n\n this.updateMoveAnimation(progress, easeProgress);\n\n if (progress >= 1) {\n this.finishAnimation();\n }\n }\n\n private updateMoveAnimation(progress: number, easeProgress: number) {\n const currentX = this.gameState.startPosition.x + (this.gameState.targetPosition.x - this.gameState.startPosition.x) * easeProgress;\n const currentZ = this.gameState.startPosition.z + (this.gameState.targetPosition.z - this.gameState.startPosition.z) * easeProgress;\n const hopHeight = Math.sin(progress * Math.PI) * 0.2;\n const currentY = 0.2 + hopHeight;\n \n this.scene3D.player.position.set(currentX, currentY, currentZ);\n \n const bounceScale = 1 + Math.sin(progress * Math.PI * 2) * 0.1;\n this.scene3D.player.scale.set(bounceScale, bounceScale, bounceScale);\n }\n\n private finishAnimation() {\n this.gameState.isAnimating = false;\n this.scene3D.player.scale.set(1, 1, 1);\n this.scene3D.player.position.set(\n this.gameState.targetPosition.x, \n this.gameState.targetPosition.y, \n this.gameState.targetPosition.z\n );\n }\n}\n\n// Main game class\nclass QBATGame {\n private gameState = new GameState();\n private scene3D: Scene3D;\n private animationManager: AnimationManager;\n private loginComponent: LoginComponent | null = null;\n private blueskySession: BlueskySession | null = null;\n\n constructor() {\n this.initializeGame();\n this.setupEventListeners();\n this.startGameLoop();\n }\n\n private initializeGame() {\n const root = document.getElementById(\"root\");\n if (!root) throw new Error(\"Root element not found\");\n\n this.createUI(root);\n this.generateGrid();\n this.generateApples();\n this.scene3D = new Scene3D(root.querySelector(\".canvas-container\")!);\n this.scene3D.gameState = this.gameState;\n this.scene3D.createGrid(this.gameState.grid, this.gameState.gridSize);\n this.scene3D.createApples(this.gameState.apples, this.gameState.gridSize);\n this.scene3D.createGoal(this.gameState.goalX, this.gameState.goalY, this.gameState.gridSize);\n this.animationManager = new AnimationManager(this.gameState, this.scene3D);\n this.updateUI();\n }\n\n private createUI(root: HTMLElement) {\n const gameContainer = document.createElement(\"div\");\n gameContainer.className = \"game-container\";\n\n // Use template for instructions\n const instructionsTemplate = UITemplateManager.getTemplate(\"game-instructions\");\n gameContainer.appendChild(instructionsTemplate);\n\n const canvasContainer = document.createElement(\"div\");\n canvasContainer.className = \"canvas-container\";\n\n gameContainer.appendChild(canvasContainer);\n root.appendChild(gameContainer);\n\n // Create login component container\n const loginContainer = document.createElement(\"div\");\n loginContainer.id = \"login-container\";\n gameContainer.appendChild(loginContainer);\n\n // Initialize login component\n this.loginComponent = new LoginComponent(loginContainer);\n this.loginComponent.onLogin((session) => {\n this.blueskySession = session;\n this.showMessage(`Welcome, @${session.user.handle}!`, \"success\");\n this.updateUI(); // Refresh UI to show share button\n });\n this.loginComponent.onLogout(() => {\n this.blueskySession = null;\n this.showMessage(\"Logged out successfully\", \"success\");\n this.updateUI(); // Refresh UI to hide share button\n });\n }\n\n private generateGrid() {\n for (let x = 0; x < this.gameState.gridSize; x++) {\n this.gameState.grid[x] = [];\n for (let y = 0; y < this.gameState.gridSize; y++) {\n // Create a simple maze-like pattern with walls\n if (x === 0 || x === this.gameState.gridSize - 1 || y === 0 || y === this.gameState.gridSize - 1) {\n this.gameState.grid[x][y] = 1; // Wall on borders\n } else if (Math.random() < 0.2) {\n this.gameState.grid[x][y] = 1; // Random walls\n } else {\n this.gameState.grid[x][y] = 0; // Floor\n }\n }\n }\n \n // Ensure start and goal positions are floor\n this.gameState.grid[this.gameState.playerX][this.gameState.playerY] = 0;\n this.gameState.grid[this.gameState.goalX][this.gameState.goalY] = 0;\n }\n\n private generateApples() {\n const numApples = Math.min(5, Math.floor(this.gameState.gridSize * this.gameState.gridSize / 10));\n for (let i = 0; i < numApples; i++) {\n let x, y;\n do {\n x = Math.floor(Math.random() * this.gameState.gridSize);\n y = Math.floor(Math.random() * this.gameState.gridSize);\n } while (\n this.gameState.grid[x][y] !== 0 || // Not on floor\n (x === this.gameState.playerX && y === this.gameState.playerY) || // Not on player\n (x === this.gameState.goalX && y === this.gameState.goalY) || // Not on goal\n this.gameState.apples.some(apple => apple.x === x && apple.y === y) // Not on existing apple\n );\n \n this.gameState.apples.push({ x, y });\n }\n }\n\n private canMoveTo(newX: number, newY: number): boolean {\n if (newX < 0 || newX >= this.gameState.gridSize || newY < 0 || newY >= this.gameState.gridSize) {\n return false;\n }\n\n return this.gameState.grid[newX][newY] === 0; // Can only move to floor tiles\n }\n\n private handleInput(e: KeyboardEvent) {\n if (this.gameState.gameWon || this.gameState.gameLost || this.gameState.editorMode) return;\n \n if ([\"ArrowUp\", \"ArrowDown\", \"ArrowLeft\", \"ArrowRight\"].includes(e.key)) {\n e.preventDefault();\n }\n\n let newX = this.gameState.playerX;\n let newY = this.gameState.playerY;\n\n switch (e.key) {\n case \"ArrowUp\": newY = this.gameState.playerY - 1; break;\n case \"ArrowDown\": newY = this.gameState.playerY + 1; break;\n case \"ArrowLeft\": newX = this.gameState.playerX - 1; break;\n case \"ArrowRight\": newX = this.gameState.playerX + 1; break;\n default: return;\n }\n\n if (this.canMoveTo(newX, newY) && this.gameState.movesRemaining > 0) {\n if (this.animationManager.animateMove(newX, newY)) {\n this.gameState.playerX = newX;\n this.gameState.playerY = newY;\n this.gameState.movesRemaining--;\n \n // Check for apple collection\n this.checkAppleCollection();\n \n // Check for goal reached\n this.checkGoalReached();\n \n // Check for game over\n if (this.gameState.movesRemaining <= 0 && !this.gameState.gameWon) {\n this.gameState.gameLost = true;\n }\n \n this.updateUI();\n }\n }\n }\n\n private checkAppleCollection() {\n const appleIndex = this.gameState.apples.findIndex(\n apple => apple.x === this.gameState.playerX && apple.y === this.gameState.playerY\n );\n \n if (appleIndex !== -1) {\n // Remove apple from game state\n this.gameState.apples.splice(appleIndex, 1);\n this.gameState.applesCollected++;\n this.gameState.movesRemaining += CONFIG.movesPerApple;\n \n // Remove apple from scene\n this.scene3D.removeApple(appleIndex);\n }\n }\n\n private checkGoalReached() {\n if (this.gameState.playerX === this.gameState.goalX && this.gameState.playerY === this.gameState.goalY) {\n this.gameState.gameWon = true;\n \n // Post to Bluesky if logged in\n if (this.blueskySession) {\n this.postGameResultToBluesky();\n }\n }\n }\n\n private async postGameResultToBluesky() {\n if (!this.blueskySession) return;\n\n try {\n const score = this.gameState.applesCollected * 10 + (CONFIG.initialMoves - this.gameState.movesRemaining);\n const level = `Level ${this.gameState.gridSize}x${this.gameState.gridSize}`;\n const moves = CONFIG.initialMoves - this.gameState.movesRemaining;\n \n await blueskyAuth.postGameResult(score, level, moves);\n this.showMessage(\"Game result posted to Bluesky! 🎉\", \"success\");\n } catch (error) {\n console.error(\"Failed to post to Bluesky:\", error);\n this.showMessage(\"Failed to post to Bluesky\", \"error\");\n }\n }\n\n private updateUI() {\n this.scene3D.updateUIOverlay(\n this.gameState, \n () => this.restartGame(),\n () => this.copyBoardState(),\n () => this.pasteBoardState(),\n () => this.toggleEditorMode(),\n () => this.clearBoard(),\n () => this.startGameFromEditor(),\n () => this.postGameResultToBluesky(),\n this.blueskySession !== null\n );\n this.scene3D.updatePlayerPosition(this.gameState.playerX, this.gameState.playerY, this.gameState.gridSize);\n \n // Set up tile placement callback for editor mode\n if (this.gameState.editorMode) {\n this.scene3D.onTilePlace = (x: number, y: number) => this.placeTile(x, y);\n } else {\n this.scene3D.onTilePlace = null;\n }\n }\n\n private restartGame() {\n // Reset game state\n this.gameState.reset();\n \n // Clear and recreate scene\n this.scene3D.clearScene();\n this.generateGrid();\n this.generateApples();\n this.scene3D.createGrid(this.gameState.grid, this.gameState.gridSize);\n this.scene3D.createApples(this.gameState.apples, this.gameState.gridSize);\n this.scene3D.createGoal(this.gameState.goalX, this.gameState.goalY, this.gameState.gridSize);\n \n // Update UI\n this.updateUI();\n }\n\n private async copyBoardState() {\n try {\n const boardText = this.gameState.toTextRepresentation();\n await navigator.clipboard.writeText(boardText);\n \n // Show feedback\n this.showMessage(\"Board state copied to clipboard!\", \"success\");\n } catch (error) {\n console.error('Failed to copy board state:', error);\n this.showMessage(\"Failed to copy board state\", \"error\");\n }\n }\n\n private async pasteBoardState() {\n try {\n const clipboardText = await navigator.clipboard.readText();\n \n if (this.gameState.fromTextRepresentation(clipboardText)) {\n // Clear and recreate scene with new state\n this.scene3D.clearScene();\n this.scene3D.createGrid(this.gameState.grid, this.gameState.gridSize);\n this.scene3D.createApples(this.gameState.apples, this.gameState.gridSize);\n this.scene3D.createGoal(this.gameState.goalX, this.gameState.goalY, this.gameState.gridSize);\n \n // Update UI\n this.updateUI();\n \n this.showMessage(\"Board state loaded successfully!\", \"success\");\n } else {\n this.showMessage(\"Invalid board state format\", \"error\");\n }\n } catch (error) {\n console.error('Failed to paste board state:', error);\n this.showMessage(\"Failed to paste board state\", \"error\");\n }\n }\n\n private showMessage(message: string, type: \"success\" | \"error\") {\n // Create temporary message overlay\n const messageDiv = document.createElement(\"div\");\n messageDiv.style.position = \"absolute\";\n messageDiv.style.top = \"50%\";\n messageDiv.style.left = \"50%\";\n messageDiv.style.transform = \"translate(-50%, -50%)\";\n messageDiv.style.background = type === \"success\" ? \"#28a745\" : \"#dc3545\";\n messageDiv.style.color = \"white\";\n messageDiv.style.padding = \"12px 24px\";\n messageDiv.style.borderRadius = \"8px\";\n messageDiv.style.fontSize = \"16px\";\n messageDiv.style.fontWeight = \"bold\";\n messageDiv.style.zIndex = \"1000\";\n messageDiv.style.pointerEvents = \"none\";\n messageDiv.textContent = message;\n \n this.scene3D.uiContainer.appendChild(messageDiv);\n \n // Remove message after 2 seconds\n setTimeout(() => {\n if (messageDiv.parentNode) {\n messageDiv.parentNode.removeChild(messageDiv);\n }\n }, 2000);\n }\n\n private toggleEditorMode() {\n this.gameState.toggleEditorMode();\n this.updateUI();\n }\n\n private clearBoard() {\n this.gameState.clearBoard();\n this.scene3D.clearScene();\n this.scene3D.createGrid(this.gameState.grid, this.gameState.gridSize);\n this.scene3D.createApples(this.gameState.apples, this.gameState.gridSize);\n this.scene3D.createGoal(this.gameState.goalX, this.gameState.goalY, this.gameState.gridSize);\n this.updateUI();\n }\n\n private placeTile(x: number, y: number) {\n this.gameState.placeTile(x, y, this.gameState.selectedTileType);\n this.scene3D.clearScene();\n this.scene3D.createGrid(this.gameState.grid, this.gameState.gridSize);\n this.scene3D.createApples(this.gameState.apples, this.gameState.gridSize);\n this.scene3D.createGoal(this.gameState.goalX, this.gameState.goalY, this.gameState.gridSize);\n this.updateUI();\n }\n\n private startGameFromEditor() {\n this.gameState.editorMode = false;\n this.gameState.movesRemaining = CONFIG.initialMoves;\n this.gameState.applesCollected = 0;\n this.gameState.gameWon = false;\n this.gameState.gameLost = false;\n this.updateUI();\n }\n\n private changeGridSize(delta: number) {\n const newSize = this.gameState.gridSize + delta;\n if (this.gameState.setGridSize(newSize)) {\n // Clear and recreate scene with new grid size\n this.scene3D.clearScene();\n this.scene3D.createGrid(this.gameState.grid, this.gameState.gridSize);\n this.scene3D.createApples(this.gameState.apples, this.gameState.gridSize);\n this.scene3D.createGoal(this.gameState.goalX, this.gameState.goalY, this.gameState.gridSize);\n this.updateUI();\n }\n }\n\n private setupEventListeners() {\n document.addEventListener(\"keydown\", (e) => this.handleInput(e));\n \n // Listen for tile selection events from the UI\n document.addEventListener('tileSelect', (e: any) => {\n if (this.gameState.editorMode) {\n this.gameState.selectedTileType = e.detail.tileType;\n this.updateUI();\n }\n });\n\n // Listen for grid size change events\n document.addEventListener('gridSizeChange', (e: any) => {\n if (this.gameState.editorMode) {\n this.changeGridSize(e.detail.delta);\n }\n });\n }\n\n private startGameLoop() {\n const animate = () => {\n requestAnimationFrame(animate);\n this.animationManager.updateAnimation();\n this.scene3D.render();\n };\n animate();\n }\n}\n\n// Initialize game when DOM is ready\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n new QBATGame();\n});",[],[158,206],{"_104":215,"_96":216,"_159":217,"_161":160,"_162":142,"_163":218,"_165":119,"_106":219,"_101":164,"_167":181,"_169":220,"_170":22,"_171":-5,"_172":221,"_100":222},"c0e68da2-930c-11f0-ba2f-0224a6c84d84","login-component.ts","4789c154-930c-11f0-83dd-0224a6c84d84",47,["D",1758034343352],"// Login component for Bluesky OAuth integration\nimport { blueskyAuth, type BlueskySession } from \"./bluesky-oauth.ts\";\n\nexport class LoginComponent {\n private container: HTMLElement;\n private onLoginCallback: ((session: BlueskySession) => void) | null = null;\n private onLogoutCallback: (() => void) | null = null;\n\n constructor(container: HTMLElement) {\n this.container = container;\n this.setupEventListeners();\n this.render();\n }\n\n private setupEventListeners() {\n blueskyAuth.onLogin((session) => {\n this.render();\n this.onLoginCallback?.(session);\n });\n\n blueskyAuth.onLogout(() => {\n this.render();\n this.onLogoutCallback?.();\n });\n }\n\n private render() {\n const isLoggedIn = blueskyAuth.isLoggedIn();\n const session = blueskyAuth.getSession();\n\n if (isLoggedIn && session) {\n this.renderLoggedInState(session);\n } else {\n this.renderLoggedOutState();\n }\n }\n\n private renderLoggedInState(session: BlueskySession) {\n this.container.innerHTML = `\n

\n ${session.user.avatar ? \n ` $\"${session.user.handle}\"$ ` : \n `

${session.user.handle.charAt(0).toUpperCase()}

`\n }\n

@${session.user.handle}

\n ${session.user.displayName ? `

${session.user.displayName}

` : ''}\n

\n \n

\n `;\n\n // Add logout event listener\n const logoutBtn = this.container.querySelector(\"#logout-btn\");\n if (logoutBtn) {\n logoutBtn.addEventListener(\"click\", () => {\n blueskyAuth.logout();\n });\n }\n }\n\n private renderLoggedOutState() {\n this.container.innerHTML = `\n

\n \n

\n `;\n\n // Add form event listener\n const form = this.container.querySelector(\"#login-form\") as HTMLFormElement;\n if (form) {\n form.addEventListener(\"submit\", async (e) => {\n e.preventDefault();\n const formData = new FormData(form);\n const username = formData.get(\"username\") as string;\n \n if (username) {\n try {\n const submitBtn = form.querySelector(\"button[type='submit']\") as HTMLButtonElement;\n submitBtn.textContent = \"Logging in...\";\n submitBtn.disabled = true;\n \n await blueskyAuth.login(username);\n } catch (error) {\n console.error(\"Login error:\", error);\n this.showError(error instanceof Error ? error.message : \"Login failed\");\n \n const submitBtn = form.querySelector(\"button[type='submit']\") as HTMLButtonElement;\n submitBtn.textContent = \"Login\";\n submitBtn.disabled = false;\n }\n }\n });\n }\n }\n\n private showError(message: string) {\n // Remove existing error messages\n const existingError = this.container.querySelector(\".error-message\");\n if (existingError) {\n existingError.remove();\n }\n\n // Create new error message\n const errorDiv = document.createElement(\"div\");\n errorDiv.className = \"error-message\";\n errorDiv.textContent = message;\n errorDiv.style.color = \"#dc3545\";\n errorDiv.style.fontSize = \"14px\";\n errorDiv.style.marginTop = \"8px\";\n errorDiv.style.padding = \"8px\";\n errorDiv.style.backgroundColor = \"#f8d7da\";\n errorDiv.style.border = \"1px solid #f5c6cb\";\n errorDiv.style.borderRadius = \"4px\";\n\n const form = this.container.querySelector(\"#login-form\");\n if (form) {\n form.appendChild(errorDiv);\n }\n\n // Auto-remove error after 5 seconds\n setTimeout(() => {\n if (errorDiv.parentNode) {\n errorDiv.parentNode.removeChild(errorDiv);\n }\n }, 5000);\n }\n\n onLogin(callback: (session: BlueskySession) => void): void {\n this.onLoginCallback = callback;\n }\n\n onLogout(callback: () => void): void {\n this.onLogoutCallback = callback;\n }\n\n isLoggedIn(): boolean {\n return blueskyAuth.isLoggedIn();\n }\n\n getSession(): BlueskySession | null {\n return blueskyAuth.getSession();\n }\n}\n",[],[158,216],{"_104":224,"_96":225,"_159":226,"_161":160,"_162":142,"_163":227,"_165":119,"_106":228,"_101":180,"_167":190,"_169":229,"_170":22,"_171":-5,"_172":230,"_100":231},"53ec079a-930c-11f0-82cd-0224a6c84d84","style.css","019952ef-4c74-71fc-8150-5f3cdf824175",34,["D",1758034160526],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n background-color: #f5f5f5;\n margin: 0;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .game-container {\n text-align: center;\n background: white;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n }\n \n .instructions h1 {\n color: #2c3e50;\n margin-bottom: 10px;\n font-size: 2.5em;\n }\n \n .instructions p {\n margin: 8px 0;\n color: #666;\n }\n \n .canvas-container {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n position: relative;\n }\n \n .canvas-container canvas {\n border-radius: 8px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);\n }\n \n button {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n }\n \n button:hover {\n background-color: #357ae8;\n }\n\n /* Button variants */\n .btn {\n border: none;\n padding: 8px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n pointer-events: auto;\n transition: all 0.2s ease;\n }\n\n .btn-primary { background-color: #4a90e2; color: white; }\n .btn-success { background-color: #28a745; color: white; }\n .btn-info { background-color: #17a2b8; color: white; }\n .btn-warning { background-color: #ffc107; color: black; }\n .btn-danger { background-color: #dc3545; color: white; }\n .btn-secondary { background-color: #6c757d; color: white; }\n\n .btn:hover { opacity: 0.9; transform: translateY(-1px); }\n\n /* Tile buttons */\n .tile-btn {\n border: 2px solid #ccc;\n padding: 8px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n pointer-events: auto;\n transition: all 0.2s ease;\n }\n\n .tile-btn.selected {\n border-color: #000;\n transform: scale(1.05);\n }\n\n .btn-floor { background-color: #90EE90; color: black; }\n .btn-wall { background-color: #8B4513; color: white; }\n .btn-apple { background-color: #FF0000; color: white; }\n .btn-player { background-color: #FF6B6B; color: white; }\n .btn-goal { background-color: #FFD700; color: black; }\n\n /* Login component styles */\n .login-container {\n position: absolute;\n top: 20px;\n right: 20px;\n background: rgba(255, 255, 255, 0.95);\n border-radius: 8px;\n padding: 16px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n backdrop-filter: blur(10px);\n z-index: 1000;\n min-width: 280px;\n }\n\n .login-container.logged-out {\n max-width: 320px;\n }\n\n .login-container.logged-in {\n max-width: 300px;\n }\n\n .login-form h3 {\n margin: 0 0 8px 0;\n color: #2c3e50;\n font-size: 18px;\n }\n\n .login-form p {\n margin: 0 0 16px 0;\n color: #666;\n font-size: 14px;\n }\n\n .input-group {\n display: flex;\n gap: 8px;\n margin-bottom: 8px;\n }\n\n .form-input {\n flex: 1;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n }\n\n .form-input:focus {\n outline: none;\n border-color: #4a90e2;\n box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);\n }\n\n .login-help {\n margin-top: 8px;\n }\n\n .login-help small {\n color: #888;\n font-size: 12px;\n }\n\n .user-info {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 12px;\n }\n\n .user-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n overflow: hidden;\n flex-shrink: 0;\n }\n\n .avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .avatar-placeholder {\n width: 100%;\n height: 100%;\n background: #4a90e2;\n color: white;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n font-size: 16px;\n }\n\n .user-details {\n flex: 1;\n min-width: 0;\n }\n\n .user-handle {\n font-weight: bold;\n color: #2c3e50;\n font-size: 14px;\n }\n\n .user-display-name {\n color: #666;\n font-size: 12px;\n margin-top: 2px;\n }\n\n .btn-sm {\n padding: 6px 12px;\n font-size: 12px;\n }\n\n .error-message {\n animation: slideIn 0.3s ease-out;\n }\n\n @keyframes slideIn {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }",[],[158,225],[158],{"_104":234,"_96":235,"_159":236,"_161":-5,"_162":142,"_163":164,"_165":119,"_106":237,"_101":32,"_167":190,"_169":238,"_170":22,"_171":-5,"_172":239,"_100":240},"b71edae8-9309-11f0-aa89-0224a6c84d84",".vtignore","019952ef-4c74-71fc-8150-66dcad26dd70",["D",1758033038456],".git\n.DS_Store\nnode_modules\nvendor",[],[235],{"_104":242,"_96":243,"_159":244,"_161":-5,"_162":142,"_163":245,"_165":119,"_106":246,"_101":247,"_167":190,"_169":248,"_170":22,"_171":-5,"_172":249,"_100":250},"0acf46ee-930c-11f0-94ea-0224a6c84d84","BlueSkyOAuthGuide.md","8463e786-930b-11f0-9249-0224a6c84d84",29,["D",1758034037859],2,"Here's a [Val](val.town) which describes the minimum neccessary code for client side login\n\n```tsx\n/** @jsxImportSource https://esm.sh/react@19.0.0 */\nimport { XRPC } from \"npm:@atcute/client@2.0.8\";\nimport {\n configureOAuth,\n createAuthorizationUrl,\n finalizeAuthorization,\n getSession,\n OAuthUserAgent,\n resolveFromIdentity,\n} from \"npm:@atcute/oauth-browser-client@1.0.15\";\nimport { Hono } from \"npm:hono@4.7.2\";\nimport React, { useActionState, useEffect, useRef, useState } from \"npm:react\";\nimport { createRoot } from \"npm:react-dom/client\";\n\nconst [, , username, valname] = new URL(import.meta.url).pathname.split(\"/\").map(s => s.toLowerCase());\nconst url = `https://${username}-${valname}.web.val.run`;\n\nconst clientMetadata = {\n client_id: url + \"/client-metadata.json\",\n client_uri: url,\n logo_uri: url + \"/favicon.svg\",\n redirect_uris: [url],\n application_type: \"web\",\n client_name: \"Example Browser App\",\n dpop_bound_access_tokens: true,\n grant_types: [\"authorization_code\", \"refresh_token\"],\n response_types: [\"code\"],\n scope: \"atproto transition:chat.bsky transition:generic\",\n token_endpoint_auth_method: \"none\",\n};\n\nconst useAtCute = () => {\n const [state, setState] = useState<{ agent: OAuthUserAgent; xrpc: XRPC }>();\n\n useEffect(() => {\n (async () => {\n if (location.href.includes(\"state\")) {\n const params = new URLSearchParams(location.hash.slice(1));\n history.replaceState(null, \"\", location.pathname + location.search);\n const session = await finalizeAuthorization(params);\n const agent = new OAuthUserAgent(session);\n const xrpc = new XRPC({ handler: agent });\n setState({ agent, xrpc });\n }\n\n const sessions = localStorage.getItem(\"atcute-oauth:sessions\");\n if (!!sessions) {\n const did = Object.keys(JSON.parse(sessions))[0];\n const session = await getSession(did, { allowStale: true });\n const agent = new OAuthUserAgent(session);\n const xrpc = new XRPC({ handler: agent });\n setState({ agent, xrpc });\n }\n })();\n }, []);\n\n return state;\n};\n\ntype FollowData = { data: { follows: { handle: string }[] } };\nfunction App() {\n const atCute = useAtCute();\n const [following, setFollowing] = useState([]);\n const [, loginAction] = useActionState(async (_: any, formData: FormData) => {\n const username = formData.get(\"username\");\n const { identity, metadata } = await resolveFromIdentity(username);\n const authUrl = await createAuthorizationUrl({\n metadata: metadata,\n identity: identity,\n scope: clientMetadata.scope,\n });\n window.location.assign(authUrl);\n }, null);\n\n useEffect(() => {\n if (atCute?.xrpc) {\n window.atcute = atCute;\n atCute.xrpc.request({\n type: \"get\",\n nsid: \"app.bsky.graph.getFollows\",\n params: {\n actor: atCute?.agent.session.info.sub,\n limit: 5,\n },\n }).then((following: FollowData) => setFollowing(following.data.follows));\n }\n }, [atCute]);\n\n return (\n

\n \n {!!following.length && (\n

\n 5 people you're following:\n

{follow.handle}

\n )}\n {!!atCute?.xrpc && (\n {\n await atCute.xrpc.request({\n type: \"get\",\n nsid: \"app.bsky.graph.getFollows\",\n params: {\n actor: atCute.agent.session.info.sub,\n limit: 5,\n },\n }).then((following: FollowData) => setFollowing(following.data.follows));\n }}\n >\n refetch following\n \n )}\n

\n );\n}\n\nif (typeof document !== \"undefined\") {\n configureOAuth({\n metadata: {\n client_id: clientMetadata.client_id,\n redirect_uri: clientMetadata.redirect_uris[0],\n },\n });\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nconst logo =\n ``;\n\nconst page = `\n \n \n \n Username App\n \n \n \n \n \n

\n \n \n \n \n`;\n\nconst app = new Hono();\napp.get(\"/\", c => c.html(page));\napp.get(\"/favicon.svg\", (c) => c.body(logo, { headers: { \"Content-Type\": \"image/svg+xml\" } }));\napp.get(\"/callback\", (c) => c.json(c.req));\napp.get(\"/client-metadata.json\", (c) => c.json(clientMetadata));\nexport default app.fetch;\n```",[],[243],{"_104":252,"_96":253,"_159":254,"_161":-5,"_162":142,"_163":141,"_165":119,"_106":255,"_101":256,"_167":190,"_169":257,"_170":22,"_171":-5,"_172":258,"_100":259},"289cb854-930d-11f0-9a9e-0224a6c84d84","README.md","019952ef-4c74-71fc-8150-6b7939b5c686",["D",1758034517362],7,"# QBAT\n\nQBAT is a 3D isometric puzzle game where you navigate a maze-like grid with limited moves, collecting apples to gain additional moves and reaching a golden goal to win.\n\n## 🎮 Gameplay\n\n- **Objective**: Reach the golden goal before running out of moves\n- **Movement**: Move around the grid using arrow keys (↑↓←→)\n- **Move Limit**: You start with 10 moves - use them wisely!\n- **Apple Collection**: Collect red apples to gain 3 additional moves each\n- **Walls**: Brown walls block your path - you can only move on green floor tiles\n- **Goal**: Reach the golden cylinder to win the game\n\n## 🎯 Features\n\n- **3D Top-Down View**: Classic puzzle game perspective with Three.js rendering\n- **Integrated UI**: Game state displayed directly over the game canvas for immersive experience\n- **Grid-Based Movement**: Simple tile-based movement system\n- **Resource Management**: Limited moves create strategic gameplay\n- **Apple Collection**: Red apples scattered around the maze provide bonus moves\n- **Win/Lose Conditions**: Clear victory and failure states\n- **Restart Functionality**: Easy game restart with a single button click\n- **Board Sharing**: Copy/paste board states using emoji-based text representation\n- **Custom Levels**: Load custom board configurations by pasting text\n- **Bluesky Integration**: Log in with Bluesky and share your game results\n- **Smooth Animations**: Hop-based movement with bounce effects\n- **Responsive Controls**: Arrow keys are captured to prevent page scrolling\n\n## 🛠️ Technical Implementation\n\n### Architecture\n- **Backend**: Deno with Hono framework\n- **Frontend**: Vanilla JavaScript with Three.js for 3D rendering\n- **OAuth**: Bluesky integration using @atcute libraries\n- **Build**: No build step required - runs directly with Deno\n\n### Key Components\n- **3D Scene**: Three.js scene with top-down camera positioning\n- **Grid Generation**: Maze-like grid with walls and floor tiles\n- **Apple System**: Random apple placement with collection mechanics\n- **Move Management**: Limited moves with apple-based bonus system\n- **Animation System**: Smooth hop animations with bounce effects\n- **Input Handling**: Keyboard event management with preventDefault for arrow keys\n- **Game State**: Win/lose conditions with status tracking\n\n### File Structure\n```\n/\n├── index.ts # Deno/Hono server with OAuth endpoints\n├── deno.json # Deno configuration with OAuth dependencies\n└── frontend/\n ├── index.html # HTML template with import maps\n ├── index.tsx # Game implementation\n ├── style.css # Styling including login component styles\n ├── bluesky-oauth.ts # Bluesky OAuth functionality\n ├── login-component.ts # Login UI component\n └── favicon.svg # Game icon\n```\n\n## 🚀 Running the Game\n\n1. **Install Deno** (if not already installed):\n ```bash\n curl -fsSL https://deno.land/install.sh | sh\n ```\n\n2. **Start the server**:\n ```bash\n deno run --allow-net index.ts\n ```\n\n3. **Open your browser** to `http://localhost:8000`\n\n4. **Play**: Use arrow keys to navigate the maze and collect apples!\n\n## 🐦 Bluesky Integration\n\nThe game now includes full Bluesky OAuth integration, allowing players to log in with their Bluesky accounts and share their game results.\n\n### Features\n- **OAuth Login**: Secure authentication with Bluesky using OAuth 2.0\n- **Automatic Sharing**: Game results are automatically posted when you win (if logged in)\n- **Manual Sharing**: Use the \"🐦 Share to Bluesky\" button to manually share your progress\n- **User Profile Display**: See your Bluesky handle and avatar in the game interface\n- **Session Management**: Persistent login sessions with automatic re-authentication\n\n### How to Use\n1. **Login**: Click the login form in the top-right corner of the game\n2. **Enter Handle**: Type your full Bluesky handle (e.g., `username.bsky.social`)\n3. **Authenticate**: Click \"Login\" to authenticate with Bluesky\n4. **Play & Share**: Your game results will be automatically shared when you win!\n\n### Technical Details\n- Uses `@atcute/client` and `@atcute/oauth-browser-client` libraries\n- Implements OAuth 2.0 with PKCE for security\n- Supports both automatic and manual game result sharing\n- Handles session persistence and automatic re-authentication\n\n## 📋 Board Sharing\n\nThe game supports copying and pasting board states using emoji-based text representation:\n\n### Emoji Legend\n- 🔴 **Player**: Your current position\n- 🏆 **Goal**: The golden target you need to reach\n- 🍎 **Apple**: Collectible items that give you 3 extra moves\n- 🧱 **Wall**: Obstacles you cannot pass through\n- 🟢 **Floor**: Walkable tiles\n\n### How to Use\n1. **Copy Board**: Click the \"📋 Copy\" button to copy the current board state to your clipboard\n2. **Paste Board**: Click the \"📥 Paste\" button to load a board state from your clipboard\n3. **Share Levels**: Copy board states and share them with others via text messages, social media, etc.\n4. **Custom Levels**: Create your own levels by editing the emoji text and pasting it back\n\n### Example Board State\n```\nQBAT Board State\nMoves: 10 | Apples: 0\nPlayer: (1, 1) | Goal: (6, 6)\n\n🧱 🧱 🧱 🧱 🧱 🧱 🧱 🧱\n🧱 🔴 🟢 🟢 🟢 🟢 🟢 🧱\n🧱 🟢 🧱 🟢 🟢 🟢 🟢 🧱\n🧱 🟢 🟢 🍎 🟢 🟢 🟢 🧱\n🧱 🟢 🟢 🟢 🟢 🟢 🟢 🧱\n🧱 🟢 🟢 🟢 🟢 🟢 🟢 🧱\n🧱 🟢 🟢 🟢 🟢 🟢 🏆 🧱\n🧱 🧱 🧱 🧱 🧱 🧱 🧱 🧱\n```\n\n## 🎨 Visual Design\n\n- **Camera**: Top-down view positioned at (0, 10, 0) for classic puzzle game perspective\n- **Lighting**: Ambient + directional lighting optimized for top-down view\n- **Player**: Red sphere that hops between floor tiles\n- **Environment**: Green floor tiles and brown walls create a maze-like appearance\n- **Collectibles**: Red apples scattered around the maze\n- **Goal**: Golden cylinder marking the victory location\n- **Animations**: Smooth hop movements with bounce effects\n\n## 🔧 Development\n\nThe game is built with modern web technologies and requires no build process. Simply run the Deno server and open in any modern browser. Three.js handles all 3D rendering and animations.",[],[253],{"_104":261,"_96":262,"_159":263,"_161":-5,"_162":142,"_163":264,"_165":119,"_106":265,"_101":164,"_167":190,"_169":266,"_170":22,"_171":-5,"_172":267,"_100":268},"1c8d691a-930c-11f0-b8b9-0224a6c84d84","deno.json","019952ef-4c74-71fc-8150-6c2ca6d1fb3a",30,["D",1758034067626],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n },\n \"imports\": {\n \"@atcute/client\": \"npm:@atcute/client@2.0.8\",\n \"@atcute/oauth-browser-client\": \"npm:@atcute/oauth-browser-client@1.0.15\"\n }\n}",[],[262],{"_104":270,"_96":271,"_159":272,"_161":-5,"_162":142,"_163":273,"_165":119,"_106":274,"_101":200,"_167":275,"_169":276,"_170":22,"_171":-5,"_172":277,"_100":278},"2894cc58-930c-11f0-85ad-0224a6c84d84","index.ts","019952ef-4c74-71fc-8150-73b81cdc9c57",31,["D",1758034087809],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// OAuth client metadata for Bluesky\nconst clientMetadata = {\n client_id: \"https://qbat.val.town/client-metadata.json\",\n client_uri: \"https://qbat.val.town\",\n logo_uri: \"https://qbat.val.town/frontend/favicon.svg\",\n redirect_uris: [\"https://qbat.val.town\"],\n application_type: \"web\",\n client_name: \"QBAT - Grid Jumping Game\",\n dpop_bound_access_tokens: true,\n grant_types: [\"authorization_code\", \"refresh_token\"],\n response_types: [\"code\"],\n scope: \"atproto transition:chat.bsky transition:generic\",\n token_endpoint_auth_method: \"none\",\n};\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// OAuth endpoints\napp.get(\"/client-metadata.json\", (c) => c.json(clientMetadata));\napp.get(\"/callback\", (c) => c.json(c.req));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;",[],[271],"files",[156,174,185,194,204,214,223,233,241,251,260,269],"counts",{"_283":32,"_284":285,"_286":32,"_287":288},"pulls","branches",4,"forks","envVars",{"_289":32,"_290":32},"count","emptyCount","contents",[293,296,299,302,305,308],{"_104":157,"_96":158,"_159":160,"_161":-5,"_162":142,"_163":164,"_165":119,"_106":294,"_101":32,"_167":168,"_169":-5,"_170":22,"_171":-5,"_100":295},["D",1758033038456],[158],{"_104":234,"_96":235,"_159":236,"_161":-5,"_162":142,"_163":164,"_165":119,"_106":297,"_101":32,"_167":190,"_169":238,"_170":22,"_171":-5,"_100":298},["D",1758033038456],[235],{"_104":242,"_96":243,"_159":244,"_161":-5,"_162":142,"_163":245,"_165":119,"_106":300,"_101":247,"_167":190,"_169":248,"_170":22,"_171":-5,"_100":301},["D",1758034037859],[243],{"_104":252,"_96":253,"_159":254,"_161":-5,"_162":142,"_163":141,"_165":119,"_106":303,"_101":256,"_167":190,"_169":257,"_170":22,"_171":-5,"_100":304},["D",1758034517362],[253],{"_104":261,"_96":262,"_159":263,"_161":-5,"_162":142,"_163":264,"_165":119,"_106":306,"_101":164,"_167":190,"_169":266,"_170":22,"_171":-5,"_100":307},["D",1758034067626],[262],{"_104":270,"_96":271,"_159":272,"_161":-5,"_162":142,"_163":273,"_165":119,"_106":309,"_101":200,"_167":275,"_169":276,"_170":22,"_171":-5,"_100":310},["D",1758034087809],[271],"upstreamProject","upstreamBranch",{"_104":145,"_106":314,"_315":316,"_96":44,"_143":105,"_101":317,"_144":-5,"_146":-5,"_318":319,"_108":-5,"_153":22,"_110":111,"_152":95,"_16":123,"_151":97},["D",1758025872359],"updatedAt",["D",1758045157602],288,"lockfileKey","1758045167930-esm.town_v_wilhelm_qbat@288-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.compare.$branch",{"_94":95,"_96":97,"_98":99,"_102":326,"_331":32,"_332":333,"_334":335,"_341":22,"_342":330,"_343":344,"_347":-5},{"_104":105,"_96":97,"_106":327,"_108":-5,"_109":22,"_110":111,"_112":113,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":119,"_121":-5,"_122":32,"_16":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_23":328,"_136":329,"_139":330,"_153":22},["D",1758025872359],{"_94":95,"_134":135},{"_94":95,"_138":135,"_14":115},{"_101":141,"_96":99,"_104":142,"_143":105,"_144":145,"_146":147,"_148":111,"_149":105,"_150":123,"_151":97,"_152":95},"ahead","behind",209,"diff",{"_336":337,"_170":338,"_339":340},"added",[],[],"modified",[],"hasChanges","sourceBranch","targetBranch",{"_104":145,"_106":345,"_315":346,"_96":44,"_143":105,"_101":317,"_144":-5,"_146":-5,"_318":319,"_108":-5,"_153":22,"_110":111,"_152":95,"_16":123,"_151":97},["D",1758025872359],["D",1758045157602],"pull","actionData","errors"]

wilhelm

Mergeloginintomain