initial commit!

web-editor/README.md

@@ -0,0 +1,72 @@
+# 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.

web-editor/index.html

@@ -0,0 +1,198 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Wolfenstein VB Level Editor</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>Wolfenstein VB Level Editor</h1>
+      <div class="toolbar">
+        <label>Map size:</label>
+        <select id="mapSize">
+          <option value="32,32">32×32</option>
+          <option value="48,32">48×32</option>
+          <option value="64,32">64×32</option>
+          <option value="48,48">48×48</option>
+          <option value="64,64">64×64</option>
+        </select>
+        <label>Level ID (e.g. e1m4):</label>
+        <input type="text" id="levelId" value="e1m4" maxlength="8" />
+        <input type="file" id="loadJsonInput" accept=".json" style="display: none" />
+        <input type="file" id="loadHInput" accept=".h" style="display: none" />
+        <button type="button" id="btnSaveJson">Save JSON</button>
+        <button type="button" id="btnLoadJson">Load JSON</button>
+        <button type="button" id="btnLoadH" title="Import a map from a C header (.h) file">
+          Load H
+        </button>
+        <button type="button" id="btnExport">Export C</button>
+        <button type="button" id="btnExportHeader">Export header only</button>
+        <button type="button" id="btnLinkMode" title="Click a switch then a door to link">
+          Link switch to door
+        </button>
+        <button type="button" id="btnHelp">Help</button>
+      </div>
+    </header>
+
+    <div id="toast" class="toast hidden" aria-live="polite"></div>
+
+    <div class="main">
+      <div class="left">
+        <div class="panel">
+          <h3>Brush (walls)</h3>
+          <div class="brush-grid" id="brushGrid"></div>
+        </div>
+        <div class="panel">
+          <h3>
+            Entities
+            <span id="entityListCap" class="cap-label" title="Game limits (enemy.h, pickup.h)"
+              >0/21 · 0/16</span
+            >
+          </h3>
+          <button type="button" id="brushSpawn1" class="entity-btn">Spawn 1</button>
+          <button type="button" id="brushSpawn2" class="entity-btn">Spawn 2</button>
+          <select id="brushEnemy">
+            <option value="">Enemy (place on grid)</option>
+            <option value="0">Zombie</option>
+            <option value="1">Sergeant</option>
+            <option value="2">Imp</option>
+            <option value="3">Demon</option>
+            <option value="4">Commando</option>
+          </select>
+          <select id="brushPickup">
+            <option value="">Pickup (place on grid)</option>
+            <option value="0">Ammo clip</option>
+            <option value="1">Health small</option>
+            <option value="2">Health large</option>
+            <option value="3">Shotgun</option>
+            <option value="4">Helmet</option>
+            <option value="5">Armor</option>
+            <option value="6">Shells</option>
+            <option value="7">Rocket launcher</option>
+            <option value="8">Key Red</option>
+            <option value="9">Key Yellow</option>
+            <option value="10">Key Blue</option>
+            <option value="11">Chaingun</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="center">
+        <div class="grid-wrap">
+          <canvas id="grid" tabindex="0"></canvas>
+          <canvas id="gridOverlay" class="grid-overlay" aria-hidden="true"></canvas>
+        </div>
+        <div class="status" id="status">Click grid to paint. Select brush above. 32×32</div>
+        <div id="gridTooltip" class="grid-tooltip hidden" aria-hidden="true"></div>
+        <div class="preview-section">
+          <h3 class="preview-heading">
+            Preview <span class="preview-hint">(focus canvas to drive: WASD or arrows)</span>
+          </h3>
+          <canvas id="previewCanvas" tabindex="0"></canvas>
+          <button type="button" id="btnResetPreview">Reset view</button>
+        </div>
+      </div>
+
+      <div class="right">
+        <div class="panel entity-list-panel">
+          <h3>Entities</h3>
+          <p class="hint">
+            Spawn points, enemies, and pickups on the map. Hover to highlight on grid.
+          </p>
+          <ul id="entityList"></ul>
+        </div>
+        <div class="panel">
+          <h3>
+            Doors <span id="doorListCap" class="cap-label" title="MAX_DOORS in door.h">0/24</span>
+          </h3>
+          <p class="hint">
+            Place door tiles (4 or 6/7/8). Stand in front of a door and press Use to open it.
+          </p>
+          <ul id="doorList"></ul>
+        </div>
+        <div class="panel">
+          <h3>
+            Switches
+            <span id="switchListCap" class="cap-label" title="MAX_SWITCHES in door.h">0/4</span>
+          </h3>
+          <p class="hint">
+            Place switch (5) on map. In export you link each switch to a door index or exit.
+          </p>
+          <div id="linkModeExit" class="link-mode-exit hidden">
+            Switch <span id="pendingSwitchNum">0</span> selected.
+            <button type="button" id="btnSetExit">Set EXIT</button>
+          </div>
+          <ul id="switchList"></ul>
+        </div>
+      </div>
+    </div>
+
+    <div id="exportModal" class="modal hidden">
+      <div class="modal-content modal-content-export">
+        <h3>Export</h3>
+        <div id="exportSections" class="export-sections"></div>
+        <div class="modal-buttons">
+          <button type="button" id="btnSaveAsHeader">
+            Save as <span id="exportFileName">e1m4.h</span>
+          </button>
+          <button type="button" id="btnCloseExport">Close</button>
+        </div>
+      </div>
+    </div>
+
+    <div id="helpModal" class="modal hidden">
+      <div class="modal-content modal-content-wide">
+        <h3>How to use export</h3>
+        <div class="help-content">
+          <p>
+            <strong>Quick start:</strong> Export C → save as <code>e1m4.h</code> in
+            <code>src/vbdoom/assets/doom/</code> → include in RayCasterData.h → add level case in
+            gameLoop.c <code>loadLevel()</code>.
+          </p>
+          <p><strong>Where to put exported files:</strong></p>
+          <ul>
+            <li>Map + defines: save as e.g. <code>src/vbdoom/assets/doom/e1m4.h</code></li>
+            <li>RayCasterData.h: add <code>#include "../assets/doom/e1m4.h"</code></li>
+            <li>Paste <code>initEnemiesE1M4()</code> into enemy.c; declare in enemy.h</li>
+            <li>Paste <code>initPickupsE1M4()</code> into pickup.c; declare in pickup.h</li>
+          </ul>
+          <p><strong>In gameLoop.c loadLevel():</strong></p>
+          <ul>
+            <li>Add <code>else if (levelNum == 4) { ... }</code> for your level</li>
+            <li>
+              <code>copymem((u8*)g_map, (u8*)e1m4_map, cells);</code> — if map is smaller than
+              MAP_CELLS, zero-fill the rest
+            </li>
+            <li>
+              Set fPlayerX, fPlayerY, fPlayerAng from E1M4_SPAWN_X, E1M4_SPAWN_Y and spawn angle
+            </li>
+            <li>Call initDoors(), then all registerDoor/registerSwitch from the export comment</li>
+            <li>Call initEnemiesE1M4(); initPickupsE1M4();</li>
+          </ul>
+          <p>
+            <strong>Also:</strong> Ensure door.h has MAX_DOORS and MAX_SWITCHES large enough. Extend
+            level transition checks (e.g. currentLevel &lt; 6) for your max level.
+          </p>
+        </div>
+        <button type="button" id="btnCloseHelp">Close</button>
+      </div>
+    </div>
+
+    <div id="loadJsonModal" class="modal hidden">
+      <div class="modal-content">
+        <h3>Load JSON</h3>
+        <p>Paste level JSON below or choose a file.</p>
+        <textarea id="loadJsonText" placeholder='{"version":1,"mapW":32,...}'></textarea>
+        <div class="modal-buttons">
+          <button type="button" id="btnLoadJsonChooseFile">Choose file</button>
+          <button type="button" id="btnLoadJsonApply">Load</button>
+          <button type="button" id="btnCloseLoadJson">Cancel</button>
+        </div>
+      </div>
+    </div>
+
+    <script src="editor.js"></script>
+  </body>
+</html>

