Vague 1
diff --git a/js/systems/UISystem.js b/js/systems/UISystem.js
index cd878be..b84b4ac 100644
--- a/js/systems/UISystem.js
+++ b/js/systems/UISystem.js
@@ -44,192 +44,6 @@ class UISystem {
// Track missing stats warnings to avoid spam
this.missingStatsWarned = new Set();
-
- // Tactical UI state
- this.tacticalUI = {
- enabled: true,
- container: null,
- defenseUI: null,
- heatUI: null,
- weaponTypeUI: null,
- floatingTexts: []
- };
-
- // Initialize tactical UI
- this.initTacticalUI();
- }
-
- /**
- * Initialize tactical UI components
- */
- initTacticalUI() {
- if (!window.EnhancedUIComponents) {
- console.warn('[UI] EnhancedUIComponents not found, skipping tactical UI');
- return;
- }
-
- try {
- // Create container
- const container = document.createElement('div');
- container.id = 'tactical-ui-container';
- container.style.cssText = 'position:absolute;top:10px;left:10px;z-index:100;pointer-events:none;';
- document.body.appendChild(container);
- this.tacticalUI.container = container;
-
- // Defense UI container
- const defenseContainer = document.createElement('div');
- defenseContainer.id = 'defense-ui';
- container.appendChild(defenseContainer);
-
- // Heat UI container
- const heatContainer = document.createElement('div');
- heatContainer.id = 'heat-ui';
- heatContainer.style.marginTop = '10px';
- container.appendChild(heatContainer);
-
- // Weapon type UI container
- const weaponContainer = document.createElement('div');
- weaponContainer.id = 'weapon-type-ui';
- weaponContainer.style.marginTop = '10px';
- container.appendChild(weaponContainer);
-
- // Instantiate components
- const Components = window.EnhancedUIComponents;
- this.tacticalUI.defenseUI = new Components.ThreeLayerDefenseUI(defenseContainer);
- this.tacticalUI.heatUI = new Components.HeatGaugeUI(heatContainer);
- this.tacticalUI.weaponTypeUI = new Components.WeaponDamageTypeDisplay(weaponContainer);
-
- // Subscribe to damage events
- if (this.world.events) {
- this.world.events.on('damageApplied', (data) => this.onDamageApplied(data));
- }
-
- console.log('[UI] Tactical UI components initialized');
- } catch (err) {
- console.error('[UI] Error initializing tactical UI:', err);
- }
- }
-
- /**
- * Toggle tactical UI visibility
- */
- toggleTacticalUI() {
- this.tacticalUI.enabled = !this.tacticalUI.enabled;
- if (this.tacticalUI.container) {
- this.tacticalUI.container.style.display = this.tacticalUI.enabled ? 'block' : 'none';
- }
- // Store state for RenderSystem to check
- if (this.world && this.world.gameState) {
- this.world.gameState.tacticalUIEnabled = this.tacticalUI.enabled;
- }
- console.log(`[UI] tactical HUD ${this.tacticalUI.enabled ? 'enabled' : 'disabled'}`);
- }
-
- /**
- * Update tactical UI components
- */
- updateTacticalUI() {
- if (!this.tacticalUI.enabled || !this.tacticalUI.defenseUI) return;
-
- const player = this.world.getEntitiesByType('player')[0];
- if (!player) return;
-
- try {
- // Update defense bars
- const defense = player.getComponent('defense');
- if (defense && this.tacticalUI.defenseUI) {
- this.tacticalUI.defenseUI.update(defense);
- }
-
- // Update heat gauge
- const heat = player.getComponent('heat');
- if (heat && this.tacticalUI.heatUI) {
- this.tacticalUI.heatUI.update(heat);
- }
-
- // Update weapon type display
- const playerComp = player.getComponent('player');
- if (playerComp && playerComp.currentWeapon && this.tacticalUI.weaponTypeUI) {
- const damageType = playerComp.currentWeapon.damageType || 'kinetic';
- this.tacticalUI.weaponTypeUI.update(damageType);
- }
- } catch (err) {
- console.error('[UI] Error updating tactical UI:', err);
- }
- }
-
- /**
- * Handle damage applied event
- */
- onDamageApplied(data) {
- this.createFloatingDamage(data);
-
- const layerEmojis = {
- shield: '🟦 BOUCLIER',
- armor: '🟫 ARMURE',
- structure: '🔧 STRUCTURE'
- };
- const layerName = layerEmojis[data.layerHit] || data.layerHit;
- console.log(`[Combat] ${layerName} -${Math.round(data.finalDamage)}`);
- }
-
- /**
- * Create floating damage text
- */
- createFloatingDamage(data) {
- // Limit active floating texts
- if (this.tacticalUI.floatingTexts.length >= 10) {
- const oldest = this.tacticalUI.floatingTexts.shift();
- if (oldest && oldest.parentNode) {
- oldest.parentNode.removeChild(oldest);
- }
- }
-
- const text = document.createElement('div');
- text.className = 'floating-damage';
- text.textContent = `-${Math.round(data.finalDamage)}`;
-
- const typeColors = {
- em: '#00FFFF',
- thermal: '#FF8C00',
- kinetic: '#FFFFFF',
- explosive: '#FF0000'
- };
-
- const canvas = this.gameCanvas;
- let left = data.x || 0;
- let top = data.y || 0;
-
- if (canvas) {
- const rect = canvas.getBoundingClientRect();
- left = rect.left + left;
- top = rect.top + top;
- }
-
- text.style.cssText = `
- position: fixed;
- left: ${left}px;
- top: ${top}px;
- color: ${typeColors[data.damageType] || '#FFF'};
- font-size: 20px;
- font-weight: bold;
- pointer-events: none;
- animation: floatUp 1s ease-out forwards;
- z-index: 1000;
- `;
-
- document.body.appendChild(text);
- this.tacticalUI.floatingTexts.push(text);
-
- setTimeout(() => {
- if (text.parentNode) {
- text.parentNode.removeChild(text);
- }
- const index = this.tacticalUI.floatingTexts.indexOf(text);
- if (index > -1) {
- this.tacticalUI.floatingTexts.splice(index, 1);
- }
- }, 1000);
}
/**
@@ -310,23 +124,8 @@ class UISystem {
this.structureFill = document.getElementById('structureFill');
this.structureValue = document.getElementById('structureValue');
- // Heat/Overheat elements
- this.heatBar = document.getElementById('heatBar');
- this.heatFill = document.getElementById('heatFill');
- this.heatDisplay = document.getElementById('heatDisplay');
- this.heatValue = document.getElementById('heatValue');
-
- // Stats display elements
- this.statDamage = document.getElementById('statDamage');
- this.statFireRate = document.getElementById('statFireRate');
- this.statSpeed = document.getElementById('statSpeed');
- this.statArmor = document.getElementById('statArmor');
- this.statLifesteal = document.getElementById('statLifesteal');
- this.statRegen = document.getElementById('statRegen');
-
// Game canvas (for coordinate conversion)
this.gameCanvas = document.getElementById('gameCanvas') || document.querySelector('canvas');
- this.statCrit = document.getElementById('statCrit');
// Weapon and passive status elements
this.weaponList = document.getElementById('weaponList');
@@ -511,26 +310,6 @@ class UISystem {
console.log("[XP DEBUG]", playerComp.xp, playerComp.xpRequired);
const xpPercent = (playerComp.xp / playerComp.xpRequired) * 100;
this.xpFill.style.width = `${Math.min(100, xpPercent)}%`;
-
- // Update real-time stats display with safe access (nullish coalescing)
- if (playerComp.stats) {
- const stats = playerComp.stats;
- const damageMultiplier = stats.damageMultiplier ?? 1;
- const fireRateMultiplier = stats.fireRateMultiplier ?? 1;
- const speed = stats.speed ?? 1;
- const armor = stats.armor ?? 0;
- const lifesteal = stats.lifesteal ?? 0;
- const shieldRegen = stats.shieldRegen ?? 0;
- const critChance = stats.critChance ?? 0;
-
- this.statDamage.textContent = `${Math.round(damageMultiplier * 100)}%`;
- this.statFireRate.textContent = `${Math.round(fireRateMultiplier * 100)}%`;
- this.statSpeed.textContent = `${Math.round(speed)}`;
- this.statArmor.textContent = `${Math.round(armor)}`;
- this.statLifesteal.textContent = `${Math.round(lifesteal * 100)}%`;
- this.statRegen.textContent = `${shieldRegen.toFixed(1)}/s`;
- this.statCrit.textContent = `${Math.round(critChance * 100)}%`;
- }
}
// Update defense layers (player uses 3-layer defense system)
@@ -574,36 +353,6 @@ class UISystem {
// No defense component - hide defense UI
if (this.defenseLayers) this.defenseLayers.style.display = 'none';
}
-
- // === HEAT SYSTEM ===
- // Heat bar displays current heat from HeatSystem component
- // Connected to actual heat.current value from entity's heat component
- if (this.heatBar && this.heatFill && this.heatDisplay) {
- if (heat && heat.max > 0) {
- this.heatBar.style.display = 'block';
- this.heatDisplay.style.display = 'block';
- this.heatValue.textContent = `${Math.ceil(heat.current)}/${heat.max}`;
- const heatPercent = (heat.current / heat.max) * 100;
- this.heatFill.style.width = `${Math.max(0, Math.min(100, heatPercent))}%`;
-
- // Change color based on heat level and overheat status
- if (heat.overheated) {
- this.heatFill.style.background = 'linear-gradient(to right, #ff0000, #cc0000)';
- if (this.heatValue) {
- this.heatValue.textContent = `⚠️ OVERHEATED`;
- }
- } else if (heatPercent >= 80) {
- this.heatFill.style.background = 'linear-gradient(to right, #ff4444, #ff0000)';
- } else if (heatPercent >= 50) {
- this.heatFill.style.background = 'linear-gradient(to right, #ffaa00, #ff6600)';
- } else {
- this.heatFill.style.background = 'linear-gradient(to right, #ffcc00, #ff9900)';
- }
- } else {
- this.heatBar.style.display = 'none';
- this.heatDisplay.style.display = 'none';
- }
- }
// Update weapon display
this.updateWeaponDisplay(playerComp);
From 35221099b1d12354e0dd3416163b9265ad1c2505 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 14 Feb 2026 05:46:35 +0000
Subject: [PATCH 3/6] Remove enemy resistance indicators from RenderSystem
Co-authored-by: Linkatplug <36280686+Linkatplug@users.noreply.github.com>
---
js/core/GameState.js | 3 --
js/systems/RenderSystem.js | 72 --------------------------------------
2 files changed, 75 deletions(-)
diff --git a/js/core/GameState.js b/js/core/GameState.js
index 16ac27a..d17feda 100644
--- a/js/core/GameState.js
+++ b/js/core/GameState.js
@@ -34,9 +34,6 @@ class GameState {
// Pending level up boosts
this.pendingBoosts = [];
-
- // Tactical UI state
- this.tacticalUIEnabled = true;
}
setState(newState) {
diff --git a/js/systems/RenderSystem.js b/js/systems/RenderSystem.js
index 3e3f88d..48c01a2 100644
--- a/js/systems/RenderSystem.js
+++ b/js/systems/RenderSystem.js
@@ -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
*/
From ff17dbfef2391731f08bb37592ce9c64c35b069e Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 14 Feb 2026 06:00:02 +0000
Subject: [PATCH 4/6] Fix defense bars visual update - add width: 0 to CSS
Co-authored-by: Linkatplug <36280686+Linkatplug@users.noreply.github.com>
---
index.html | 3 +++
1 file changed, 3 insertions(+)
diff --git a/index.html b/index.html
index 1ccc510..b1b366d 100644
--- a/index.html
+++ b/index.html
@@ -256,6 +256,7 @@
}
.shield-fill {
+ width: 0;
height: 100%;
background: linear-gradient(90deg, #00ddff, #00ffff);
transition: width 0.3s;
@@ -267,6 +268,7 @@
}
.armor-fill {
+ width: 0;
height: 100%;
background: linear-gradient(90deg, #8B4513, #CD853F);
transition: width 0.3s;
@@ -278,6 +280,7 @@
}
.structure-fill {
+ width: 0;
height: 100%;
background: linear-gradient(90deg, #ff0000, #ff6600);
transition: width 0.3s;
From 67dd66364d2884b1027551e15098909d9fa95542 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 14 Feb 2026 06:08:13 +0000
Subject: [PATCH 5/6] Double GUI size - increase all HUD elements for better
visibility
Co-authored-by: Linkatplug <36280686+Linkatplug@users.noreply.github.com>
---
index.html | 52 ++++++++++++++++++++++++++--------------------------
1 file changed, 26 insertions(+), 26 deletions(-)
diff --git a/index.html b/index.html
index b1b366d..7f6626c 100644
--- a/index.html
+++ b/index.html
@@ -163,7 +163,7 @@
position: absolute;
color: #00ffff;
text-shadow: 0 0 5px #000;
- font-size: 16px;
+ font-size: 32px;
pointer-events: none;
display: none;
}
@@ -199,42 +199,42 @@
.weapon-status {
background: rgba(10, 10, 26, 0.8);
- border: 1px solid #00ffff;
- padding: 8px;
- margin-bottom: 8px;
- border-radius: 3px;
- font-size: 13px;
+ border: 2px solid #00ffff;
+ padding: 16px;
+ margin-bottom: 16px;
+ border-radius: 6px;
+ font-size: 26px;
}
.weapon-status-title {
color: #ffaa00;
font-weight: bold;
- margin-bottom: 4px;
+ margin-bottom: 8px;
}
.weapon-item {
- margin: 2px 0;
+ margin: 4px 0;
color: #00ffff;
}
.passive-status {
background: rgba(10, 10, 26, 0.8);
- border: 1px solid #aa44ff;
- padding: 8px;
- border-radius: 3px;
- font-size: 12px;
- max-height: 200px;
+ border: 2px solid #aa44ff;
+ padding: 16px;
+ border-radius: 6px;
+ font-size: 24px;
+ max-height: 400px;
overflow-y: auto;
}
.passive-status-title {
color: #aa44ff;
font-weight: bold;
- margin-bottom: 4px;
+ margin-bottom: 8px;
}
.passive-item {
- margin: 2px 0;
+ margin: 4px 0;
color: #ccccff;
}
@@ -244,15 +244,15 @@
/* 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 {
@@ -264,7 +264,7 @@
.armor-bar {
background: rgba(139, 69, 19, 0.3);
- border: 2px solid #8B4513;
+ border: 4px solid #8B4513;
}
.armor-fill {
@@ -276,7 +276,7 @@
.structure-bar {
background: rgba(255, 0, 0, 0.3);
- border: 2px solid #ff0000;
+ border: 4px solid #ff0000;
}
.structure-fill {
@@ -287,8 +287,8 @@
}
.xp-bar {
- width: 300px;
- height: 15px;
+ width: 600px;
+ height: 30px;
background: rgba(0, 255, 0, 0.3);
border: 2px solid #00ff00;
position: relative;
@@ -1369,17 +1369,17 @@
AMÉLIORATIONS
-
🛡️ BOUCLIER: 0/0
+
🛡️ BOUCLIER: 0/0
-
🛡️ ARMURE: 0/0
+
🛡️ ARMURE: 0/0
-
⚙️ STRUCTURE: 0/0
+
⚙️ STRUCTURE: 0/0