App4.Dog Interactive Game 🐕🎮

An interactive pet training game built with Quasar/Capacitor and Rust/Bevy WASM - the modern successor to puppyplay-godot-droid.

🎯 Overview

App4.Dog Game is designed for real pets (especially dogs) to play on tablets and smartphones. The game features anthropomorphic critters that pets interact with through touch, teaching vocabulary, obedience, and providing entertainment.

Key Concepts

• Pet = Real dog/animal player 🐶
• Critter = Anthropomorphic game character (bird, bunny, etc.) 🐦🐰
• Interaction = Pet taps, swipes, or holds screen to play with critters

🏗️ Architecture

Frontend Stack

• Quasar CLI - Vue 3 + TypeScript + Vite
• Capacitor - Mobile app deployment (Android/iOS)
• Material Design 3 - UI components

Game Engine

• Rust - Core game logic with Bevy ECS
• WebAssembly (WASM) - Browser/mobile execution
• Bevy Engine - Entity Component System for game objects

Mobile Deployment

• Android - Native APK via Capacitor
• iOS - Native app via Capacitor (future)

🚀 Quick Start

Prerequisites

# Install Rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

# Install Node.js/pnpm
npm install -g pnpm

# Install Quasar CLI
pnpm install -g @quasar/cli

Development Setup

# Clone and setup
git clone https://github.com/app4dog/app4dog-game.git
cd app4dog-game

# Install dependencies
pnpm install

# Add Rust WASM target
rustup target add wasm32-unknown-unknown

# Install wasm-pack for WASM builds
cargo install wasm-pack

# Build game engine to WASM
./scripts/build-wasm.sh

# Start development server
pnpm run dev

Visit http://localhost:9000 to see the game!

WASM Build Process

The game uses a two-part build system:

1. Rust → WASM: ./scripts/build-wasm.sh compiles the Bevy game engine to WebAssembly
2. Quasar Build: Standard Vue.js/Quasar build process with WASM integration

# Manual WASM build (done automatically by script)
cd game-engine
wasm-pack build --target web --out-dir pkg --dev
cd ..

# Files are copied to public/game-engine/ for Quasar access
# TypeScript bindings generated in src/types/game-engine.d.ts

📱 Mobile Development

Android

# Build and run on Android device/emulator
just dev-android

# Or step by step:
just build-wasm
pnpm run build
npx cap sync android
npx cap open android

iOS (Future)

# Build and run on iOS device/simulator
just dev-ios

🎮 Game Features

Critter System

• Chirpy (Bird) - Flies around, responds to taps
• Bouncy (Bunny) - Hops and follows swipe gestures
• Buddy (Dog) - High obedience, great for training
• Whiskers (Cat) - Independent, challenging gameplay

Interaction Types

• Tap - Pet paws/nose tap triggers critter responses
• Swipe - Directional movement commands
• Hold - Keeps critters in place

Training Modes

• Basic Commands - Sit, stay, come
• Object Recognition - Toys, food, household items
• People Recognition - Family members, visitors
• Emotion Training - Happy, sad, excited responses

🛠️ Development Commands

# Core development
just dev              # Start Quasar dev server
just build           # Build for production
just build-wasm      # Compile Rust to WASM

# Mobile development  
just dev-android     # Android development
just dev-ios         # iOS development (future)


# Code quality
just lint            # ESLint
just format          # Prettier
just test            # Run tests

# Deployment
just commit          # Stage and commit
just push            # Push to GitHub

# Maintenance
just clean           # Clean build files
just info            # Project information

📁 Project Structure

