QBAT - Grid Jumping Game

\n\n \n \n\n \n\n \n\n \n \n \n \n",[],[151,192],{"_102":201,"_95":202,"_152":203,"_154":153,"_155":137,"_156":136,"_158":159,"_104":204,"_99":205,"_161":175,"_163":206,"_164":22,"_165":-5,"_166":207,"_98":208},"eeb14a88-9325-11f0-b9b7-0224a6c84d84","index.tsx","ae592994-92fb-11f0-ae66-0224a6c84d84",["D",1758045157602],140,"// Declare THREE as global to avoid TypeScript errors\nimport * as THREE from \"three\";\n\n// Import Bluesky OAuth functionality\nimport { LoginComponent } from \"./login-component.ts\";\nimport { blueskyAuth, type BlueskySession, type SavedGame } 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: 0, y: 13.2, z: 13.2 },\n canvasSize: 600,\n initialMoves: 5,\n movesPerApple: 3,\n idleAnimationSpeed: 0.02,\n colors: {\n sky: 0x87CEEB,\n ambient: 0x404040,\n directional: 0xffffff,\n player: 0x4A90E2, // Blue\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 isTopDownView = false; // false = isometric, true = top-down\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 this.isTopDownView = false;\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 = '';\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 }\n result += row + '\\n';\n }\n \n return result.trim();\n }\n\n fromTextRepresentation(text: string): boolean {\n try {\n const lines = text.trim().split('\\n').filter(line => line.trim() !== '');\n if (lines.length < 2) return false;\n\n // Infer grid size from number of lines\n const gridSize = lines.length;\n if (gridSize < CONFIG.minGridSize || gridSize > CONFIG.maxGridSize) return false;\n \n // Set grid size\n this.setGridSize(gridSize);\n\n // Reset game state to defaults\n this.movesRemaining = CONFIG.initialMoves;\n this.applesCollected = 0;\n this.playerX = 1;\n this.playerY = 1;\n this.goalX = Math.max(1, gridSize - 2);\n this.goalY = Math.max(1, gridSize - 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 if (y >= lines.length) break;\n \n // Process each emoji in the line using Array.from to handle multi-byte characters\n const line = lines[y];\n const emojis = Array.from(line);\n \n for (let x = 0; x < Math.min(this.gridSize, emojis.length); x++) {\n const emoji = emojis[x];\n \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 // Player position\n this.playerX = x;\n this.playerY = y;\n this.grid[x][y] = 0; // Floor\n break;\n case '🏆':\n // Goal position\n this.goalX = x;\n this.goalY = y;\n this.grid[x][y] = 0; // Floor\n break;\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 // URL sharing methods\n toURLRepresentation(): string {\n const emojiText = this.toTextRepresentation();\n // Encode the emoji text for URL\n return encodeURIComponent(emojiText);\n }\n\n fromURLRepresentation(encodedText: string): boolean {\n try {\n const decodedText = decodeURIComponent(encodedText);\n return this.fromTextRepresentation(decodedText);\n } catch (error) {\n console.error('Error decoding URL 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 // Switch to top-down view when entering editor\n this.isTopDownView = true;\n } else {\n // Switch back to isometric view when exiting editor\n this.isTopDownView = false;\n }\n }\n\n togglePerspective() {\n this.isTopDownView = !this.isTopDownView;\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(60, 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.updateCanvasSize();\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 // Handle window resize for mobile\n window.addEventListener('resize', () => this.updateCanvasSize());\n }\n\n private updateCanvasSize() {\n const isMobile = window.innerWidth <= 768;\n const containerWidth = this.renderer.domElement.parentElement?.clientWidth || CONFIG.canvasSize;\n \n if (isMobile) {\n // On mobile, use full width with aspect ratio\n const size = Math.min(containerWidth, window.innerHeight * 0.7);\n this.renderer.setSize(size, size);\n } else {\n // On desktop, use fixed size\n this.renderer.setSize(CONFIG.canvasSize, CONFIG.canvasSize);\n }\n }\n\n private createUIOverlay(container: HTMLElement) {\n this.uiContainer = document.createElement(\"div\");\n this.uiContainer.className = \"ui-overlay\";\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(3, 10, 3); // Light from front-right for straight 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 // Up vector will be set dynamically based on perspective in updateCameraPosition()\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: 200,\n specular: 0x444444\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: 300,\n specular: 0x666666\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, onShareURL?: () => void, isLoggedIn?: boolean, onSaveGame?: () => void) {\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 perspective button text\n const perspectiveText = gameState.isTopDownView ? \"👁️ Isometric\" : \"👁️ Top-Down\";\n UITemplateManager.updateElement(this.uiContainer, \"#perspective-btn\", perspectiveText);\n \n // Update tile button selection\n this.updateTileButtonSelection(gameState.selectedTileType);\n \n // Add event listeners\n const editorEventListeners: { [selector: string]: (e: Event) => void } = {\n \"#start-game-btn\": () => onStartGame(),\n \"#perspective-btn\": () => document.dispatchEvent(new CustomEvent('perspectiveToggle')),\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 share URL button listener if callback provided\n if (onShareURL) {\n editorEventListeners[\"#share-url-btn\"] = () => onShareURL();\n }\n\n // Add save game button listener if callback provided and user is logged in\n if (onSaveGame && isLoggedIn) {\n editorEventListeners[\"#save-game-btn\"] = () => onSaveGame();\n }\n\n UITemplateManager.addEventListeners(this.uiContainer, editorEventListeners);\n \n // Show/hide save game button based on login status\n const saveBtn = this.uiContainer.querySelector(\"#save-game-btn\") as HTMLElement;\n if (saveBtn) {\n saveBtn.classList.remove(\"share-btn-hidden\", \"share-btn-visible\");\n saveBtn.classList.add(isLoggedIn ? \"share-btn-visible\" : \"share-btn-hidden\");\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 listeners\n if (isLoggedIn && onShareBluesky) {\n eventListeners[\"#share-bluesky-btn\"] = () => onShareBluesky();\n }\n if (onShareURL) {\n eventListeners[\"#share-url-btn\"] = () => onShareURL();\n }\n\n // Add save game button listener if callback provided and user is logged in\n if (onSaveGame && isLoggedIn) {\n eventListeners[\"#save-game-btn\"] = () => onSaveGame();\n }\n\n UITemplateManager.addEventListeners(this.uiContainer, eventListeners);\n\n // Show/hide share button based on login status and game state\n const shareBtn = this.uiContainer.querySelector(\"#share-bluesky-btn\") as HTMLElement;\n if (shareBtn) {\n shareBtn.classList.remove(\"share-btn-hidden\", \"share-btn-visible\");\n const shouldShow = isLoggedIn && gameState.gameWon;\n shareBtn.classList.add(shouldShow ? \"share-btn-visible\" : \"share-btn-hidden\");\n }\n\n // Show/hide save game button based on login status\n const saveBtn = this.uiContainer.querySelector(\"#save-game-btn\") as HTMLElement;\n if (saveBtn) {\n saveBtn.classList.remove(\"share-btn-hidden\", \"share-btn-visible\");\n saveBtn.classList.add(isLoggedIn ? \"share-btn-visible\" : \"share-btn-hidden\");\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 // Look at the center of the grid (dynamically adjusted based on grid size)\n const gridCenterOffset = (this.currentGridSize - 1) / 2;\n this.camera.lookAt(0, 0, gridCenterOffset * 0.3);\n this.renderer.render(this.scene, this.camera);\n }\n\n private updateCameraPosition() {\n // Calculate dynamic camera position based on grid size\n const baseDistance = 5.5; // Increased from 4 to zoom out more\n const scaleFactor = this.currentGridSize / CONFIG.gridSize;\n const distance = baseDistance * scaleFactor;\n \n if (this.gameState?.isTopDownView) {\n // Top-down view: camera directly above the center\n this.camera.position.set(0, distance * 2, 0);\n this.camera.up.set(0, 0, -1); // Rotate up vector for top-down\n } else {\n // Straight orientation view: camera positioned to show grid straight-on\n // Position camera at an angle that shows X-axis horizontally and Y-axis as depth\n const cameraX = 0; // Center horizontally\n const cameraY = distance * 1.2; // Higher up for better overview\n const cameraZ = distance * 1.2; // Back from the grid for good perspective\n this.camera.position.set(cameraX, cameraY, cameraZ);\n this.camera.up.set(0, 1, 0); // Standard up vector\n }\n \n // 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 if (this.gameState?.isTopDownView) {\n // For top-down view, light from above\n directionalLight.position.set(0, 8, 0);\n } else {\n // For straight view, light from the front-right for good visibility\n directionalLight.position.set(lightDistance * 0.5, 8, lightDistance * 0.5);\n }\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 private savedGames: SavedGame[] = [];\n private savedGamesContainer: HTMLElement | null = null;\n private currentViewingDid: string | 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 \n // Try to load game state from URL first\n if (!this.loadGameStateFromURL()) {\n // If no URL state, generate default game\n this.generateGrid();\n this.generateApples();\n }\n \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 // Set up touch controls after canvas is created\n this.setupTouchControls();\n \n // Check for DID parameter in URL\n this.checkForDidInURL();\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 // Create saved games container\n this.savedGamesContainer = document.createElement(\"div\");\n this.savedGamesContainer.id = \"saved-games-container\";\n this.savedGamesContainer.className = \"saved-games-container\";\n gameContainer.appendChild(this.savedGamesContainer);\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 this.loadSavedGames(); // Load saved games when user logs in\n });\n this.loginComponent.onLogout(() => {\n this.blueskySession = null;\n this.savedGames = [];\n this.showMessage(\"Logged out successfully\", \"success\");\n this.updateUI(); // Refresh UI to hide share button\n this.updateSavedGamesList(); // Clear saved games list\n });\n }\n\n private randomizeGameParameters() {\n // Randomize grid size between min and max\n const randomSize = CONFIG.minGridSize + Math.floor(Math.random() * (CONFIG.maxGridSize - CONFIG.minGridSize + 1));\n this.gameState.setGridSize(randomSize);\n \n // Randomize player position (avoid borders)\n this.gameState.playerX = 1 + Math.floor(Math.random() * (this.gameState.gridSize - 2));\n this.gameState.playerY = 1 + Math.floor(Math.random() * (this.gameState.gridSize - 2));\n \n // Randomize goal position (avoid borders and player position)\n do {\n this.gameState.goalX = 1 + Math.floor(Math.random() * (this.gameState.gridSize - 2));\n this.gameState.goalY = 1 + Math.floor(Math.random() * (this.gameState.gridSize - 2));\n } while (this.gameState.goalX === this.gameState.playerX && this.gameState.goalY === this.gameState.playerY);\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 this.performMove(newX, newY);\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 }\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 // Generate shareable URL for this specific game state\n const gameUrl = this.generateGameShareURL();\n \n // Generate SVG thumbnail\n const svgContent = this.generateBoardSVG();\n \n await blueskyAuth.postGameResult(score, level, moves, gameUrl, svgContent);\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.shareGameState(),\n this.blueskySession !== null,\n () => this.saveGame()\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 // Update saved games list\n this.updateSavedGamesList();\n }\n\n private restartGame() {\n // Reset game state\n this.gameState.reset();\n \n // Randomize game parameters\n this.randomizeGameParameters();\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 shareGameState() {\n try {\n const shareUrl = this.generateGameShareURL();\n await navigator.clipboard.writeText(shareUrl);\n this.showMessage(\"Shareable URL copied to clipboard!\", \"success\");\n } catch (error) {\n console.error('Failed to generate share URL:', error);\n this.showMessage(\"Failed to generate share URL\", \"error\");\n }\n }\n\n private generateGameShareURL(): string {\n // Create a copy of the initial game state (before any moves)\n const initialState = this.createInitialGameState();\n const encodedState = this.gameStateToURLRepresentation(initialState);\n return `${globalThis.location.origin}${globalThis.location.pathname}?game=${encodedState}`;\n }\n\n // Create a copy of the initial game state (before any moves)\n private createInitialGameState(): GameState {\n const initialState = new GameState();\n initialState.gridSize = this.gameState.gridSize;\n initialState.grid = this.gameState.grid.map(row => [...row]); // Deep copy grid\n initialState.apples = this.gameState.apples.map(apple => ({ ...apple })); // Deep copy apples\n initialState.playerX = 1; // Reset to initial player position\n initialState.playerY = 1;\n initialState.goalX = this.gameState.goalX;\n initialState.goalY = this.gameState.goalY;\n initialState.movesRemaining = CONFIG.initialMoves;\n initialState.applesCollected = 0;\n initialState.gameWon = false;\n initialState.gameLost = false;\n return initialState;\n }\n\n // Convert a GameState to URL representation\n private gameStateToURLRepresentation(gameState: GameState): string {\n const emojiText = this.gameStateToTextRepresentation(gameState);\n return encodeURIComponent(emojiText);\n }\n\n // Convert a GameState to text representation\n private gameStateToTextRepresentation(gameState: GameState): string {\n let result = '';\n \n for (let y = 0; y < gameState.gridSize; y++) {\n let row = '';\n for (let x = 0; x < gameState.gridSize; x++) {\n if (x === gameState.playerX && y === gameState.playerY) {\n row += '🔵'; // Player\n } else if (x === gameState.goalX && y === gameState.goalY) {\n row += '🏆'; // Goal\n } else if (gameState.apples.some(apple => apple.x === x && apple.y === y)) {\n row += '🍎'; // Apple\n } else if (gameState.grid[x] && gameState.grid[x][y] === 1) {\n row += '🧱'; // Wall\n } else {\n row += '🟢'; // Floor\n }\n }\n result += row + '\\n';\n }\n \n return result.trim();\n }\n\n // Generate SVG representation of the current game board\n private generateBoardSVG(): string {\n const gridSize = this.gameState.gridSize;\n const cellSize = 50; // Slightly larger cells for better visibility\n const padding = 40; // More padding for better framing\n \n // Calculate dimensions for 16:9 aspect ratio\n const boardWidth = gridSize * cellSize;\n const boardHeight = gridSize * cellSize;\n const totalWidth = Math.max(800, boardWidth + padding * 2); // Minimum 800px width\n const totalHeight = Math.max(450, Math.round(totalWidth * 9 / 16)); // 16:9 aspect ratio\n \n // Center the board in the landscape canvas\n const boardOffsetX = (totalWidth - boardWidth) / 2;\n const boardOffsetY = (totalHeight - boardHeight) / 2;\n \n let svg = ``;\n return svg;\n }\n\n // Helper method to generate star points for the goal\n private generateStarPoints(centerX: number, centerY: number, outerRadius: number, innerRadius: number, points: number): string {\n const angleStep = Math.PI / points;\n let pointsString = \"\";\n \n for (let i = 0; i < points * 2; i++) {\n const angle = i * angleStep - Math.PI / 2; // Start from top\n const radius = i % 2 === 0 ? outerRadius : innerRadius;\n const x = centerX + Math.cos(angle) * radius;\n const y = centerY + Math.sin(angle) * radius;\n pointsString += `${x},${y} `;\n }\n \n return pointsString.trim();\n }\n\n private loadGameStateFromURL() {\n try {\n const urlParams = new URLSearchParams(globalThis.location.search);\n const encodedState = urlParams.get('game');\n \n if (encodedState && this.gameState.fromURLRepresentation(encodedState)) {\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 // Clear the URL parameter to avoid reloading on refresh\n const newUrl = new URL(globalThis.location.href);\n newUrl.searchParams.delete('game');\n globalThis.history.replaceState({}, '', newUrl.toString());\n \n this.showMessage(\"Game state loaded from URL!\", \"success\");\n return true;\n }\n } catch (error) {\n console.error('Failed to load game state from URL:', error);\n }\n return false;\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.className = `message-overlay ${type}`;\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 // Listen for perspective toggle events\n document.addEventListener('perspectiveToggle', () => {\n if (this.gameState.editorMode) {\n this.gameState.togglePerspective();\n this.updateUI();\n }\n });\n }\n\n private setupTouchControls() {\n // Add touch event listeners for swipe gestures\n let touchStartX = 0;\n let touchStartY = 0;\n let touchEndX = 0;\n let touchEndY = 0;\n let touchStartTime = 0;\n\n // Only add touch listeners to the canvas, not globally\n const canvas = this.scene3D?.renderer?.domElement;\n if (canvas) {\n canvas.addEventListener('touchstart', (e) => {\n if (e.touches.length === 1 && !this.gameState.editorMode) {\n e.preventDefault(); // Prevent default only on canvas\n touchStartX = e.touches[0].clientX;\n touchStartY = e.touches[0].clientY;\n touchStartTime = Date.now();\n }\n }, { passive: false });\n\n canvas.addEventListener('touchmove', (e) => {\n if (!this.gameState.editorMode) {\n e.preventDefault(); // Prevent pull-to-refresh only on canvas\n }\n }, { passive: false });\n\n canvas.addEventListener('touchend', (e) => {\n if (e.changedTouches.length === 1 && !this.gameState.editorMode) {\n e.preventDefault(); // Prevent default only on canvas\n touchEndX = e.changedTouches[0].clientX;\n touchEndY = e.changedTouches[0].clientY;\n const touchDuration = Date.now() - touchStartTime;\n \n // Only process swipe if it was quick (less than 300ms)\n if (touchDuration < 300) {\n this.handleSwipeGesture(touchStartX, touchStartY, touchEndX, touchEndY);\n }\n }\n }, { passive: false });\n }\n }\n\n private handleTouchInput(direction: string) {\n if (this.gameState.gameWon || this.gameState.gameLost || this.gameState.editorMode) return;\n\n let newX = this.gameState.playerX;\n let newY = this.gameState.playerY;\n\n switch (direction) {\n case \"up\": newY = this.gameState.playerY - 1; break;\n case \"down\": newY = this.gameState.playerY + 1; break;\n case \"left\": newX = this.gameState.playerX - 1; break;\n case \"right\": newX = this.gameState.playerX + 1; break;\n default: return;\n }\n\n this.performMove(newX, newY);\n }\n\n private handleSwipeGesture(startX: number, startY: number, endX: number, endY: number) {\n if (this.gameState.gameWon || this.gameState.gameLost || this.gameState.editorMode) return;\n\n const deltaX = endX - startX;\n const deltaY = endY - startY;\n const minSwipeDistance = 50; // Minimum distance for a swipe\n\n if (Math.abs(deltaX) < minSwipeDistance && Math.abs(deltaY) < minSwipeDistance) {\n return; // Not a significant swipe\n }\n\n let direction = '';\n if (Math.abs(deltaX) > Math.abs(deltaY)) {\n // Horizontal swipe\n direction = deltaX > 0 ? 'right' : 'left';\n } else {\n // Vertical swipe\n direction = deltaY > 0 ? 'down' : 'up';\n }\n\n this.handleTouchInput(direction);\n }\n\n private performMove(newX: number, newY: number) {\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 startGameLoop() {\n const animate = () => {\n requestAnimationFrame(animate);\n this.animationManager.updateAnimation();\n this.scene3D.render();\n };\n animate();\n }\n\n // Save game functionality\n private async saveGame() {\n if (!this.blueskySession) {\n this.showMessage(\"Please log in to save games\", \"error\");\n return;\n }\n\n try {\n const name = prompt(\"Enter a name for this game:\");\n if (!name || name.trim() === \"\") {\n return;\n }\n\n const gameText = this.gameState.toTextRepresentation();\n await blueskyAuth.saveGameState(name.trim(), gameText);\n \n this.showMessage(\"Game saved successfully!\", \"success\");\n this.loadSavedGames(); // Refresh the saved games list\n } catch (error) {\n console.error(\"Failed to save game:\", error);\n this.showMessage(\"Failed to save game\", \"error\");\n }\n }\n\n // Load saved games from Bluesky\n private async loadSavedGames(did?: string) {\n if (!this.blueskySession) {\n return;\n }\n\n try {\n if (did) {\n this.savedGames = await blueskyAuth.getSavedGameStatesByDid(did);\n this.currentViewingDid = did;\n this.updateURLForDid(did);\n } else {\n this.savedGames = await blueskyAuth.getSavedGameStates();\n this.currentViewingDid = null;\n this.updateURLForDid(null);\n }\n this.updateSavedGamesList();\n } catch (error) {\n console.error(\"Failed to load saved games:\", error);\n this.showMessage(\"Failed to load saved games\", \"error\");\n }\n }\n\n // Update the saved games list UI\n private updateSavedGamesList() {\n if (!this.savedGamesContainer) return;\n\n this.savedGamesContainer.innerHTML = '';\n\n if (!this.blueskySession) {\n return;\n }\n\n // Create search interface\n const searchContainer = document.createElement(\"div\");\n searchContainer.className = \"search-container\";\n\n const searchInput = document.createElement(\"input\");\n searchInput.type = \"text\";\n searchInput.placeholder = \"Enter Bluesky DID to view their games (e.g., did:plc:abc123...)\";\n searchInput.className = \"search-input\";\n\n const searchBtn = document.createElement(\"button\");\n searchBtn.textContent = \"Search\";\n searchBtn.className = \"search-btn\";\n searchBtn.addEventListener(\"click\", () => {\n const did = searchInput.value.trim();\n if (did) {\n this.loadSavedGames(did);\n }\n });\n\n // Allow Enter key to search\n searchInput.addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") {\n const did = searchInput.value.trim();\n if (did) {\n this.loadSavedGames(did);\n }\n }\n });\n\n const myGamesBtn = document.createElement(\"button\");\n myGamesBtn.textContent = \"My Games\";\n myGamesBtn.className = \"my-games-btn\";\n myGamesBtn.addEventListener(\"click\", () => {\n this.loadSavedGames();\n });\n\n searchContainer.appendChild(searchInput);\n searchContainer.appendChild(searchBtn);\n searchContainer.appendChild(myGamesBtn);\n this.savedGamesContainer.appendChild(searchContainer);\n\n if (this.savedGames.length === 0) {\n const noGamesMsg = document.createElement(\"div\");\n noGamesMsg.className = \"no-saved-games\";\n if (this.currentViewingDid) {\n noGamesMsg.textContent = `No saved games found for this user.`;\n } else {\n noGamesMsg.textContent = \"No saved games yet. Create and save a game to see it here!\";\n }\n this.savedGamesContainer.appendChild(noGamesMsg);\n return;\n }\n\n const title = document.createElement(\"h3\");\n if (this.currentViewingDid) {\n title.textContent = `Games from ${this.currentViewingDid}`;\n } else {\n title.textContent = \"My Saved Games\";\n }\n title.className = \"saved-games-title\";\n this.savedGamesContainer.appendChild(title);\n\n const gamesList = document.createElement(\"div\");\n gamesList.className = \"saved-games-list\";\n\n this.savedGames.forEach((game) => {\n const gameItem = document.createElement(\"div\");\n gameItem.className = \"saved-game-item\";\n\n const gameInfo = document.createElement(\"div\");\n gameInfo.className = \"game-info\";\n \n const gameName = document.createElement(\"div\");\n gameName.className = \"game-name\";\n gameName.textContent = game.name;\n \n const gameDetails = document.createElement(\"div\");\n gameDetails.className = \"game-details\";\n gameDetails.textContent = `Saved on ${new Date(game.createdAt).toLocaleDateString()}`;\n \n // Add game text representation\n const gameText = document.createElement(\"div\");\n gameText.className = \"game-text-preview\";\n gameText.textContent = game.gameText;\n \n gameInfo.appendChild(gameName);\n gameInfo.appendChild(gameDetails);\n gameInfo.appendChild(gameText);\n\n const gameActions = document.createElement(\"div\");\n gameActions.className = \"game-actions\";\n\n const loadBtn = document.createElement(\"button\");\n loadBtn.textContent = \"Load\";\n loadBtn.className = \"load-game-btn\";\n loadBtn.addEventListener(\"click\", () => this.loadGame(game));\n\n gameActions.appendChild(loadBtn);\n\n // Only show delete button for own games\n if (!this.currentViewingDid) {\n const deleteBtn = document.createElement(\"button\");\n deleteBtn.textContent = \"Delete\";\n deleteBtn.className = \"delete-game-btn\";\n deleteBtn.addEventListener(\"click\", () => this.deleteGame(game.id!));\n gameActions.appendChild(deleteBtn);\n }\n\n gameItem.appendChild(gameInfo);\n gameItem.appendChild(gameActions);\n gamesList.appendChild(gameItem);\n });\n\n this.savedGamesContainer.appendChild(gamesList);\n }\n\n // Load a saved game\n private loadGame(game: SavedGame) {\n try {\n if (this.gameState.fromTextRepresentation(game.gameText)) {\n // Clear and recreate scene with loaded 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 this.updateUI();\n this.showMessage(`Loaded game: ${game.name}`, \"success\");\n } else {\n this.showMessage(\"Failed to load game - invalid format\", \"error\");\n }\n } catch (error) {\n console.error(\"Failed to load game:\", error);\n this.showMessage(\"Failed to load game\", \"error\");\n }\n }\n\n // Delete a saved game\n private async deleteGame(gameId: string) {\n if (!this.blueskySession) {\n this.showMessage(\"Please log in to delete games\", \"error\");\n return;\n }\n\n if (!confirm(\"Are you sure you want to delete this game?\")) {\n return;\n }\n\n try {\n await blueskyAuth.deleteGameState(gameId);\n this.showMessage(\"Game deleted successfully\", \"success\");\n this.loadSavedGames(); // Refresh the saved games list\n } catch (error) {\n console.error(\"Failed to delete game:\", error);\n this.showMessage(\"Failed to delete game\", \"error\");\n }\n }\n\n // Check for DID parameter in URL and load games if found\n private checkForDidInURL() {\n const urlParams = new URLSearchParams(globalThis.location.search);\n const did = urlParams.get('did');\n \n if (did && this.blueskySession) {\n // Set the search input value\n const searchInput = this.savedGamesContainer?.querySelector('.search-input') as HTMLInputElement;\n if (searchInput) {\n searchInput.value = did;\n }\n // Load games for this DID\n this.loadSavedGames(did);\n }\n }\n\n // Update URL to reflect current DID being viewed\n private updateURLForDid(did: string | null) {\n const url = new URL(globalThis.location.href);\n \n if (did) {\n url.searchParams.set('did', did);\n } else {\n url.searchParams.delete('did');\n }\n \n // Update URL without reloading the page\n globalThis.history.replaceState({}, '', url.toString());\n }\n}\n\n// Initialize game when DOM is ready\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n new QBATGame();\n});",[],[151,202],{"_102":210,"_95":211,"_152":212,"_154":153,"_155":137,"_156":213,"_158":159,"_104":214,"_99":32,"_161":175,"_163":215,"_164":22,"_165":-5,"_166":216,"_98":217},"3fd5ced4-930d-11f0-a661-0224a6c84d84","login-component.ts","3fd5cf74-930d-11f0-a661-0224a6c84d84",79,["D",1758034556312],"// 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",[],[151,211],{"_102":219,"_95":220,"_152":221,"_154":153,"_155":137,"_156":222,"_158":159,"_104":223,"_99":224,"_161":186,"_163":225,"_164":22,"_165":-5,"_166":226,"_98":227},"6536d96e-931e-11f0-8147-0224a6c84d84","style.css","08fe6b20-92fc-11f0-bce7-0224a6c84d84",276,["D",1758041920472],28,"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 /* Prevent pull-to-refresh and overscroll */\n overscroll-behavior: none;\n overscroll-behavior-y: none;\n -webkit-overflow-scrolling: touch;\n }\n\n html {\n /* Prevent pull-to-refresh on the entire page */\n overscroll-behavior: none;\n overscroll-behavior-y: none;\n /* Prevent bounce effect on iOS */\n position: fixed;\n height: 100%;\n width: 100%;\n overflow: hidden;\n }\n \n .game-container {\n text-align: center;\n background: white;\n padding: 30px;\n padding-bottom: 60px; /* Extra bottom padding for scrolling */\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);\n /* Make container scrollable */\n max-height: 100vh;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\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 /* Prevent pull-to-refresh on canvas */\n touch-action: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n user-select: none;\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: #4A90E2; 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 }\n\n /* UI Overlay styles */\n .ui-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: Arial, sans-serif;\n color: white;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.8);\n }\n\n /* Message overlay styles */\n .message-overlay {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n padding: 12px 24px;\n border-radius: 8px;\n font-size: 16px;\n font-weight: bold;\n z-index: 1000;\n pointer-events: none;\n }\n\n .message-overlay.success {\n background: #28a745;\n color: white;\n }\n\n .message-overlay.error {\n background: #dc3545;\n color: white;\n }\n\n /* Share button visibility */\n .share-btn-hidden {\n display: none;\n }\n\n .share-btn-visible {\n display: block;\n }\n\n /* UI Template positioning classes */\n .ui-top-left {\n position: absolute;\n top: 10px;\n left: 10px;\n font-size: 16px;\n font-weight: bold;\n }\n\n .ui-top-right {\n position: absolute;\n top: 10px;\n right: 10px;\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n }\n\n .ui-top-right-no-wrap {\n position: absolute;\n top: 10px;\n right: 10px;\n display: flex;\n gap: 8px;\n }\n\n .ui-bottom-left {\n position: absolute;\n bottom: 40px;\n left: 10px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n font-size: 16px;\n font-weight: bold;\n }\n\n .ui-bottom-right {\n position: absolute;\n bottom: 10px;\n right: 10px;\n font-size: 14px;\n font-weight: bold;\n text-align: center;\n }\n\n .ui-bottom-center {\n position: absolute;\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 18px;\n font-weight: bold;\n text-align: center;\n }\n\n .ui-bottom-center.tile-buttons {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n align-items: center;\n }\n\n .ui-grid-controls {\n margin-top: 8px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .ui-grid-size-display {\n min-width: 20px;\n text-align: center;\n }\n\n /* Saved Games Styles */\n .saved-games-container {\n margin-top: 20px;\n margin-bottom: 40px; /* Extra bottom margin for scrolling */\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n }\n\n .saved-games-title {\n color: #2c3e50;\n margin-bottom: 15px;\n font-size: 1.5em;\n text-align: center;\n }\n\n .no-saved-games {\n text-align: center;\n color: #666;\n font-style: italic;\n padding: 20px;\n background-color: #f8f9fa;\n border-radius: 8px;\n border: 2px dashed #dee2e6;\n }\n\n .saved-games-list {\n display: flex;\n flex-direction: column;\n gap: 12px;\n }\n\n .saved-game-item {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n background-color: #f8f9fa;\n border-radius: 8px;\n border: 1px solid #dee2e6;\n transition: all 0.2s ease;\n }\n\n .saved-game-item:hover {\n background-color: #e9ecef;\n border-color: #adb5bd;\n }\n\n .game-info {\n flex: 1;\n text-align: left;\n }\n\n .game-name {\n font-weight: bold;\n font-size: 1.1em;\n color: #2c3e50;\n margin-bottom: 4px;\n }\n\n .game-details {\n font-size: 0.9em;\n color: #666;\n margin-bottom: 4px;\n }\n\n .game-description {\n font-size: 0.85em;\n color: #888;\n font-style: italic;\n }\n\n .game-text-preview {\n font-family: 'Courier New', monospace;\n font-size: 0.8em;\n color: #555;\n background-color: #f8f9fa;\n border: 1px solid #e9ecef;\n border-radius: 4px;\n padding: 8px;\n margin-top: 8px;\n white-space: pre;\n line-height: 1.2;\n max-width: 300px;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .game-actions {\n display: flex;\n gap: 8px;\n margin-left: 15px;\n }\n\n .load-game-btn {\n background-color: #28a745;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9em;\n transition: background-color 0.2s ease;\n }\n\n .load-game-btn:hover {\n background-color: #218838;\n }\n\n .delete-game-btn {\n background-color: #dc3545;\n color: white;\n border: none;\n padding: 6px 12px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 0.9em;\n transition: background-color 0.2s ease;\n }\n\n .delete-game-btn:hover {\n background-color: #c82333;\n }\n\n /* Search Interface Styles */\n .search-container {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n align-items: center;\n flex-wrap: wrap;\n }\n\n .search-input {\n flex: 1;\n min-width: 300px;\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n }\n\n .search-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 .search-btn {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s ease;\n }\n\n .search-btn:hover {\n background-color: #357abd;\n }\n\n .my-games-btn {\n background-color: #28a745;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n font-size: 14px;\n transition: background-color 0.2s ease;\n }\n\n .my-games-btn:hover {\n background-color: #218838;\n }\n\n /* Mobile Styles */\n @media (max-width: 768px) {\n body {\n padding: 10px;\n font-size: 14px;\n }\n\n .game-container {\n padding: 15px;\n padding-bottom: 80px; /* Extra bottom padding for mobile scrolling */\n margin: 0;\n width: 100%;\n max-width: 100vw;\n box-sizing: border-box;\n }\n\n .instructions h1 {\n font-size: 1.8em;\n margin-bottom: 8px;\n }\n\n .instructions p {\n font-size: 0.9em;\n margin: 6px 0;\n }\n\n .canvas-container {\n margin: 15px 0;\n }\n\n .canvas-container canvas {\n width: 100% !important;\n height: auto !important;\n max-width: 100vw;\n max-height: 70vh;\n }\n\n /* Mobile UI Overlay adjustments */\n .ui-overlay {\n font-size: 12px;\n }\n\n .ui-top-right, .ui-top-right-no-wrap {\n top: 5px;\n right: 5px;\n flex-wrap: wrap;\n gap: 4px;\n }\n\n .ui-bottom-left {\n bottom: 60px;\n left: 5px;\n font-size: 14px;\n }\n\n .ui-bottom-center {\n bottom: 10px;\n font-size: 16px;\n }\n\n .ui-bottom-right {\n bottom: 10px;\n right: 5px;\n font-size: 12px;\n }\n\n /* Mobile button styles */\n .btn {\n padding: 6px 10px;\n font-size: 11px;\n min-height: 32px;\n border-radius: 6px;\n }\n\n .tile-btn {\n padding: 6px 8px;\n font-size: 10px;\n min-height: 28px;\n }\n\n /* Mobile tile buttons layout */\n .ui-bottom-center.tile-buttons {\n gap: 4px;\n flex-wrap: wrap;\n max-width: 90vw;\n }\n\n .ui-bottom-center.tile-buttons .tile-btn {\n flex: 1;\n min-width: 60px;\n max-width: 80px;\n }\n\n /* Mobile grid controls */\n .ui-grid-controls {\n flex-wrap: wrap;\n gap: 4px;\n }\n\n .ui-grid-controls .btn {\n padding: 4px 8px;\n font-size: 10px;\n }\n\n /* Mobile login container */\n .login-container {\n position: relative;\n top: auto;\n right: auto;\n margin: 10px 0;\n width: 100%;\n max-width: none;\n padding: 12px;\n }\n\n /* Mobile login form elements */\n .login-form h3 {\n font-size: 16px;\n }\n\n .login-form p {\n font-size: 12px;\n }\n\n .input-group {\n flex-direction: column;\n gap: 6px;\n margin-bottom: 6px;\n }\n\n .form-input {\n width: 100%;\n box-sizing: border-box;\n font-size: 14px;\n padding: 10px 12px;\n }\n\n .btn-sm {\n width: 100%;\n padding: 10px 12px;\n font-size: 14px;\n }\n\n .user-info {\n flex-direction: column;\n align-items: flex-start;\n gap: 8px;\n }\n\n .user-details {\n width: 100%;\n }\n\n /* Mobile saved games */\n .saved-games-container {\n margin-top: 15px;\n margin-bottom: 60px; /* Extra bottom margin for mobile scrolling */\n }\n\n .saved-game-item {\n flex-direction: column;\n align-items: flex-start;\n gap: 10px;\n }\n\n .game-actions {\n margin-left: 0;\n width: 100%;\n justify-content: space-between;\n }\n\n .search-container {\n flex-direction: column;\n gap: 8px;\n }\n\n .search-input {\n min-width: auto;\n width: 100%;\n }\n\n /* Mobile message overlay */\n .message-overlay {\n font-size: 14px;\n padding: 8px 16px;\n max-width: 90vw;\n }\n }\n\n /* Mobile instructions */\n .mobile-instructions {\n font-size: 12px;\n color: rgba(255, 255, 255, 0.8);\n margin-top: 8px;\n text-align: center;\n }\n\n /* Hide mobile instructions on desktop */\n @media (min-width: 769px) {\n .mobile-instructions {\n display: none;\n }\n }\n\n /* Extra small screens */\n @media (max-width: 480px) {\n .login-container {\n margin: 5px 0;\n padding: 8px;\n }\n\n .login-form h3 {\n font-size: 14px;\n }\n\n .login-form p {\n font-size: 11px;\n }\n\n .form-input {\n font-size: 13px;\n padding: 8px 10px;\n }\n\n .btn-sm {\n font-size: 13px;\n padding: 8px 10px;\n }\n\n .user-handle {\n font-size: 13px;\n }\n\n .user-display-name {\n font-size: 11px;\n }\n }",[],[151,220],[151],{"_102":230,"_95":231,"_152":232,"_154":-5,"_155":137,"_156":233,"_158":159,"_104":234,"_99":32,"_161":186,"_163":235,"_164":22,"_165":-5,"_166":236,"_98":237},"2d18d6ba-92f9-11f0-b86e-0224a6c84d84",".vtignore","2d18d75a-92f9-11f0-b86e-0224a6c84d84",1,["D",1758025934952],".git\n.DS_Store\nnode_modules\nvendor",[],[231],{"_102":239,"_95":240,"_152":241,"_154":-5,"_155":137,"_156":213,"_158":159,"_104":242,"_99":243,"_161":186,"_163":244,"_164":22,"_165":-5,"_166":245,"_98":246},"3fd5d6e0-930d-11f0-a661-0224a6c84d84","README.md","7597f652-92fc-11f0-89f5-0224a6c84d84",["D",1758034556312],3,"# 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.",[],[240],{"_102":248,"_95":249,"_152":250,"_154":-5,"_155":137,"_156":251,"_158":159,"_104":252,"_99":253,"_161":186,"_163":254,"_164":22,"_165":-5,"_166":255,"_98":256},"2f08b51c-931c-11f0-987d-0224a6c84d84","deno.json","2d1e26ba-92f9-11f0-aa6a-0224a6c84d84",251,["D",1758040970572],7,"{\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 \"@atproto/oauth-client-browser\": \"npm:@atproto/oauth-client-browser@0.3.15\",\n \"@atproto/api\": \"npm:@atproto/api@0.15.5\",\n \"three\": \"npm:three@0.180.0\"\n }\n}",[],[249],{"_102":258,"_95":259,"_152":260,"_154":-5,"_155":137,"_156":261,"_158":159,"_104":262,"_99":263,"_161":264,"_163":265,"_164":22,"_165":96,"_166":266,"_98":267},"d8723f6a-9312-11f0-a26d-0224a6c84d84","index.ts","995c486e-92fb-11f0-a9af-0224a6c84d84",158,["D",1758036959847],5,"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.run/client-metadata.json\",\n client_uri: \"https://qbat.val.run\",\n logo_uri: \"https://qbat.val.run/frontend/favicon.svg\",\n redirect_uris: [\"https://qbat.val.run\"],\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;",[],[259],"files",[149,168,179,190,200,209,218,229,238,247,257],"counts",{"_272":32,"_273":274,"_275":32,"_276":32},"pulls","branches",4,"forks","envVars","contents",[279,282,285,288,291],{"_102":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_104":280,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":281},["D",1758026860110],[151],{"_102":230,"_95":231,"_152":232,"_154":-5,"_155":137,"_156":233,"_158":159,"_104":283,"_99":32,"_161":186,"_163":235,"_164":22,"_165":-5,"_98":284},["D",1758025934952],[231],{"_102":239,"_95":240,"_152":241,"_154":-5,"_155":137,"_156":213,"_158":159,"_104":286,"_99":243,"_161":186,"_163":244,"_164":22,"_165":-5,"_98":287},["D",1758034556312],[240],{"_102":248,"_95":249,"_152":250,"_154":-5,"_155":137,"_156":251,"_158":159,"_104":289,"_99":253,"_161":186,"_163":254,"_164":22,"_165":-5,"_98":290},["D",1758040970572],[249],{"_102":258,"_95":259,"_152":260,"_154":-5,"_155":137,"_156":261,"_158":159,"_104":292,"_99":263,"_161":264,"_163":265,"_164":22,"_165":96,"_98":293},["D",1758036959847],[259],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branches",{"_93":94,"_95":96,"_100":302,"_273":307},{"_102":103,"_95":96,"_104":303,"_106":-5,"_107":22,"_108":109,"_110":111,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":304,"_131":305,"_134":306,"_146":22},["D",1758025872359],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[308,314,321,329],{"_102":137,"_104":309,"_310":311,"_95":43,"_138":103,"_99":136,"_139":-5,"_140":-5,"_312":313,"_106":-5},["D",1758025872359],"updatedAt",["D",1758045157602],"lockfileKey","1758045167930-esm.town_v_wilhelm_qbat@288-main",{"_102":315,"_104":316,"_310":317,"_95":318,"_138":103,"_99":319,"_139":137,"_140":213,"_312":320,"_106":-5},"b715f1b2-9309-11f0-a71e-0224a6c84d84",["D",1758033038413],["D",1758034517362],"login",54,"1758034254538-esm.town_v_wilhelm_qbat@42-login",{"_102":322,"_104":323,"_310":324,"_95":325,"_138":103,"_99":326,"_139":137,"_140":327,"_312":328,"_106":-5},"b4dc97b0-9305-11f0-b879-0224a6c84d84",["D",1758031316695],["D",1758032905043],"creator",52,78,"1758032914169-esm.town_v_wilhelm_qbat@52-creator",{"_102":330,"_104":331,"_310":332,"_95":333,"_138":103,"_99":334,"_139":137,"_140":335,"_312":336,"_106":-5},"b4140f6a-9301-11f0-8990-0224a6c84d84",["D",1758029597394],["D",1758031048595],"hunger",69,77,"1758031054853-esm.town_v_wilhelm_qbat@69-hunger","actionData","errors"]

Branches4

Branches
4