Skip to content

Fix defense bar visual direction and restore GUI element sizes #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 6 commits into
base: copilot/refactor-defensesystem-damage
Choose a base branch
from
Open

Fix defense bar visual direction and restore GUI element sizes #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9e6eda6
Initial plan
Copilot Feb 14, 2026
31d9fb8
Remove legacy UI: stats panel, heat bar, and tactical UI
Copilot Feb 14, 2026
3522109
Remove enemy resistance indicators from RenderSystem
Copilot Feb 14, 2026
ff17dbf
Fix defense bars visual update - add width: 0 to CSS
Copilot Feb 14, 2026
67dd663
Double GUI size - increase all HUD elements for better visibility
Copilot Feb 14, 2026
569e8d7
Fix defense bars to empty right-to-left and restore other GUI sizes
Copilot Feb 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 15 additions & 89 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,53 +172,6 @@
top: 10px;
left: 10px;
}

.hud-top-right {
top: 10px;
right: 10px;
max-width: 250px;
}

.stats-display {
background: rgba(10, 10, 26, 0.85);
border: 2px solid #00ffff;
padding: 10px;
border-radius: 5px;
font-size: 12px;
line-height: 1.6;
}

.stats-display-title {
color: #ffaa00;
font-weight: bold;
margin-bottom: 8px;
font-size: 14px;
text-align: center;
}

.stat-row {
display: flex;
justify-content: space-between;
margin: 3px 0;
color: #00ffff;
}

.stat-label {
color: #aaa;
}

.stat-value {
color: #00ffff;
font-weight: bold;
}

.stat-value.negative {
color: #ff4444;
}

.stat-value.positive {
color: #44ff44;
}

