<script>
import Child from './Child.svelte';
let size = $state(15);
let burst = $state(false);
function reset() {
size = 15;
burst = false;
}
</script>
<Child
inflate={(power) => {
size += power;
if (size > 75) burst = true;
}}
deflate={(power) => {
if (size > 0) size -= power;
}}
/>
{#if burst}
<button onclick={reset}>new balloon</button>
<span class="boom">💥</span>
{:else}
<span class="balloon" style="scale: {0.01 * size}">
🎈
</span>
{/if}
<style>
span {
position: fixed;
left: 0;
top: 0;