From 86c1c3bc59a8bfdb4986c900b3d8849722dd6768 Mon Sep 17 00:00:00 2001 From: Juan Sebastian Montoya Date: Tue, 6 Jan 2026 17:25:34 -0500 Subject: [PATCH] feat: Move player stats and skill progress display from active HUD to the paused menu, removing minor HUD elements and consolidating evolution details into the stats display. --- src/systems/MenuSystem.js | 16 +++++++++++-- src/systems/UISystem.js | 50 ++++++++++++++++++--------------------- 2 files changed, 37 insertions(+), 29 deletions(-) diff --git a/src/systems/MenuSystem.js b/src/systems/MenuSystem.js index ca90856..9ba7d57 100644 --- a/src/systems/MenuSystem.js +++ b/src/systems/MenuSystem.js @@ -115,11 +115,23 @@ export class MenuSystem extends System { } else if (this.gameState === 'paused') { const paused = 'PAUSED'; const pausedW = PixelFont.getTextWidth(paused, 2); - PixelFont.drawText(ctx, paused, (width - pausedW) / 2, height / 2 - 20, Palette.SKY_BLUE, 2); + PixelFont.drawText(ctx, paused, (width - pausedW) / 2, 20, Palette.SKY_BLUE, 2); const resume = 'PRESS ENTER TO RESUME'; const resumeW = PixelFont.getTextWidth(resume, 1); - PixelFont.drawText(ctx, resume, (width - resumeW) / 2, height / 2 + 10, Palette.WHITE, 1); + PixelFont.drawText(ctx, resume, (width - resumeW) / 2, 45, Palette.WHITE, 1); + + // Draw Stats and Knowledge (Moved from HUD) + const player = this.engine.getEntities().find(e => e.hasComponent('Evolution')); + const uiSystem = this.engine.systems.find(s => s.name === 'UISystem'); + + if (player && uiSystem) { + // Draw Stats on the left + uiSystem.drawStats(player, 20, 80); + + // Draw Learning Progress on the right + uiSystem.drawSkillProgress(player, width - 110, 80); + } } else if (this.gameState === 'gameOver') { const dead = 'YOU PERISHED'; const deadW = PixelFont.getTextWidth(dead, 2); diff --git a/src/systems/UISystem.js b/src/systems/UISystem.js index fe15c94..134e334 100644 --- a/src/systems/UISystem.js +++ b/src/systems/UISystem.js @@ -64,8 +64,7 @@ export class UISystem extends System { // Draw UI this.drawHUD(player); this.drawSkills(player); - this.drawStats(player); - this.drawSkillProgress(player); + // REMOVED drawStats and drawSkillProgress from active gameplay this.drawDamageNumbers(); this.drawNotifications(); this.drawAbsorptionEffects(); @@ -105,13 +104,6 @@ export class UISystem extends System { const form = evolution.getDominantForm(); const formY = barY + barHeight + 14; PixelFont.drawText(ctx, form.toUpperCase(), barX, formY, Palette.SKY_BLUE, 1); - - // Tiny evolution details - const evoDetails = `H${Math.floor(evolution.human)} B${Math.floor(evolution.beast)} S${Math.floor(evolution.slime)}`; - PixelFont.drawText(ctx, evoDetails, barX, formY + 9, Palette.ROYAL_BLUE, 1); - - // Small Instructions - PixelFont.drawText(ctx, 'WASD CLICK', barX, this.engine.canvas.height - 10, Palette.DARK_BLUE, 1); } drawSkills(player) { @@ -140,43 +132,47 @@ export class UISystem extends System { }); } - drawStats(player) { + drawStats(player, x, y) { const stats = player.getComponent('Stats'); - if (!stats) return; + const evolution = player.getComponent('Evolution'); + if (!stats || !evolution) return; const ctx = this.ctx; - const width = this.engine.canvas.width; - const startX = width - 80; - const startY = 60; + PixelFont.drawText(ctx, 'STATISTICS', x, y, Palette.WHITE, 1); + PixelFont.drawText(ctx, `STR ${stats.strength}`, x, y + 10, Palette.ROYAL_BLUE, 1); + PixelFont.drawText(ctx, `AGI ${stats.agility}`, x, y + 20, Palette.ROYAL_BLUE, 1); + PixelFont.drawText(ctx, `INT ${stats.intelligence}`, x, y + 30, Palette.ROYAL_BLUE, 1); + PixelFont.drawText(ctx, `CON ${stats.constitution}`, x, y + 40, Palette.ROYAL_BLUE, 1); - PixelFont.drawText(ctx, 'STATS', startX, startY, Palette.WHITE, 1); - PixelFont.drawText(ctx, `STR ${stats.strength} AGI ${stats.agility}`, startX, startY + 9, Palette.ROYAL_BLUE, 1); - PixelFont.drawText(ctx, `INT ${stats.intelligence} CON ${stats.constitution}`, startX, startY + 18, Palette.ROYAL_BLUE, 1); + PixelFont.drawText(ctx, 'EVOLUTION', x, y + 60, Palette.WHITE, 1); + PixelFont.drawText(ctx, `HUMAN: ${Math.floor(evolution.human)}`, x, y + 70, Palette.ROYAL_BLUE, 1); + PixelFont.drawText(ctx, `BEAST: ${Math.floor(evolution.beast)}`, x, y + 80, Palette.ROYAL_BLUE, 1); + PixelFont.drawText(ctx, `SLIME: ${Math.floor(evolution.slime)}`, x, y + 90, Palette.ROYAL_BLUE, 1); } - drawSkillProgress(player) { + drawSkillProgress(player, x, y) { const skillProgress = player.getComponent('SkillProgress'); if (!skillProgress) return; const ctx = this.ctx; - const width = this.engine.canvas.width; - const startX = width - 80; - const startY = 100; - const progress = skillProgress.getAllProgress(); - if (progress.size === 0) return; - PixelFont.drawText(ctx, 'LRN', startX, startY, Palette.CYAN, 1); + PixelFont.drawText(ctx, 'KNOWLEDGE', x, y, Palette.CYAN, 1); + + if (progress.size === 0) { + PixelFont.drawText(ctx, 'NONE YET', x, y + 10, Palette.DARK_BLUE, 1); + return; + } let idx = 0; progress.forEach((count, skillId) => { const required = skillProgress.requiredAbsorptions; const skill = SkillRegistry.get(skillId); let name = skill ? skill.name : skillId; - if (name.length > 4) name = name.substring(0, 4); + if (name.length > 10) name = name.substring(0, 10); - const y = startY + 9 + idx * 8; - PixelFont.drawText(ctx, `${name} ${count}/${required}`, startX, y, Palette.SKY_BLUE, 1); + const py = y + 10 + idx * 9; + PixelFont.drawText(ctx, `${name}: ${count}/${required}`, x, py, Palette.SKY_BLUE, 1); idx++; }); }