VaultShift — The Impossible Heist 🎮

A cyberpunk tactical heist game powered by AI-generated live 3D worlds, built with Next.js 16 and the Reactor Happy Oyster streaming engine.

---

🎯 What is VaultShift?

VaultShift is an AI-powered tactical heist game where every decision you make reshapes the world in real time. You play as a master thief infiltrating the Vesper Museum, choosing from four tactical approaches — each one dynamically altering the museum's layout, guard positions, and threat levels.

The twist? Every heist outcome is rendered as a live 3D world stream powered by Reactor's generative AI, giving you a cinematic view of your heist as it unfolds.

---

✨ Features

• 🧠 AI-Driven Narrative Engine — Four distinct heist tactics (SNEAK, HACK, DISTRACT, BREAK) each with unique risk/reward tradeoffs
• 🌍 Live 3D World Generation — Each heist state generates a real-time 3D world stream using the Reactor Happy Oyster model
• 🔄 World Progression — Complete World 1, advance to World 2, World 3... each one deeper into the vault with escalating tension
• 🗺️ Dynamic Museum Map — Live zone tracking (Vent System, Maintenance Corridor, Security Drone) that updates based on your tactics
• 📊 Threat & Score Telemetry — Real-time guard alert level, heat meter, loot value, and session score tracking
• 🧬 Memory Timeline — A scrollable log of every decision and consequence across your heist run
• ⚡ Glassmorphism UI — Premium dark cyberpunk design with micro-animations, glow effects, and smooth transitions
• 🎯 Step-by-Step Workflow Banner — Guided 3-step heist flow: Choose Tactic → Adapt Building → Stream World

---

🗂️ Project Structure

VaultShift/
├── app/
│   ├── api/
│   │   └── reactor-token/
│   │       └── route.ts        # Server-side JWT minting for Reactor API
│   ├── globals.css             # Full design system (4000+ lines of premium CSS)
│   ├── layout.tsx              # Root layout
│   └── page.tsx                # Entry point
├── components/
│   ├── heist-console.tsx       # Main game engine (tactics, map, telemetry, memory)
│   └── reactor-world.tsx       # Live 3D world streaming component
├── .env                        # API keys (not committed — see setup below)
├── package.json
└── tsconfig.json

---

🚀 Getting Started

Prerequisites

• Node.js v20+
• npm v10+
• A Reactor API Key — get one at reactor.inc

Installation

# 1. Clone the repository
git clone https://github.com/Danish0703/VaultShift.git
cd VaultShift

# 2. Install dependencies
npm install

# 3. Set up environment variables
# Create a .env file in the project root:
echo "REACTOR_API_KEY=rk_your_key_here" > .env

# 4. Start the development server
npm run dev

Open http://localhost:3000 in your browser.

---

🔑 Environment Variables

Create a .env file in the project root:

# Happy Oyster is powered by Reactor. Keep this key on the server only.
REACTOR_API_KEY=rk_your_reactor_api_key_here

⚠️ Never commit your .env file. It is already in .gitignore.

Get your API key from reactor.inc.

---

🎮 How to Play

1. Open the game at localhost:3000
2. Choose a tactic from the action panel:
   • 🟦 SNEAK — Disable cameras silently. Low risk, low loot
   • 🟣 HACK — Override security grid. Medium risk, high tech advantage
   • 🟡 DISTRACT — Trigger false alarms. Splits guard attention
   • 🔴 BREAK — Force entry. Maximum loot, maximum heat
3. Adapt the Building — Apply your tactic to update the museum's live state
4. Stream the World — Click the museum map to open the live 3D world viewer
5. Advance through worlds — Use the "NEXT: WORLD 2" button to progress deeper into the vault

---

🛠️ Tech Stack

Technology	Purpose
Next.js 16	React framework with App Router and Turbopack
TypeScript 5.7	Full type safety across the entire codebase
@reactor-models/happy-oyster	Reactor SDK for live 3D world streaming
Lucide React	Icon library
Vanilla CSS	Custom design system with glassmorphism and animations

---

🏗️ Architecture

User: Choose Tactic
        ↓
heist-console.tsx → performAction → GameState updates
        ↓
Museum Map + Telemetry update live
        ↓
User clicks: Stream World
        ↓
reactor-world.tsx
        ↓
POST /api/reactor-token → Reactor API mints JWT
        ↓
HappyOysterProvider connects with JWT
        ↓
createWorld() → Reactor generates 3D scene from heist prompt
        ↓
startTravel() → WebRTC stream opens
        ↓
Live 3D World renders in browser
        ↓
"NEXT: WORLD 2" → endTravelSession → createWorld (next)

---

📦 Scripts

npm run dev      # Start development server (Turbopack)
npm run build    # Build production bundle
npm run start    # Start production server
npm run lint     # Run ESLint

---

🔒 Security Notes

• The REACTOR_API_KEY is never sent to the browser — it stays server-side in the /api/reactor-token route
• The client only receives a short-lived JWT token minted on demand
• .env files are excluded from git via .gitignore

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes: git commit -m 'Add my feature'
4. Push to the branch: git push origin feature/my-feature
5. Open a Pull Request

---

📄 License

MIT © Danish0703

---

🙏 Acknowledgements

• Reactor Technologies — for the Happy Oyster generative 3D streaming model
• Lucide — for the beautiful icon library
• Next.js — for the framework