refactor: centralize system names, component types, entity types, and animation states into a new Constants module.

src/systems/MenuSystem.js

@@ -1,18 +1,19 @@
 import { System } from '../core/System.js';
 import { PixelFont } from '../core/PixelFont.js';
 import { Palette } from '../core/Palette.js';
+import { GameState, ComponentType, SystemName } from '../core/Constants.js';
 
 /**
  * System to handle game menus (start, pause)
  */
 export class MenuSystem extends System {
   constructor(engine) {
-    super('MenuSystem');
+    super(SystemName.MENU);
     this.requiredComponents = []; // No required components
     this.priority = 1; // Run early
     this.engine = engine;
     this.ctx = engine.ctx;
-    this.gameState = 'start'; // 'start', 'playing', 'paused'
+    this.gameState = GameState.START;
     this.paused = false;
   }
 
@@ -24,16 +25,16 @@ export class MenuSystem extends System {
   setupInput() {
     window.addEventListener('keydown', (e) => {
       if (e.key === 'Escape' || e.key === 'p' || e.key === 'P') {
-        if (this.gameState === 'playing') {
+        if (this.gameState === GameState.PLAYING) {
           this.togglePause();
         }
       }
       if (e.key === 'Enter' || e.key === ' ') {
-        if (this.gameState === 'start') {
+        if (this.gameState === GameState.START) {
           this.startGame();
-        } else if (this.gameState === 'paused') {
+        } else if (this.gameState === GameState.PAUSED) {
           this.resumeGame();
-        } else if (this.gameState === 'gameOver') {
+        } else if (this.gameState === GameState.GAME_OVER) {
           this.restartGame();
         }
       }
@@ -41,7 +42,7 @@ export class MenuSystem extends System {
   }
 
   showGameOver() {
-    this.gameState = 'gameOver';
+    this.gameState = GameState.GAME_OVER;
     this.paused = true;
   }
 
@@ -50,7 +51,7 @@ export class MenuSystem extends System {
   }
 
   startGame() {
-    this.gameState = 'playing';
+    this.gameState = GameState.PLAYING;
     this.paused = false;
     if (!this.engine.running) {
       this.engine.start();
@@ -58,28 +59,23 @@ export class MenuSystem extends System {
   }
 
   togglePause() {
-    if (this.gameState === 'playing') {
-      this.gameState = 'paused';
+    if (this.gameState === GameState.PLAYING) {
+      this.gameState = GameState.PAUSED;
       this.paused = true;
-    } else if (this.gameState === 'paused') {
+    } else if (this.gameState === GameState.PAUSED) {
       this.resumeGame();
     }
   }
 
   resumeGame() {
-    this.gameState = 'playing';
+    this.gameState = 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
-        }
-      });
+    if (this.gameState === GameState.PAUSED || this.gameState === GameState.START) {
+      // Logic for system handling is moved to the update loop in Engine
     }
   }
 
@@ -92,7 +88,7 @@ export class MenuSystem extends System {
     ctx.fillStyle = 'rgba(32, 21, 51, 0.8)'; // Semi-transparent VOID
     ctx.fillRect(0, 0, width, height);
 
-    if (this.gameState === 'start') {
+    if (this.gameState === GameState.START) {
       const title = 'SLIME GENESIS';
       const titleW = PixelFont.getTextWidth(title, 2);
       PixelFont.drawText(ctx, title, (width - titleW) / 2, height / 2 - 40, Palette.CYAN, 2);
@@ -112,7 +108,7 @@ export class MenuSystem extends System {
         PixelFont.drawText(ctx, line, (width - lineW) / 2, height / 2 + 25 + i * 10, Palette.ROYAL_BLUE, 1);
       });
 
-    } else if (this.gameState === 'paused') {
+    } else if (this.gameState === GameState.PAUSED) {
       const paused = 'PAUSED';
       const pausedW = PixelFont.getTextWidth(paused, 2);
       PixelFont.drawText(ctx, paused, (width - pausedW) / 2, 20, Palette.SKY_BLUE, 2);
@@ -122,8 +118,8 @@ export class MenuSystem extends System {
       PixelFont.drawText(ctx, resume, (width - resumeW) / 2, 45, Palette.WHITE, 1);
 
       // Draw Stats and Knowledge (Moved from HUD)
-      const player = this.engine.getEntities().find(e => e.hasComponent('Evolution'));
-      const uiSystem = this.engine.systems.find(s => s.name === 'UISystem');
+      const player = this.engine.getEntities().find(e => e.hasComponent(ComponentType.EVOLUTION));
+      const uiSystem = this.engine.systems.find(s => s.name === SystemName.UI);
 
       if (player && uiSystem) {
         // Draw Stats on the left
@@ -132,7 +128,7 @@ export class MenuSystem extends System {
         // Draw Learning Progress on the right
         uiSystem.drawSkillProgress(player, width - 110, 80);
       }
-    } else if (this.gameState === 'gameOver') {
+    } else if (this.gameState === GameState.GAME_OVER) {
       const dead = 'YOU PERISHED';
       const deadW = PixelFont.getTextWidth(dead, 2);
       PixelFont.drawText(ctx, dead, (width - deadW) / 2, height / 2 - 30, Palette.WHITE, 2);
@@ -152,7 +148,7 @@ export class MenuSystem extends System {
   }
 
   isPaused() {
-    return this.paused || this.gameState === 'start';
+    return this.paused || this.gameState === GameState.START;
   }
 }