48 lines
926 B
Svelte
48 lines
926 B
Svelte
|
<script lang="ts">
|
||
|
|
import { onMount } from "svelte";
|
||
|
|
|
||
|
|
import Village from "../board/Village.svelte";
|
||
|
|
import update from "../update";
|
||
|
|
import BuildingCreator from "./BuildingCreator.svelte";
|
||
|
|
import Resources from "./Resources.svelte";
|
||
|
|
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
let frame: number;
|
||
|
|
|
||
|
|
function loop(timestamp: number) {
|
||
|
|
frame = requestAnimationFrame(loop);
|
||
|
|
update(timestamp);
|
||
|
|
}
|
||
|
|
frame = requestAnimationFrame(loop);
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
cancelAnimationFrame(frame);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section class="hud">
|
||
|
|
<header>
|
||
|
|
<Resources />
|
||
|
|
</header>
|
||
|
|
<div class="buildings">
|
||
|
|
<Village />
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
<section class="overlay">
|
||
|
|
<BuildingCreator />
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.buildings {
|
||
|
|
margin-top: 2em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay {
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
</style>
|