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

    import { edgePositions } from "./common";

    export let pos: [number, number];

    export let color: string = "black";
    export let colorSiding: string = "red";
    export let line: [number, number];

    export let siding: number;
    export let thrown = false;

    const s = getScale();

    $: x0 = (pos[0] + edgePositions[line[0]][0]) * $s;
    $: y0 = (pos[1] + edgePositions[line[0]][1]) * $s;

    $: x1 = (pos[0] + 0.5) * $s;
    $: y1 = (pos[1] + 0.5) * $s;

    $: o = thrown ? line[1] : siding;
    $: m = thrown ? siding : line[1];

    $: x20 = (pos[0] + edgePositions[m][0]) * $s;
    $: y20 = (pos[1] + edgePositions[m][1]) * $s;

    $: x21 = (pos[0] + edgePositions[o][0]) * $s;
    $: y21 = (pos[1] + edgePositions[o][1]) * $s;
</script>

<path
    d="M{x1} {y1} L{x21} {y21}"
    fill="none"
    stroke-width={$s * 0.01}
    stroke={colorSiding}
/>
<path
    d="M{x0} {y0}L{x1} {y1} L{x20} {y20}"
    fill="none"
    stroke-width={$s * 0.05}
    stroke={color}
/>