wizwar6e/packages/web/src/FirewallEdge.svelte

<script lang="ts">
  // A standing WALL OF FIRE: board furniture, not a flourish — it burns for
  // as long as the spell holds, so the animation is pure CSS on a handful
  // of shapes (no turbulence filters; those are budgeted for one-shot fx).
  import { holdToPeek } from "./peek";
  let { x, y, kind, onpeek }: {
    x: number; y: number; kind: "V" | "H";
    /** Press-and-hold (touch has no hover): report what this fire is. */
    onpeek?: (tip: string) => void;
  } = $props();
  const TIP = "a wall of fire — passing through burns for 4";
  const { press, release } = holdToPeek(() => onpeek?.(TIP));
  const uid = $props.id();
  const CELL = 48;
  const WALL = 7;
  const cx = $derived(kind === "V" ? (x + 1) * CELL : x * CELL + CELL / 2);
  const cy = $derived(kind === "V" ? y * CELL + CELL / 2 : (y + 1) * CELL);
  // Tongues sit along the edge's axis; every flame rises screen-up.
  const TONGUES = [
    { t: -0.38, h: 11, d: 0.0 },
    { t: -0.19, h: 15, d: 0.45 },
    { t: 0.0, h: 18, d: 0.15 },
    { t: 0.21, h: 13, d: 0.6 },
    { t: 0.4, h: 16, d: 0.3 },
  ];
  const EMBERS = [
    { t: -0.28, d: 0.0 },
    { t: 0.08, d: 0.9 },
    { t: 0.33, d: 1.7 },
  ];
  const px = (t: number) => (kind === "V" ? 0 : t * CELL);
  const py = (t: number) => (kind === "V" ? t * CELL : 0);
</script>

<g transform={`translate(${cx} ${cy})`} class="fw">
  <title>{TIP}</title>
  <defs>
    <linearGradient id={`fw-bar-${uid}`} x1="0" y1="1" x2="0" y2="0">
      <stop offset="0" stop-color="#7c1a14" />
      <stop offset="0.5" stop-color="#ef3b08" />
      <stop offset="1" stop-color="#ffad22" />
    </linearGradient>
    <linearGradient id={`fw-tongue-${uid}`} x1="0" y1="1" x2="0" y2="0">
      <stop offset="0" stop-color="#ef3b08" />
      <stop offset="0.55" stop-color="#ff9d16" />
      <stop offset="1" stop-color="#fff09a" />
    </linearGradient>
  </defs>
  <!-- the burning bar itself, seated on the wall line -->
  {#if kind === "V"}
    <rect x={-WALL / 2} y={-CELL / 2 - 2} width={WALL} height={CELL + 4} rx="3"
      fill={`url(#fw-bar-${uid})`} class="fw-bar"
      role="img" onpointerdown={press} onpointerup={release} onpointerleave={release} />
  {:else}
    <rect x={-CELL / 2 - 2} y={-WALL / 2} width={CELL + 4} height={WALL} rx="3"
      fill={`url(#fw-bar-${uid})`} class="fw-bar"
      role="img" onpointerdown={press} onpointerup={release} onpointerleave={release} />
  {/if}
  <!-- tongues of flame, each licking on its own beat -->
  {#each TONGUES as f (f.t)}
    <path
      d={`M ${px(f.t) - 3.4} ${py(f.t) + 1}
          C ${px(f.t) - 3.6} ${py(f.t) - f.h * 0.45}, ${px(f.t) - 1.4} ${py(f.t) - f.h * 0.7}, ${px(f.t)} ${py(f.t) - f.h}
          C ${px(f.t) + 1.4} ${py(f.t) - f.h * 0.7}, ${px(f.t) + 3.6} ${py(f.t) - f.h * 0.45}, ${px(f.t) + 3.4} ${py(f.t) + 1} Z`}
      fill={`url(#fw-tongue-${uid})`}
      class="fw-tongue"
      style={`transform-origin: ${px(f.t)}px ${py(f.t) + 1}px; animation-delay: ${f.d}s`}
    />
  {/each}
  <!-- embers drifting off the top -->
  {#each EMBERS as em (em.t)}
    <circle cx={px(em.t)} cy={py(em.t) - 6} r="1.4" class="fw-ember"
      style={`animation-delay: ${em.d}s`} />
  {/each}
</g>

<style>
  .fw-tongue, .fw-ember { pointer-events: none; }
  .fw-bar {
    stroke: #7c1a14;
    stroke-width: 1;
    filter: drop-shadow(0 0 3px rgba(255, 140, 30, 0.7));
    animation: fw-glow 1.3s ease-in-out infinite alternate;
  }
  .fw-tongue {
    animation: fw-lick 0.9s ease-in-out infinite alternate;
  }
  .fw-ember {
    fill: #ffd166;
    opacity: 0;
    animation: fw-rise 2.6s ease-out infinite;
  }
  @keyframes fw-glow {
    from { filter: drop-shadow(0 0 2px rgba(255, 120, 20, 0.5)); }
    to { filter: drop-shadow(0 0 6px rgba(255, 150, 40, 0.95)); }
  }
  @keyframes fw-lick {
    from { transform: scale(0.95, 0.72); opacity: 0.82; }
    to { transform: scale(1.04, 1.12); opacity: 1; }
  }
  @keyframes fw-rise {
    0% { opacity: 0; transform: translateY(0); }
    15% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(-16px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .fw-bar, .fw-tongue, .fw-ember { animation: none; }
    .fw-ember { opacity: 0.6; }
  }
</style>