<script lang="ts">
    export let game_width = 4;
    export let game_height = 4;
</script>

<main class="grid-container">
    {#each Array(game_width) as _x}
        {#each Array(game_height) as _y}
            <div class="grid-cell"></div>
        {/each}
    {/each}
</main>

<style lang="scss">
    .grid-container {
        position: absolute;
        z-index: 1;
        overflow: hidden;
        display: grid;
        grid-template-rows: repeat(var(--grid-size-max), var(--tile-size));
        grid-template-columns: repeat(var(--grid-size-max), var(--tile-size));
        gap: var(--grid-gap);
        height: calc(100% - calc(var(--grid-gap) * 2));
        width: calc(100% - calc(var(--grid-gap) * 2));
        transition: all 0.25s;
    }
    .grid-cell {
        width: var(--tile-size);
        height: var(--tile-size);
        margin-right: var(--grid-gap);
        transition: all .25s;

        border-radius: var(--tile-border-radius);

        background: var(--cell-color);

        &:last-child {
            margin-right: 0;
        }
    }
</style>