inventori
This commit is contained in:
276
src/systems/UnifiedStatsPanel.js
Normal file
276
src/systems/UnifiedStatsPanel.js
Normal file
@@ -0,0 +1,276 @@
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user