CASCADA Framework

Appearance

Installation and Setup ​

Installation Options ​

CASCADA Framework offers three deployment options to suit different development and production needs:

Best for: Development, testing, debugging

bash
# Clone and install
git clone <repository-url>
cd games
pnpm install

# Start development server
pnpm dev
# → http://localhost:5173 (Game)
# → http://localhost:5174 (Documentation)

Features:

  • Hot module replacement
  • Full debugging capabilities
  • All game modes available
  • Complete documentation
  • Fastest development cycle

🐳 Option 2: Docker Development (Full Environment) ​

Best for: Consistent development environment, multiplayer testing

bash
# Start full development environment
pnpm docker:dev

# Or with build
pnpm docker:dev:build

Features:

Docker Services:

  • cascada-dev: Main game application
  • cascada-docs: Documentation server
  • cascada-server: Multiplayer server (Colyseus)

🌐 Option 3: Vercel Deployment (Production Ready) ​

Best for: Production deployment, public demos, sharing

bash
# Install Vercel CLI
npm i -g vercel

# Build for production
node scripts/build-production.js

# Deploy to Vercel
vercel --prod

Features:

  • Game: https://your-project.vercel.app/ (Your full game)
  • Documentation: https://your-project.vercel.app/docs/ (Complete docs)
  • Automatic HTTPS
  • Global CDN
  • Zero configuration deployment
  • Production optimized builds

What's Deployed:

  • Your complete CASCADA Framework game (236KB)
  • All game modes (Classic, Fractal, Ascension, Temporal)
  • Full documentation with search
  • Single domain with both game and docs

Prerequisites ​

Before starting, ensure you have:

  • Node.js 18.0.0 or higher
  • pnpm 8.0.0 or higher

Check Versions ​

bash
node --version  # v18.0.0+
pnpm --version  # v8.0.0+

Install Node.js ​

If Node.js is not installed, download from nodejs.org

Install pnpm ​

bash
pnpm install -g pnpm

Project Installation ​

1. Clone Repository ​

bash
git clone <repository-url>
cd games

2. Install Dependencies ​

bash
ppnpm install

This will install:

  • phaser - game engine
  • vite - dev server and bundler
  • typescript - compiler
  • vue - UI framework
  • vitepress - documentation

3. Run Dev Server ​

bash
pnpm dev

Opens http://localhost:5173 with landing page!

Available Scripts ​

CASCADA Framework includes comprehensive npm scripts for development, building, and deployment:

Development Scripts ​

bash
# Start development server
pnpm dev
# → http://localhost:5173

# Start documentation server
pnpm docs:dev
# → http://localhost:5174

# Start multiplayer server
pnpm server:dev
# → http://localhost:2567

Build Scripts ​

bash
# Build production bundle
pnpm build

# Preview production build
pnpm preview

Quality Assurance Scripts ​

bash
# Run all checks (architecture + modes + TypeScript)
pnpm lint

# Check architecture compliance
pnpm check:architecture

# Check game modes structure
pnpm check:modes

# Validate layer isolation
pnpm validate:isolation

# ESLint only
pnpm lint:eslint

Docker Scripts ​

bash
# Full development environment
pnpm docker:dev

# Build and run
pnpm docker:dev:build

# Stop containers
pnpm docker:dev:down

# View logs
pnpm docker:dev:logs

# Packages development only
pnpm docker:packages

# Documentation only
pnpm docker:docs

Documentation Scripts ​

bash
# Development documentation
pnpm docs:dev

# Build documentation
pnpm docs:build

# Preview built documentation
pnpm docs:preview

Project Structure ​

After installation you'll see:

games/
├── docs/              # Documentation (VitePress)
├── src/               # Source code
│   ├── platform/      # Phaser base
│   ├── core/          # Universal systems
│   └── game/          # LINX game
├── public/            # Static assets
├── node_modules/      # Dependencies
├── package.json       # pnpm config
└── README.md          # Technical README

Available Commands ​

bash
# Development
pnpm dev          # Game dev server (http://localhost:5173)
pnpm docs:dev     # Docs dev server (http://localhost:5174)

# Build
pnpm build        # Production build
pnpm docs:build   # Build docs

# Verification
pnpm lint         # TypeScript type check
pnpm preview      # Preview production build

# Documentation
pnpm docs:preview # Preview docs

Verify Installation ​

Run Game: ​

bash
pnpm dev

You should see:

  1. Landing page with engine presentation
  2. Navigation to Demo and Docs
  3. LINX game demo (click "Try Demo")

Run Documentation: ​

bash
pnpm docs:dev

Opens http://localhost:5174 with this documentation!

Troubleshooting ​

Error: "pnpm: command not found" ​

bash
pnpm install -g pnpm

Error: "Node version too old" ​

Update Node.js to version 18+

Error during dependency installation ​

bash
# Clear cache and reinstall
rm -rf node_modules pnpm-lock.yaml
ppnpm install

Port 5173 already in use ​

bash
# Change port in vite.config.ts
server: {
  port: 3000,  # Different port
}

Next Steps ​

After successful installation, choose your path:

For Developers ​

  1. Read Quick Start
  2. Study Project Structure
  3. Test Adaptive Viewport
  4. Try Game Modes

For Production Deployment ​

  1. Review Vercel Deployment Guide
  2. Test production build: node scripts/build-production.js
  3. Deploy: vercel --prod

For Multiplayer Development ​

  1. Start Docker environment: pnpm docker:dev
  2. Read Multiplayer Guide
  3. Test multiplayer features at http://localhost:2567

All three options are ready to use! 🎯

MIT Licensed

Copyright © 2025