screens cleanup

src/babylon_panel.js

@@ -3,7 +3,7 @@ import { sharedState } from "./game/state.js";
 import { seededRng, generateMazeGrid, findDeadEnds } from "./game/maze.js";
 import { gridCellToWorld, isWalkableCell } from "./game/grid.js";
 import { playSfx, primeSfx } from "./game/sfx.js";
-import { startParticleSketch, stopParticleSketch } from "./p5_particles.js";
+import { startParticleSketch, stopParticleSketch, startStartScreenSketch, stopStartScreenSketch } from "./p5_particles.js";
 import chestTextureUrl from "../img/img_chest.png";
 import wallTextureUrl from "../img/img_wall.png";
 import groundTextureUrl from "../img/img_ground.png";
@@ -17,6 +17,9 @@ const canvasTime = document.getElementById("canvas-time");
 const canvasKey = document.getElementById("canvas-key");
 const canvasRounds = document.getElementById("canvas-rounds");
 const p5GameOverPanel = document.getElementById("p5-game-over-panel");
+const p5StartPanel = document.getElementById("p5-start-panel");
+const controlPanelSection = document.getElementById("control-panel-section");
+let controlsVisible = false;
 
 const scene = new BABYLON.Scene(engine);
 scene.clearColor = new BABYLON.Color4(0.05, 0.07, 0.1, 1);
@@ -134,11 +137,19 @@ function switchCameraMode() {
 }
 
 window.addEventListener("keydown", (event) => {
-    if (event.code === "KeyW" || event.code === "KeyA" || event.code === "KeyS" || event.code === "KeyD" || event.code === "KeyV" || event.code === "KeyR") {
+    if (event.code === "KeyW" || event.code === "KeyA" || event.code === "KeyS" || event.code === "KeyV" || event.code === "KeyR") {
         primeSfx();
     }
-    if (event.code === "KeyR" && gameOverActive) {
-        restartRunFromGameOver();
+    if (event.code === "KeyB") {
+        toggleControlsPanel();
+        return;
+    }
+    if (event.code === "KeyR") {
+        if (gameOverActive) {
+            restartRunFromGameOver();
+        } else if (!sharedState.runtime.runActive && p5StartPanel && !p5StartPanel.hidden) {
+            startRunFromStartScreen();
+        }
         return;
     }
     if (event.code === "KeyV") {
@@ -532,5 +543,38 @@ scene.registerBeforeRender(() => {
     }
 });
 
+function toggleControlsPanel() {
+    controlsVisible = !controlsVisible;
+    if (controlPanelSection) {
+        controlPanelSection.hidden = !controlsVisible;
+    }
+}
+
+function startRunFromStartScreen() {
+    if (p5StartPanel && !p5StartPanel.hidden) {
+        p5StartPanel.hidden = true;
+        stopStartScreenSketch();
+    }
+    sharedState.runtime.runActive = true;
+    sharedState.runtime.hasKey = false;
+    sharedState.runtime.roundsCompleted = 0;
+    sharedState.runtime.elapsedSeconds = ROUND_TIME_SECONDS;
+    sharedState.runtime.message = "Game started.";
+    sharedState.config.level = 1;
+    generateLevel();
+    primeSfx();
+    playSfx("click", 0.7);
+}
+
+// Initialize start screen on page load
+window.addEventListener("load", () => {
+    if (p5StartPanel && !p5StartPanel.hidden) {
+        const startContainer = document.getElementById("p5-start-container");
+        if (startContainer) {
+            startStartScreenSketch(startContainer);
+        }
+    }
+});
+
 // Export shared state for p5 to use
 export { sharedState };

src/p5_particles.js

@@ -1,5 +1,6 @@
 import p5 from "p5";
 import gameOverImageUrl from "../img/img_jobapplication.png";
+import startImageUrl from "../img/img_start.png";
 
 let sketch;
 
@@ -118,3 +119,57 @@ export function stopParticleSketch() {
         sketch = null;
     }
 }
+
+let startSketch;
+
+export function startStartScreenSketch(containerElement) {
+    if (startSketch) {
+        startSketch.remove();
+    }
+
+    startSketch = new p5((p) => {
+        let startImg;
+
+        p.setup = async function() {
+            const width = containerElement.clientWidth || 800;
+            const height = containerElement.clientHeight || 600;
+            console.log("p5 start screen setup:", { width, height });
+            
+            const canv = p.createCanvas(width, height);
+            canv.parent(containerElement);
+            
+            // Load image asynchronously
+            try {
+                startImg = await p.loadImage(startImageUrl);
+                console.log("Start image loaded:", startImg.width, "x", startImg.height);
+            } catch (err) {
+                console.error("Failed to load start image:", err);
+            }
+        };
+
+        p.draw = function() {
+            // Draw background image full screen
+            if (startImg) {
+                p.imageMode(p.CORNER);
+                p.image(startImg, 0, 0, p.width, p.height);
+            }
+        };
+
+        p.windowResized = function() {
+            if (containerElement && containerElement.offsetParent !== null) {
+                const width = containerElement.clientWidth;
+                const height = containerElement.clientHeight;
+                if (width > 0 && height > 0) {
+                    p.resizeCanvas(width, height);
+                }
+            }
+        };
+    });
+}
+
+export function stopStartScreenSketch() {
+    if (startSketch) {
+        startSketch.remove();
+        startSketch = null;
+    }
+}