CASCADA Framework

Appearance

LINX Game Modes Menu ​

Menu structure with 4 modes + shared visual themes

🎯 MVP DEMO: Showing how one foundation evolves in 4 different directions

💡 Why 4 Modes? ​

This is NOT "4 different games for release" - it's an architecture demonstration!

GOAL: Show developers and users that:

1. Common foundation (nodes, edges, territories)
   ↓
2. Can evolve in DIFFERENT directions
   ↓
3. Each direction = unique experience
   ↓
4. All on ONE architecture (CASCADA)

RESULT: "Wow, I can make my own 5th mode!"

Each mode = Proof of Concept:

  • Classic → "core mechanics work"
  • Fractal → "collapse transitions are possible"
  • Ascension → "ability system adds easily"
  • Temporal → "time control integrates simply"

🎮 Menu Structure ​

╔════════════════════════════════════════════════╗
║                    LINX                        ║
║          Connect. Conquer. Win.                ║
╚════════════════════════════════════════════════╝

┌──────────────────────────────────────────────┐
│  🎨 VISUAL THEME: [Minimal ▼]                │
│     • Minimal                                │
│     • Neon Grid                              │
│     • Brutalist                              │
│     • Liquid Crystal                         │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  1️⃣  CLASSIC MODE (Current)                  │
│     ∞ Infinite rounds, NANO only             │
│     🎯 Goal: Survive & dominate              │
│     ⏱️  60 seconds per round                 │
│                                              │
│     [PLAY CLASSIC] ──────────────────────────│
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  2️⃣  FRACTAL MODE (Concept 1)                │
│     🔬 NANO → MEGA evolution                 │
│     🎯 Goal: Reach MEGA level                │
│     ⚡ Territories collapse to super-nodes    │
│                                              │
│     [PLAY FRACTAL] 🆕 ───────────────────────│
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  3️⃣  ASCENSION MODE (Concept 2)              │
│     📈 Rise & fall between levels            │
│     🎯 Goal: Achieve godhood (50k score)     │
│     ⚡ Unlock abilities, risk death           │
│                                              │
│     [PLAY ASCENSION] 🆕 ─────────────────────│
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  4️⃣  TEMPORAL MODE (Concept 3)               │
│     ⏰ Control time speed                    │
│     🎯 Goal: Master all time scales          │
│     ⚡ x1.0 → x100 speed + pause              │
│                                              │
│     [PLAY TEMPORAL] 🆕 ──────────────────────│
└──────────────────────────────────────────────┘

[SETTINGS]  [LEADERBOARD]  [ABOUT]  [QUIT]

📁 Code Structure ​

File Organization ​

src/game/
├── config/
│   ├── game.config.ts          # Base configuration
│   ├── phaser.config.ts        # Phaser + 4 scenes
│   ├── linx-themes.ts          # 4 visual themes
│   └── game-modes-config.ts    # Enable/disable modes
│
├── scenes/
│   ├── BootScene.ts
│   ├── PreloaderScene.ts
│   └── MainMenuSceneVue.ts     # Mode selection
│
├── territory/
│   └── modes/
│       ├── classic/
│       │   └── TerritoryGameScene.ts    # Classic Mode
│       ├── fractal/
│       │   └── FractalModeScene.ts      # Fractal Mode
│       ├── ascension/
│       │   └── AscensionModeScene.ts    # Ascension Mode
│       └── temporal/
│           └── TemporalModeScene.ts     # Temporal Mode
│
└── ui/
    ├── MainMenuUI.vue          # Menu with mode cards
    ├── GameHUD.vue             # Classic Mode UI
    ├── FractalModeHUD.vue      # Fractal Mode UI
    ├── AscensionModeHUD.vue    # Ascension Mode UI
    └── TemporalModeHUD.vue     # Temporal Mode UI

🎯 Mode 1: CLASSIC MODE (Current) ​

Description ​

Current LINX gameplay - infinite survival at NANO scale.

Goal: Survive as long as possible, accumulate score across rounds.

