02Foil Texture Procedurally Drawn With a Different Pattern Each Time

<main class="stage">
<div class="scv is-demo" id="scv">
  <div class="scv__card">
    <p class="scv__label">Scratch card</p>
    <div class="scv__zone" id="zone">
      <div class="scv__prize">
        <p class="scv__prizeTitle">Gift coupon</p>
        <p class="scv__prizeSub">Every new card has a different foil pattern</p>
      </div>
      <canvas class="scv__foil" id="foil" width="280" height="150" aria-hidden="true"></canvas>
    </div>
    <div class="scv__btnRow">
      <button type="button" class="scv__reveal" id="revealBtn">Reveal instantly</button>
      <button type="button" class="scv__redo" id="redoBtn">Make a new card</button>
    </div>
    <p class="scv__live" id="live" aria-live="polite"></p>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 스크래치 카드 02 — buildNoiseFoil(seed) 가 2D 값 노이즈(valueNoise2D)로 은박 표면을 계산해
// 그린다. 아이들 상태에서는 sheen 하이라이트가 오가고, 긁기 시작하면 이후로는 다시 칠하지
// 않고 destination-out 구멍만 쌓인다 — 그래서 새 카드를 만들 때만 seed 를 바꿔 다시 계산한다.

@include stage($stage-yellow);

.scv { display: flex; justify-content: center; width: 100%; }
.scv__card {
  width: min(100%, 300px); background: $subject-blue-deep; color: $subject-cream;
  border-radius: $r-card; box-shadow: $shadow-raised; padding: $sp-4;
}
.scv__label { margin: 0 0 $sp-2; font-weight: 800; font-size: 12px; letter-spacing: .04em; }
.scv__zone {
  position: relative; border-radius: $r-control; overflow: hidden;
  aspect-ratio: 280 / 150; background: $stage-paper;
}
.scv__prize {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: $sp-1; text-align: center; padding: $sp-2; z-index: 0;
}
.scv__prizeTitle { margin: 0; font-weight: 800; font-size: clamp(17px, 5.6vw, 22px); color: $subject-blue-deep; }
.scv__prizeSub { margin: 0; font-weight: 700; font-size: 11px; color: rgba(23, 20, 26, .68); }
.scv__foil { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; z-index: 1; }
.scv.is-open .scv__foil { visibility: hidden; }
.scv__btnRow { display: flex; gap: $sp-2; margin-top: $sp-2; }
.scv__reveal, .scv__redo {
  flex: 0 0 auto; border: 0; cursor: pointer; border-radius: $r-pill;
  font-family: inherit; font-weight: 800; font-size: 10.5px; padding: $sp-1 $sp-3; line-height: 1.3;
}
.scv__reveal { background: $subject-cream; color: $subject-blue-deep; }
.scv__redo { background: rgba(255, 255, 255, .18); color: $subject-cream; }
.scv__reveal:focus-visible, .scv__redo:focus-visible { outline: 3px solid $stage-paper; outline-offset: 2px; }
.scv__live { margin: $sp-1 0 0; min-height: 1em; font-weight: 700; font-size: 10px; color: $subject-cream; }

@media (max-width: 340px) {
  .scv__card { padding: $sp-3; }
  .scv__btnRow { flex-wrap: wrap; }
}

@media (max-height: 220px) {
  .stage { padding: $sp-2; }
  .scv__card { padding: $sp-2 $sp-3; }
  .scv__label { margin: 0 0 $sp-1; }
  .scv__zone { aspect-ratio: 280 / 88; }
  .scv__reveal { margin-top: $sp-1; }
  .scv__live { margin-top: $sp-1; min-height: .9em; }
}


