1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
const Debug = {
isEnabled: false,
lastFrameTime: performance.now(),
frameCount: 0,
fps: 0,
fpsUpdateInterval: 500, // Update FPS display every 500ms
lastFpsUpdate: 0,
init() {
// Add keyboard listener for debug toggle
window.addEventListener('keydown', (e) => {
if (e.key.toLowerCase() === 'd') {
this.isEnabled = !this.isEnabled;
}
});
},
update(currentTime) {
if (!this.isEnabled) return;
this.frameCount++;
// Update FPS counter every 500ms
if (currentTime - this.lastFpsUpdate >= this.fpsUpdateInterval) {
this.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastFpsUpdate));
this.frameCount = 0;
this.lastFpsUpdate = currentTime;
}
this.lastFrameTime = currentTime;
},
draw(ctx) {
if (!this.isEnabled) return;
const padding = 30;
const lineHeight = 20;
let y = padding;
// Save context state
ctx.save();
// Set up debug text style
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
ctx.fillRect(0, 0, 300, 200);
ctx.font = '14px monospace';
ctx.fillStyle = '#00FF00';
// Display debug information
const debugInfo = [
`FPS: ${this.fps}`,
`Camera: (${Math.round(Camera.x)}, ${Math.round(Camera.y)})`,
`Player Hex: (${player.position.q}, ${player.position.r})`,
`Screen: ${state.canvas.width}x${state.canvas.height}`,
`Inventory Items: ${player.inventory.length}`,
`Revealed Hexes: ${FogOfWar.revealed.size}`,
`Moving: ${player.target ? 'Yes' : 'No'}`,
`Narrow Screen: ${state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD}`
];
debugInfo.forEach(info => {
ctx.fillText(info, padding, y);
y += lineHeight;
});
// Draw deadzone visualization
if (player.target) {
const isNarrowScreen = state.canvas.width <= Config.camera.NARROW_SCREEN_THRESHOLD;
const deadzoneX = Math.min(
Math.max(
state.canvas.width * (
isNarrowScreen ?
Config.camera.DEADZONE_RATIO_X.NARROW :
Config.camera.DEADZONE_RATIO_X.WIDE
),
Config.camera.MIN_DEADZONE
),
Config.camera.MAX_DEADZONE
);
const deadzoneY = Math.min(
Math.max(state.canvas.height * Config.camera.DEADZONE_RATIO_Y,
Config.camera.MIN_DEADZONE
),
Config.camera.MAX_DEADZONE
);
// Draw camera deadzone
ctx.strokeStyle = 'rgba(255, 162, 0, 1)';
ctx.lineWidth = 2;
ctx.strokeRect(
state.canvas.width/2 - deadzoneX,
state.canvas.height/2 - deadzoneY,
deadzoneX * 2,
deadzoneY * 2
);
// Draw a small cross at the center of the camera deadzone
const centerX = state.canvas.width / 2;
const centerY = state.canvas.height / 2;
const crossSize = 10; // Size of the cross arms
ctx.beginPath();
ctx.moveTo(centerX - crossSize, centerY);
ctx.lineTo(centerX + crossSize, centerY);
ctx.moveTo(centerX, centerY - crossSize);
ctx.lineTo(centerX, centerY + crossSize);
ctx.stroke();
}
// Restore context state
ctx.restore();
}
};
|