Mechanics:

  • Click → Create node (-10 energy)
  • Drag → Create edge
  • Close polygon (3-6 nodes) → Capture territory
  • Enemies inside → Captured (+30 energy)
  • Round lasts 60 seconds
  • Score/energy persist between rounds
  • Out of energy → Eliminated

Features ​

✅ Infinite rounds system
✅ Energy persistence
✅ Score accumulation
✅ Bot AI (3 opponents)
✅ Double-click node deletion
✅ First polygon must capture enemy
✅ Game Over → Restart to menu (SPACE)

Status: ✅ Production Ready

Scene: TerritoryGameScene.ts
UI: GameHUD.vue

🔬 Mode 2: FRACTAL MODE (Concept 1) ​

Description ​

Fractal Aggregation - territories collapse into super-nodes as you ascend scales.

Core Concept: What if you could zoom out and see your territories become single entities?

Goal: Progress from NANO → MICRO → MESO → MACRO → MEGA

Features ​

✅ SuperNode collapse system
✅ Scale transitions (SPACE to ascend)
✅ Click SuperNode → zoom into details
✅ Visual scale distinction (larger nodes/glow)
✅ Score thresholds for progression

Unique Mechanics ​

Scale Thresholds:

  • NANO → MICRO: 100 score + 3 territories
  • MICRO → MESO: 500 score + 8 territories
  • MESO → MACRO: 2000 score + 12 territories

SuperNode System:

  • Territories collapse into single large nodes
  • SuperNodes show internal node count
  • Click SuperNode → zoom into NANO view
  • TAB → return to overview
  • ESC → descend to previous scale

Controls:

  • SPACE - Ascend to next scale (when ready)
  • TAB - Zoom to NANO details
  • ESC - Descend or return to menu
  • Click SuperNode - Zoom into that group

Status: ✅ Production Ready

Scene: FractalModeScene.ts
UI: FractalModeHUD.vue

📈 Mode 3: ASCENSION MODE (Concept 2) ​

Description ​

Energy States / Ability Progression - unlock divine powers as you accumulate score.

Core Concept: What if your territory network became sentient and evolved abilities?

Goal: Achieve godhood (50,000+ score) while managing energy survival.

Features ​

✅ Ability system (Clone, Slow-Mo)
✅ Cooldown management
✅ Tier progression (NANO → MICRO → ...)
✅ Energy as survival resource
✅ Visual feedback for abilities

Unique Abilities ​

Ability 1: Clone Territory (Hotkey C):

  • Cost: 200 energy
  • Effect: Clones random territory to new location
  • Cooldown: 30 seconds
  • Visual: Green camera flash

Ability 2: Time Slow-Mo (Hotkey T):

  • Cost: 150 energy
  • Effect: Slows game to 0.3x speed for 5 seconds
  • Cooldown: 30 seconds
  • Visual: Blue camera flash

Tier System (Ready for expansion):

  • NANO (0-1000): Basic gameplay
  • MICRO (1000-5000): Unlock Clone
  • MESO (5000-20000): Unlock Slow-Mo + Predict
  • MACRO (20000-50000): Unlock Earthquake + Time Freeze
  • MEGA (50000+): Unlock Rewind + God Mode

Controls:

  • C - Clone Territory (-200 energy)
  • T - Time Slow-Mo (-150 energy)
  • (P, E, R planned for higher tiers)

Status: ✅ Production Ready (2 abilities implemented)

Scene: AscensionModeScene.ts
UI: AscensionModeHUD.vue

⏰ Mode 4: TEMPORAL MODE (Concept 3) ​

Description ​

Temporal Zoom / Time Control - control game speed from x1 to x100.

Core Concept: What if you could speed up time to see long-term patterns?

Goal: Master all time scales, build self-sustaining networks.

Features ​

✅ Time speed control (1-5 keys)
✅ Pause system (SPACE)
✅ Speed affects all game systems
✅ Time scale UI indicator
⏳ Automation system (planned)
⏳ History/rewind (planned)

Unique Mechanics ​

