src/lib/components/game/GameCanvas.svelte

<script lang="ts">
  import { onMount, onDestroy } from 'svelte';
  import { uiStore } from '../../stores/ui';
  import { gameStore } from '../../stores/game';
  import { editorStore } from '../../stores/editor';
  import { gameEngine } from '../../services/game-engine';
  import { HTMLParser } from '../../services/html-parser';
  import GameError from './GameError.svelte';
  
  let reloadTimer: any;
  let previousContent = '';
  let isInitialized = false;
  
  $: if ($editorStore.content !== previousContent && $gameStore.isAutoRunning && isInitialized) {
    previousContent = $editorStore.content;
    clearTimeout(reloadTimer);
    reloadTimer = setTimeout(async () => {
      if (!$gameStore.isStarting) {
        const worldContent = HTMLParser.extractGameContent($editorStore.content);
        await gameEngine.start(worldContent);
      }
    }, 800);
  }
  
  onMount(async () => {
    previousContent = $editorStore.content;
    setTimeout(async () => {
      if (!$gameStore.instance && $gameStore.isAutoRunning) {
        const worldContent = HTMLParser.extractGameContent($editorStore.content);
        await gameEngine.start(worldContent);
      }
      isInitialized = true;
    }, 400);
  });
  
  onDestroy(() => {
    clearTimeout(reloadTimer);
    gameEngine.stop();
  });
</script>

<div class="game-section">
  {#if $uiStore.error}
    <GameError error={$uiStore.error} />
  {/if}
  
  <div id="world-container" style="display: none;"></div>
  
  <div class="canvas-container">
    <canvas id="game-canvas"></canvas>
  </div>
</div>

<style>
  .game-section {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .canvas-container {
    flex: 1;
    position: relative;
    background: radial-gradient(ellipse at center, rgba(124, 152, 133, 0.02) 0%, transparent 70%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #game-canvas {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: auto;
    user-select: none;
  }
</style>