WolfensteinVB/web-editor/README.md

# VB Doom Level Editor

Browser-based level editor for VB Doom. Edit maps in a top-down grid and export C code that fits the game's raycaster format.

## How to use

1. **Open** `web-editor/index.html` in a browser (no server required; open the file directly).
2. **Map size**: Choose **32×32**, **48×32**, **64×32**, **48×48**, or **64×64**. The grid resizes; export uses the chosen width and height.
3. **Paint walls**: Select a brush (0=empty, 1=STARTAN, 2=STONE, 3=TECH, 4=DOOR, 5=SWITCH, 6–8=secret doors, 9–11=key doors). Click or drag on the grid to paint.
4. **Spawn & entities**:
   - Click **Spawn 1** (or **Spawn 2**), then click a cell to place the player (or player 2) start.
   - Choose an **Enemy** type, then click a cell to place one.
   - Choose a **Pickup** type, then click a cell to place one.
5. **Doors**: Place tiles 4 (normal door), 6/7/8 (secret doors), or 9/10/11 (key doors). In the Doors list, set **N-S** or **E-W** for each door (wall direction: N-S = corridor runs east–west; E-W = corridor runs north–south). If a door won't open in-game, stand right in front of it and press Use; the game also activates doors by the tile in front of the player. Export includes orientation as comments.
6. **Switches**: Place tile 5 (switch). In the right panel, set each switch to **EXIT** or **Open Door N**. Export generates `registerSwitch(tx, ty, SW_EXIT, 0)` or `registerSwitch(tx, ty, SW_DOOR, doorIndex)`.
7. **Export**: Enter a **Level ID** (e.g. `e1m4`). Click **Export C** to get map array, spawn defines, `initEnemies`/`initPickups` stubs, and the exact `registerDoor`/`registerSwitch` calls to paste into the project. Use **Save as <levelId>.h** to download only the map + spawn defines (for the `.h` file); paste the init functions from the export text into `enemy.c` and `pickup.c`.

## Game limits (editor enforces these)

The editor shows **counts and caps** next to Entities, Doors, and Switches (e.g. **Enemies: 5 / 21**). You cannot add more than the game supports; a toast message appears if you hit a limit. To support more, increase the corresponding constant in the game and in the editor’s `GAME_LIMITS` in `editor.js`.

| Limit | Default | Defined in |
|-------|---------|------------|
| Enemies | 21 | `enemy.h` → `MAX_ENEMIES` |
| Pickups | 16 | `pickup.h` → `MAX_PICKUPS` |
| Doors | 24 | `door.h` → `MAX_DOORS` |
| Switches | 4 | `door.h` → `MAX_SWITCHES` |

When loading a JSON that has more entities than the caps, the editor trims to the cap and shows a toast.

## Tile set

| Value | Name | Notes |
|-------|------|--------|
| 0 | Empty | Walkable |
| 1 | STARTAN | Brick wall |
| 2 | STONE | Stone wall |
| 3 | TECH | Tech wall |
| 4 | DOOR | Normal door (opens when activated) |
| 5 | SWITCH | Activatable (exit or opens a door) |
| 6 | Secret (brick) | Looks like brick, opens like door |
| 7 | Secret (stone) | Looks like stone, opens like door |
| 8 | Secret (tech) | Looks like tech, opens like door |
| 9 | Key door (red) | Requires red key (when implemented) |
| 10 | Key door (yellow) | Requires yellow key |
| 11 | Key door (blue) | Requires blue key |

Switches can open any door (including secret doors 6–8) to reveal secret areas. Use **SW_DOOR** and the door index from the Doors list.

## Where to put exported files

- **Map + defines**: Save as e.g. `src/vbdoom/assets/doom/e1m4.h` (or `.c`).
- **Include**: In `RayCasterData.h`, add `#include "../assets/doom/e1m4.h"` after the other level includes.
- **Enemies**: Paste `initEnemiesE1M4()` (or your level id) into `enemy.c`; declare in `enemy.h`.
- **Pickups**: Paste `initPickupsE1M4()` into `pickup.c`; declare in `pickup.h`.

## Integrating a new level in the game

1. **RayCasterData.h**: Add `#include "../assets/doom/e1m4.h"` (or your level file).
2. **gameLoop.c** in `loadLevel()`:
   - Add `else if (levelNum == 4) { ... }` (or your level number).
   - `copymem((u8*)g_map, (u8*)e1m4_map, MAP_CELLS);` (or `1024` for 32×32 then zero-fill: `for (i = 1024; i < MAP_CELLS; i++) ((u8*)g_map)[i] = 0;`).
   - Set `fPlayerX`, `fPlayerY`, `fPlayerAng` from `E1M4_SPAWN_X`, `E1M4_SPAWN_Y`, and spawn angle.
   - Call `initDoors()`, then all `registerDoor(tx, ty)` and `registerSwitch(tx, ty, type, link)` from the export.
   - Call `initEnemiesE1M4()` and `initPickupsE1M4()`.
3. **door.h**: Ensure `MAX_DOORS` and `MAX_SWITCHES` are at least as large as your level’s door/switch counts.
4. **Level transition**: In the same place where `currentLevel < 3` is checked, extend to your max level (e.g. `currentLevel < 6`); when the last level is completed, go to episode end or next episode.
5. **Map size**: If the game is built with **64×64** (`MAP_X`/`MAP_Y` in `RayCaster.h`), levels smaller than 64×64 should copy only their bytes (e.g. 1024 for 32×32) then zero the rest of `g_map`. The editor export comment reminds you of this.

## First-person preview

The editor does not include a first-person raycaster preview. You can approximate layout from the top-down grid; test in the game or add a simple 2D raycaster in JS later if desired.