From 3e13b2ecd25075e1744ccd08caecd54f99ed0dfa Mon Sep 17 00:00:00 2001
From: Jared Miller <jared@smell.flowers>
Date: Wed, 11 Mar 2026 17:40:52 -0400
Subject: [PATCH] Add camera view mode toggle between side and top-down

---
 index.html                | 1 +
 src/App.ts                | 7 ++++++-
 src/Config.ts             | 2 +-
 src/GUI.ts                | 5 +++++
 src/scenes/ScreenScene.ts | 6 ++++++
 5 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 0b58ea1..e242df1 100644
--- a/index.html
+++ b/index.html
@@ -132,6 +132,7 @@
 			<div id="info">
 				<kbd>Q</kbd> <span class="label">home</span><kbd>W</kbd> food<br/>
 				<kbd>E</kbd> <span class="label">obstacle</span><kbd>R</kbd> erase<br/>
+				<kbd>V</kbd> toggle view mode<br/>
 				drag + scroll to move camera
 			</div>
 			<div id="gui-container"></div>
diff --git a/src/App.ts b/src/App.ts
index 6aa39ec..5881461 100644
--- a/src/App.ts
+++ b/src/App.ts
@@ -1,4 +1,4 @@
-import Config from "./Config";
+import Config, { saveConfig } from "./Config";
 import GUI from "./GUI";
 import Renderer from "./Renderer";
 import StatsOverlay from "./StatsOverlay";
@@ -48,6 +48,11 @@ export default new (class App {
         this.gui.on("zoomChange", () => {
             this.scenes.screen.applyCameraZoom();
         });
+
+        window.addEventListener("viewModeToggle", () => {
+            saveConfig();
+            this.resetRenderer();
+        });
     }
 
     private resetRenderer() {
diff --git a/src/Config.ts b/src/Config.ts
index 42cc365..93d1513 100644
--- a/src/Config.ts
+++ b/src/Config.ts
@@ -15,7 +15,7 @@ const defaults = {
     brushRadius: 20,
     cameraZoom: 0,
     gravityDirection: "down" as const,
-    viewMode: "side" as const,
+    viewMode: "side" as "side" | "top",
     // per-channel pheromone params
     repellentFadeOutFactor: 0.0005,
     repellentBlurRadius: 0.05,
diff --git a/src/GUI.ts b/src/GUI.ts
index f0806d7..7a81359 100644
--- a/src/GUI.ts
+++ b/src/GUI.ts
@@ -50,6 +50,11 @@ class GUIController {
             .step(0.1)
             .listen()
             .onChange(() => this.emit("zoomChange"));
+        controlsFolder
+            .add(Config, "viewMode", ["side", "top"])
+            .name("View mode")
+            .listen()
+            .onChange(() => this.saveAndEmit("reset"));
 
         simFolder.open();
         controlsFolder.open();
diff --git a/src/scenes/ScreenScene.ts b/src/scenes/ScreenScene.ts
index a641dd2..d2dc4b4 100644
--- a/src/scenes/ScreenScene.ts
+++ b/src/scenes/ScreenScene.ts
@@ -174,6 +174,12 @@ export default class ScreenScene extends AbstractScene {
                     this.drawMode = MAT_DIRT;
                     break;
                 }
+                case "KeyV": {
+                    Config.viewMode =
+                        Config.viewMode === "side" ? "top" : "side";
+                    window.dispatchEvent(new CustomEvent("viewModeToggle"));
+                    break;
+                }
             }
         });