slop game oder so

app/static/js/scenes/HudScene.js

@@ -0,0 +1,292 @@
+/**
+ * HUD über der Spielszene: Leben, Munition, Welle, Punkte, Serie, Rolle,
+ * Orbital-Befehle mit Abklingzeiten, Einblendungen und Fadenkreuz.
+ *
+ * Läuft als eigene Szene, damit das HUD nicht mit der Kamera mitscrollt und nicht
+ * vom Bildschirmwackeln betroffen ist. Texte werden nur bei Änderungen neu gesetzt
+ * (setText rendert intern eine Textur neu und ist vergleichsweise teuer).
+ * @module scenes/HudScene
+ */
+
+import { COLORS, DIRECTION_SYMBOLS, FX, ORBITAL, PLAYER, WEAPONS } from '../config.js';
+import { ORBITAL_TEXT, PRESIDENT, WAVE } from '../content/texts.js';
+import { formatCooldown, formatMultiplier, formatScore } from '../logic/format.js';
+import { TEXTURE_KEYS } from '../systems/Placeholders.js';
+import { textStyle, UI, uiStyle } from '../ui/theme.js';
+
+const MARGIN = 24;
+const HP_BAR = Object.freeze({ width: 280, height: 18 });
+const DODGE_BAR = Object.freeze({ width: 120, height: 6 });
+const RELOAD_BAR = Object.freeze({ width: 220, height: 6 });
+const STREAK_BAR = Object.freeze({ width: 140, height: 5 });
+const ORBITAL_PANEL = Object.freeze({ width: 350, rowHeight: 34, arrowsX: 150 });
+const SLOT_GAP = 22;
+/** Ab diesem Anteil Leben wird der Balken rot und der Bildschirmrand pulsiert. */
+const LOW_HP_RATIO = 0.3;
+const LOW_HP_BORDER = 16;
+const LOW_HP_PULSE_MS = 140;
+/** Randpfeile für Gegner außerhalb des Bildes. */
+const INDICATOR = Object.freeze({ edge: 22, size: 9, eliteSize: 14, max: 30 });
+const FEEDBACK_MS = 2200;
+
+export class HudScene extends Phaser.Scene {
+  constructor() {
+    super('Hud');
+  }
+
+  create() {
+    this.gameScene = this.scene.get('Game');
+    const { width, height } = this.scale;
+    /** Letzter gesetzter Text je Textobjekt (nicht `this.cache` – das ist Phasers Cache). */
+    this.textCache = new Map();
+    this.colorCache = new Map();
+    this.g = this.add.graphics();
+
+    // Oben links: Leben und Rolle
+    this.add.text(MARGIN, 14, PRESIDENT.toUpperCase(), uiStyle({ fontSize: '15px', color: UI.colors.gold }));
+    this.hpText = this.add.text(MARGIN + HP_BAR.width + 12, 34, '', uiStyle({ fontSize: '17px' }));
+    this.add.text(MARGIN, 64, 'ROLLE', uiStyle({ fontSize: '13px', color: UI.colors.muted }));
+
+    // Oben Mitte: Welle
+    this.waveTitle = this.add.text(width / 2, 12, '', textStyle({ fontSize: '28px', color: UI.colors.gold })).setOrigin(0.5, 0);
+    this.waveInfo = this.add.text(width / 2, 48, '', uiStyle({ fontSize: '18px' })).setOrigin(0.5, 0);
+
+    // Oben rechts: Punkte und Multiplikator
+    this.scoreText = this.add.text(width - MARGIN, 10, '', textStyle({ fontSize: '32px' })).setOrigin(1, 0);
+    this.multText = this.add.text(width - MARGIN, 50, '', uiStyle({ fontSize: '20px', color: UI.colors.gold })).setOrigin(1, 0);
+
+    // Unten links: Waffe
+    // Waffennamen stehen fest – einmal setzen und nach tatsächlicher Breite anordnen.
+    let slotX = MARGIN;
+    this.slotTexts = PLAYER.weaponSlots.map((id, i) => {
+      const slot = this.add.text(slotX, height - 132, `${i + 1} ${WEAPONS[id].shortName}`, uiStyle({ fontSize: '15px' }));
+      slotX += slot.width + SLOT_GAP;
+      return slot;
+    });
+    this.weaponName = this.add.text(MARGIN, height - 106, '', uiStyle({ fontSize: '18px', color: UI.colors.gold }));
+    this.ammoText = this.add.text(MARGIN, height - 80, '', uiStyle({ fontSize: '34px' }));
+
+    // Unten rechts: Orbital-Befehle
+    const panelX = width - MARGIN - ORBITAL_PANEL.width;
+    const panelTop = height - MARGIN - ORBITAL.commands.length * ORBITAL_PANEL.rowHeight - 34;
+    this.orbitalPanel = { x: panelX, y: panelTop };
+    this.orbitalTitle = this.add.text(panelX + 10, panelTop + 7, ORBITAL_TEXT.panelTitle, uiStyle({ fontSize: '15px', color: UI.colors.gold }));
+    this.orbitalRows = ORBITAL.commands.map((command, i) => {
+      const y = panelTop + 34 + i * ORBITAL_PANEL.rowHeight;
+      return {
+        name: this.add.text(panelX + 10, y + 1, command.shortName, uiStyle({ fontSize: '15px' })),
+        arrows: command.sequence.map((dir, j) =>
+          // Pfeile aus einer Symbolschrift, damit sie überall gleich breit und gut erkennbar sind.
+          this.add.text(panelX + ORBITAL_PANEL.arrowsX + j * 24, y - 3, DIRECTION_SYMBOLS[dir], textStyle({ fontSize: '19px', fontFamily: UI.symbolFont })),
+        ),
+        cooldown: this.add.text(panelX + ORBITAL_PANEL.width - 10, y, '', uiStyle({ fontSize: '16px', color: UI.colors.muted })).setOrigin(1, 0),
+        y,
+      };
+    });
+
+    // Einblendungen
+    this.bannerTitle = this.add.text(width / 2, 150, '', textStyle({ fontSize: '46px', color: UI.colors.gold, strokeThickness: 8 })).setOrigin(0.5).setAlpha(0);
+    this.bannerSubtitle = this.add
+      .text(width / 2, 186, '', { ...uiStyle({ fontSize: '22px', align: 'center' }), wordWrap: { width: 900 } })
+      .setOrigin(0.5, 0)
+      .setAlpha(0);
+    this.feedbackText = this.add.text(width / 2, height - 170, '', uiStyle({ fontSize: '20px' })).setOrigin(0.5).setAlpha(0);
+
+    this.vignette = this.add.rectangle(0, 0, width, height, COLORS.crimson, 0).setOrigin(0);
+    this.crosshair = this.add.image(0, 0, TEXTURE_KEYS.crosshair);
+
+    const events = this.gameScene.events;
+    events.on('announce', this.showBanner, this);
+    events.on('feedback', this.showFeedback, this);
+    events.on('player-damaged', this.flashDamage, this);
+    this.events.once('shutdown', () => {
+      events.off('announce', this.showBanner, this);
+      events.off('feedback', this.showFeedback, this);
+      events.off('player-damaged', this.flashDamage, this);
+    });
+  }
+
+  /**
+   * Setzt Text nur, wenn er sich geändert hat.
+   * @param {Phaser.GameObjects.Text} target
+   * @param {string} value
+   */
+  setText(target, value) {
+    if (this.textCache.get(target) !== value) {
+      this.textCache.set(target, value);
+      target.setText(value);
+    }
+  }
+
+  /**
+   * Setzt die Textfarbe nur bei Änderung (setColor rendert den Text sonst neu).
+   * @param {Phaser.GameObjects.Text} target
+   * @param {string} color
+   */
+  setColor(target, color) {
+    if (this.colorCache.get(target) !== color) {
+      this.colorCache.set(target, color);
+      target.setColor(color);
+    }
+  }
+
+  update() {
+    const gameScene = this.gameScene;
+    if (!gameScene?.player || !(gameScene.sys.isActive() || gameScene.sys.isPaused())) return;
+    const s = gameScene.hudState();
+    const paused = gameScene.sys.isPaused();
+    const g = this.g;
+    g.clear();
+
+    // Leben
+    const hpRatio = s.hp / s.maxHp;
+    this.bar(g, MARGIN, 36, HP_BAR.width, HP_BAR.height, hpRatio, hpRatio <= LOW_HP_RATIO ? COLORS.hpBarLow : COLORS.hpBar);
+    this.setText(this.hpText, `${Math.ceil(s.hp)} / ${s.maxHp}`);
+    this.bar(g, MARGIN + 56, 70, DODGE_BAR.width, DODGE_BAR.height, s.dodge, s.dodge >= 1 ? COLORS.gold : COLORS.muted);
+
+    // Welle
+    this.setText(this.waveTitle, s.wave.number > 0 ? WAVE.incoming(s.wave.number) : WAVE.preparing);
+    const info = s.wave.state === 'intermission' ? WAVE.nextIn(Math.ceil(s.wave.nextInMs / 1000)) : WAVE.remaining(s.wave.enemies);
+    this.setText(this.waveInfo, info);
+
+    // Punkte
+    this.setText(this.scoreText, formatScore(s.score.score));
+    let streakLabel = '';
+    if (s.score.multiplier > 1) streakLabel = `${formatMultiplier(s.score.multiplier)} · Serie ${s.score.streak}`;
+    else if (s.score.streak >= 2) streakLabel = `Serie ${s.score.streak}`;
+    this.setText(this.multText, streakLabel);
+    if (s.score.streakTimeLeft > 0) {
+      this.bar(g, this.scale.width - MARGIN - STREAK_BAR.width, 80, STREAK_BAR.width, STREAK_BAR.height, s.score.streakTimeLeft, COLORS.gold);
+    }
+
+    // Waffe
+    s.weapons.forEach((weapon, i) => {
+      const active = i === s.weaponIndex;
+      this.setColor(this.slotTexts[i], active ? UI.colors.gold : weapon.empty ? UI.colors.danger : UI.colors.muted);
+    });
+    this.setText(this.weaponName, s.weaponName);
+    const reserve = Number.isFinite(s.reserve) ? String(s.reserve) : '∞';
+    this.setText(this.ammoText, s.reloading ? `NACHLADEN · ${reserve}` : `${s.magazine} / ${s.magazineSize}  ·  ${reserve}`);
+    this.setColor(this.ammoText, s.magazine === 0 && !s.reloading ? UI.colors.danger : UI.colors.cream);
+    if (s.reloading) this.bar(g, MARGIN, this.scale.height - 36, RELOAD_BAR.width, RELOAD_BAR.height, s.reloadProgress, COLORS.gold);
+
+    this.drawOrbitalPanel(g, s.orbital);
+    this.drawOffscreenIndicators(g, gameScene);
+    if (hpRatio <= LOW_HP_RATIO && !s.over) {
+      // Pulsierender Rand statt Dauerrot: auffällig, verdeckt aber nichts.
+      const pulse = 0.35 + 0.35 * Math.sin(this.time.now / LOW_HP_PULSE_MS);
+      g.lineStyle(LOW_HP_BORDER, COLORS.crimson, pulse);
+      g.strokeRect(LOW_HP_BORDER / 2, LOW_HP_BORDER / 2, this.scale.width - LOW_HP_BORDER, this.scale.height - LOW_HP_BORDER);
+    }
+
+    // Fadenkreuz folgt der Maus; in der Pause und nach dem Tod ausgeblendet.
+    const pointer = this.input.activePointer;
+    this.crosshair.setPosition(pointer.x, pointer.y);
+    this.crosshair.setVisible(!paused && !s.over);
+  }
+
+  drawOrbitalPanel(g, orbital) {
+    const { x, y } = this.orbitalPanel;
+    const height = 34 + orbital.commands.length * ORBITAL_PANEL.rowHeight;
+    g.fillStyle(COLORS.navy, 0.72);
+    g.fillRect(x, y, ORBITAL_PANEL.width, height);
+    g.lineStyle(2, orbital.active ? COLORS.gold : COLORS.muted, orbital.active ? 1 : 0.5);
+    g.strokeRect(x, y, ORBITAL_PANEL.width, height);
+
+    orbital.commands.forEach((command, i) => {
+      const row = this.orbitalRows[i];
+      // Dünner Ladebalken unter der Zeile
+      if (!command.ready) {
+        g.fillStyle(COLORS.muted, 0.35);
+        g.fillRect(x + 10, row.y + 22, ORBITAL_PANEL.width - 20, 3);
+        g.fillStyle(COLORS.gold, 0.9);
+        g.fillRect(x + 10, row.y + 22, (ORBITAL_PANEL.width - 20) * command.cooldownProgress, 3);
+      }
+      this.setColor(row.name, command.ready ? UI.colors.cream : UI.colors.muted);
+      row.arrows.forEach((arrow, j) => {
+        const done = orbital.active && j < command.progress;
+        this.setColor(arrow, done ? UI.colors.gold : command.ready ? UI.colors.cream : UI.colors.muted);
+        arrow.setScale(done ? 1.2 : 1);
+      });
+      this.setText(row.cooldown, command.ready ? 'bereit' : `${formatCooldown(command.remainingMs)} s`);
+      this.setColor(row.cooldown, command.ready ? UI.colors.ok : UI.colors.muted);
+    });
+  }
+
+  /**
+   * Pfeile am Bildschirmrand für Gegner außerhalb des sichtbaren Bereichs. Die Arena ist
+   * größer als der Bildschirm – ohne Hinweis kämen Angriffe scheinbar aus dem Nichts.
+   * @param {Phaser.GameObjects.Graphics} g
+   * @param {Phaser.Scene & {enemies: Phaser.Physics.Arcade.Group}} gameScene
+   */
+  drawOffscreenIndicators(g, gameScene) {
+    const view = gameScene.cameras.main.worldView;
+    const cx = this.scale.width / 2;
+    const cy = this.scale.height / 2;
+    let shown = 0;
+    for (const enemy of gameScene.enemies.getChildren()) {
+      if (!enemy.alive || view.contains(enemy.x, enemy.y)) continue;
+      const dx = enemy.x - view.x - cx;
+      const dy = enemy.y - view.y - cy;
+      // Schnittpunkt der Linie Bildmitte→Gegner mit dem (eingerückten) Bildschirmrand.
+      const reach = Math.min((cx - INDICATOR.edge) / Math.abs(dx || 1e-6), (cy - INDICATOR.edge) / Math.abs(dy || 1e-6));
+      const x = cx + dx * reach;
+      const y = cy + dy * reach;
+      const angle = Math.atan2(dy, dx);
+      const size = enemy.isElite ? INDICATOR.eliteSize : INDICATOR.size;
+      const color = enemy.isElite ? COLORS.gold : enemy.type.faction === 'swarm' ? COLORS.swarm : COLORS.legion;
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      g.fillStyle(color, enemy.isElite ? 1 : 0.8);
+      g.fillTriangle(
+        x + cos * size,
+        y + sin * size,
+        x - cos * size * 0.6 - sin * size * 0.7,
+        y - sin * size * 0.6 + cos * size * 0.7,
+        x - cos * size * 0.6 + sin * size * 0.7,
+        y - sin * size * 0.6 - cos * size * 0.7,
+      );
+      shown += 1;
+      if (shown >= INDICATOR.max) break;
+    }
+  }
+
+  /** Einfacher Balken mit dunklem Hintergrund. */
+  bar(g, x, y, width, height, ratio, color) {
+    g.fillStyle(0x000000, 0.55);
+    g.fillRect(x - 2, y - 2, width + 4, height + 4);
+    g.fillStyle(color, 1);
+    g.fillRect(x, y, width * Math.max(0, Math.min(1, ratio)), height);
+  }
+
+  /** @param {{title: string, subtitle: string, kind: string}} message */
+  showBanner(message) {
+    this.tweens.killTweensOf([this.bannerTitle, this.bannerSubtitle]);
+    this.bannerTitle.setText(message.title).setColor(message.kind === 'elite' ? UI.colors.danger : UI.colors.gold);
+    this.bannerSubtitle.setText(message.subtitle);
+    this.bannerTitle.setAlpha(0).setScale(1.3);
+    this.bannerSubtitle.setAlpha(0);
+    this.tweens.add({ targets: this.bannerTitle, alpha: 1, scale: 1, duration: 220, ease: 'Back.easeOut' });
+    this.tweens.add({ targets: this.bannerSubtitle, alpha: 1, duration: 300 });
+    this.tweens.add({
+      targets: [this.bannerTitle, this.bannerSubtitle],
+      alpha: 0,
+      delay: FX.announcementMs,
+      duration: 500,
+    });
+  }
+
+  /** @param {{text: string, tone: 'ok'|'warn'}} message */
+  showFeedback(message) {
+    this.tweens.killTweensOf(this.feedbackText);
+    this.feedbackText.setText(message.text).setColor(message.tone === 'warn' ? UI.colors.danger : UI.colors.cyan);
+    this.feedbackText.setAlpha(1);
+    this.tweens.add({ targets: this.feedbackText, alpha: 0, delay: FEEDBACK_MS, duration: 400 });
+  }
+
+  flashDamage() {
+    this.tweens.killTweensOf(this.vignette);
+    this.vignette.setFillStyle(COLORS.crimson, 0.28);
+    this.tweens.add({ targets: this.vignette, fillAlpha: 0, duration: 320 });
+  }
+}