arch_agent/aether-chronicles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: const redeclaration bug + bare ctx references

Browse Source 
- 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.
This commit is contained in:
arch_agent
2026-07-17 20:42:39 +02:00
parent face8023a4
commit 3890395885
2 changed files with 15 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/js/game.js
+4 -7
View File
@@ -1,8 +1,5 @@
// game.js — Main Game Loop // game.js — Main Game Loop
const TILE_WIDTH = 64;
const TILE_HEIGHT = 32;
class Game { class Game {
constructor() { constructor() {
this.canvas = document.getElementById('game-canvas'); this.canvas = document.getElementById('game-canvas');
@@ -336,7 +333,7 @@ class Game {
class_master: '#8a4a8a', class_master: '#8a4a8a',
innkeeper: '#8a8a4a' innkeeper: '#8a8a4a'
}; };
ctx = this.ctx; const ctx = this.ctx;
ctx.fillStyle = colors[npc.type] || '#666'; ctx.fillStyle = colors[npc.type] || '#666';
ctx.fillRect(drawX - 5, drawY + TILE_HEIGHT/2 - 15, 10, 12); ctx.fillRect(drawX - 5, drawY + TILE_HEIGHT/2 - 15, 10, 12);
ctx.fillStyle = '#e0b890'; ctx.fillStyle = '#e0b890';
@@ -374,9 +371,9 @@ class Game {
this.ctx.fillStyle = '#666'; this.ctx.fillStyle = '#666';
this.ctx.fillRect(drawX - 6, drawY + TILE_HEIGHT/2 - 10, 12, 8); this.ctx.fillRect(drawX - 6, drawY + TILE_HEIGHT/2 - 10, 12, 8);
this.ctx.fillStyle = '#555'; this.ctx.fillStyle = '#555';
ctx.beginPath(); this.ctx.beginPath();
ctx.arc(drawX, drawY + TILE_HEIGHT/2 - 12, 5, 0, Math.PI * 2); this.ctx.arc(drawX, drawY + TILE_HEIGHT/2 - 12, 5, 0, Math.PI * 2);
ctx.fill(); this.ctx.fill();
// Eyes (red) // Eyes (red)
this.ctx.fillStyle = '#ff3333'; this.ctx.fillStyle = '#ff3333';
frontend/js/player.js
+11 -12
View File
@@ -1,5 +1,7 @@
// player.js — Player character with stats // player.js — Player character with stats
var TILE_HEIGHT_PLAYER = 32;
class Player { class Player {
constructor(x, y) { constructor(x, y) {
this.x = x; this.x = x;
@@ -145,7 +147,7 @@ class Player {
// Shadow // Shadow
ctx.fillStyle = 'rgba(0,0,0,0.3)'; ctx.fillStyle = 'rgba(0,0,0,0.3)';
ctx.beginPath(); 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(); ctx.fill();
// Body (simple character) // Body (simple character)
@@ -153,37 +155,37 @@ class Player {
// Legs // Legs
ctx.fillStyle = '#4a4a6a'; ctx.fillStyle = '#4a4a6a';
ctx.fillRect(drawX - 5, 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/2 - 8 + bobOffset, 4, 8); ctx.fillRect(drawX + 1, drawY + TILE_HEIGHT_PLAYER/2 - 8 + bobOffset, 4, 8);
// Body // Body
ctx.fillStyle = '#5566aa'; 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 // Head
ctx.fillStyle = '#e0b890'; ctx.fillStyle = '#e0b890';
ctx.beginPath(); 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(); ctx.fill();
// Hair (black) // Hair (black)
ctx.fillStyle = '#1a1a1a'; ctx.fillStyle = '#1a1a1a';
ctx.beginPath(); 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.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 // Name label
ctx.fillStyle = '#ffcc44'; ctx.fillStyle = '#ffcc44';
ctx.font = '11px sans-serif'; ctx.font = '11px sans-serif';
ctx.textAlign = 'center'; 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 // HP bar above character
const hpPercent = this.hp / this.maxHp; const hpPercent = this.hp / this.maxHp;
const barWidth = 24; const barWidth = 24;
const barX = drawX - barWidth / 2; const barX = drawX - barWidth / 2;
const barY = drawY + TILE_HEIGHT/2 - 38; const barY = drawY + TILE_HEIGHT_PLAYER/2 - 38;
ctx.fillStyle = '#333'; ctx.fillStyle = '#333';
ctx.fillRect(barX, barY, barWidth, 3); ctx.fillRect(barX, barY, barWidth, 3);
@@ -191,6 +193,3 @@ class Player {
ctx.fillRect(barX, barY, barWidth * hpPercent, 3); ctx.fillRect(barX, barY, barWidth * hpPercent, 3);
} }
} }
// TILE_WIDTH constant for player rendering
const TILE_HEIGHT = 32;