Spaces:
Running
Running
File size: 2,108 Bytes
794cf6c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<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> |