🎮 Play LINX Demo

Experience Multi-Scale Gameplay live in your browser!

---

🚀 Launch Demo

▶ Play LINX Demo

Experience Multi-Scale Gameplay in action

PLAY NOW

Opens in new tab • Requires: pnpm dev

---

🎯 Controls & Features

Basic Controls

• Click - Create your node (cyan)
• Drag between nodes - Create connection
• Form triangle - Capture territory
• Double-click node - Delete it

Multi-Scale Controls

• TAB - Cycle through 5 modes
• 1-5 - Jump to specific mode
• A - Toggle auto-mode
• Resize window - Auto-adaptation

5 Gameplay Modes

Key	Mode	Zoom	Speed	Gameplay
1	🔬 NANO	2.5x	1.0x	Tactical, detailed
2	🔍 MICRO	1.5x	1.0x	Squad control
3	👥 MESO	0.8x	2.0x	Army command
4	🗺️ MACRO	0.4x	5.0x	Strategic
5	🌍 MEGA	0.3x	10.0x	God view

---

🎨 Visual Themes

At game start, swipe through 4 themes:

1. Minimal - Clean black & white monospace
2. Neon Grid - Cyberpunk with glow effects
3. Brutalist - Industrial gray with noise
4. Liquid Crystal - Rainbow holographic

---

📊 Game Rules

Objective

Capture the most territory in 60 seconds!

Energy Economy

• Start: 100 energy
• Create node: -10 energy
• Capture enemy: +30 energy
• Destroy enemy edge: +5 energy
• Out of energy → Eliminated!

First Polygon Rule ⚠️

Your first polygon MUST:

• Be exactly 3 nodes (triangle)
• Capture an enemy inside

Fail this → instant elimination!

Infinite Mode

• Rounds: 60 seconds each
• Score persists between rounds
• Energy persists
• Lost round → Eliminated
• Keep playing until final elimination

---

💡 Try This Challenge

Test Multi-Scale adaptation:

Challenge: One Game, Five Perspectives

1. Open demo in small window (800x600)
   → Mode: NANO or MICRO
   → Create 3 nodes forming triangle
   → Capture enemy

2. Press 5 (or resize to 1920x1080)
   → Mode: MEGA
   → Same triangle visible
   → See entire battlefield
   → Different gameplay feel!

3. Press TAB repeatedly
   → Cycle through all 5 modes
   → Watch camera zoom
   → Watch time speed change
   → SAME game, 5 different experiences!

This is Multi-Scale Gameplay in action.

---

🔧 What You're Seeing - Technical

Multi-Scale System

The demo demonstrates:

Automatic Adaptation:

Phone portrait (375x667)    → NANO mode (tactical)
Tablet landscape (1024x768) → MESO mode (strategic)
Desktop large (1920x1080)   → MEGA mode (overview)

Manual Override:

Press TAB → Manual mode cycling
Press 1-5 → Direct mode selection
Press A   → Toggle auto-mode ON/OFF

Vue 3 Integration

The HUD you see is Vue:

• Score updates 60fps (reactive)
• Timer counts down smoothly
• Energy bar animates
• Theme selector (swipeable)

Zero manual DOM updates - Vue handles everything.

Theme System

4 visual styles with:

• Hot-swapping (no reload)
• CSS variables
• Real-time application
• Framework-agnostic

Graph-Based Gameplay

Professional terminology:

• Nodes (not "dots")
• Edges (not "lines")
• Territories (not "areas")
• Graph theory principles

---

📖 After Playing

Understand the Code

• LINX Game Breakdown - Complete source analysis
• How polygon detection works
• How Vue UI integrates
• How themes are implemented

Build Your Own

• Quick Start Tutorial - 30-minute guide
• Step-by-step from scratch
• Build Multi-Scale game
• Add Vue UI
• Implement themes

Deep Dive

• Multi-Scale Gameplay - How 5 modes work
• Vue Integration - Reactive patterns
• Strict Architecture - Layer rules

---

🎯 What Makes This Special

Not Just Responsive UI

Traditional games:

Mobile  → Small buttons
Desktop → Big buttons
Result: SAME gameplay

CASCADA (LINX):

Mobile  → NANO mode (tactical combat)
Desktop → MEGA mode (strategic overview)
Result: DIFFERENT gameplay, SAME world

Continuous Progress

Play on phone during commute
    ↓
Progress saved
    ↓
Continue on desktop at home
    ↓
SAME world, SAME score, different scale!

Framework-Agnostic

• Theme system: Pure CSS variables
• UI: Vue 3, but could be React/Svelte
• Game logic: Pure TypeScript
• No framework lock-in

---

🚀 Next Steps

1. Play the demo (link above) - 5 minutes
2. Read breakdown - LINX Game Analysis
3. Follow tutorial - Build Your Own
4. Study architecture - Strict Rules

---

Ready to build Multi-Scale games?

Start Tutorial → • API Reference → • Architecture →