feat: add poc

src/systems/MenuSystem.js

@@ -0,0 +1,110 @@
+import { System } from '../core/System.js';
+
+/**
+ * System to handle game menus (start, pause)
+ */
+export class MenuSystem extends System {
+  constructor(engine) {
+    super('MenuSystem');
+    this.requiredComponents = []; // No required components
+    this.priority = 1; // Run early
+    this.engine = engine;
+    this.ctx = engine.ctx;
+    this.gameState = 'start'; // 'start', 'playing', 'paused'
+    this.paused = false;
+  }
+
+  init(engine) {
+    super.init(engine);
+    this.setupInput();
+  }
+
+  setupInput() {
+    window.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' || e.key === 'p' || e.key === 'P') {
+        if (this.gameState === 'playing') {
+          this.togglePause();
+        }
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        if (this.gameState === 'start') {
+          this.startGame();
+        } else if (this.gameState === 'paused') {
+          this.resumeGame();
+        }
+      }
+    });
+  }
+
+  startGame() {
+    this.gameState = 'playing';
+    this.paused = false;
+    if (!this.engine.running) {
+      this.engine.start();
+    }
+  }
+
+  togglePause() {
+    if (this.gameState === 'playing') {
+      this.gameState = 'paused';
+      this.paused = true;
+    } else if (this.gameState === 'paused') {
+      this.resumeGame();
+    }
+  }
+
+  resumeGame() {
+    this.gameState = 'playing';
+    this.paused = false;
+  }
+
+  process(_deltaTime, _entities) {
+    // Don't update game systems if paused or at start menu
+    if (this.gameState === 'paused' || this.gameState === 'start') {
+      // Pause all other systems
+      this.engine.systems.forEach(system => {
+        if (system !== this && system.name !== 'MenuSystem' && system.name !== 'UISystem') {
+          // Systems will check game state themselves
+        }
+      });
+    }
+  }
+
+  drawMenu() {
+    const ctx = this.ctx;
+    const width = this.engine.canvas.width;
+    const height = this.engine.canvas.height;
+
+    // Dark overlay
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
+    ctx.fillRect(0, 0, width, height);
+
+    ctx.fillStyle = '#ffffff';
+    ctx.font = 'bold 48px Courier New';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+
+    if (this.gameState === 'start') {
+      ctx.fillText('SLIME GENESIS', width / 2, height / 2 - 100);
+      ctx.font = '24px Courier New';
+      ctx.fillText('Press ENTER or SPACE to Start', width / 2, height / 2);
+      ctx.font = '16px Courier New';
+      ctx.fillText('WASD: Move | Mouse: Aim | Click/Space: Attack', width / 2, height / 2 + 50);
+      ctx.fillText('Shift: Stealth | 1-9: Skills | ESC: Pause', width / 2, height / 2 + 80);
+    } else if (this.gameState === 'paused') {
+      ctx.fillText('PAUSED', width / 2, height / 2 - 50);
+      ctx.font = '24px Courier New';
+      ctx.fillText('Press ENTER or SPACE to Resume', width / 2, height / 2);
+      ctx.fillText('Press ESC to Pause/Unpause', width / 2, height / 2 + 40);
+    }
+  }
+
+  getGameState() {
+    return this.gameState;
+  }
+
+  isPaused() {
+    return this.paused || this.gameState === 'start';
+  }
+}
+