diff --git a/frontend/3d_dungeon_crawler.html b/frontend/3d_dungeon_crawler.html
deleted file mode 100644
index d0c9499..0000000
--- a/frontend/3d_dungeon_crawler.html
+++ /dev/null
@@ -1,382 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Simple 3D Dungeon Crawler</title>
-        <style>
-            body {
-                margin: 0;
-                overflow: hidden;
-                font-family:
-                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
-                    "Helvetica Neue", sans-serif;
-                background-color: #111;
-                color: #fff;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-            }
-            #info-container {
-                position: absolute;
-                top: 10px;
-                left: 10px;
-                background-color: rgba(0, 0, 0, 0.7);
-                padding: 15px;
-                border-radius: 10px;
-                max-width: 350px;
-                border: 1px solid #444;
-            }
-            h1 {
-                margin-top: 0;
-                font-size: 1.2em;
-            }
-            p,
-            li {
-                font-size: 0.9em;
-                line-height: 1.5;
-            }
-            ul {
-                padding-left: 20px;
-            }
-            #crosshair {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: 4px;
-                height: 4px;
-                background-color: white;
-                border-radius: 50%;
-                transform: translate(-50%, -50%);
-                pointer-events: none; /* So it doesn't interfere with mouse lock */
-            }
-            #game-canvas {
-                display: block;
-            }
-        </style>
-    </head>
-    <body>
-        <div id="info-container">
-            <h1>First-Person Dungeon Crawler</h1>
-            <p>Create a <strong>map.txt</strong> file to load your own dungeon:</p>
-            <ul>
-                <li><code>#</code> = Wall</li>
-                <li><code>&nbsp;</code> (space) = Floor</li>
-                <li><code>P</code> = Player Start</li>
-            </ul>
-            <p><strong>Controls:</strong></p>
-            <ul>
-                <li><strong>Click Screen:</strong> Lock mouse for camera control</li>
-                <li><strong>W / S:</strong> Move Forward / Backward</li>
-                <li><strong>A / D:</strong> Strafe Left / Right</li>
-                <li><strong>Mouse:</strong> Look Around</li>
-                <li><strong>ESC:</strong> Unlock mouse</li>
-            </ul>
-            <input type="file" id="map-upload" accept=".txt" />
-        </div>
-
-        <div id="crosshair"></div>
-        <canvas id="game-canvas"></canvas>
-
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-
-        <script>
-            /**
-             * This type represents configuration settings of `AsciiEffect`.
-             *
-             * @typedef {Object} AsciiEffect~Options
-             * @property {number} [resolution=0.15] - A higher value leads to more details.
-             * @property {number} [scale=1] - The scale of the effect.
-             * @property {boolean} [color=false] - Whether colors should be enabled or not. Better quality but slows down rendering.
-             * @property {boolean} [alpha=false] - Whether transparency should be enabled or not.
-             * @property {boolean} [block=false] - Whether blocked characters should be enabled or not.
-             * @property {boolean} [invert=false] - Whether colors should be inverted or not.
-             * @property {('low'|'medium'|'high')} [strResolution='low'] - The string resolution.
-             **/
-
-            // --- Basic Setup ---
-            let scene, camera, renderer;
-            let mapData = [],
-                mapWidth,
-                mapHeight;
-            const TILE_SIZE = 5; // Size of each grid square in the world
-            const WALL_HEIGHT = 5;
-
-            // --- Player State ---
-            const player = {
-                height: WALL_HEIGHT / 2,
-                speed: 0.15,
-                turnSpeed: 0.05,
-                velocity: new THREE.Vector3(),
-                controls: {
-                    moveForward: false,
-                    moveBackward: false,
-                    moveLeft: false,
-                    moveRight: false,
-                },
-            };
-
-            // --- Initialization ---
-            function init() {
-                // Scene
-                scene = new THREE.Scene();
-                scene.background = new THREE.Color(0x1a1a1a);
-                scene.fog = new THREE.Fog(0x1a1a1a, 10, 50);
-
-                // Camera (First-person view)
-                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-                camera.position.y = player.height;
-
-                // Renderer
-                renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("game-canvas"), antialias: true });
-                renderer.setSize(window.innerWidth, window.innerHeight);
-                renderer.setPixelRatio(window.devicePixelRatio);
-                document.body.appendChild(renderer.domElement);
-
-                // Lighting
-                const ambientLight = new THREE.AmbientLight(0x404040, 2);
-                scene.add(ambientLight);
-
-                const pointLight = new THREE.PointLight(0xffffff, 1.5, 100);
-                pointLight.position.set(0, WALL_HEIGHT * 1.5, 0); // Light is attached to player
-                camera.add(pointLight); // Attach light to camera
-                scene.add(camera); // Add camera to scene to ensure light is added
-
-                // Event Listeners
-                document.getElementById("map-upload").addEventListener("change", handleMapUpload);
-                window.addEventListener("resize", onWindowResize);
-                document.addEventListener("keydown", onKeyDown);
-                document.addEventListener("keyup", onKeyUp);
-
-                // Mouse Look Controls
-                setupPointerLock();
-
-                // Load a default map
-                loadMap(getDefaultMap());
-
-                // Start the game loop
-                animate();
-            }
-
-            // --- Map Handling ---
-            function getDefaultMap() {
-                return [
-                    "##########",
-                    "#P #     #",
-                    "#  # ### #",
-                    "#### # # #",
-                    "#    #   #",
-                    "# ###### #",
-                    "# #      #",
-                    "# # ######",
-                    "#   #    #",
-                    "##########",
-                ].join("\n");
-            }
-
-            function handleMapUpload(event) {
-                const file = event.target.files[0];
-                if (!file) return;
-
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    loadMap(e.target.result);
-                };
-                reader.readAsText(file);
-            }
-
-            function loadMap(data) {
-                // Clear existing map objects from scene
-                const objectsToRemove = [];
-                scene.children.forEach((child) => {
-                    if (child.userData.isMapTile) {
-                        objectsToRemove.push(child);
-                    }
-                });
-                objectsToRemove.forEach((obj) => scene.remove(obj));
-
-                // Parse new map data
-                mapData = data.split("\n").map((row) => row.split(""));
-                mapHeight = mapData.length;
-                mapWidth = mapData[0].length;
-
-                // Create geometry and materials once
-                const wallGeometry = new THREE.BoxGeometry(TILE_SIZE, WALL_HEIGHT, TILE_SIZE);
-                const wallMaterial = new THREE.MeshStandardMaterial({ color: 0x888888, roughness: 0.8 });
-
-                const floorGeometry = new THREE.PlaneGeometry(TILE_SIZE, TILE_SIZE);
-                const floorMaterial = new THREE.MeshStandardMaterial({ color: 0x444444, side: THREE.DoubleSide });
-
-                // Build the scene from the map data
-                for (let y = 0; y < mapHeight; y++) {
-                    for (let x = 0; x < mapWidth; x++) {
-                        const char = mapData[y][x];
-                        const worldX = (x - mapWidth / 2) * TILE_SIZE;
-                        const worldZ = (y - mapHeight / 2) * TILE_SIZE;
-
-                        if (char === "#") {
-                            const wall = new THREE.Mesh(wallGeometry, wallMaterial);
-                            wall.position.set(worldX, WALL_HEIGHT / 2, worldZ);
-                            wall.userData.isMapTile = true;
-                            scene.add(wall);
-                        } else {
-                            // Add floor for every non-wall tile
-                            const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-                            floor.rotation.x = -Math.PI / 2;
-                            floor.position.set(worldX, 0, worldZ);
-                            floor.userData.isMapTile = true;
-                            scene.add(floor);
-                        }
-
-                        if (char === "@") {
-                            camera.position.x = worldX;
-                            camera.position.z = worldZ;
-                        }
-                    }
-                }
-
-                // Add a ceiling
-                const ceilingGeometry = new THREE.PlaneGeometry(mapWidth * TILE_SIZE, mapHeight * TILE_SIZE);
-                const ceilingMaterial = new THREE.MeshStandardMaterial({ color: 0x555555, side: THREE.DoubleSide });
-                const ceiling = new THREE.Mesh(ceilingGeometry, ceilingMaterial);
-                ceiling.rotation.x = Math.PI / 2;
-                ceiling.position.y = WALL_HEIGHT;
-                ceiling.userData.isMapTile = true;
-                scene.add(ceiling);
-            }
-
-            function isWall(x, z) {
-                const mapX = Math.floor(x / TILE_SIZE + mapWidth / 2);
-                const mapY = Math.floor(z / TILE_SIZE + mapHeight / 2);
-
-                if (mapX < 0 || mapX >= mapWidth || mapY < 0 || mapY >= mapHeight) {
-                    return true; // Treat out of bounds as a wall
-                }
-                return mapData[mapY][mapX] === "#";
-            }
-
-            // --- Controls & Movement ---
-            function setupPointerLock() {
-                const canvas = renderer.domElement;
-                canvas.addEventListener("click", () => {
-                    canvas.requestPointerLock();
-                });
-
-                document.addEventListener("pointerlockchange", () => {
-                    if (document.pointerLockElement === canvas) {
-                        document.addEventListener("mousemove", onMouseMove);
-                    } else {
-                        document.removeEventListener("mousemove", onMouseMove);
-                    }
-                });
-            }
-
-            function onMouseMove(event) {
-                if (document.pointerLockElement !== renderer.domElement) return;
-                const movementX = event.movementX || 0;
-                camera.rotation.y -= movementX * 0.002;
-            }
-
-            function onKeyDown(event) {
-                switch (event.code) {
-                    case "KeyW":
-                    case "ArrowUp":
-                        player.controls.moveForward = true;
-                        break;
-                    case "KeyS":
-                    case "ArrowDown":
-                        player.controls.moveBackward = true;
-                        break;
-                    case "KeyA":
-                    case "ArrowLeft":
-                        player.controls.moveLeft = true;
-                        break;
-                    case "KeyD":
-                    case "ArrowRight":
-                        player.controls.moveRight = true;
-                        break;
-                }
-            }
-
-            function onKeyUp(event) {
-                switch (event.code) {
-                    case "KeyW":
-                    case "ArrowUp":
-                        player.controls.moveForward = false;
-                        break;
-                    case "KeyS":
-                    case "ArrowDown":
-                        player.controls.moveBackward = false;
-                        break;
-                    case "KeyA":
-                    case "ArrowLeft":
-                        player.controls.moveLeft = false;
-                        break;
-                    case "KeyD":
-                    case "ArrowRight":
-                        player.controls.moveRight = false;
-                        break;
-                }
-            }
-
-            function updatePlayerPosition() {
-                const direction = new THREE.Vector3();
-                camera.getWorldDirection(direction);
-
-                const right = new THREE.Vector3();
-                right.crossVectors(camera.up, direction).normalize();
-
-                player.velocity.set(0, 0, 0);
-
-                if (player.controls.moveForward) {
-                    player.velocity.add(direction);
-                }
-                if (player.controls.moveBackward) {
-                    player.velocity.sub(direction);
-                }
-                if (player.controls.moveLeft) {
-                    player.velocity.add(right);
-                }
-                if (player.controls.moveRight) {
-                    player.velocity.sub(right);
-                }
-
-                if (player.velocity.length() > 0) {
-                    player.velocity.normalize().multiplyScalar(player.speed);
-                }
-
-                // Collision detection
-                const collisionMargin = TILE_SIZE / 4;
-                let moveX = true,
-                    moveZ = true;
-
-                if (isWall(camera.position.x + player.velocity.x * collisionMargin, camera.position.z)) {
-                    moveX = false;
-                }
-                if (isWall(camera.position.x, camera.position.z + player.velocity.z * collisionMargin)) {
-                    moveZ = false;
-                }
-
-                if (moveX) camera.position.x += player.velocity.x;
-                if (moveZ) camera.position.z += player.velocity.z;
-            }
-
-            // --- Main Loop ---
-            function animate() {
-                requestAnimationFrame(animate);
-                updatePlayerPosition();
-                renderer.render(scene, camera);
-            }
-
-            // --- Utility ---
-            function onWindowResize() {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-            }
-
-            // --- Start everything ---
-            init();
-        </script>
-    </body>
-</html>
diff --git a/frontend/ascii_dungeon_crawler.html b/frontend/ascii_dungeon_crawler.html
index 27f04f9..72395db 100755
--- a/frontend/ascii_dungeon_crawler.html
+++ b/frontend/ascii_dungeon_crawler.html
@@ -11,7 +11,6 @@
                 background-color: #000;
                 color: #ccc;
                 font-family: "Courier New", monospace;