@media (prefers-reduced-motion: reduce) {
  .scv { cursor: default; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffd23f;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.scv {
  display: flex;
  justify-content: center;
  width: 100%;
}

.scv__card {
  width: min(100%, 300px);
  background: #0a4fe8;
  color: #fff7e6;
  border-radius: 16px;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  padding: 16px;
}

.scv__label {
  margin: 0 0 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.scv__zone {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 280/150;
  background: #ffffff;
}

.scv__prize {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 8px;
  z-index: 0;
}

.scv__prizeTitle {
  margin: 0;
  font-weight: 800;
  font-size: clamp(17px, 5.6vw, 22px);
  color: #0a4fe8;
}

.scv__prizeSub {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  color: rgba(23, 20, 26, 0.68);
}

.scv__foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  z-index: 1;
}

.scv.is-open .scv__foil {
  visibility: hidden;
}

.scv__btnRow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.scv__reveal, .scv__redo {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 10.5px;
  padding: 4px 12px;
  line-height: 1.3;
}

.scv__reveal {
  background: #fff7e6;
  color: #0a4fe8;
}

.scv__redo {
  background: rgba(255, 255, 255, 0.18);
  color: #fff7e6;
}

.scv__reveal:focus-visible, .scv__redo:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.scv__live {
  margin: 4px 0 0;
  min-height: 1em;
  font-weight: 700;
  font-size: 10px;
  color: #fff7e6;
}

@media (max-width: 340px) {
  .scv__card {
    padding: 12px;
  }
  .scv__btnRow {
    flex-wrap: wrap;
  }
}
@media (max-height: 220px) {
  .stage {
    padding: 8px;
  }
  .scv__card {
    padding: 8px 12px;
  }
  .scv__label {
    margin: 0 0 4px;
  }
  .scv__zone {
    aspect-ratio: 280/88;
  }
  .scv__reveal {
    margin-top: 4px;
  }
  .scv__live {
    margin-top: 4px;
    min-height: 0.9em;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scv {
    cursor: default;
  }
}

(function () {
  // 기법: 2D 값 노이즈 함수(valueNoise2D)로 은박 표면의 밝기를 픽셀마다 계산해 금속 질감을
  // 만든다. buildNoiseFoil(seed) 는 seed 하나로 결정된 무늬 하나를 만들고, "Make a new card" 는
  // seed 를 바꿔 다른 무늬를 다시 계산한다 — 이미지 파일이 아니라 그때그때 계산으로 그린다.
  var root = document.getElementById('scv');
  var zone = document.getElementById('zone');
  var foil = document.getElementById('foil');
  var ctx = foil.getContext('2d');
  var revealBtn = document.getElementById('revealBtn');
  var redoBtn = document.getElementById('redoBtn');
  var live = document.getElementById('live');

  var FOIL_NOISE_DIM = 22;
  var SCRATCH_BRUSH_R = 15;
  var FW = foil.width, FH = foil.height;

  function seedRand(seed) {
    var s = seed >>> 0;
    return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
  }
  function smoothstep(t) { return t * t * (3 - 2 * t); }

  function buildNoiseTable(seed) {
    var rand = seedRand(seed);
    var table = new Float32Array(FOIL_NOISE_DIM * FOIL_NOISE_DIM);
    for (var i = 0; i < table.length; i += 1) table[i] = rand();
    return table;
  }
  function noiseAt(table, xi, yi) {
    var wx = ((xi % FOIL_NOISE_DIM) + FOIL_NOISE_DIM) % FOIL_NOISE_DIM;
    var wy = ((yi % FOIL_NOISE_DIM) + FOIL_NOISE_DIM) % FOIL_NOISE_DIM;
    return table[wy * FOIL_NOISE_DIM + wx];
  }
  function valueNoise2D(table, x, y) {
    var x0 = Math.floor(x), y0 = Math.floor(y);
    var tx = smoothstep(x - x0), ty = smoothstep(y - y0);
    var v00 = noiseAt(table, x0, y0), v10 = noiseAt(table, x0 + 1, y0);
    var v01 = noiseAt(table, x0, y0 + 1), v11 = noiseAt(table, x0 + 1, y0 + 1);
    var a = v00 + (v10 - v00) * tx, b = v01 + (v11 - v01) * tx;
    return a + (b - a) * ty;
  }

  function buildNoiseFoil(seed) {
    var table = buildNoiseTable(seed);
    var crackRand = seedRand(seed + 1);
    var img = ctx.createImageData(FW, FH);
    var d = img.data;
    var scaleX = FOIL_NOISE_DIM / FW, scaleY = FOIL_NOISE_DIM / FH;
    for (var y = 0; y < FH; y += 1) {
      for (var x = 0; x < FW; x += 1) {
        var n = valueNoise2D(table, x * scaleX * 2.4, y * scaleY * 2.4);
        var lightness = 176 + n * 62;
        var idx = (y * FW + x) * 4;
        d[idx] = lightness * 0.98;
        d[idx + 1] = lightness;
        d[idx + 2] = lightness * 1.03;
        d[idx + 3] = 255;
      }
    }
    ctx.putImageData(img, 0, 0);
    ctx.strokeStyle = 'rgba(23,20,26,.14)';
    ctx.lineWidth = 1;
    for (var i = 0; i < 16; i += 1) {
      var sx = crackRand() * FW, sy = crackRand() * FH;
      ctx.beginPath();
      ctx.moveTo(sx, sy);
      ctx.lineTo(sx + (crackRand() * 26 - 13), sy + (crackRand() * 10 - 5));
      ctx.stroke();
    }
    return img;
  }

  var seed = 424021;
  var baseCache = null, baseSeed = null;
  function getBase() {
    if (baseSeed !== seed) { baseCache = buildNoiseFoil(seed); baseSeed = seed; }
    return baseCache;
  }

  function renderIdle(sheenT) {
    ctx.putImageData(getBase(), 0, 0);
    ctx.save();
    ctx.globalCompositeOperation = 'lighter';
    var sheenX = FW * sheenT;
    var g = ctx.createLinearGradient(sheenX - 34, 0, sheenX + 34, FH);
    g.addColorStop(0, 'rgba(255,255,255,0)');
    g.addColorStop(.5, 'rgba(255,255,255,.55)');
    g.addColorStop(1, 'rgba(255,255,255,0)');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, FW, FH);
    ctx.restore();
  }

  function scratchAt(x, y) {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.beginPath();
    ctx.arc(x, y, SCRATCH_BRUSH_R, 0, Math.PI * 2);
    ctx.fill();
  }

  var opened = false, scratchStarted = false;

  function openCard() {
    if (opened) return;
    opened = true;
    scratchStarted = true;
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillRect(0, 0, FW, FH);
    root.classList.add('is-open');
    live.textContent = 'The gift coupon is revealed';
  }

  function newCard() {
    seed += 1;
    opened = false;
    scratchStarted = false;
    root.classList.remove('is-open');
    renderIdle(0);
    live.textContent = 'A new foil pattern has been computed';
  }

  function pos(e) {
    var r = foil.getBoundingClientRect();
    return { x: (e.clientX - r.left) * (FW / r.width), y: (e.clientY - r.top) * (FH / r.height) };
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var dragging = false;

  zone.addEventListener('pointerdown', function (e) {
    if (opened) return;
    root.classList.remove('is-demo');
    scratchStarted = true;
    dragging = true;
    var p = pos(e);
    scratchAt(p.x, p.y);
    if (foil.setPointerCapture) foil.setPointerCapture(e.pointerId);
  });
  zone.addEventListener('pointermove', function (e) {
    if (!dragging || opened) return;
    var p = pos(e);
    scratchAt(p.x, p.y);
  });
  window.addEventListener('pointerup', function () { dragging = false; });

  revealBtn.addEventListener('click', function () { root.classList.remove('is-demo'); openCard(); });
  redoBtn.addEventListener('click', function () { root.classList.remove('is-demo'); newCard(); });

  // 격자 미리보기 — 반짝임(is idle) 뒤 긁기 스케줄 실행 후 새 무늬로 넘어가는 순환
  var demoRand = seedRand(424022);
  var demoPath = [];
  (function buildDemoPath() {
    for (var i = 0; i < 18; i += 1) {
      demoPath.push({
        t: 1400 + i * 90,
        x: (FW * 0.15) + (i % 6) * (FW * 0.15) + (demoRand() - .5) * 8,
        y: (FH * 0.28) + Math.floor(i / 6) * (FH * 0.24) + (demoRand() - .5) * 8
      });
    }
  })();
  var DEMO_LOOP_MS = 4400;
  var demoStep = 0;

  function runDemo(tMod) {
    if (tMod < 1400) {
      renderIdle((Math.sin(tMod * 0.0028) + 1) / 2);
      return;
    }
    if (!scratchStarted) scratchStarted = true;
    while (demoStep < demoPath.length && demoPath[demoStep].t <= tMod) {
      var p = demoPath[demoStep];
      scratchAt(p.x, p.y);
      demoStep += 1;
    }
  }
  function resetDemo() {
    seed += 1;
    opened = false;
    scratchStarted = false;
    root.classList.remove('is-open');
    demoStep = 0;
  }

  if (reduce) root.classList.remove('is-demo');
  var elapsed = 0;
  var lastTs = null;
  function tick(ts) {
    if (lastTs === null) lastTs = ts;
    var dt = Math.min(ts - lastTs, 48);
    lastTs = ts;
    if (!reduce && root.classList.contains('is-demo')) {
      elapsed += dt;
      var tMod = elapsed % DEMO_LOOP_MS;
      if (tMod < dt) resetDemo();
      runDemo(tMod);
    }
    requestAnimationFrame(tick);
  }
  renderIdle(0);
  requestAnimationFrame(tick);
})();

import { useEffect, useRef } from "react";
import styles from "./ScratchCardRevealFoilNoiseTexture.module.scss";

export default function ScratchCardRevealFoilNoiseTexture() {
  const rootRef = useRef<HTMLDivElement>(null);
  const zoneRef = useRef<HTMLDivElement>(null);
  const foilRef = useRef<HTMLCanvasElement>(null);
  const revealBtnRef = useRef<HTMLButtonElement>(null);
  const redoBtnRef = useRef<HTMLButtonElement>(null);
  const liveRef = useRef<HTMLParagraphElement>(null);

  useEffect(() => {
    const root = rootRef.current;
    const zone = zoneRef.current;
    const foil = foilRef.current;
    const revealBtn = revealBtnRef.current;
    const redoBtn = redoBtnRef.current;
    const live = liveRef.current;
    if (!root || !zone || !foil || !revealBtn || !redoBtn || !live) return;
    const ctx = foil.getContext("2d");
    if (!ctx) return;

    const FOIL_NOISE_DIM = 22;
    const SCRATCH_BRUSH_R = 15;
    const FW = foil.width, FH = foil.height;

    function seedRand(seed: number) {
      let s = seed >>> 0;
      return function () { s = (s * 1664525 + 1013904223) >>> 0; return s / 4294967296; };
    }
    function smoothstep(t: number) { return t * t * (3 - 2 * t); }

    function buildNoiseTable(seed: number) {
      const rand = seedRand(seed);
      const table = new Float32Array(FOIL_NOISE_DIM * FOIL_NOISE_DIM);
      for (let i = 0; i < table.length; i += 1) table[i] = rand();
      return table;
    }
    function noiseAt(table: Float32Array, xi: number, yi: number) {
      const wx = ((xi % FOIL_NOISE_DIM) + FOIL_NOISE_DIM) % FOIL_NOISE_DIM;
      const wy = ((yi % FOIL_NOISE_DIM) + FOIL_NOISE_DIM) % FOIL_NOISE_DIM;
      return table[wy * FOIL_NOISE_DIM + wx];
    }
    function valueNoise2D(table: Float32Array, x: number, y: number) {
      const x0 = Math.floor(x), y0 = Math.floor(y);
      const tx = smoothstep(x - x0), ty = smoothstep(y - y0);
      const v00 = noiseAt(table, x0, y0), v10 = noiseAt(table, x0 + 1, y0);
      const v01 = noiseAt(table, x0, y0 + 1), v11 = noiseAt(table, x0 + 1, y0 + 1);
      const a = v00 + (v10 - v00) * tx, b = v01 + (v11 - v01) * tx;
      return a + (b - a) * ty;
    }

    function buildNoiseFoil(seed: number) {
      const table = buildNoiseTable(seed);
      const crackRand = seedRand(seed + 1);
      const img = ctx!.createImageData(FW, FH);
      const d = img.data;
      const scaleX = FOIL_NOISE_DIM / FW, scaleY = FOIL_NOISE_DIM / FH;
      for (let y = 0; y < FH; y += 1) {
        for (let x = 0; x < FW; x += 1) {
          const n = valueNoise2D(table, x * scaleX * 2.4, y * scaleY * 2.4);
          const lightness = 176 + n * 62;
          const idx = (y * FW + x) * 4;
          d[idx] = lightness * 0.98;
          d[idx + 1] = lightness;
          d[idx + 2] = lightness * 1.03;
          d[idx + 3] = 255;
        }
      }
      ctx!.putImageData(img, 0, 0);
      ctx!.strokeStyle = "rgba(23,20,26,.14)";
      ctx!.lineWidth = 1;
      for (let i = 0; i < 16; i += 1) {
        const sx = crackRand() * FW, sy = crackRand() * FH;
        ctx!.beginPath();
        ctx!.moveTo(sx, sy);
        ctx!.lineTo(sx + (crackRand() * 26 - 13), sy + (crackRand() * 10 - 5));
        ctx!.stroke();
      }
      return img;
    }

    let seed = 424021;
    let baseCache: ImageData | null = null, baseSeed: number | null = null;
    function getBase() {
      if (baseSeed !== seed) { baseCache = buildNoiseFoil(seed); baseSeed = seed; }
      return baseCache!;
    }

    function renderIdle(sheenT: number) {
      ctx!.putImageData(getBase(), 0, 0);
      ctx!.save();
      ctx!.globalCompositeOperation = "lighter";
      const sheenX = FW * sheenT;
      const g = ctx!.createLinearGradient(sheenX - 34, 0, sheenX + 34, FH);
      g.addColorStop(0, "rgba(255,255,255,0)");
      g.addColorStop(.5, "rgba(255,255,255,.55)");
      g.addColorStop(1, "rgba(255,255,255,0)");
      ctx!.fillStyle = g;
      ctx!.fillRect(0, 0, FW, FH);
      ctx!.restore();
    }

    function scratchAt(x: number, y: number) {
      ctx!.globalCompositeOperation = "destination-out";
      ctx!.beginPath();
      ctx!.arc(x, y, SCRATCH_BRUSH_R, 0, Math.PI * 2);
      ctx!.fill();
    }

    let opened = false, scratchStarted = false;

    function openCard() {
      if (opened) return;
      opened = true;
      scratchStarted = true;
      ctx!.globalCompositeOperation = "destination-out";
      ctx!.fillRect(0, 0, FW, FH);
      root!.classList.add("is-open");
      live!.textContent = "선물 쿠폰이 열렸어요";
    }

    function newCard() {
      seed += 1;
      opened = false;
      scratchStarted = false;
      root!.classList.remove("is-open");
      renderIdle(0);
      live!.textContent = "새 은박 무늬를 계산했어요";
    }

    function pos(e: PointerEvent) {
      const r = foil!.getBoundingClientRect();
      return { x: (e.clientX - r.left) * (FW / r.width), y: (e.clientY - r.top) * (FH / r.height) };
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let dragging = false;

    function onDown(e: PointerEvent) {
      if (opened) return;
      root!.classList.remove("is-demo");
      scratchStarted = true;
      dragging = true;
      const p = pos(e);
      scratchAt(p.x, p.y);
      foil!.setPointerCapture?.(e.pointerId);
    }
    function onMove(e: PointerEvent) {
      if (!dragging || opened) return;
      const p = pos(e);
      scratchAt(p.x, p.y);
    }
    function onUp() { dragging = false; }
    zone.addEventListener("pointerdown", onDown);
    zone.addEventListener("pointermove", onMove);
    window.addEventListener("pointerup", onUp);

    function onReveal() { root!.classList.remove("is-demo"); openCard(); }
    function onRedo() { root!.classList.remove("is-demo"); newCard(); }
    revealBtn.addEventListener("click", onReveal);
    redoBtn.addEventListener("click", onRedo);

    const demoRand = seedRand(424022);
    type DemoPt = { t: number; x: number; y: number };
    const demoPath: DemoPt[] = [];
    for (let i = 0; i < 18; i += 1) {
      demoPath.push({
        t: 1400 + i * 90,
        x: (FW * 0.15) + (i % 6) * (FW * 0.15) + (demoRand() - .5) * 8,
        y: (FH * 0.28) + Math.floor(i / 6) * (FH * 0.24) + (demoRand() - .5) * 8
      });
    }
    const DEMO_LOOP_MS = 4400;
    let demoStep = 0;

    function runDemo(tMod: number) {
      if (tMod < 1400) {
        renderIdle((Math.sin(tMod * 0.0028) + 1) / 2);
        return;
      }
      if (!scratchStarted) scratchStarted = true;
      while (demoStep < demoPath.length && demoPath[demoStep].t <= tMod) {
        const p = demoPath[demoStep];
        scratchAt(p.x, p.y);
        demoStep += 1;
      }
    }
    function resetDemo() {
      seed += 1;
      opened = false;
      scratchStarted = false;
      root!.classList.remove("is-open");
      demoStep = 0;
    }

    if (reduce) root.classList.remove("is-demo");
    let elapsed = 0;
    let lastTs: number | null = null;
    let raf = 0;
    function tick(ts: number) {
      if (lastTs === null) lastTs = ts;
      const dt = Math.min(ts - lastTs, 48);
      lastTs = ts;
      if (!reduce && root!.classList.contains("is-demo")) {
        elapsed += dt;
        const tMod = elapsed % DEMO_LOOP_MS;
        if (tMod < dt) resetDemo();
        runDemo(tMod);
      }
      raf = requestAnimationFrame(tick);
    }
    renderIdle(0);
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      zone.removeEventListener("pointerdown", onDown);
      zone.removeEventListener("pointermove", onMove);
      window.removeEventListener("pointerup", onUp);
      revealBtn.removeEventListener("click", onReveal);
      redoBtn.removeEventListener("click", onRedo);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={`${styles.scv} is-demo`} ref={rootRef}>
        <div className={styles.scv__card}>
          <p className={styles.scv__label}>스크래치 카드</p>
          <div className={styles.scv__zone} ref={zoneRef}>
            <div className={styles.scv__prize}>
              <p className={styles.scv__prizeTitle}>선물 쿠폰</p>
              <p className={styles.scv__prizeSub}>새 카드마다 다른 은박 무늬</p>
            </div>
            <canvas className={styles.scv__foil} ref={foilRef} width={280} height={150} aria-hidden="true" />
          </div>
          <div className={styles.scv__btnRow}>
            <button type="button" className={styles.scv__reveal} ref={revealBtnRef}>한 번에 보기</button>
            <button type="button" className={styles.scv__redo} ref={redoBtnRef}>새 카드 만들기</button>
          </div>
          <p className={styles.scv__live} ref={liveRef} aria-live="polite"></p>
        </div>
      </div>
    </main>
  );
}