53 lines
1.3 KiB
Svelte
53 lines
1.3 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { Hex } from "../hexgrid";
|
||
|
|
import moves from "../moves";
|
||
|
|
import showBuildingCreator from "../stores/showBuildingCreator";
|
||
|
|
import { getKeysAsNumbers } from "../utils";
|
||
|
|
import village from "../village";
|
||
|
|
import Tile from "./Tile.svelte";
|
||
|
|
|
||
|
|
|
||
|
|
function upgradeBuilding(id: number) {
|
||
|
|
moves.upgradeBuilding(id);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function openBuildingCreator(tile: Hex) {
|
||
|
|
showBuildingCreator.set(tile);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section class="village-map">
|
||
|
|
<div>
|
||
|
|
{ #each getKeysAsNumbers($village.villageTiles) as y }
|
||
|
|
<div>
|
||
|
|
{ #each getKeysAsNumbers($village.villageTiles[y]) as x }
|
||
|
|
{ #if $village.villageTiles[y][x] >= 0 }
|
||
|
|
<Tile
|
||
|
|
onTileClick={ () => {} }
|
||
|
|
>
|
||
|
|
<p>{ $village.buildings.find(b => b.id === $village.villageTiles[y][x])?.name }</p>
|
||
|
|
</Tile>
|
||
|
|
{ :else }
|
||
|
|
<Tile
|
||
|
|
onTileClick={ () => openBuildingCreator(new Hex(x, y)) }
|
||
|
|
/>
|
||
|
|
{ /if }
|
||
|
|
{ /each }
|
||
|
|
</div>
|
||
|
|
{ /each }
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.village-map {
|
||
|
|
display: grid;
|
||
|
|
height: 100%;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.village-map > div {
|
||
|
|
margin: auto;
|
||
|
|
}
|
||
|
|
</style>
|