54 lines
1.5 KiB
Svelte
54 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { getProduction, getStorage } from "../utils";
|
|
import village from "../village";
|
|
|
|
|
|
$: capacity = getStorage($village);
|
|
$: production = getProduction($village);
|
|
</script>
|
|
|
|
<div class="resources">
|
|
<div>
|
|
<img src="/img/icons/wood.png" alt="Wood" />
|
|
{ Math.floor($village.resources.wood) } / { capacity.wood }
|
|
({ production.wood >= 0 ? '+' : '' }{ production.wood })
|
|
</div>
|
|
<div>
|
|
<img src="/img/icons/stone.png" alt="Stone" />
|
|
{ Math.floor($village.resources.stone) } / { capacity.stone }
|
|
({ production.stone >= 0 ? '+' : '' }{ production.stone })
|
|
</div>
|
|
<div>
|
|
<img src="/img/icons/iron.png" alt="Iron" />
|
|
{ Math.floor($village.resources.iron) } / { capacity.iron }
|
|
({ production.iron >= 0 ? '+' : '' }{ production.iron })
|
|
</div>
|
|
<div>
|
|
<img src="/img/icons/food.png" alt="Food" />
|
|
{ Math.floor($village.resources.food) } / { capacity.food }
|
|
({ production.food >= 0 ? '+' : '' }{ production.food })
|
|
</div>
|
|
<div>
|
|
<img src="/img/icons/culture.png" alt="Culture" />
|
|
{ Math.floor($village.resources.culture) }
|
|
({ production.culture >= 0 ? '+' : '' }{ production.culture })
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.resources {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
gap: 1em;
|
|
}
|
|
|
|
.resources div {
|
|
display: flex;
|
|
gap: 0.5em;
|
|
}
|
|
|
|
.resources img {
|
|
height: 1.5em;
|
|
}
|
|
</style>
|