Time Speed Control (Hotkeys 1-5):

  • 1 = x1 speed (normal time)
  • 2 = x2 speed (faster)
  • 3 = x5 speed (fast)
  • 4 = x10 speed (very fast)
  • 5 = x100 speed (hyper-speed!)
  • Visual: Yellow flash on speed change

Pause Control (SPACE):

  • Toggle pause/resume
  • Scene.pause() / Scene.resume()
  • Overrides default SPACE behavior

Automation Levels (Planned):

  • Level 0: Full manual control
  • Level 1-3: Partial automation
  • Level 4-5: Full bot control (you observe)

Controls:

  • 1-5 - Set time speed
  • SPACE - Pause/Resume
  • (A for automation - planned)
  • (R for rewind - planned)

Status: ✅ Production Ready (time control implemented)

Scene: TemporalModeScene.ts
UI: TemporalModeHUD.vue

🎨 Shared Visual Themes ​

Theme Selector (in Main Menu) ​

All 4 modes share the same 4 visual themes:

1. Minimal (Default):

  • Black & white
  • Monospace font
  • Clean design
  • High contrast

2. Neon Grid:

  • Cyberpunk aesthetic
  • Cyan/Magenta/Yellow palette
  • Glow effects
  • Scanline overlay

3. Brutalist:

  • Industrial style
  • Gray tones
  • Thick strokes
  • Noise texture

4. Liquid Crystal:

  • Pastel holographic
  • Soft colors (lavender, mint, pink)
  • Blur effects
  • Shimmer animation

Theme Application ​

typescript
// Themes stored in localStorage
localStorage.setItem("linx_theme", themeId);

// Applied on scene create
this.theme = themeManager.getCurrentTheme();

// All game elements use theme colors:
- Nodes: theme.colors.player / enemy
- Edges: theme.colors.primary
- Territories: theme.colors.accent
- UI: theme.colors.background / text
- Particles: theme-specific config

Benefits:

  • Consistent visuals across all modes
  • Personal preference support
  • Hot-swapping without reload
  • Marketing variety (4 screenshots per mode = 16 visuals!)

📊 Main Menu ​

vue
<template>
  <div class="main-menu">
    <!-- Title -->
    <h1 class="title">LINX</h1>
    <p class="tagline">Connect. Conquer. Win.</p>

    <!-- Theme Selector -->
    <ThemeSelector :current-theme="currentTheme" @theme-changed="changeTheme" />

    <!-- Mode Cards -->
    <div class="mode-grid">
      <ModeCard
        v-for="mode in enabledModes"
        :key="mode.id"
        :mode="mode"
        :is-new="mode.id !== 'classic'"
        @select="startMode(mode.id)"
      />
    </div>

    <!-- Footer -->
    <div class="menu-footer">
      <button @click="openSettings">Settings</button>
      <button @click="openLeaderboard">Leaderboard</button>
      <button @click="openAbout">About</button>
    </div>
  </div>
</template>

Mode Card Component ​

vue
<template>
  <div class="mode-card" :class="mode.id">
    <div class="card-header">
      <h2>{{ mode.name }}</h2>
      <span v-if="isNew" class="new-badge">🆕 NEW</span>
    </div>

    <div class="card-body">
      <p class="description">{{ mode.description }}</p>
      <p class="goal">🎯 {{ mode.goal }}</p>
      <p class="mechanic">⚡ {{ mode.mechanic }}</p>
    </div>

    <button class="play-button" @click="$emit('select')">
      PLAY {{ mode.name.toUpperCase() }}
    </button>
  </div>
</template>

🎯 Final Word: This is MVP! ​

Remember: Each mode is a Proof of Concept, not a final product.

For Players: ​

Try all 4 modes, give feedback on which to develop further!

For Developers: ​

See how one foundation supports multiple directions. Build your own!

For Investors: ​

4 modes = 4 potential products from one codebase. Efficient!

For Press: ​

"Revolutionary Multi-Scale gameplay demonstrated through 4 distinct experiences."

All modes playable! Choose your adventure! 🎮🌊

Last Updated: October 2025
Status: 4 modes production ready

MIT Licensed

Copyright © 2025