Add camera view mode toggle between side and top-down

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>

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() {

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,

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();

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;
+                }
             }
         });