-                overflow: hidden;
             }
 
             #gameContainer {
@@ -20,7 +19,7 @@
 
             #viewport {
                 font-size: 10px;
-                line-height: 8px;
+                line-height: 7px;
                 white-space: pre;
                 border: 2px solid #0f0;
                 display: inline-block;
@@ -30,12 +29,11 @@
             }
             #minimap {
                 font-size: 12px;
-                line-height: 12px;
+                line-height: 11.5px;
                 white-space: pre;
                 display: inline-block;
                 padding: 2px;
                 border: 5px solid #666;
-                /* color: #666; */
                 background-color: black;
             }
 
@@ -46,6 +44,8 @@
 
             #mapInput {
                 margin-top: 20px;
+                overflow-x: scroll;
+                overflow-wrap: normal;
             }
 
             textarea {
@@ -80,15 +80,15 @@
             <div id="mapInput">
                 ←→↑↓
                 <br />
-                <textarea id="mapText" rows="10" cols="50">
+                <textarea id="mapText" rows="10" cols="120" wrap="off">
 ############################################################
 ############################################################
 ############################################################
-##         #################        ########################
-## #       ################# #   ## ########################
-##   #P    Z###############Z   #    ##      ################ ::: P(north)  Z(channel_1)  Z(channel_1)  // Comments
-## # #     #################      # ##      ####        ####
-###  #E                      # #    ##  #   ####   #  # #### ::: E(gnoll)
+##    #    #################        ########################
+####  #  ################### #   ## ########################
+##    P    Z###############Z   #    ##      ################ ::: P(east)  Z(a, b, west)  Z(b, a, east)  // Comments
+##  ########################      # ##      ####        ####
+###   E                      # #    ##  #   ####   #  # #### ::: E(gnoll)
 ####     ##################         ##      ####   #    ####
 #####   ################### #       ##  # # ####        ####
 ######E####################                      #      #### ::: E(Goblins, gnoll)   // These are comments
@@ -100,22 +100,22 @@
 ###### ####################   # ############################
 ###### #################### #   ############################
 ######E####################   # ############################ ::: E(gnoll)
-###### ##       #####    ##     ############################ ::: 
-###### ##       Z####    ## # # ############################ ::: Z(2) // Channel 2
-###### ##       ####Z    ##     ########        ############ ::: Z(2) // Channel 2
+###### ##       #####    ##     ############################ :::
+###### ##       Z####    ## # # ############################ ::: Z(c, d, west)
+###### ##       ####Z    ##     ########        ############ ::: Z(d, c, east)
 ###### ## ##  # ###########  ## ########        ############
 ######E##                                #   #E ############ ::: E(Dwarves, gnoll) ; E(Gelatinous_Cube, gnoll)
 ######                                 # # #    ############
 ######### # ##  ########### # #########      #  ############
 ######### #   # ########### # ######### #  #    ############
 #########       ########### # #########         ############
-###########O############### # ######### #### ############### ::: O(1)
+###########Z############### # ######### #### ############### ::: Z(e, f, null)
 ########################### # ######### #### ###############
 ########################### # ######### #### ###############
 ########################### # ######### #### ###############
 ########################### # ####           ###############
 #########################   # ####  # #    # ########    ###
-########################o              #  #  ######## #  ### ::: o(2)
+########################Z              #  #  ######## #  ### ::: Z(f, null, east) // you can teleport here, but you cannot teleport back
 ######################### #  ##### # #   # # ########    ###
 ######################### # #                            ###
 #########################     #######################  # ###
diff --git a/frontend/ascii_first_person_renderer.js b/frontend/ascii_first_person_renderer.js
index 50d3580..b4f84f3 100755
--- a/frontend/ascii_first_person_renderer.js
+++ b/frontend/ascii_first_person_renderer.js
@@ -12,6 +12,8 @@ export const DefaultRendererOptions = {
     ceilingColor: 0x555555,
 
     commitToDOM: true,
+
+    fillChar: "#",
 };
 
 export class FirstPersonRenderer {
@@ -40,6 +42,7 @@ export class FirstPersonRenderer {
         this.floorColor = options.floorColor ?? DefaultRendererOptions.floorColor;
         this.ceilingColor = options.ceilingColor ?? DefaultRendererOptions.ceilingColor;
         this.commitToDOM = options.commitToDOM ?? DefaultRendererOptions.commitToDOM;
+        this.fillChar = options.fillChar ?? DefaultRendererOptions.fillChar;
 
         //
         // THREE variables
@@ -216,9 +219,6 @@ export class FirstPersonRenderer {
             }),
             wallPlanes.length,
         );
-        instancedMesh.userData.pastelMaterial = new THREE.MeshBasicMaterial({
-            color: 0xffffff,
-        });
 
         instancedMesh.userData.parimaryMaterial = instancedMesh.material;
         this.scene.add(instancedMesh);
@@ -366,7 +366,7 @@ export class FirstPersonRenderer {
                     g.toString(16).padStart(2, "0") +
                     b.toString(16).padStart(2, "0");
 
-                this.window.put(x, y, "#", cssColor);
+                this.window.put(x, y, this.fillChar, cssColor);
 
                 idx += 4;
             }
diff --git a/frontend/ascii_minimap.js b/frontend/ascii_minimap.js
index 217a594..b3cf01a 100755
--- a/frontend/ascii_minimap.js
+++ b/frontend/ascii_minimap.js
@@ -4,7 +4,7 @@ import { AsciiWindow } from "./ascii_window.js";
 
 export class MiniMap {
     /**
-     * @param {AsciiWindow} aWindow
+     * @param {AsciiWindowInterface} aWindow
      * @param {TileMap} map
      */
     constructor(aWindow, map) {
@@ -174,10 +174,10 @@ export class MiniMap {
 
         //
         y = startY;
-        for (let mapY = minY; mapY < maxY; mapY++) {
+        for (let mapY = minY; mapY <= maxY; mapY++) {
             //
             x = startX;
-            for (let mapX = minX; mapX < maxX; mapX++) {
+            for (let mapX = minX; mapX <= maxX; mapX++) {
                 //
                 const [putX, putY] = switchXY ? [y, x] : [x, y];
 
@@ -186,13 +186,12 @@ export class MiniMap {
                     this.window.put(putX, putY, tile.minimapChar, tile.minimapColor);
                 } else {
                     // this.window.put(putX, putY, "░", "#666");
-                    this.window.put(putX, putY, " ", "#666");
+                    this.window.put(putX, putY, "█", "#222");
                 }
                 x += dX;
             }
             y += dY;
         }
-
         this.window.put(this.distance, this.distance, "@", "#4f4fff");
         this.window.commitToDOM();
     }
diff --git a/frontend/ascii_tile_types.js b/frontend/ascii_tile_types.js
index 2a93081..ea6e115 100755
--- a/frontend/ascii_tile_types.js
+++ b/frontend/ascii_tile_types.js
@@ -2,10 +2,23 @@ import { ParsedCall } from "../utils/callParser";
 import { Orientation, Vector2i } from "./ascii_types";
 
 export class Tile {
-    /** @type {string} How should this tile be rendered on the minimap.*/
+    /** @type {string|number} What is the id of this tile - only interactive tiles have IDs */
+    id;
+
+    /** @type {string} Icon char of tile */
     minimapChar;
-    /** @type {string} How should this tile be rendered on the minimap.*/
+    /** @type {string} Icon char of tile after tile's secrets have been revealed */
+    revealedMinimapChar;
+    /** @type {string} Icon of tile */
     minimapColor;
+    /** @type {string} Icon char of tile after tile's secrets have been revealed */
+    revealedMinimapColor;
+
+    /** @type {boolean} Is this a portal exit and/or entry */
+    isPortal;
+    /** @type {string|number} Where is the player transported if they enter the portal */
+    portalTargetId;
+
     /** @type {boolean} Should this be rendered as a wall? */
     looksLikeWall;
     /** @type {boolean} Can the player walk here? */
@@ -14,25 +27,22 @@ export class Tile {
     isEncounter;
     /** @type {boolean} Is this where they player starts? */
     isStartLocation;
-    /** @type {boolean} Is this a two-way portal entry/exit */
-    isTwoWayPortal;
-    /** @type {boolean} Is this a one-way portal entry */
-    isOneWayPortalEntry;
-    /** @type {boolean} Is this a one-way portal exit */
-    isOneWayPortalExit;
-    /** @type {boolean} Has the secret properties of this tile been uncovered? */
-    isUncovered;
+    /** @type {boolean} Has the secret properties of this tile been revealed? */
+    isRevealed;
+    /** @type {string|number} */
+    hasBumpEvent;
     /** @type {string|number} The portals "channel" - each tile in a portal pair must have the same channel */
     channel;
     /** @type {number|string} id of texture to use */
     textureId;
-    /** @type {number|string} id the encounter located on this tile */
-    encounterId;
+    /** @type {number|string} id of texture to use after the secrets of this tile has been revealed */
+    revealedTextureId;
+    /** @type {number|string} type of encounter located on this tile. May or may not be unique*/
+    encounterType;
     /** @type {boolean} Can/does this tile wander around on empty tiles? */
     isRoaming;
     /** @type {Orientation} */
     orientation;
-
     /** @type {number} If this is a roaming tile, what is its current x-position on the map */
     currentPosX;
     /** @type {number} If this is a roaming tile, what is its current y-position on the map*/
@@ -64,21 +74,32 @@ export class Tile {
         if (char === " ") return new FloorTile();
         if (char === "#") return new WallTile();
         if (char === "P") return new PlayerStartTile(opt.getValue("orientation", 0));
-        if (char === "E") return new EncounterTile(x, y, opt.getValue("encounterId", 0), opt.getValue("textureId", 1));
-        if (char === "O") return new SecretOneWayPortalEntryTile(opt.getValue("channel", 0));
-        if (char === "o") return new SecretOneWayPortalExitTile(opt.getValue("channel", 0));
-        if (char === "Z") return new SecretTwoWayPortalTile(opt.getValue("channel", 0));
+        if (char === "E")
+            return new EncounterTile(x, y, opt.getValue("encounterType", 0), opt.getValue("textureId", 1));
+        if (char === "Z")
+            return new SecretPortalTile(
+                opt.getValue("id", 0),
+                opt.getValue("destinationid", 1),
+                opt.getValue("orientation", 3),
+            );
 
         console.warn("Unknown character", { char, options: opt });
         return new FloorTile();
     }
 
     hasTexture() {
-        if (this.textureId === "") {
-            return false;
+        if (typeof this.textureId === "number") {
+            return true;
+        }
+        if (typeof this.textureId === "string" && this.textureId !== "") {
+            return true;
         }
 
-        return typeof this.textureId === "number" || typeof this.textureId === "string";
+        return false;
+    }
+
+    getBumpEvent() {
+        return null;
     }
 
     clone() {
@@ -118,67 +139,42 @@ export class EncounterTile extends Tile {
     isEncounter = true;
     isRoaming = true;
     minimapChar = "†";
-    minimapColor = "#faa";
+    minimapColor = "#f44";
+    hasBumpEvent = true;
 
-    constructor(x, y, encounterId, textureId) {
+    /**
+     * @param {number} x x-component of the encounter's initial position
+     * @param {number} y y-component of the encounter's initial position
+     * @param {string|number} encounterType name/id of the encounter that will be triggered when player bumps into this tile
+     * @param {string|number} textureId id of the texture to use.
+     */
+    constructor(x, y, encounterType, textureId) {
         super();
-        this.textureId = textureId ?? encounterId;
-        this.encounterId = encounterId;
+        this.textureId = textureId ?? encounterType;
+        this.encounterType = encounterType;
         this.currentPosX = x;
         this.currentPosY = y;
+        this.id = `E_${encounterType}_${x}_${y}`;
         console.info("creating encounter", { encounter: this });
     }
-}
-export class SpriteTile extends Tile {
-    isTraversable = true;
-    constructor(textureId, orientation) {
-        console.debug({ textureId, orientation });
-        super({ textureId, orientation: orientation ?? Orientation.NORTH });
+
+    getBumpEvent() {
+        return ["attack", { encounterType: this.encounterType }];
     }
 }
 
-/**
- * One-way portal entries look exactly like walls. You need to
- * probe for them, or otherwise unlock their location.
- * You can walk into them, and then the magic happens
- */
-export class SecretOneWayPortalEntryTile extends WallTile {
-    textureId = 0;
-    looksLikeWall = true;
-    isTraversable = true; // we can walk in to it?
-    isOneWayPortalEntry = true;
-    internalMapChar = "O";
-    isUncovered = false;
+export class SecretPortalTile extends WallTile {
+    revealedTextureId = "secretTwoWayPortal";
+    isPortal = true;
+    internalMapChar = "Z";
+    isRevealed = false;
+    revealedMinimapChar = "Ω";
+    revealedMinimapColor = "#4f4";
 
     // Change minimap char once the tile's secret has been uncovered.
 
-    constructor(channel) {
-        super({ channel });
-    }
-}
-
-export class SecretOneWayPortalExitTile extends FloorTile {
-    isOneWayPortalExit = true;
-    internalMapChar = "o";
-    isUncovered = false;
-    //
-    // Change minimap char once the tile's secret has been uncovered.
-
-    constructor(channel) {
-        super({ channel });
-    }
-}
-
-export class SecretTwoWayPortalTile extends WallTile {
-    isTraversable = true;
-    isTwoWayPortalEntry = true;
-    internalMapChar = "0";
-    isUncovered = false;
-
-    // Change minimap char once the tile's secret has been uncovered.
-
-    constructor(channel) {
-        super({ channel });
+    constructor(id, portalTargetId, orientation) {
+        super({ id, portalTargetId, orientation });
     }
 }
 
diff --git a/frontend/ascii_window.js b/frontend/ascii_window.js
index c1aae9c..921a279 100755
--- a/frontend/ascii_window.js
+++ b/frontend/ascii_window.js
@@ -50,6 +50,14 @@ export class AsciiWindow {
         this.initializeCanvaas();
     }
 
+    fill(char = " ", color = "#000") {
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                this.put(x, y, char, color);
+            }
+        }
+    }
+
     /**
      * Create the html elements that make up the canvas,
      * as well as a buffer that holds a copy of the data