app4dog-game/
├── src/                    # Vue/Quasar frontend
│   ├── components/         # Game components
│   │   ├── GameCanvas.vue  # Main game canvas
│   │   ├── CritterSelection.vue
│   │   └── GameSettings.vue
│   ├── pages/
│   │   └── GamePage.vue    # Game page (/game)
│   └── types/              # TypeScript definitions
├── game-engine/            # Rust/Bevy game logic
│   ├── src/
│   │   ├── lib.rs          # WASM entry point
│   │   ├── game.rs         # Game plugin & state
│   │   ├── components.rs   # ECS components
│   │   ├── systems.rs      # Game systems
│   │   └── resources.rs    # Game resources
│   └── Cargo.toml          # Rust dependencies
├── public/assets/          # Game assets
│   ├── sprites/            # Critter animations
│   ├── audio/              # Sound effects
│   └── fonts/              # Custom fonts
├── scripts/                # Build scripts
└── justfile               # Development commands

🎨 Game Assets

Asset structure ready for critter animations and audio:

• public/assets/sprites/ - Critter sprite sheets and animations
• public/assets/audio/positive/ - Positive feedback sounds
• public/assets/fonts/ - Custom fonts for game UI

Note: Actual asset files should be added to these directories

🔧 Technical Details

Rust/Bevy Game Engine

• ECS Architecture - Entities, Components, Systems
• WASM Compilation - Via wasm-pack for web deployment
• JavaScript Bridge - Bidirectional communication with Vue
• Asset Loading - Sprites, audio, fonts from public directory

Vue/Quasar Integration

• GameCanvas.vue - Main game container with touch handling
• Touch Events - Converted to game interactions
• State Management - Reactive game state with Vue refs
• Mobile Optimization - Touch-first interface design

Capacitor Mobile

• Native APIs - Device vibration, screen wake lock
• Performance - Hardware-accelerated rendering
• Distribution - Google Play Store, Apple App Store

🐾 Compared to puppyplay-godot-droid

Improvements

• ✅ Easier Testing - Web-first development, no Android emulator required
• ✅ Better Architecture - Clean separation of concerns
• ✅ Type Safety - Full TypeScript + Rust type safety
• ✅ Modern Stack - Latest Vue 3, Bevy, and mobile tooling
• ✅ Debuggability - Better error handling and logging

Migration Benefits

• Reduced Complexity - Simpler build process
• Faster Iteration - Hot reload in browser
• Better Testing - Unit tests for both Rust and Vue code
• Mobile-First - Designed specifically for tablets

📈 Development Roadmap

Phase 1: Core Game ✅

• Project setup and architecture
• Quasar + Vue 3 + TypeScript frontend
• Rust/Bevy game engine with ECS
• WASM compilation and integration
• Touch interaction handling
• Basic game state management
• Build system and scripts

Phase 2: Enhanced Gameplay 🚧

• Asset loading and rendering
• Critter animations and sprites
• Sound system integration
• Score and progression system
• Game canvas rendering

Phase 3: Training Features 📋

• Vocabulary recognition
• Custom pet profiles
• Training progress tracking
• Achievement system

Phase 4: Mobile Polish 📋

• Android build optimization
• iOS support
• App store deployment
• Performance optimization

☁️ Deployment

• Live domain https://gameplay.app4.dog serves the static build stored in the Cloudflare R2 bucket gameplay-live, while the preview channel https://next.gameplay.app4.dog maps to the gameplay-next bucket (see wrangler.toml for bucket bindings).
• .github/workflows/ci-cd.yml builds the WASM engine + Quasar app on every push, uploads the dist/ artifact, and then the deploy-cloudflare job pushes dist/spa to the correct R2 bucket using ryand56/r2-upload-action@latest.
• The sites are plain static assets (HTML/JS/WASM) hosted directly from R2 and fronted by Cloudflare, so deployment is a file sync rather than a server restart.
• For manual deploys or hotfixes you can run ./scripts/r2-sync.sh gameplay-live dist/spa (or gameplay-next) which uses rclone/wrangler to mirror the build output into the corresponding bucket with appropriate content types.

📄 License

App4.Dog Proprietary License – see LICENSE for details.

🙏 Acknowledgments

• puppyplay-godot-droid - Original proof of concept
• Bevy Engine - Rust game engine
• Quasar Framework - Vue.js framework
• App4.Dog Ecosystem - Backend infrastructure

---

Built with ❤️ for pets and their humans