diff --git a/src/babylon_panel.js b/src/babylon_panel.js
index a39ad73..c3085e7 100644
--- a/src/babylon_panel.js
+++ b/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 };
diff --git a/src/p5_particles.js b/src/p5_particles.js
index ead932a..47142e9 100644
--- a/src/p5_particles.js
+++ b/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;
+ }
+}