[{"_1":2,"_172":-5,"_173":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","ff0419d68e57d8cc3e37e5d3da688157c5dd37c6","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_147":148,"_169":170,"_171":-5},"handle","wilhelm","name","qbat","path","frontend/index.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":110,"_111":-5,"_12":112,"_113":-5,"_114":20,"_115":-5,"_116":32,"_14":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":127,"_130":131,"_133":134,"_146":20},"id","07c95dc6-92f9-11f0-ba04-0224a6c84d84","createdAt",["D",1758025872359],"deletedAt","legacyEnvVars","privacy","public","description","Vibecoded game with ATProto features","imageUrl","ecbce1e5-343d-483e-99fe-bc35afe6b93a","pinnedFileId","pinPreview","screenshotVersion","likeCount","a22192bb-4fed-4a1b-9182-d6c09e531cf8","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_128":129},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJwUXQza21ONmFtMEtyWFAxa3gzV3dTbGdXTSJ9","org",{"_93":94,"_132":129},"avatar","branch",{"_135":136,"_95":43,"_101":137,"_138":102,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},"version",288,"07c9b8f2-92f9-11f0-ba04-0224a6c84d84","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":149,"_95":150,"_151":152,"_153":154,"_155":137,"_156":136,"_157":158,"_103":159,"_135":160,"_161":162,"_163":164,"_165":20,"_166":-5,"_97":167},"eeb14a88-9325-11f0-b9b7-0224a6c84d84","index.tsx","fileId","ae592994-92fb-11f0-ae66-0224a6c84d84","parentId","54889fe4-92fb-11f0-a1ed-0224a6c84d84","branchId","branchVersion","latest",true,["D",1758045157602],140,"fileType","script","content","// 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});","deleted","label",[168,150],"frontend","permalink","https://www.val.town/x/wilhelm/qbat/code/frontend/index.tsx","extension","actionData","errors"]