70 lines
1.5 KiB
Svelte
70 lines
1.5 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import buildings from "../buildings";
|
||
|
|
import moves from "../moves";
|
||
|
|
|
||
|
|
export let close: () => void;
|
||
|
|
|
||
|
|
|
||
|
|
function build(type: string) {
|
||
|
|
if (moves.createBuilding(type)) {
|
||
|
|
close();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<div class="building-creator">
|
||
|
|
<header>
|
||
|
|
<h1>Build</h1>
|
||
|
|
<span class="close">
|
||
|
|
<button on:click={ close }>X</button>
|
||
|
|
</span>
|
||
|
|
</header>
|
||
|
|
<div class="buildings">
|
||
|
|
{ #each Object.entries(buildings) as [type, building] }
|
||
|
|
<div>
|
||
|
|
<p>{ building.name }</p>
|
||
|
|
<button on:click={ () => build(type) }>Build</button>
|
||
|
|
</div>
|
||
|
|
{ /each }
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
section {
|
||
|
|
background-color: hsl(0, 0%, 10%, 0.8);
|
||
|
|
display: grid;
|
||
|
|
place-items: center;
|
||
|
|
height: 100vh;
|
||
|
|
left: 0;
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
width: 100vw;
|
||
|
|
}
|
||
|
|
|
||
|
|
.building-creator {
|
||
|
|
background-color: hsl(0, 0%, 20%);
|
||
|
|
border: 0.2em solid grey;
|
||
|
|
border-radius: .4em;
|
||
|
|
width: 80%;
|
||
|
|
height: 60%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.building-creator header {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.building-creator header .close {
|
||
|
|
position: absolute;
|
||
|
|
right: 1em;
|
||
|
|
top: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.building-creator .buildings {
|
||
|
|
display: grid;
|
||
|
|
gap: 1em;
|
||
|
|
grid-template-columns: repeat(4, 1fr);
|
||
|
|
}
|
||
|
|
</style>
|