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

    export let pos: [number, number];

    export let text: string;
    const s = getScale();

    const h = 0.33;
    const w = 0.9;
</script>

<rect
    x={(pos[0] + (1 - w) / 2) * $s}
    y={(pos[1] + (1 - h) / 2) * $s}
    width={$s * w}
    height={$s * h}
    stroke="black"
    fill="white"
    stroke-width={$s * 0.025}
/>
<text
    x={(pos[0] + 0.5) * $s}
    y={(pos[1] + 0.5) * $s}
    text-anchor="middle"
    dominant-baseline="middle"
    font-family="monospace"
    font-size="{$s * h * 0.8}px">{text}</text
>