feat: update hud

2026-06-25 12:15:20 +05:00
parent b282f1064a
commit b1c8ee08ff
5 changed files with 106 additions and 70 deletions
@@ -14,7 +14,7 @@
      <div id="ui-overlay" class="hidden">
        <span class="ui-text">SCORE: <span id="score">0</span></span>
        <span class="ui-text">WAVE: <span id="wave">1</span></span>
-        <span class="ui-text">LIVES: <span id="lives">3</span></span>
+        <span class="ui-text">LIVES: <span id="lives">♥♥♥♥♥♥♥♥♥♥</span></span>
      </div>

      <div id="input-display">
@@ -113,7 +113,7 @@ function getEnemiesPerWave() {

 function takeDamage() {
  lives--;
-  document.getElementById("lives").textContent = lives;
+  document.getElementById("lives").textContent = "♡".repeat(CONFIG.game.startLives - lives) + "♥".repeat(lives);
  triggerShake(S.shakeDamage, S.shakeDamageDuration);
  document.getElementById("game-container").classList.add("glitch");
  setTimeout(
@@ -213,7 +213,7 @@ function startGame() {

  document.getElementById("score").textContent = score;
  document.getElementById("wave").textContent = wave;
-  document.getElementById("lives").textContent = lives;
+  document.getElementById("lives").textContent = "♡".repeat(CONFIG.game.startLives - lives) + "♥".repeat(lives);
  document.getElementById("start-screen").classList.add("hidden");
  document.getElementById("gameover-screen").classList.add("hidden");
  document.getElementById("ui-overlay").classList.remove("hidden");
@@ -317,15 +317,6 @@ function draw() {
  }

  ctx.save();
-  ctx.fillStyle = CONFIG.colors.playerBase;
-  ctx.fillRect(0, H - S.inputAreaHeight, W, S.inputAreaHeight);
-  ctx.strokeStyle = CONFIG.colors.primary;
-  ctx.lineWidth = 1;
-  ctx.beginPath();
-  ctx.moveTo(0, H - S.inputAreaHeight);
-  ctx.lineTo(W, H - S.inputAreaHeight);
-  ctx.stroke();
-
  ctx.fillStyle = CONFIG.colors.primary;
  ctx.shadowColor = CONFIG.colors.primary;
  ctx.shadowBlur = S.playerGlow;
@@ -8,7 +8,7 @@
  document.querySelector("#ui-overlay .ui-text:nth-child(2)").innerHTML =
    `${CONFIG.texts.waveLabel} <span id="wave">1</span>`;
  document.querySelector("#ui-overlay .ui-text:nth-child(3)").innerHTML =
-    `${CONFIG.texts.livesLabel} <span id="lives">3</span>`;
+    `${CONFIG.texts.livesLabel} <span id="lives">${"♥".repeat(CONFIG.game.startLives)}</span>`;

  document.querySelector("#gameover-screen .screen-subtitle").innerHTML =
    `${CONFIG.texts.finalScoreLabel} <span id="final-score">0</span>`;
@@ -34,40 +34,85 @@ function recalc() {
  const R = CONFIG.visualRatio;
  const T = CONFIG.timing;

-  S.gridSize = Math.round(V.gridSize * W / 1000);
-  S.enemyPaddingX = Math.round(V.enemyPaddingX * W / 1000);
-  S.enemyAlienOffset = Math.round(V.enemyAlienOffset * W / 1000);
-  S.armorBarPad = Math.round(V.armorBarPad * W / 1000);
-  S.armorBarFont = Math.round(V.armorBarFont * W / 1000);
-  S.missTargetPadX = Math.round(V.missTargetPadX * W / 1000);
-  S.missTargetPadY = Math.round(V.missTargetPadY * H / 1000);
-  S.inputAreaHeight = Math.round(V.inputAreaHeight * H / 1000);
-  S.removeZone = Math.round(V.removeZone * H / 1000);
+  S.gridSize = Math.round((V.gridSize * W) / 1000);
+  S.enemyPaddingX = Math.round((V.enemyPaddingX * W) / 1000);
+  S.enemyAlienOffset = Math.round((V.enemyAlienOffset * W) / 1000);
+  S.armorBarPad = Math.round((V.armorBarPad * W) / 1000);
+  S.armorBarFont = Math.round((V.armorBarFont * W) / 1000);
+  S.missTargetPadX = Math.round((V.missTargetPadX * W) / 1000);
+  S.missTargetPadY = Math.round((V.missTargetPadY * H) / 1000);
+  S.inputAreaHeight = Math.round((V.inputAreaHeight * H) / 1000);
+  S.removeZone = Math.round((V.removeZone * H) / 1000);

-  for (const k of ["playerY","playerRadius","playerGlow","enemySimpleHeight","enemyHeavyHeight",
-    "enemySimpleFont","enemyHeavyFont","enemyArmorBarHeight","enemyArmorBarOffset",
-    "enemyArmorLabelOffset","enemyGlow","enemyFlashGlow","enemyLineWidth",
-    "projectileGlow","projectileHitRadius","projectileMissRadius","projectileFont",
-    "projectileCircleRadius","shakeHit","shakeMiss","shakeDamage","particleVel",
-    "particleSizeMin","particleSizeMax","particleGlow","trailSizeBase","trailSizeInc",
-    "trailGlow","shooterOffset"]) {
-    S[k] = Math.round(V[k] * H / 1000);
+  for (const k of [
+    "playerY",
+    "playerRadius",
+    "playerGlow",
+    "enemySimpleHeight",
+    "enemyHeavyHeight",
+    "enemySimpleFont",
+    "enemyHeavyFont",
+    "enemyArmorBarHeight",
+    "enemyArmorBarOffset",
+    "enemyArmorLabelOffset",
+    "enemyGlow",
+    "enemyFlashGlow",
+    "enemyLineWidth",
+    "projectileGlow",
+    "projectileHitRadius",
+    "projectileMissRadius",
+    "projectileFont",
+    "projectileCircleRadius",
+    "shakeHit",
+    "shakeMiss",
+    "shakeDamage",
+    "particleVel",
+    "particleSizeMin",
+    "particleSizeMax",
+    "particleGlow",
+    "trailSizeBase",
+    "trailSizeInc",
+    "trailGlow",
+    "shooterOffset",
+  ]) {
+    S[k] = Math.round((V[k] * H) / 1000);
  }

  S.projectileSpeed = H / (CONFIG.speed.projectileCrossTime * 60);
-  S.gridSpeed = CONFIG.speed.gridSpeed * H / 1000;
+  S.gridSpeed = (CONFIG.speed.gridSpeed * H) / 1000;

-  for (const k of ["projectileTrailLength","particleHit","particleMiss",
-    "particleDestroySimple","particleDestroyHeavy","particleArmorBreak",
-    "flashDuration","shakeHitDuration","shakeMissDuration","shakeDamageDuration",
-    "trailMaxLength","trailDecay","trailAlpha"]) {
+  for (const k of [
+    "projectileTrailLength",
+    "particleHit",
+    "particleMiss",
+    "particleDestroySimple",
+    "particleDestroyHeavy",
+    "particleArmorBreak",
+    "flashDuration",
+    "shakeHitDuration",
+    "shakeMissDuration",
+    "shakeDamageDuration",
+    "trailMaxLength",
+    "trailDecay",
+    "trailAlpha",
+  ]) {
    S[k] = C[k];
  }

-  for (const k of ["missTargetYRange","projectileTrailLength","projectileTrailDecay",
-    "projectileTrailAlpha","projectileCircleAlpha","enemyPulseRate","enemyAlphaBase",
-    "enemyAlphaRange","enemyGlowPulse","particleDecayBase","particleDecayRange",
-    "particleDamping"]) {
+  for (const k of [
+    "missTargetYRange",
+    "projectileTrailLength",
+    "projectileTrailDecay",
+    "projectileTrailAlpha",
+    "projectileCircleAlpha",
+    "enemyPulseRate",
+    "enemyAlphaBase",
+    "enemyAlphaRange",
+    "enemyGlowPulse",
+    "particleDecayBase",
+    "particleDecayRange",
+    "particleDamping",
+  ]) {
    S[k] = R[k];
  }

@@ -79,67 +124,67 @@ function recalc() {

 function applyOverlayScale(W, H) {
  const title = document.querySelector(".screen-title");
-  if (title) title.style.fontSize = Math.round(40 * H / 1000) + "px";
+  if (title) title.style.fontSize = Math.round((40 * H) / 1000) + "px";
  const subs = document.querySelectorAll(".screen-subtitle");
-  for (let el of subs) el.style.fontSize = Math.round(18 * H / 1000) + "px";
+  for (let el of subs) el.style.fontSize = Math.round((18 * H) / 1000) + "px";

  const overlay = document.getElementById("ui-overlay");
  if (overlay) {
-    overlay.style.padding = Math.round(12 * H / 1000) + "px " + Math.round(16 * W / 1000) + "px";
-    overlay.style.fontSize = Math.round(14 * H / 1000) + "px";
-  }
-  const inputDisplay = document.getElementById("input-display");
-  if (inputDisplay) {
-    inputDisplay.style.padding = Math.round(14 * H / 1000) + "px " + Math.round(16 * W / 1000) + "px";
+    overlay.style.padding = Math.round((12 * H) / 1000) + "px " + Math.round((16 * W) / 1000) + "px";
+    overlay.style.fontSize = Math.round((28 * H) / 1000) + "px";
  }
+  // const inputDisplay = document.getElementById("input-display");
+  // if (inputDisplay) {
+  //   inputDisplay.style.padding = Math.round(14 * H / 1000) + "px " + Math.round(16 * W / 1000) + "px";
+  // }
  const typed = document.getElementById("typed-text");
  if (typed) {
-    typed.style.fontSize = Math.round(20 * H / 1000) + "px";
-    typed.style.minHeight = Math.round(28 * H / 1000) + "px";
+    typed.style.fontSize = Math.round((20 * H) / 1000) + "px";
+    typed.style.minHeight = Math.round((28 * H) / 1000) + "px";
  }
  const chatText = document.getElementById("chat-text");
  if (chatText) {
-    chatText.style.fontSize = Math.round(16 * H / 1000) + "px";
-    chatText.style.minHeight = Math.round(28 * H / 1000) + "px";
+    chatText.style.fontSize = Math.round((16 * H) / 1000) + "px";
+    chatText.style.minHeight = Math.round((28 * H) / 1000) + "px";
  }
  const chForm = document.getElementById("channel-form");
  if (chForm) {
-    chForm.querySelector(".screen-title").style.fontSize = Math.round(80 * H / 1000) + "px";
+    chForm.querySelector(".screen-title").style.fontSize = Math.round((80 * H) / 1000) + "px";
    const inp = chForm.querySelector("input");
    if (inp) {
-      inp.style.fontSize = Math.round(22 * H / 1000) + "px";
-      inp.style.padding = Math.round(12 * H / 1000) + "px " + Math.round(20 * W / 1000) + "px";
-      inp.style.width = Math.round(300 * W / 1000) + "px";
+      inp.style.fontSize = Math.round((22 * H) / 1000) + "px";
+      inp.style.padding = Math.round((12 * H) / 1000) + "px " + Math.round((20 * W) / 1000) + "px";
+      inp.style.width = Math.round((300 * W) / 1000) + "px";
    }
    const btn = chForm.querySelector("button");
    if (btn) {
-      btn.style.fontSize = Math.round(18 * H / 1000) + "px";
-      btn.style.padding = Math.round(10 * H / 1000) + "px " + Math.round(40 * W / 1000) + "px";
-      btn.style.minWidth = Math.round(260 * W / 1000) + "px";
+      btn.style.fontSize = Math.round((18 * H) / 1000) + "px";
+      btn.style.padding = Math.round((10 * H) / 1000) + "px " + Math.round((40 * W) / 1000) + "px";
+      btn.style.minWidth = Math.round((260 * W) / 1000) + "px";
    }
    const link = document.getElementById("game-link");
-    if (link) link.style.fontSize = Math.round(16 * H / 1000) + "px";
+    if (link) link.style.fontSize = Math.round((16 * H) / 1000) + "px";
    const note = chForm.querySelector(".obs-note");
-    if (note) note.style.fontSize = Math.round(16 * H / 1000) + "px";
+    if (note) note.style.fontSize = Math.round((16 * H) / 1000) + "px";
  }
  const goTitle = document.getElementById("gameover-title");
-  if (goTitle) goTitle.style.fontSize = Math.round(64 * H / 1000) + "px";
+  if (goTitle) goTitle.style.fontSize = Math.round((64 * H) / 1000) + "px";
  const goSubs = document.querySelectorAll("#gameover-screen .screen-subtitle");
-  for (let el of goSubs) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  for (let el of goSubs) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
  const statsTitle = document.querySelectorAll(".stats-section-title");
-  for (let el of statsTitle) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  for (let el of statsTitle) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
  const statsTop1 = document.querySelectorAll(".stats-top1");
-  for (let el of statsTop1) el.style.fontSize = Math.round(48 * H / 1000) + "px";
+  for (let el of statsTop1) el.style.fontSize = Math.round((48 * H) / 1000) + "px";
  const statsTop2 = document.querySelectorAll(".stats-top2");
-  for (let el of statsTop2) el.style.fontSize = Math.round(36 * H / 1000) + "px";
+  for (let el of statsTop2) el.style.fontSize = Math.round((36 * H) / 1000) + "px";
  const statsTop3 = document.querySelectorAll(".stats-top3");
-  for (let el of statsTop3) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  for (let el of statsTop3) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
  const statsRow = document.querySelectorAll(".stats-row:not(.stats-top1):not(.stats-top2):not(.stats-top3)");
-  for (let el of statsRow) el.style.fontSize = Math.round(24 * H / 1000) + "px";
+  for (let el of statsRow) el.style.fontSize = Math.round((24 * H) / 1000) + "px";
  const mazila = document.querySelectorAll(".stats-mazila");
-  for (let el of mazila) el.style.fontSize = Math.round(28 * H / 1000) + "px";
+  for (let el of mazila) el.style.fontSize = Math.round((28 * H) / 1000) + "px";
  const crown = document.querySelectorAll(".stats-crown");
-  for (let el of crown) el.style.fontSize = Math.round(56 * H / 1000) + "px";
+  for (let el of crown) el.style.fontSize = Math.round((56 * H) / 1000) + "px";
 }

 function drawGrid() {
@@ -61,7 +61,7 @@ body {
 }
 .ui-text {
  color: #00ff41;
-  font-size: 14px;
+  font-size: 28px;
  text-shadow: 0 0 8px #00ff41;
  letter-spacing: 1px;
 }