.hud-top-center {
top: 10px;
Expand Down Expand Up @@ -291,43 +244,49 @@

/* Defense Layer Bars */
.defense-bar {
width: 200px;
height: 15px;
width: 400px;
height: 30px;
position: relative;
margin-top: 3px;
margin-top: 6px;
}

.shield-bar {
background: rgba(0, 255, 255, 0.2);
border: 2px solid #00ffff;
border: 4px solid #00ffff;
}

.shield-fill {
width: 0;
height: 100%;
background: linear-gradient(90deg, #00ddff, #00ffff);
transition: width 0.3s;
margin-left: auto; /* Align right - empties from left */
}

.armor-bar {
background: rgba(139, 69, 19, 0.3);
border: 2px solid #8B4513;
border: 4px solid #8B4513;
}

.armor-fill {
width: 0;
height: 100%;
background: linear-gradient(90deg, #8B4513, #CD853F);
transition: width 0.3s;
margin-left: auto; /* Align right - empties from left */
}

.structure-bar {
background: rgba(255, 0, 0, 0.3);
border: 2px solid #ff0000;
border: 4px solid #ff0000;
}

.structure-fill {
width: 0;
height: 100%;
background: linear-gradient(90deg, #ff0000, #ff6600);
transition: width 0.3s;
margin-left: auto; /* Align right - empties from left */
}

.xp-bar {
Expand Down Expand Up @@ -1398,39 +1357,6 @@ <h2 class="title" style="font-size: 36px;">AMÉLIORATIONS</h2>
<div class="hud hud-top-left" id="hudTopLeft">
<div>Temps: <span id="timeDisplay">0:00</span></div>
</div>
<div class="hud hud-top-right" id="hudTopRight">
<div class="stats-display" id="statsDisplay">
<div class="stats-display-title">📊 STATS</div>
<div class="stat-row">
<span class="stat-label">Dégâts:</span>
<span class="stat-value" id="statDamage">100%</span>
</div>
<div class="stat-row">
<span class="stat-label">Cadence:</span>
<span class="stat-value" id="statFireRate">100%</span>
</div>
<div class="stat-row">
<span class="stat-label">Vitesse:</span>
<span class="stat-value" id="statSpeed">220</span>
</div>
<div class="stat-row">
<span class="stat-label">Armure:</span>
<span class="stat-value" id="statArmor">0</span>
</div>
<div class="stat-row">
<span class="stat-label">Vol de vie:</span>
<span class="stat-value" id="statLifesteal">0%</span>
</div>
<div class="stat-row">
<span class="stat-label">Régén:</span>
<span class="stat-value" id="statRegen">0.0/s</span>
</div>
<div class="stat-row">
<span class="stat-label">Crit:</span>
<span class="stat-value" id="statCrit">5%</span>
</div>
</div>
</div>
<div class="hud hud-top-center" id="hudTopCenter">
<div>
<span style="color: #ffaa00; font-weight: bold;">Vague <span id="waveDisplay">1</span></span>
Expand All @@ -1446,17 +1372,17 @@ <h2 class="title" style="font-size: 36px;">AMÉLIORATIONS</h2>
<div class="defense-bar shield-bar" id="shieldBar">
<div class="shield-fill" id="shieldFill"></div>
</div>
<div style="margin-top: 2px; font-size: 11px;">🛡️ BOUCLIER: <span id="shieldValue">0/0</span></div>
<div style="margin-top: 4px; font-size: 22px;">🛡️ BOUCLIER: <span id="shieldValue">0/0</span></div>

<div class="defense-bar armor-bar" id="armorBar">
<div class="armor-fill" id="armorFill"></div>
</div>
<div style="margin-top: 2px; font-size: 11px;">🛡️ ARMURE: <span id="armorValue">0/0</span></div>
<div style="margin-top: 4px; font-size: 22px;">🛡️ ARMURE: <span id="armorValue">0/0</span></div>

<div class="defense-bar structure-bar" id="structureBar">
<div class="structure-fill" id="structureFill"></div>
</div>
<div style="margin-top: 2px; font-size: 11px;">⚙️ STRUCTURE: <span id="structureValue">0/0</span></div>
<div style="margin-top: 4px; font-size: 22px;">⚙️ STRUCTURE: <span id="structureValue">0/0</span></div>
</div>
</div>
<div class="hud hud-bottom-center" id="hudBottomCenter">
Expand Down
3 changes: 0 additions & 3 deletions js/core/GameState.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ class GameState {

// Pending level up boosts
this.pendingBoosts = [];

// Tactical UI state
this.tacticalUIEnabled = true;
}

setState(newState) {
Expand Down
72 changes: 0 additions & 72 deletions js/systems/RenderSystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,81 +278,9 @@ class RenderSystem {
if (health && (isBoss || enemyComp?.baseHealth > 50)) {
this.drawHealthBar(pos.x, pos.y - render.size - 10, health.current, health.max, isBoss);
}

// Draw resistance indicator if tactical UI enabled
if (!this.gameState || this.gameState.tacticalUIEnabled !== false) {
this.drawEnemyResistanceIndicator(enemy);
}
});
}

/**
* Draw enemy resistance indicator
*/
drawEnemyResistanceIndicator(enemy) {
const defense = enemy.getComponent('defense');
const pos = enemy.getComponent('position');
const render = enemy.getComponent('renderable');

if (!defense || !pos || !render) return;

// Get player's current weapon type
const players = this.world.getEntitiesByType('player');
if (players.length === 0) return;

const player = players[0];
const playerComp = player.getComponent('player');
let damageType = 'kinetic';

if (playerComp && playerComp.currentWeapon && playerComp.currentWeapon.damageType) {
damageType = playerComp.currentWeapon.damageType;
}

// Calculate average resistance across active layers
let totalResist = 0;
let layerCount = 0;

if (defense.shield.current > 0) {
totalResist += defense.shield.resistances[damageType] || 0;
layerCount++;
}
if (defense.armor.current > 0) {
totalResist += defense.armor.resistances[damageType] || 0;
layerCount++;
}
if (defense.structure.current > 0) {
totalResist += defense.structure.resistances[damageType] || 0;
layerCount++;
}

if (layerCount === 0) return;

const avgResist = totalResist / layerCount;

// Determine symbol and color
let symbol, color;
if (avgResist <= 0.15) {
symbol = '▼'; // Weak
color = '#00FF00';
} else if (avgResist <= 0.40) {
symbol = '■'; // Normal
color = '#FFFF00';
} else {
symbol = '▲'; // Resistant
color = '#FF0000';
}

// Draw above enemy
this.ctx.save();
this.ctx.font = '16px Arial';
this.ctx.fillStyle = color;
this.ctx.textAlign = 'center';
this.ctx.shadowBlur = 5;
this.ctx.shadowColor = color;
this.ctx.fillText(symbol, pos.x, pos.y - render.size - 25);
this.ctx.restore();
}

/**
* Render player ship
*/
Expand Down
Loading