<script lang="ts">
    import Display from "./Display.svelte";
    import { writable } from "svelte/store";
    import World from "./World.svelte";

    type coords = [number, number];

    const t = writable<coords>([0, 0]);

    const controls: { [k: string]: (c: coords) => coords } = {
        ArrowUp: (v: coords) => {
            v[1]--;
            return v;
        },
        ArrowDown: (v: coords) => {
            v[1]++;
            return v;
        },
        ArrowLeft: (v: coords) => {
            v[0]--;
            return v;
        },
        ArrowRight: (v: coords) => {
            v[0]++;
            return v;
        },
    };
    function key(e: KeyboardEvent) {
        const tt = controls[e.code];
        if (tt) {
            e.preventDefault();
            t.update(tt);
            return;
        }
    }

    let scale = 50;
</script>

<svelte:window on:keydown={key} />
<div>
    {$t}
    <input type="number" bind:value={scale} />
</div>
<div>
    <Display {scale} width={20} height={20} x={$t[0]} y={$t[1]}>
        <World />
    </Display>
</div>