jusemon/slime
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity Actions

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.

Browse source
This commit is contained in:
Juan Sebastián Montoya 2026-01-06 17:25:34 -05:00
parent cf04677511
commit 86c1c3bc59
2 changed files with 37 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/systems/MenuSystem.js
View file

@ -115,11 +115,23 @@ export class MenuSystem extends System {
} else if (this.gameState === 'paused') { } else if (this.gameState === 'paused') {
const paused = 'PAUSED'; const paused = 'PAUSED';
const pausedW = PixelFont.getTextWidth(paused, 2); 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 resume = 'PRESS ENTER TO RESUME';
const resumeW = PixelFont.getTextWidth(resume, 1); 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') { } else if (this.gameState === 'gameOver') {
const dead = 'YOU PERISHED'; const dead = 'YOU PERISHED';
const deadW = PixelFont.getTextWidth(dead, 2); const deadW = PixelFont.getTextWidth(dead, 2);

50
src/systems/UISystem.js
View file

@ -64,8 +64,7 @@ export class UISystem extends System {
// Draw UI // Draw UI
this.drawHUD(player); this.drawHUD(player);
this.drawSkills(player); this.drawSkills(player);
this.drawStats(player); // REMOVED drawStats and drawSkillProgress from active gameplay
this.drawSkillProgress(player);
this.drawDamageNumbers(); this.drawDamageNumbers();
this.drawNotifications(); this.drawNotifications();
this.drawAbsorptionEffects(); this.drawAbsorptionEffects();
@ -105,13 +104,6 @@ export class UISystem extends System {
const form = evolution.getDominantForm(); const form = evolution.getDominantForm();
const formY = barY + barHeight + 14; const formY = barY + barHeight + 14;
PixelFont.drawText(ctx, form.toUpperCase(), barX, formY, Palette.SKY_BLUE, 1); 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) { drawSkills(player) {
@ -140,43 +132,47 @@ export class UISystem extends System {
}); });
} }
drawStats(player) { drawStats(player, x, y) {
const stats = player.getComponent('Stats'); const stats = player.getComponent('Stats');
if (!stats) return; const evolution = player.getComponent('Evolution');
if (!stats || !evolution) return;
const ctx = this.ctx; const ctx = this.ctx;
const width = this.engine.canvas.width; PixelFont.drawText(ctx, 'STATISTICS', x, y, Palette.WHITE, 1);
const startX = width - 80; PixelFont.drawText(ctx, `STR ${stats.strength}`, x, y + 10, Palette.ROYAL_BLUE, 1);
const startY = 60; 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, 'EVOLUTION', x, y + 60, Palette.WHITE, 1);
PixelFont.drawText(ctx, `STR ${stats.strength} AGI ${stats.agility}`, startX, startY + 9, Palette.ROYAL_BLUE, 1); PixelFont.drawText(ctx, `HUMAN: ${Math.floor(evolution.human)}`, x, y + 70, Palette.ROYAL_BLUE, 1);
PixelFont.drawText(ctx, `INT ${stats.intelligence} CON ${stats.constitution}`, startX, startY + 18, 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'); const skillProgress = player.getComponent('SkillProgress');
if (!skillProgress) return; if (!skillProgress) return;
const ctx = this.ctx; const ctx = this.ctx;
const width = this.engine.canvas.width;
const startX = width - 80;
const startY = 100;
const progress = skillProgress.getAllProgress(); 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; let idx = 0;
progress.forEach((count, skillId) => { progress.forEach((count, skillId) => {
const required = skillProgress.requiredAbsorptions; const required = skillProgress.requiredAbsorptions;
const skill = SkillRegistry.get(skillId); const skill = SkillRegistry.get(skillId);
let name = skill ? skill.name : 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; const py = y + 10 + idx * 9;
PixelFont.drawText(ctx, `${name} ${count}/${required}`, startX, y, Palette.SKY_BLUE, 1); PixelFont.drawText(ctx, `${name}: ${count}/${required}`, x, py, Palette.SKY_BLUE, 1);
idx++; idx++;
}); });
} }