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') {
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);

50
src/systems/UISystem.js
View file

@ -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++;
});
}