From 38903958854697ea4195c49fc3f422729c0251f5 Mon Sep 17 00:00:00 2001
From: arch_agent <arch_agent@die-heimatlosen.eu>
Date: Fri, 17 Jul 2026 20:42:39 +0200
Subject: [PATCH] fix: const redeclaration bug + bare ctx references
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate const TILE_HEIGHT/TILE_WIDTH in player.js and game.js
- Use var TILE_HEIGHT_PLAYER in player.js to avoid collision
- Fix bare ctx → this.ctx in monster render
- Fix ctx = this.ctx → const ctx = this.ctx in NPC render

This was causing a SyntaxError that prevented the entire game from loading.
---
 frontend/js/game.js   | 11 ++++-------
 frontend/js/player.js | 23 +++++++++++------------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/frontend/js/game.js b/frontend/js/game.js
index ed38ca9..6b002b9 100644
--- a/frontend/js/game.js
+++ b/frontend/js/game.js
@@ -1,8 +1,5 @@
 // game.js — Main Game Loop
 
-const TILE_WIDTH = 64;
-const TILE_HEIGHT = 32;
-
 class Game {
     constructor() {
         this.canvas = document.getElementById('game-canvas');
@@ -336,7 +333,7 @@ class Game {
                 class_master: '#8a4a8a',
                 innkeeper: '#8a8a4a'
             };
-            ctx = this.ctx;
+            const ctx = this.ctx;
             ctx.fillStyle = colors[npc.type] || '#666';
             ctx.fillRect(drawX - 5, drawY + TILE_HEIGHT/2 - 15, 10, 12);
             ctx.fillStyle = '#e0b890';
@@ -374,9 +371,9 @@ class Game {
             this.ctx.fillStyle = '#666';
             this.ctx.fillRect(drawX - 6, drawY + TILE_HEIGHT/2 - 10, 12, 8);
             this.ctx.fillStyle = '#555';
-            ctx.beginPath();
-            ctx.arc(drawX, drawY + TILE_HEIGHT/2 - 12, 5, 0, Math.PI * 2);
-            ctx.fill();
+            this.ctx.beginPath();
+            this.ctx.arc(drawX, drawY + TILE_HEIGHT/2 - 12, 5, 0, Math.PI * 2);
+            this.ctx.fill();
             
             // Eyes (red)
             this.ctx.fillStyle = '#ff3333';
diff --git a/frontend/js/player.js b/frontend/js/player.js
index 0f04f8a..f21c7c5 100644
--- a/frontend/js/player.js
+++ b/frontend/js/player.js
@@ -1,5 +1,7 @@
 // player.js — Player character with stats
 
+var TILE_HEIGHT_PLAYER = 32;
+
 class Player {
     constructor(x, y) {
         this.x = x;
@@ -145,7 +147,7 @@ class Player {
         // Shadow
         ctx.fillStyle = 'rgba(0,0,0,0.3)';
         ctx.beginPath();
-        ctx.ellipse(drawX, drawY + TILE_HEIGHT/2 + 4, 12, 4, 0, 0, Math.PI * 2);
+        ctx.ellipse(drawX, drawY + TILE_HEIGHT_PLAYER/2 + 4, 12, 4, 0, 0, Math.PI * 2);
         ctx.fill();
         
         // Body (simple character)
@@ -153,37 +155,37 @@ class Player {
         
         // Legs
         ctx.fillStyle = '#4a4a6a';
-        ctx.fillRect(drawX - 5, drawY + TILE_HEIGHT/2 - 8 + bobOffset, 4, 8);
-        ctx.fillRect(drawX + 1, drawY + TILE_HEIGHT/2 - 8 + bobOffset, 4, 8);
+        ctx.fillRect(drawX - 5, drawY + TILE_HEIGHT_PLAYER/2 - 8 + bobOffset, 4, 8);
+        ctx.fillRect(drawX + 1, drawY + TILE_HEIGHT_PLAYER/2 - 8 + bobOffset, 4, 8);
         
         // Body
         ctx.fillStyle = '#5566aa';
-        ctx.fillRect(drawX - 7, drawY + TILE_HEIGHT/2 - 18 + bobOffset, 14, 12);
+        ctx.fillRect(drawX - 7, drawY + TILE_HEIGHT_PLAYER/2 - 18 + bobOffset, 14, 12);
         
         // Head
         ctx.fillStyle = '#e0b890';
         ctx.beginPath();
-        ctx.arc(drawX, drawY + TILE_HEIGHT/2 - 22 + bobOffset, 7, 0, Math.PI * 2);
+        ctx.arc(drawX, drawY + TILE_HEIGHT_PLAYER/2 - 22 + bobOffset, 7, 0, Math.PI * 2);
         ctx.fill();
         
         // Hair (black)
         ctx.fillStyle = '#1a1a1a';
         ctx.beginPath();
-        ctx.arc(drawX, drawY + TILE_HEIGHT/2 - 24 + bobOffset, 7, Math.PI, Math.PI * 2);
+        ctx.arc(drawX, drawY + TILE_HEIGHT_PLAYER/2 - 24 + bobOffset, 7, Math.PI, Math.PI * 2);
         ctx.fill();
-        ctx.fillRect(drawX - 7, drawY + TILE_HEIGHT/2 - 22 + bobOffset, 14, 3);
+        ctx.fillRect(drawX - 7, drawY + TILE_HEIGHT_PLAYER/2 - 22 + bobOffset, 14, 3);
         
         // Name label
         ctx.fillStyle = '#ffcc44';
         ctx.font = '11px sans-serif';
         ctx.textAlign = 'center';
-        ctx.fillText(this.name, drawX, drawY + TILE_HEIGHT/2 - 32);
+        ctx.fillText(this.name, drawX, drawY + TILE_HEIGHT_PLAYER/2 - 32);
         
         // HP bar above character
         const hpPercent = this.hp / this.maxHp;
         const barWidth = 24;
         const barX = drawX - barWidth / 2;
-        const barY = drawY + TILE_HEIGHT/2 - 38;
+        const barY = drawY + TILE_HEIGHT_PLAYER/2 - 38;
         
         ctx.fillStyle = '#333';
         ctx.fillRect(barX, barY, barWidth, 3);
@@ -191,6 +193,3 @@ class Player {
         ctx.fillRect(barX, barY, barWidth * hpPercent, 3);
     }
 }
-
-// TILE_WIDTH constant for player rendering
-const TILE_HEIGHT = 32;
\ No newline at end of file