web-editor/style.css

@@ -0,0 +1,271 @@
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background: #1a1a1a;
+  color: #e0e0e0;
+}
+header {
+  padding: 0.5rem 1rem;
+  background: #2a2a2a;
+  border-bottom: 1px solid #444;
+}
+header h1 { margin: 0 0 0.5rem 0; font-size: 1.25rem; }
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 1rem;
+}
+.toolbar label { color: #aaa; }
+.toolbar select, .toolbar input[type="text"] {
+  padding: 0.25rem 0.5rem;
+  background: #333;
+  color: #fff;
+  border: 1px solid #555;
+  border-radius: 4px;
+}
+.toolbar button {
+  padding: 0.35rem 0.75rem;
+  background: #0a7;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.toolbar button:hover { background: #0b8; }
+.toolbar button.selected { background: #084; }
+.link-mode-exit { margin: 0.35rem 0; font-size: 0.85rem; }
+.link-mode-exit.hidden { display: none; }
+.link-mode-exit button { margin-left: 0.25rem; padding: 0.2rem 0.5rem; background: #555; color: #fff; border: 1px solid #666; border-radius: 4px; cursor: pointer; }
+.link-mode-exit button:hover { background: #666; }
+
+.main {
+  display: flex;
+  min-height: calc(100vh - 100px);
+}
+.left, .right {
+  width: 200px;
+  padding: 0.75rem;
+  background: #222;
+  border-right: 1px solid #333;
+}
+.right { border-right: none; border-left: 1px solid #333; }
+.center {
+  flex: 1;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+}
+
+.panel {
+  margin-bottom: 1rem;
+}
+/* Toast message (e.g. limit reached) */
+.toast {
+  position: fixed;
+  bottom: 1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 0.5rem 1rem;
+  background: #c44;
+  color: #fff;
+  border-radius: 8px;
+  font-size: 0.9rem;
+  max-width: 90%;
+  z-index: 10000;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  transition: opacity 0.2s;
+}
+.toast.hidden { display: none; }
+
+.cap-label { font-size: 0.75rem; color: #888; font-weight: normal; margin-left: 0.25rem; }
+.cap-label.over-limit { color: #f88; }
+
+.panel h3 { margin: 0 0 0.5rem 0; font-size: 0.95rem; color: #8af; }
+.panel .hint { font-size: 0.75rem; color: #888; margin: 0.25rem 0; }
+.panel ul { margin: 0.25rem 0; padding-left: 1.25rem; font-size: 0.85rem; list-style: none; padding-left: 0; }
+.panel ul li { margin-bottom: 0.25rem; }
+.panel .switch-link { margin-left: 0.25rem; padding: 0.2rem; font-size: 0.8rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px; }
+.panel .door-orient { margin-left: 0.25rem; padding: 0.15rem 0.25rem; font-size: 0.75rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px; }
+.entity-list-panel ul li[data-entity] { cursor: pointer; padding: 0.2rem 0; }
+.entity-list-panel ul li[data-entity]:hover { color: #8af; }
+.entity-list-panel ul li[data-entity].highlight { background: #333; color: #8af; border-radius: 4px; padding-left: 0.25rem; }
+.entity-list-panel .entity-angle { margin-left: 0.25rem; padding: 0.1rem; font-size: 0.75rem; background: #333; color: #fff; border: 1px solid #555; border-radius: 4px; max-width: 3em; }
+
+.brush-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2px;
+  margin-bottom: 0.5rem;
+}
+.brush-cell {
+  width: 28px;
+  height: 28px;
+  border: 2px solid #555;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.7rem;
+  font-weight: bold;
+}
+.brush-cell:hover { border-color: #8af; }
+.brush-cell.selected { border-color: #0a7; background: #0a72; }
+
+.entity-btn, .panel select {
+  display: block;
+  width: 100%;
+  margin-bottom: 0.35rem;
+  padding: 0.35rem;
+  background: #333;
+  color: #fff;
+  border: 1px solid #555;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.9rem;
+}
+.entity-btn:hover, .panel select:hover { background: #444; }
+
+.grid-wrap {
+  position: relative;
+  border: 2px solid #444;
+  border-radius: 4px;
+  overflow: hidden;
+  background: #111;
+}
+.grid-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+  display: block;
+}
+.grid-tooltip {
+  position: fixed;
+  padding: 0.25rem 0.5rem;
+  background: #333;
+  color: #fff;
+  border: 1px solid #555;
+  border-radius: 4px;
+  font-size: 0.8rem;
+  white-space: nowrap;
+  z-index: 100;
+  pointer-events: none;
+}
+.grid-tooltip.hidden { display: none; }
+#grid {
+  display: block;
+  cursor: crosshair;
+}
+.status {
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  color: #888;
+}
+.preview-section { margin-top: 1rem; width: 100%; max-width: 600px; }
+.preview-heading { font-size: 0.95rem; color: #8af; margin: 0 0 0.35rem 0; }
+.preview-hint { font-size: 0.75rem; color: #666; font-weight: normal; }
+#previewCanvas { display: block; width: 100%; border: 2px solid #444; border-radius: 4px; background: #111; cursor: crosshair; }
+#previewCanvas:focus { outline: 1px solid #0a7; }
+#btnResetPreview { margin-top: 0.35rem; padding: 0.25rem 0.5rem; background: #555; color: #fff; border: 1px solid #666; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
+#btnResetPreview:hover { background: #666; }
+
+.modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+.modal.hidden { display: none; }
+.modal-content {
+  background: #2a2a2a;
+  border: 1px solid #555;
+  border-radius: 8px;
+  padding: 1rem;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+}
+.modal-content h3 { margin: 0 0 0.5rem 0; }
+.modal-content p { margin: 0.25rem 0; font-size: 0.9rem; }
+.modal-content textarea:not(.export-section-textarea) {
+  width: 800px;
+  height: 400px;
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  font-family: monospace;
+  font-size: 0.8rem;
+  background: #111;
+  color: #0f0;
+  border: 1px solid #444;
+  border-radius: 4px;
+  resize: both;
+}
+.modal-content button {
+  padding: 0.35rem 0.75rem;
+  background: #555;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.integration-checklist { background: #252530; padding: 0.75rem; border-radius: 8px; margin-bottom: 0.75rem; }
+.integration-checklist .checklist-title { margin: 0 0 0.5rem 0; font-size: 0.9rem; color: #9cf; }
+.integration-checklist .checklist-steps { margin: 0; padding-left: 1.25rem; font-size: 0.85rem; line-height: 1.45; }
+.integration-checklist .checklist-steps li { margin-bottom: 0.35rem; }
+.integration-checklist .hint { margin: 0.5rem 0 0 0; font-size: 0.75rem; color: #888; }
+.modal-content .modal-buttons { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
+.modal-content-wide { max-width: 560px; }
+.modal-content-export { max-width: 900px; width: 900px; }
+
+/* Export sections */
+.export-sections { overflow-y: auto; max-height: 70vh; display: flex; flex-direction: column; gap: 0.6rem; padding-right: 0.25rem; }
+.export-section { border: 1px solid #444; border-radius: 6px; overflow: hidden; }
+.export-section-header {
+  display: flex; align-items: center; justify-content: space-between;
+  background: #1a2530; padding: 0.35rem 0.6rem; border-bottom: 1px solid #444;
+}
+.export-section-title { font-family: monospace; font-size: 0.82rem; font-weight: bold; color: #9cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.export-copy-btn {
+  flex-shrink: 0; margin-left: 0.5rem; padding: 0.2rem 0.65rem;
+  font-size: 0.75rem; font-weight: bold; letter-spacing: 0.04em;
+  background: #3a6; color: #fff; border: none; border-radius: 4px; cursor: pointer;
+  transition: background 0.15s;
+}
+.export-copy-btn:hover { background: #4b7; }
+.export-copy-btn.copied { background: #27a; }
+.export-section-textarea {
+  width: 100%; box-sizing: border-box; margin: 0; padding: 0.45rem 0.6rem;
+  font-family: monospace; font-size: 0.78rem; line-height: 1.35;
+  background: #111; color: #0f0; border: none; resize: vertical;
+}
+.help-content { font-size: 0.9rem; margin: 0.5rem 0; }
+.help-content ul { margin: 0.35rem 0; padding-left: 1.5rem; }
+.help-content p { margin: 0.5rem 0; }
+.help-content code { background: #333; padding: 0.1rem 0.3rem; border-radius: 4px; }
+.modal-content #loadJsonText { width: 100%; min-height: 120px; margin: 0.5rem 0; padding: 0.5rem; font-family: monospace; font-size: 0.8rem; background: #111; color: #0f0; border: 1px solid #444; border-radius: 4px; resize: vertical; }
+
+/* Tile colors for grid (approximate VB red palette) */
+.t0 { background: #1a0a0a; }
+.t1 { background: #8b4513; }   /* STARTAN */
+.t2 { background: #555; }   /* STONE */
+.t3 { background: #4a4a6a; } /* TECH */
+.t4 { background: #6a3a2a; } /* DOOR */
+.t5 { background: #5a4a3a; } /* SWITCH */
+.t6 { background: #7a3525; } /* secret brick */
+.t7 { background: #454545; } /* secret stone */
+.t8 { background: #3a3a5a; } /* secret tech */
+.t9 { background: #8b2a2a; } /* key red */
+.t10 { background: #8b7a2a; } /* key yellow */
+.t11 { background: #2a4a8b; } /* key blue */
+.spawn { background: #0a5; }
+.enemy { background: #a50; }
+.pickup { background: #5a5; }