Escape Room Virtual Lock System

A React-based virtual lock system for escape room games. Players discover locks by entering lock IDs and solve them by manipulating digit wheels.

Features

• Game ID System: 5-character alphanumeric game IDs route to unique game pages
• Lock Discovery: Enter lock IDs to discover and add locks to your collection
• Multiple Lock Types:
  • Number: Digits 0-9
  • Alphabet: 8 characters per wheel (7 random + correct letter)
  • Alpha-numeric: Mixed letters and numbers based on code position
• Interactive Digit Wheels:
  • Arrow buttons for increment/decrement
  • Drag up/down to change digits
  • Smooth animations
• State Persistence: All progress saved to localStorage
• Attempt Limits: Configurable incorrect attempt limits with 5-minute lockout
• Lock Management: Hide/show locks, view lock images
• Escape Room Theme: Dark, mysterious UI with smooth animations

Getting Started

Installation

npm install

Development

npm run dev

The app will be available at http://localhost:5173

Build

npm run build

Usage

Setting Up Games and Locks

The data structure separates games and locks into two files:

1. Edit src/data/games.json to define games:

{
  "GAME1": {
    "game_id": "GAME1",
    "lock_ids": ["LOCK1", "LOCK2", "LOCK3"]
  },
  "GAME2": {
    "game_id": "GAME2",
    "lock_ids": ["LOCK4", "LOCK5"]
  }
}

2. Edit src/data/locks.json to define locks:

{
  "LOCK1": {
    "id": "LOCK1",
    "type": "number",
    "subtype": 4,
    "code": "1234",
    "limit": 5
  },
  "LOCK2": {
    "id": "LOCK2",
    "type": "alphabet",
    "subtype": 3,
    "code": "KEY",
    "image": "/images/lock2.jpg",
    "limit": 3
  },
  "LOCK3": {
    "id": "LOCK3",
    "type": "alpha-numeric",
    "subtype": 5,
    "code": "A1B2C",
    "limit": 5
  }
}

Note: Each game references locks by their lock_ids array. Locks can be shared across multiple games by including their ID in multiple games' lock_ids arrays.

Lock Configuration

• id: 5-character alphanumeric lock identifier (case-insensitive)
• type: "number", "alphabet", or "alpha-numeric"
• subtype: Number of digits (3, 4, 5, or 6)
• code: The correct code to unlock
• image: (Optional) Path to lock image
• limit: (Optional) Maximum incorrect attempts before lockout

Game Flow

1. Enter a game ID on the home page (e.g., GAME1)
2. Navigate to the game page
3. Enter lock IDs as you discover them in the room
4. Manipulate digit wheels to enter codes
5. Click "Check Code" to verify
6. Successfully unlocked locks show a green "UNLOCKED" badge
7. Progress is automatically saved and persists across sessions

Reset

Click "Reset Game" to clear all progress for the current game (with confirmation).

Project Structure

src/
├── components/       # React components
├── pages/           # Page components
├── utils/           # Utility functions and types
├── data/            # Lock definitions (locks.json)
└── styles/          # Global styles

Technologies

• React 18
• TypeScript
• Vite
• React Router
• localStorage for persistence

License

MIT