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

Feature/Pixel-Rework #4

Merged
jusemon merged 3 commits from Feature/Pixel-Rework into main 2026-01-06 17:28:25 -05:00
Conversation 0 Commits 3 Files changed 41 +37 -29
2 changed files with 37 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 86c1c3bc59 - Show all commits

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