aether-shards/src/ui/game-viewport.js

import { LitElement, html, css } from "lit";
import { gameStateManager } from "../core/GameStateManager.js";
import { GameLoop } from "../core/GameLoop.js";

import "./deployment-hud.js";
import "./dialogue-overlay.js";
import "./combat-hud.js";

export class GameViewport extends LitElement {
  static styles = css`
    :host {
      display: block;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    #canvas-container {
      width: 100%;
      height: 100%;
    }
  `;

  static get properties() {
    return {
      squad: { type: Array },
      deployedIds: { type: Array },
      combatState: { type: Object },
    };
  }

  constructor() {
    super();
    this.squad = [];
    this.deployedIds = [];
    this.combatState = null;
  }

  #handleUnitSelected(event) {
    const unit = event.detail.unit;
    const index = this.squad.indexOf(unit);
    gameStateManager.gameLoop.selectDeploymentUnit(index);
  }

  #handleStartBattle() {
    if (gameStateManager.gameLoop) {
      gameStateManager.gameLoop.finalizeDeployment();
    }
  }

  async firstUpdated() {
    const container = this.shadowRoot.getElementById("canvas-container");
    const loop = new GameLoop();
    loop.init(container);
    gameStateManager.setGameLoop(loop);
    this.squad = await gameStateManager.rosterLoaded;

    // Set up combat state updates
    this.#setupCombatStateUpdates();
  }

  #setupCombatStateUpdates() {
    // Listen for combat state changes
    window.addEventListener("combat-state-changed", (e) => {
      this.combatState = e.detail.combatState;
    });

    // Listen for game state changes to clear combat state when leaving combat
    window.addEventListener("gamestate-changed", () => {
      this.#updateCombatState();
    });

    // Initial update
    this.#updateCombatState();
  }

  #updateCombatState() {
    // Get combat state from GameStateManager
    this.combatState = gameStateManager.getCombatState();
  }

  render() {
    return html`<div id="canvas-container"></div>
      <deployment-hud
        .squad=${this.squad}
        .deployedIds=${this.deployedIds}
        @unit-selected=${this.#handleUnitSelected}
        @start-battle=${this.#handleStartBattle}
      ></deployment-hud>
      <combat-hud .combatState=${this.combatState}></combat-hud>
      <dialogue-overlay></dialogue-overlay>`;
  }
}

customElements.define("game-viewport", GameViewport);