<script lang="ts">
    import Grid from "$lib/Grid.svelte";
    let unique = {};
    function restart() {
        unique = {}; // every {} is unique, {} === {} evaluates to false
    }
    let w: number = 9;
    let h: number = 9;
    let size = 1;
    let delay = 0.0;
    let showWhileGenerating = true;
    $: size = 4.0/((w+h)/2.0);
</script>

<main>
    <h1>Collapse</h1>
    <p>Made by <a href="https://eliaseskelinen.fi">Elias Eskelinen</a> with svelte & typescript.</p>

    {#key unique}
        <Grid w={w} h={h} s={size} delay={delay} showWhileGenerating={showWhileGenerating} />
    {/key}
    <button on:click={restart}>Reset Grid</button>
    <br />
    Wdith: <input type="number" bind:value={w} /><br />
    Height: <input type="number" bind:value={h} /><br />

    Solve delay: {delay}ms <input type="range" min=0 max=100 bind:value={delay} /><br />
    Show data while generating: <input type="checkbox" bind:checked={showWhileGenerating} /><br />
    (disabling may help with larger dimensions)
</main>

<style>
    main {
        text-align: center;
    }
    button {
        margin-top: 1em;
        font-size: 1em;
    }
    p, input {
        margin-top: 1em;
    }
</style>