Update branding to Doom Simulation, show current level in title bar

- Rename all references from ViZDoom Web Player to Doom Simulation
- Dynamically update page title and header with current map name while playing
- Add current_map to server state dict for level-aware title updates
- Rewrite README for the actual project

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ilya-zakirzyanov

README.md

@@ -1,203 +1,88 @@
-# Bespoke Simulation Template
-
-This directory contains a template for creating embedded applications that share a consistent design system and user experience.
-
-## Components
-
-### 1. Design System Integration
-This template uses the CodeSignal Design System located in `client/design-system/`:
-- **Foundations**: Colors, spacing, typography tokens
-- **Components**: Buttons, boxes, inputs, dropdowns, tags
-- Light and dark theme support (automatic)
-- See the [design system repository](https://github.com/CodeSignal/learn_bespoke-design-system) for full documentation
-
-### 2. `client/bespoke-template.css`
-Template-specific CSS providing:
-- Layout components (header, sidebar, main-layout)
-- Utility classes (row, spacer)
-- Temporary components (modals, form elements) - will be replaced when design system adds them
-
-### 3. `client/index.html`
-A base HTML template that includes:
-- Navigation header with app name and help button
-- Main layout structure (sidebar + content area)
-- Help modal integration
-- Proper CSS and JavaScript loading
-
-### 4. `client/help-modal.js`
-A dependency-free JavaScript module for the help modal system:
-- Consistent modal behavior across all apps
-- Keyboard navigation (ESC to close)
-- Focus management
-- Custom event system
-
-### 5. `client/help-content-template.html`
-A template for creating consistent help content:
-- Table of contents navigation
-- Standardized section structure
-- FAQ with collapsible details
-- Image integration guidelines
-
-## Usage Instructions
-
-### Setting Up a New Application
-
-1. **Clone the repository**
-2. **Ensure the design-system submodule is initialized**:
-   ```bash
-   git submodule update --init --recursive
-   ```
-
-3. **Customize the HTML template** by replacing placeholders:
-   - `<!-- APP_TITLE -->` - Your application title
-   - `<!-- APP_NAME -->` - Your application name (appears in header)
-   - `<!-- APP_SPECIFIC_HEADER_CONTENT -->` - Any additional header elements
-   - `<!-- APP_SPECIFIC_MAIN_CONTENT -->` - Your main content area
-   - `<!-- APP_SPECIFIC_CSS -->` - Links to your app-specific CSS files
-   - `<!-- APP_SPECIFIC_SCRIPTS -->` - Links to your app-specific JavaScript files
-
-3. **Use Design System Components**
-   The template uses design system components directly. Use these classes:
-   - Buttons: `button button-primary`, `button button-secondary`, `button button-danger`, `button button-text`
-   - Boxes/Cards: `box card` for card containers
-   - Inputs: Add `input` class to input elements: `<input type="text" class="input" />`
-
-4. **Implement your application logic**. You can use Cursor or other agents for it. There is a file called `AGENTS.md` that contains context LLM can use.
-5. **Customise your help content** using the help content template
-3. **Use Design System Components**
-   The template uses design system components directly. Use these classes:
-   - Buttons: `button button-primary`, `button button-secondary`, `button button-danger`, `button button-text`
-   - Boxes/Cards: `box card` for card containers
-   - Inputs: Add `input` class to input elements: `<input type="text" class="input" />`
-
-4. **Implement your application logic**. You can use Cursor or other agents for it. There is a file called `AGENTS.md` that contains context LLM can use.
-5. **Customise your help content** using the help content template
-
-### Customizing Help Content
-
-Use the `help-content-template.html` as a starting point:
-
-1. **Replace placeholders** like `<!-- APP_NAME -->` with your actual content
-2. **Add sections** as needed for your application
-3. **Include images** by placing them in a `help/img/` directory
-4. **Use the provided structure** for consistency across applications
-
-
-### Help Modal API
-
-The `HelpModal` class provides several methods:
-
-```javascript
-// Initialize
-const modal = HelpModal.init({
-  triggerSelector: '#btn-help',
-  content: helpContent,
-  theme: 'auto'
-});
-
-// Update content dynamically
-modal.updateContent(newHelpContent);
-
-// Destroy the modal
-modal.destroy();
-```
-
-## Server
-
-This template includes a local development server (`server.js`) that provides:
-- Static file serving for your application
-- WebSocket support for real-time messaging
-- A REST API for triggering client-side alerts
-
-### Starting the Server
-
-```bash
-# Local development
-npm run start:dev   # Vite + API for local development
-# Production
-npm run build       # Create production build in dist/
-npm run start:prod  # Serve built assets from dist/
-```
-
-
-### Environment Variables
-
-The server supports the following environment variables:
-
-- **`PORT`** - Server port number
-  - Development: Can be set to any port (e.g., `PORT=3001`), defaulting to `3000`
-  - Production: Ignored (always `3000` when `IS_PRODUCTION=true`)
+# Doom Simulation
 
-- **`IS_PRODUCTION`** - Enables production mode
-  - Set to `'true'` to enable production mode
-  - When enabled:
-    - Server serves static files from `dist/` directory
-    - Port is forced to `3000`
-    - Requires `dist/` directory to exist (throws error if missing)
+Browser-playable Doom powered by [ViZDoom](https://vizdoom.cs.put.edu.pl/). Streams video and audio from a Python backend to a web client over WebSocket.
 
+## Features
 
-### Vite Build System
+- **Campaign mode** — Play Doom 1 (4 episodes) and Doom 2 with difficulty selection
+- **Test levels** — Run individual ViZDoom scenarios for experimentation
+- **Full audio/video streaming** — 1920x1080 JPEG video + stereo PCM audio over WebSocket
+- **Browser input** — WASD movement, mouse look, weapon selection, all in the browser
+- **Level progression** — Inventory carry-over between levels, kill/item/secret stats
+- **REST API** — Programmatic game control for AI agents
 
-This project uses [Vite](https://vitejs.dev/) as the build tool for fast development and optimized production builds.
+## Prerequisites
 
-#### Build Process
+- Python 3.11+
+- Node.js 22+
+- ViZDoom (`pip install vizdoom`)
+- `doom.wad` and `doom2.wad` in the project root
 
-Running `npm run build` executes `vite build`, which:
-- Reads source files from the `client/` directory (configured in `vite.config.js`)
-- Processes and bundles JavaScript, CSS, and other assets
-- Outputs optimized production files to the `dist/` directory
-- Generates hashed filenames for cache busting
+## Quick Start
 
-### WebSocket Messaging API
-
-The server provides a `POST /message` endpoint that allows you to send real-time messages to connected clients. This can be used to signal changes in the client during events like "Run" or "Submit". When a message is sent, the preview window with the application open will display an alert with the message.
-
-It uses the `ws` package, so if you want to use it, install the packages (but this is optional).
-
-```
+```bash
+# Install dependencies
+git submodule update --init --recursive
+pip install -r requirements.txt
 npm install
+
+# Start development servers (Vite on :3000, API on :3001)
+npm run start:dev
 ```
 
-#### Endpoint: `POST /message`
+Open http://localhost:3000 in your browser.
 
-**Request Format:**
-```json
-{
-  "message": "Your message here"
-}
-```
+## Production
 
-**Example using curl:**
 ```bash
-curl -X POST http://localhost:3000/message \
-  -H "Content-Type: application/json" \
-  -d '{"message": "Hello from the server!"}'
+npm run build
+IS_PRODUCTION=true python3 server.py
 ```
 
-## CI/CD and Automated Releases
+The production server serves the built frontend from `dist/` and runs on port 3000.
+
+## Controls
 
-This template includes a GitHub Actions workflow (`.github/workflows/build-release.yml`) that automatically builds and releases your application when you push to the `main` branch.
+| Key | Action |
+|-----|--------|
+| W/A/S/D | Move |
+| Mouse | Look |
+| Left Click | Attack |
+| E / Space | Use / Interact |
+| Shift | Run |
+| 1-7 | Select weapon |
+| Escape | Pause |
 
-### How It Works
+## Architecture
 
-When you push to `main`, the workflow will:
+```
+client/          → Browser frontend (vanilla JS, Vite)
+  app.js         → Game UI state machine, menu navigation
+  doom-client.js → WebSocket client, input capture, frame rendering
+  doom.css       → Game-specific styles
+server.py        → FastAPI/Uvicorn backend, WebSocket + REST API
+game_manager.py  → ViZDoom wrapper, game sessions, input handling
+```
 
-1. **Build the project** - Runs `npm run build` to create production assets in `dist/`
-2. **Create a release tarball** - Packages `dist/`, `package.json`, `server.js`, and production `node_modules/` into `release.tar.gz`
-3. **Create a GitHub Release** - Automatically creates a new release tagged as `v{run_number}` with the tarball attached
+### API Endpoints
 
-### Release Contents
+| Method | Path | Description |
+|--------|------|-------------|
+| `GET` | `/api/game/scenarios` | List available scenarios |
+| `POST` | `/api/game/start` | Create a new game session |
+| `POST` | `/api/game/{id}/action` | Send action, get frame + state |
+| `GET` | `/api/game/{id}/state` | Get current game state |
+| `POST` | `/api/game/{id}/reset` | Reset episode |
+| `DELETE` | `/api/game/{id}` | Destroy session |
 
-The release tarball (`release.tar.gz`) contains everything needed to deploy the application:
-- `dist/` - Built production assets
-- `package.json` - Project dependencies and scripts
-- `server.js` - Production server
-- `node_modules/` - Production dependencies only
+## CI/CD
 
-### Using Releases
+Pushing to `main` triggers the GitHub Actions workflow which builds the client, packages a release tarball (`dist/`, `server.py`, `game_manager.py`, `requirements.txt`, `package.json`), and creates a GitHub Release.
 
-To deploy a release:
+## Scripts
 
-1. Download `release.tar.gz` from the latest GitHub Release (e.g. with `wget`)
-2. Extract (and remove) the tarball: `tar -xzf release.tar.gz && rm release.tar.gz`
-3. Start the production server: `npm run start:prod`
+| Command | Description |
+|---------|-------------|
+| `npm run start:dev` | Vite dev server + Python API (concurrent) |
+| `npm run build` | Production build to `dist/` |
+| `npm run start:prod` | Production mode (Python serves `dist/`) |

client/app.js

@@ -33,6 +33,16 @@ function hideAll() {
   }
 }
 
+// --- Title management ---
+
+const DEFAULT_TITLE = 'Doom Simulation';
+
+function updateTitle(text) {
+  document.title = text;
+  const el = document.getElementById('page-title');
+  if (el) el.textContent = text;
+}
+
 // --- State transitions ---
 
 function setHudVisible(visible) {
@@ -45,6 +55,7 @@ function goToMenu() {
   gameMode = null;
   pendingCampaign = null;
   setHudVisible(true);
+  updateTitle(DEFAULT_TITLE);
   doomClient.lockVerticalMouse = false;
   if (document.pointerLockElement) document.exitPointerLock();
   doomClient.setPaused(true);
@@ -68,6 +79,7 @@ function startScenario(name) {
   uiState = 'playing';
   hideAll();
   setHudVisible(true);
+  updateTitle(name.replace('.cfg', ''));
   doomClient.lockVerticalMouse = false;
   doomClient.enableAudio();  // activate on user gesture
   doomClient.setScenario(name);
@@ -113,6 +125,11 @@ function updateHud(state) {
   if (ammo) ammo.textContent = `Ammo: ${Math.round(state.ammo)}`;
   if (kills) kills.textContent = `Kills: ${Math.round(state.kill_count)}`;
 
+  // Update title with current map name
+  if (state.current_map && uiState === 'playing') {
+    updateTitle(state.current_map);
+  }
+
   // Only react to episode end while actively playing
   if (uiState !== 'playing') return;
 

client/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8" />
-  <title>ViZDoom Web Player</title>
+  <title>Doom Simulation</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <!-- Fonts (Work Sans) -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -29,7 +29,7 @@
 <body class="bespoke">
   <!-- Navigation Header -->
   <header class="header">
-    <h1 class="heading-small">ViZDoom Web Player</h1>
+    <h1 id="page-title" class="heading-small">Doom Simulation</h1>
     <div class="spacer"></div>
     <button id="btn-menu" class="button button-secondary">Menu</button>
     <button id="btn-help" class="button button-text">Help</button>
@@ -56,7 +56,7 @@ <h1 class="heading-small">ViZDoom Web Player</h1>
 
     <!-- Main Menu -->
     <div id="overlay-menu" class="game-overlay game-overlay-menu" style="display:none;">
-      <h2 class="menu-title">ViZDoom Web Player</h2>
+      <h2 class="menu-title">Doom Simulation</h2>
 
       <!-- Campaign buttons -->
       <div class="menu-campaigns">

game_manager.py

@@ -405,6 +405,7 @@ def _get_state_dict(self) -> dict:
             "episode_finished": finished,
             "dead": dead,
             "total_reward": self.game.get_total_reward(),
+            "current_map": self._current_map,
         }
         if self._level_total_kills is not None:
             result["total_kills"] = self._level_total_kills