<script lang="ts">
  // An UNTESTED illusion wall: the wall renders solid underneath (it is a
  // wall to you until your eyes rule) — this is the tell-tale shimmer laid
  // over it, and the tap target that offers the belief test.
  let { x, y, kind, onclick }: {
    x: number; y: number; kind: "V" | "H";
    onclick?: () => void;
  } = $props();
  const CELL = 48;
  const x1 = $derived(kind === "V" ? (x + 1) * CELL : x * CELL + 2);
  const y1 = $derived(kind === "V" ? y * CELL + 2 : (y + 1) * CELL);
  const x2 = $derived(kind === "V" ? (x + 1) * CELL : (x + 1) * CELL - 2);
  const y2 = $derived(kind === "V" ? (y + 1) * CELL - 2 : (y + 1) * CELL);
</script>

<line {x1} {y1} {x2} {y2} class="illusion-shimmer" />
{#if onclick}
  <line {x1} {y1} {x2} {y2} class="illusion-hit"
    role="button" tabindex="-1" aria-label="a shimmering wall — test your eyes"
    onclick={(ev) => { ev.stopPropagation(); onclick?.(); }}
    onkeydown={() => {}}><title>this wall shimmers oddly — tap to test your eyes</title></line>
{/if}

<style>
  .illusion-shimmer {
    stroke: #cfc3f0;
    stroke-width: 3;
    stroke-dasharray: 4 5;
    stroke-linecap: round;
    pointer-events: none;
    animation: shimmer-drift 1.4s linear infinite;
  }
  .illusion-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
  @keyframes shimmer-drift {
    0% { stroke-dashoffset: 0; opacity: 0.9; }
    50% { opacity: 0.4; }
    100% { stroke-dashoffset: -18; opacity: 0.9; }
  }
  @media (prefers-reduced-motion: reduce) {
    .illusion-shimmer { animation: none; opacity: 0.7; }
  }
</style>
