277 lines
8.0 KiB
JavaScript
277 lines
8.0 KiB
JavaScript
/**
|
|
* UNIFIED STATS PANEL
|
|
* Combines Performance Monitor + Debug Info into one popup
|
|
* Toggle with TAB, auto-hides after 3 seconds
|
|
*/
|
|
class UnifiedStatsPanel {
|
|
constructor(scene) {
|
|
this.scene = scene;
|
|
this.visible = false;
|
|
this.autoHideTimer = null;
|
|
|
|
// FPS tracking
|
|
this.fps = 60;
|
|
this.fpsHistory = [];
|
|
this.maxHistoryLength = 60;
|
|
|
|
// Stats
|
|
this.stats = {
|
|
avgFPS: 60,
|
|
minFPS: 60,
|
|
maxFPS: 60,
|
|
frameTime: 16.67,
|
|
activeSprites: 0,
|
|
memoryMB: 0
|
|
};
|
|
|
|
this.createUI();
|
|
this.setupKeyboard();
|
|
|
|
console.log('📊 Unified Stats Panel initialized (TAB to toggle)');
|
|
}
|
|
|
|
createUI() {
|
|
const uiScene = this.scene.scene.get('UIScene');
|
|
if (!uiScene) return;
|
|
|
|
const x = 10;
|
|
const y = 10;
|
|
const width = 280;
|
|
const height = 180;
|
|
|
|
// Container
|
|
this.container = uiScene.add.container(x, y);
|
|
this.container.setDepth(100000);
|
|
this.container.setScrollFactor(0);
|
|
this.container.setVisible(false);
|
|
|
|
// Background
|
|
const bg = uiScene.add.graphics();
|
|
bg.fillStyle(0x000000, 0.85);
|
|
bg.fillRoundedRect(0, 0, width, height, 8);
|
|
bg.lineStyle(3, 0x00ff00, 0.8);
|
|
bg.strokeRoundedRect(0, 0, width, height, 8);
|
|
this.container.add(bg);
|
|
|
|
// Title
|
|
const title = uiScene.add.text(width / 2, 12, '📊 STATS PANEL', {
|
|
fontSize: '14px',
|
|
fontFamily: 'Arial',
|
|
fill: '#00ff00',
|
|
fontStyle: 'bold'
|
|
}).setOrigin(0.5, 0);
|
|
this.container.add(title);
|
|
|
|
// Separator
|
|
const separator = uiScene.add.graphics();
|
|
separator.lineStyle(1, 0x00ff00, 0.5);
|
|
separator.lineBetween(10, 30, width - 10, 30);
|
|
this.container.add(separator);
|
|
|
|
// Performance section
|
|
this.perfText = uiScene.add.text(15, 38, '', {
|
|
fontSize: '11px',
|
|
fontFamily: 'Courier New',
|
|
fill: '#00ff00',
|
|
stroke: '#000000',
|
|
strokeThickness: 2
|
|
});
|
|
this.container.add(this.perfText);
|
|
|
|
// Debug section
|
|
this.debugText = uiScene.add.text(15, 105, '', {
|
|
fontSize: '11px',
|
|
fontFamily: 'Courier New',
|
|
fill: '#ffff00',
|
|
stroke: '#000000',
|
|
strokeThickness: 2
|
|
});
|
|
this.container.add(this.debugText);
|
|
|
|
// FPS Graph
|
|
this.graph = uiScene.add.graphics();
|
|
this.container.add(this.graph);
|
|
|
|
// Auto-hide hint
|
|
this.hintText = uiScene.add.text(width / 2, height - 8, 'Auto-hides in 3s', {
|
|
fontSize: '9px',
|
|
fill: '#888888'
|
|
}).setOrigin(0.5, 1);
|
|
this.container.add(this.hintText);
|
|
}
|
|
|
|
setupKeyboard() {
|
|
const uiScene = this.scene.scene.get('UIScene');
|
|
if (!uiScene || !uiScene.input) return;
|
|
|
|
// TAB key
|
|
uiScene.input.keyboard.on('keydown-TAB', (event) => {
|
|
event.preventDefault();
|
|
this.toggle();
|
|
});
|
|
|
|
// F3 key (alternative)
|
|
uiScene.input.keyboard.on('keydown-F3', () => {
|
|
this.toggle();
|
|
});
|
|
}
|
|
|
|
toggle() {
|
|
this.visible = !this.visible;
|
|
|
|
if (this.container) {
|
|
this.container.setVisible(this.visible);
|
|
}
|
|
|
|
console.log(`Stats Panel: ${this.visible ? 'ON' : 'OFF'}`);
|
|
|
|
// Auto-hide after 3 seconds
|
|
if (this.visible) {
|
|
this.startAutoHideTimer();
|
|
} else {
|
|
this.cancelAutoHideTimer();
|
|
}
|
|
}
|
|
|
|
startAutoHideTimer() {
|
|
this.cancelAutoHideTimer();
|
|
|
|
const uiScene = this.scene.scene.get('UIScene');
|
|
if (!uiScene) return;
|
|
|
|
this.autoHideTimer = uiScene.time.delayedCall(3000, () => {
|
|
this.visible = false;
|
|
if (this.container) {
|
|
this.container.setVisible(false);
|
|
}
|
|
console.log('Stats Panel auto-hidden');
|
|
});
|
|
}
|
|
|
|
cancelAutoHideTimer() {
|
|
if (this.autoHideTimer) {
|
|
this.autoHideTimer.remove();
|
|
this.autoHideTimer = null;
|
|
}
|
|
}
|
|
|
|
update(delta) {
|
|
if (!this.visible) return;
|
|
|
|
// Calculate FPS
|
|
this.fps = 1000 / delta;
|
|
this.fpsHistory.push(this.fps);
|
|
if (this.fpsHistory.length > this.maxHistoryLength) {
|
|
this.fpsHistory.shift();
|
|
}
|
|
|
|
// Calculate stats
|
|
this.stats.avgFPS = this.fpsHistory.reduce((a, b) => a + b, 0) / this.fpsHistory.length;
|
|
this.stats.minFPS = Math.min(...this.fpsHistory);
|
|
this.stats.maxFPS = Math.max(...this.fpsHistory);
|
|
this.stats.frameTime = delta;
|
|
this.stats.activeSprites = this.countActiveSprites();
|
|
|
|
// Memory
|
|
if (performance.memory) {
|
|
this.stats.memoryMB = (performance.memory.usedJSHeapSize / 1048576).toFixed(1);
|
|
}
|
|
|
|
// Update UI every 5 frames
|
|
if (this.scene.game.loop.frame % 5 === 0) {
|
|
this.updateUI();
|
|
}
|
|
}
|
|
|
|
countActiveSprites() {
|
|
if (!this.scene.children) return 0;
|
|
return this.scene.children.list.filter(child =>
|
|
child.active && child.visible
|
|
).length;
|
|
}
|
|
|
|
updateUI() {
|
|
// Performance section
|
|
if (this.perfText) {
|
|
const perfLines = [
|
|
`PERFORMANCE:`,
|
|
`FPS: ${this.fps.toFixed(1)} (Avg: ${this.stats.avgFPS.toFixed(1)})`,
|
|
`Min: ${this.stats.minFPS.toFixed(1)} | Max: ${this.stats.maxFPS.toFixed(1)}`,
|
|
`Frame: ${this.stats.frameTime.toFixed(2)}ms`,
|
|
`Memory: ${this.stats.memoryMB} MB`
|
|
];
|
|
this.perfText.setText(perfLines.join('\n'));
|
|
}
|
|
|
|
// Debug section
|
|
if (this.debugText) {
|
|
const player = this.scene.player;
|
|
const playerPos = player ? player.getPosition() : { x: 0, y: 0 };
|
|
const activeCrops = this.scene.terrainSystem?.cropsMap?.size || 0;
|
|
const dropsCount = this.scene.lootSystem?.drops?.length || 0;
|
|
const gameTime = this.scene.timeSystem?.gameTime?.toFixed(1) || '?';
|
|
const conn = this.scene.multiplayerSystem?.isConnected ? '🟢' : '🔴';
|
|
|
|
const debugLines = [
|
|
`GAME INFO: ${conn}`,
|
|
`Time: ${gameTime}h | Crops: ${activeCrops}`,
|
|
`Loot: ${dropsCount} | Sprites: ${this.stats.activeSprites}`,
|
|
`Player: (${playerPos.x}, ${playerPos.y})`
|
|
];
|
|
this.debugText.setText(debugLines.join('\n'));
|
|
}
|
|
|
|
// Draw FPS graph
|
|
this.drawGraph();
|
|
}
|
|
|
|
drawGraph() {
|
|
if (!this.graph) return;
|
|
|
|
this.graph.clear();
|
|
|
|
const graphX = 15;
|
|
const graphY = 155;
|
|
const graphWidth = 250;
|
|
const graphHeight = 15;
|
|
const maxFPS = 60;
|
|
|
|
// Background
|
|
this.graph.fillStyle(0x222222, 0.5);
|
|
this.graph.fillRect(graphX, graphY, graphWidth, graphHeight);
|
|
|
|
// FPS bars
|
|
const barWidth = graphWidth / this.maxHistoryLength;
|
|
this.fpsHistory.forEach((fps, i) => {
|
|
const barHeight = (fps / maxFPS) * graphHeight;
|
|
const x = graphX + (i * barWidth);
|
|
const y = graphY + graphHeight - barHeight;
|
|
|
|
// Color based on FPS
|
|
if (fps < 30) {
|
|
this.graph.fillStyle(0xff0000, 0.8); // Red
|
|
} else if (fps < 50) {
|
|
this.graph.fillStyle(0xffaa00, 0.8); // Orange
|
|
} else {
|
|
this.graph.fillStyle(0x00ff00, 0.8); // Green
|
|
}
|
|
|
|
this.graph.fillRect(x, y, barWidth, barHeight);
|
|
});
|
|
|
|
// 60 FPS line
|
|
this.graph.lineStyle(1, 0xffffff, 0.5);
|
|
this.graph.beginPath();
|
|
this.graph.moveTo(graphX, graphY);
|
|
this.graph.lineTo(graphX + graphWidth, graphY);
|
|
this.graph.strokePath();
|
|
}
|
|
|
|
destroy() {
|
|
this.cancelAutoHideTimer();
|
|
if (this.container) {
|
|
this.container.destroy();
|
|
}
|
|
}
|
|
}
|