Enhance debug rendering by adding last consumed event information and…

… game version display (#131)
MiguelRipoll23 · Jan 4, 2025 · c6c8da8 · c6c8da8
1 parent 7459872
commit c6c8da8
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 10 deletions.
diff --git a/src/services/event-processor-service.ts b/src/services/event-processor-service.ts
@@ -6,13 +6,16 @@ import { WebRTCService } from "./webrtc-service.js";
 import { LocalEvent } from "../models/local-event.js";
 import { GameEvent } from "../interfaces/event/game-event.js";
 import { WebRTCType } from "../enums/webrtc-type.js";
+import { DebugUtils } from "../utils/debug-utils.js";
 
 export class EventProcessorService {
   private webrtcService: WebRTCService;
 
   private localEvents: LocalEvent[] = [];
   private remoteEvents: RemoteEvent[] = [];
 
+  private lastConsumedEvent: string | null = null;
+
   constructor(gameController: GameController) {
     this.webrtcService = gameController.getWebRTCService();
   }
@@ -26,6 +29,7 @@ export class EventProcessorService {
     this.localEvents.forEach((event) => {
       if (event.getId() === eventId) {
         console.log(`Local event ${EventType[eventId]} consumed`, event);
+        this.lastConsumedEvent = EventType[eventId];
         callback(event.getPayload() as T);
         this.removeEvent(this.localEvents, event);
       }
@@ -59,6 +63,7 @@ export class EventProcessorService {
     this.remoteEvents.forEach((event) => {
       if (event.getId() === eventId) {
         console.log(`Remote event ${EventType[eventId]} consumed`, event);
+        this.lastConsumedEvent = EventType[eventId];
         callback(event.getBuffer());
         this.removeEvent(this.remoteEvents, event);
       }
@@ -74,6 +79,19 @@ export class EventProcessorService {
     });
   }
 
+  public renderDebugInformation(context: CanvasRenderingContext2D) {
+    const eventName = this.lastConsumedEvent ?? "none";
+
+    DebugUtils.renderDebugText(
+      context,
+      24,
+      context.canvas.height - 24,
+      `Event: ${eventName}`,
+      false,
+      true
+    );
+  }
+
   private removeEvent(list: GameEvent[], event: GameEvent) {
     const index = list.indexOf(event);
 

diff --git a/src/services/game-loop-service.ts b/src/services/game-loop-service.ts
@@ -11,6 +11,7 @@ import { CANVAS_HEIGHT, CANVAS_WIDTH } from "../constants/canvas-constants.js";
 import { DebugUtils } from "../utils/debug-utils.js";
 import { MatchStateType } from "../enums/match-state-type.js";
 import { GameScreen } from "../interfaces/screen/game-screen.js";
+import { GAME_VERSION } from "../constants/game-constants.js";
 
 export class GameLoopService {
   private context: CanvasRenderingContext2D;
@@ -238,6 +239,7 @@ export class GameLoopService {
   private renderDebugInformation(): void {
     this.context.save();
 
+    this.renderDebugGameInformation();
     this.renderDebugScreenInformation();
     this.renderDebugGamePointer();
 
@@ -248,9 +250,24 @@ export class GameLoopService {
       this.renderDebugMatchInformation();
     }
 
+    this.getGameController()
+      .getEventProcessorService()
+      .renderDebugInformation(this.context);
+
     this.context.restore();
   }
 
+  private renderDebugGameInformation(): void {
+    DebugUtils.renderDebugText(
+      this.context,
+      this.canvas.width - 24,
+      this.canvas.height - 24,
+      `v${GAME_VERSION}`,
+      true,
+      true
+    );
+  }
+
   private renderDebugScreenInformation(): void {
     DebugUtils.renderDebugText(
       this.context,
@@ -340,15 +357,12 @@ export class GameLoopService {
       return;
     }
 
+    const x = gamePointer.getX();
+    const y = gamePointer.getY();
+
     this.context.fillStyle = "rgba(148, 0, 211, 0.5)";
     this.context.beginPath();
-    this.context.arc(
-      gamePointer.getX(),
-      gamePointer.getY(),
-      15,
-      0,
-      Math.PI * 2
-    );
+    this.context.arc(x, y, 15, 0, Math.PI * 2);
     this.context.closePath();
     this.context.fill();
   }

diff --git a/src/utils/debug-utils.ts b/src/utils/debug-utils.ts
@@ -4,7 +4,8 @@ export class DebugUtils {
     x: number,
     y: number,
     text: string,
-    subtractWidth = false
+    subtractWidth = false,
+    subtractHeight = false
   ): void {
     context.font = "12px system-ui";
 
@@ -13,14 +14,15 @@ export class DebugUtils {
 
     // Adjust the x-coordinate if subtractWidthWidth is true
     const adjustedX = subtractWidth ? x - boxWidth : x;
+    const adjustedY = subtractHeight ? y - 20 : y;
 
     // Render background box
     context.fillStyle = "rgba(0, 0, 0, 0.6)";
-    context.fillRect(adjustedX, y, boxWidth, 20);
+    context.fillRect(adjustedX, adjustedY, boxWidth, 20);
 
     // Render text
     context.fillStyle = "#FFFF00";
     context.textAlign = "left";
-    context.fillText(text, adjustedX + 6, y + 14);
+    context.fillText(text, adjustedX + 6, adjustedY + 14);
   }
 }