From f26d8a31898763739734b2b764cfe286a16655aa Mon Sep 17 00:00:00 2001
From: Pierre Wessman <4029607+pierrewessman@users.noreply.github.com>
Date: Fri, 3 Oct 2025 12:52:55 +0200
Subject: [PATCH] Add pause/resume button for match engine debugging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements a clickable pause button centered at the bottom of the screen that allows freezing and resuming the match engine. When paused, physics stops and the game loop exits early. Button changes color and text to indicate state (PAUSE/RESUME).

- Add UI_BOTTOM_PADDING constant and increase canvas height to show UI below rink
- Add pause state tracking and toggle functionality in GameScene
- Pause button positioned at bottom center with visual feedback

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/config/constants.ts |  9 +++++----
 src/game/GameScene.ts   | 39 +++++++++++++++++++++++++++++++++++++++
 src/game/main.ts        |  4 ++--
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/config/constants.ts b/src/config/constants.ts
index b8d3361..0ecb7d0 100644
--- a/src/config/constants.ts
+++ b/src/config/constants.ts
@@ -1,3 +1,8 @@
+// Game settings
+export const DEBUG = true;
+export const FPS = 60;
+export const UI_BOTTOM_PADDING = 60; // pixels - space below rink for UI elements
+
 // Rink dimensions (meters)
 export const RINK_LENGTH = 60;  // meters
 export const RINK_WIDTH = 30;   // meters
@@ -23,10 +28,6 @@ export const COLOR_RED_LINE = 0xff0000;
 export const COLOR_BLUE_LINE = 0x0000ff;
 export const COLOR_GOAL_CREASE = 0x87ceeb;
 
-// Game settings
-export const FPS = 60;
-export const DEBUG = false;
-
 // Player constants
 export const PLAYER_RADIUS_GOALIE = 12;    // pixels
 export const PLAYER_RADIUS_SKATER = 10;    // pixels
diff --git a/src/game/GameScene.ts b/src/game/GameScene.ts
index b44bba3..fbfe5bf 100644
--- a/src/game/GameScene.ts
+++ b/src/game/GameScene.ts
@@ -53,6 +53,10 @@ export class GameScene extends Phaser.Scene {
   // Track last reception attempt time for each player to avoid spamming attempts
   private lastReceptionAttempt: Map<string, number> = new Map();
 
+  // Pause state
+  private isPaused: boolean = false;
+  private pauseButton!: Phaser.GameObjects.Text;
+
   constructor() {
     super({ key: 'GameScene' });
   }
@@ -63,6 +67,7 @@ export class GameScene extends Phaser.Scene {
     this.createPuck();
     this.createPlayers();
     this.setupEventListeners();
+    this.createPauseButton();
   }
 
   private createPlayers() {
@@ -195,7 +200,41 @@ export class GameScene extends Phaser.Scene {
     graphics.strokeRoundedRect(2, 2, RINK_LENGTH * SCALE - 4, RINK_WIDTH * SCALE - 4, RINK_CORNER_RADIUS * SCALE);
   }
 
+  private createPauseButton() {
+    const centerX = (RINK_LENGTH * SCALE) / 2;
+    const rinkHeight = RINK_WIDTH * SCALE;
+
+    // Create pause button at bottom center
+    this.pauseButton = this.add.text(centerX, rinkHeight + 20, 'PAUSE', {
+      fontSize: '20px',
+      color: '#ffffff',
+      backgroundColor: '#333333',
+      padding: { x: 16, y: 8 }
+    })
+    .setOrigin(0.5)
+    .setInteractive({ useHandCursor: true })
+    .on('pointerdown', () => this.togglePause());
+  }
+
+  private togglePause() {
+    this.isPaused = !this.isPaused;
+
+    if (this.isPaused) {
+      // Pause physics and update button
+      this.physics.pause();
+      this.pauseButton.setText('RESUME');
+      this.pauseButton.setBackgroundColor('#2d6a2d');
+    } else {
+      // Resume physics and update button
+      this.physics.resume();
+      this.pauseButton.setText('PAUSE');
+      this.pauseButton.setBackgroundColor('#333333');
+    }
+  }
+
   update(_time: number, delta: number) {
+    if (this.isPaused) return;
+
     this.updatePuck();
     this.updatePlayers(delta);
     this.checkGoals();
diff --git a/src/game/main.ts b/src/game/main.ts
index d542050..34cc598 100644
--- a/src/game/main.ts
+++ b/src/game/main.ts
@@ -1,11 +1,11 @@
 import Phaser from 'phaser';
 import { GameScene } from './GameScene';
-import { RINK_LENGTH, RINK_WIDTH, SCALE, FPS, DEBUG } from '../config/constants';
+import { RINK_LENGTH, RINK_WIDTH, SCALE, FPS, DEBUG, UI_BOTTOM_PADDING } from '../config/constants';
 
 const config: Phaser.Types.Core.GameConfig = {
   type: Phaser.AUTO,
   width: RINK_LENGTH * SCALE,
-  height: RINK_WIDTH * SCALE,
+  height: RINK_WIDTH * SCALE + UI_BOTTOM_PADDING,
   parent: 'game-container',
   backgroundColor: '#1a1a1a',
   physics: {