QBAT

QBAT 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.

• Objective: Reach the golden goal before running out of moves
• Movement: Move around the grid using arrow keys (↑↓←→)
• Move Limit: You start with 10 moves - use them wisely!
• Apple Collection: Collect red apples to gain 3 additional moves each
• Walls: Brown walls block your path - you can only move on green floor tiles
• Goal: Reach the golden cylinder to win the game

• 3D Top-Down View: Classic puzzle game perspective with Three.js rendering
• Integrated UI: Game state displayed directly over the game canvas for immersive experience
• Grid-Based Movement: Simple tile-based movement system
• Resource Management: Limited moves create strategic gameplay
• Apple Collection: Red apples scattered around the maze provide bonus moves
• Win/Lose Conditions: Clear victory and failure states
• Restart Functionality: Easy game restart with a single button click
• Board Sharing: Copy/paste board states using emoji-based text representation
• Custom Levels: Load custom board configurations by pasting text
• Bluesky Integration: Log in with Bluesky and share your game results
• Smooth Animations: Hop-based movement with bounce effects
• Responsive Controls: Arrow keys are captured to prevent page scrolling

• Backend: Deno with Hono framework
• Frontend: Vanilla JavaScript with Three.js for 3D rendering
• OAuth: Bluesky integration using @atcute libraries
• Build: No build step required - runs directly with Deno

• 3D Scene: Three.js scene with top-down camera positioning
• Grid Generation: Maze-like grid with walls and floor tiles
• Apple System: Random apple placement with collection mechanics
• Move Management: Limited moves with apple-based bonus system
• Animation System: Smooth hop animations with bounce effects
• Input Handling: Keyboard event management with preventDefault for arrow keys
• Game State: Win/lose conditions with status tracking

/
├── index.ts              # Deno/Hono server with OAuth endpoints
├── deno.json             # Deno configuration with OAuth dependencies
└── frontend/
    ├── index.html        # HTML template with import maps
    ├── index.tsx         # Game implementation
    ├── style.css         # Styling including login component styles
    ├── bluesky-oauth.ts  # Bluesky OAuth functionality
    ├── login-component.ts # Login UI component
    └── favicon.svg       # Game icon

1. Install Deno (if not already installed):

   curl -fsSL https://deno.land/install.sh | sh

2. Start the server:

   deno run --allow-net index.ts

3. Open your browser to http://localhost:8000

4. Play: Use arrow keys to navigate the maze and collect apples!

The game now includes full Bluesky OAuth integration, allowing players to log in with their Bluesky accounts and share their game results.

• OAuth Login: Secure authentication with Bluesky using OAuth 2.0
• Automatic Sharing: Game results are automatically posted when you win (if logged in)
• Manual Sharing: Use the "🐦 Share to Bluesky" button to manually share your progress
• User Profile Display: See your Bluesky handle and avatar in the game interface
• Session Management: Persistent login sessions with automatic re-authentication

1. Login: Click the login form in the top-right corner of the game
2. Enter Handle: Type your full Bluesky handle (e.g., username.bsky.social)
3. Authenticate: Click "Login" to authenticate with Bluesky
4. Play & Share: Your game results will be automatically shared when you win!

• Uses @atcute/client and @atcute/oauth-browser-client libraries
• Implements OAuth 2.0 with PKCE for security
• Supports both automatic and manual game result sharing
• Handles session persistence and automatic re-authentication

The game supports copying and pasting board states using emoji-based text representation:

• 🔴 Player: Your current position
• 🏆 Goal: The golden target you need to reach
• 🍎 Apple: Collectible items that give you 3 extra moves
• 🧱 Wall: Obstacles you cannot pass through
• 🟢 Floor: Walkable tiles

1. Copy Board: Click the "📋 Copy" button to copy the current board state to your clipboard
2. Paste Board: Click the "📥 Paste" button to load a board state from your clipboard
3. Share Levels: Copy board states and share them with others via text messages, social media, etc.
4. Custom Levels: Create your own levels by editing the emoji text and pasting it back

QBAT Board State
Moves: 10 | Apples: 0
Player: (1, 1) | Goal: (6, 6)

🧱 🧱 🧱 🧱 🧱 🧱 🧱 🧱
🧱 🔴 🟢 🟢 🟢 🟢 🟢 🧱
🧱 🟢 🧱 🟢 🟢 🟢 🟢 🧱
🧱 🟢 🟢 🍎 🟢 🟢 🟢 🧱
🧱 🟢 🟢 🟢 🟢 🟢 🟢 🧱
🧱 🟢 🟢 🟢 🟢 🟢 🟢 🧱
🧱 🟢 🟢 🟢 🟢 🟢 🏆 🧱
🧱 🧱 🧱 🧱 🧱 🧱 🧱 🧱

• Camera: Top-down view positioned at (0, 10, 0) for classic puzzle game perspective
• Lighting: Ambient + directional lighting optimized for top-down view
• Player: Red sphere that hops between floor tiles
• Environment: Green floor tiles and brown walls create a maze-like appearance
• Collectibles: Red apples scattered around the maze
• Goal: Golden cylinder marking the victory location
• Animations: Smooth hop movements with bounce effects

The 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.