From fa3c6ff0dfb87f368ff4e4fc00bf1e5d2e9129d7 Mon Sep 17 00:00:00 2001 From: elioat Date: Sat, 28 Dec 2024 16:45:47 -0500 Subject: * --- html/rogue/index.html | 1 + html/rogue/js/debug.js | 101 +++++++++++++++++++++++++++++++++++++++++++++++++ html/rogue/js/game.js | 10 +++-- 3 files changed, 109 insertions(+), 3 deletions(-) create mode 100644 html/rogue/js/debug.js (limited to 'html/rogue') diff --git a/html/rogue/index.html b/html/rogue/index.html index e019a46..47ad50f 100644 --- a/html/rogue/index.html +++ b/html/rogue/index.html @@ -26,6 +26,7 @@ + diff --git a/html/rogue/js/debug.js b/html/rogue/js/debug.js new file mode 100644 index 0000000..751af4c --- /dev/null +++ b/html/rogue/js/debug.js @@ -0,0 +1,101 @@ +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 = 10; + 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, 255, 0, 0.5)'; + ctx.lineWidth = 2; + ctx.strokeRect( + state.canvas.width/2 - deadzoneX, + state.canvas.height/2 - deadzoneY, + deadzoneX * 2, + deadzoneY * 2 + ); + } + + // Restore context state + ctx.restore(); + } +}; \ No newline at end of file diff --git a/html/rogue/js/game.js b/html/rogue/js/game.js index f26e59b..427fab2 100644 --- a/html/rogue/js/game.js +++ b/html/rogue/js/game.js @@ -12,6 +12,7 @@ function init() { state.ctx = state.canvas.getContext('2d'); player.init(); + Debug.init(); function resize() { state.canvas.width = window.innerWidth; @@ -56,16 +57,18 @@ function drawHex(ctx, x, y, hex) { } function gameLoop(currentTime) { - requestAnimationFrame(gameLoop); // Request next frame first + requestAnimationFrame(gameLoop); if (currentTime - lastFrameTime < Config.game.FRAME_TIME) { - return; // Skip frame if too soon + return; } - // Ensure consistent time step const deltaTime = Math.min(currentTime - lastFrameTime, Config.game.FRAME_TIME * 2); lastFrameTime = currentTime; + // Update debug information + Debug.update(currentTime); + // Clear with background state.ctx.fillStyle = Config.colors.BACKGROUND; state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height); @@ -92,6 +95,7 @@ function gameLoop(currentTime) { player.draw(state.ctx, HexGrid.toPixel.bind(HexGrid), Camera, HexGrid.SIZE); FogOfWar.draw(state.ctx); InventoryUI.draw(state.ctx); + Debug.draw(state.ctx); } function handleClick(event) { -- cgit 1.4.1-2-gfad0 n74' href='#n74'>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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 






















































































































































                                                                                                                                                                        
kartik.com>  2022-07-12 17:05:21 -0700
committer  Kartik K. Agaram <vc@akkartik.com>  2022-07-12 17:05:21 -0700

add state arg to few functions' href='/akkartik/view.love/commit/help.lua?id=674d5715760043d9fd6b821827d96e5dffd73302'>674d571 ^

3b36093 ^

674d571 ^


3b36093 ^

674d571 ^



3b36093 ^

674d571 ^



3b36093 ^

674d571 ^



3b36093 ^

674d571 ^



3b36093 ^

674d571 ^



3b36093 ^

674d571 ^



3b36093 ^

674d571 ^


3b36093 ^

674d571 ^

3b36093 ^

674d571 ^

3850fba ^

b7a67ab ^

de495ae ^


b7a67ab ^



3850fba ^

b7a67ab ^

3b36093 ^

674d571 ^

3b36093 ^

674d571 ^


3b36093 ^

674d571 ^


3b36093 ^

674d571 ^


de495ae ^

3b36093 ^

674d571 ^

3b36093 ^

de495ae ^

3b36093 ^

de495ae ^

674d571 ^


3b36093 ^

674d571 ^

3b36093 ^

674d571 ^


8d4d00d ^

3b36093 ^

674d571 ^

8d4d00d ^

3b36093 ^

674d571 ^

3b36093 ^

674d571 ^

8d4d00d ^

674d571 ^

8d4d00d ^

3b36093 ^

674d571 ^

8d4d00d ^

3b36093 ^

674d571 ^

3b36093 ^

674d571 ^

8d4d00d ^

9bbfc2b ^

3b36093 ^

674d571 ^



3b36093 ^

674d571 ^

de495ae ^

674d571 ^

3b36093 ^

674d571 ^

de495ae ^

674d571 ^

3b36093 ^

674d571 ^

de495ae ^

674d571 ^

3b36093 ^

674d571 ^

de495ae ^

674d571 ^

3b36093 ^

674d571 ^

e27165c ^

674d571 ^

3b36093 ^

674d571 ^

e27165c ^

3850fba ^

b7a67ab ^

de495ae ^


674d571 ^


de495ae ^

674d571 ^

de495ae ^

674d571 ^

de495ae ^

674d571 ^

de495ae ^


674d571 ^

de495ae ^



de495ae ^

ce31b74 ^

de495ae ^

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

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133
134

135
136

137

138

139

140

141

142

143
144

145

146
147
148

149

150

151