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";

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

  constructor() {
    super();
  }

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

  render() {
    return html`<div id="canvas-container"></div>`;
  }
}

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