<script>
import { Fence } from 'smoo';
import Pokemon from './Pokemon.svelte';
let visible = {
Squirtle: false,
Bulbasaur: false,
Charmander: false,
};
</script>
<Pokemon size=120 />
<fieldset>
<legend>
Pokémon picker:
</legend>
{#each Object.keys(visible) as name}
<button on:click={() => visible[name] = true}>{name}</button>
<Fence modal bind:visible={visible[name]} on:cancel={() => visible[name] = false}>
<details>
<summary>Click to open</summary>
<Pokemon {name} />
</details>
</Fence>
{/each}
</fieldset>