02Grid-to-screen — the 2:1 formula turning (col, row) into (x, y)

<main class="stage">
<div class="gp" id="gp">
  <p class="gp__hint">Each tile computes x=(col-row)×tileWidth/2, y=(col+row)×tileHeight/2 to lay out a diamond grid, then lifts it in a traveling wave</p>
  <div class="gp__field" role="img" aria-label="Scene turning checkerboard coordinates into a diamond isometric grid that lifts like a wave">
    <div class="gp__world" id="world"></div>
  </div>
  <p class="gp__meta"><b class="gp__count" id="n">36</b><span class="gp__metaUnit">cells · 2:1 isometric grid</span></p>
</div>
</main>

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

// 격자 좌표 변환(02) — 무대는 노랑. 타일은 2:1 등각 공식으로 배치하고 파도(--tz)만
// 매 프레임 갱신한다. transform-style: preserve-3d 인 world 가 회전하고 있어 자식의
// translateZ 가 실제 화면 높이 이동으로 보인다(원근 없이도 등각은 이렇게 동작한다).

$duration: $dur-loop;
$easing: $ease-out;
$color: $subject-ink;

@include stage($stage-yellow);

.gp {
  display: flex; flex-direction: column; align-items: center; gap: $sp-2;
  width: 100%; max-width: 420px;
}

.gp__hint {
  margin: 0; font-weight: 700; font-size: clamp(10px, 2.6vw, 12px); line-height: 1.35;
  color: $subject-ink; text-align: center;
}

.gp__field {
  position: relative;
  width: clamp(180px, 44vw, 240px); height: clamp(120px, 30vw, 150px);
  display: grid; place-items: center;
}

.gp__world {
  position: relative;
  transform-style: preserve-3d;
  width: 1px; height: 1px;
}

.gp__tile {
  position: absolute; left: 0; top: 0;
  width: calc(var(--tw) * 1px - 3px);
  height: calc(var(--th) * 1px - 3px);
  transform: translate3d(var(--tx), var(--ty), var(--tz, 0px)) translate(-50%, -50%);
  background: $subject-mint;
  border: 1px solid rgba($subject-ink, .3);
  border-radius: $r-xs;
  box-shadow: $shadow-press;
}

.gp__meta { margin: 0; font-size: clamp(9px, 2.4vw, 11px); color: rgba($subject-ink, .78); }
.gp__count { font-weight: 800; color: $subject-blue; font-variant-numeric: tabular-nums; margin-right: $sp-1; }
.gp__metaUnit { color: rgba($subject-ink, .72); }

@media (max-width: 340px) {
  .gp { gap: $sp-1; }
  .gp__field { width: 156px; height: 108px; }
  .gp__hint { font-size: 8px; }
  .gp__meta { font-size: 7px; }
}

// reduce — 파도가 안 돈다. 한 위상(0.6)에서 멈춘 정지 격자만 남는다.
@media (prefers-reduced-motion: reduce) {
  .gp.is-still .gp__tile { transition: none; }
}

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);
}

.gp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.gp__hint {
  margin: 0;
  font-weight: 700;
  font-size: clamp(10px, 2.6vw, 12px);
  line-height: 1.35;
  color: #17141a;
  text-align: center;
}

.gp__field {
  position: relative;
  width: clamp(180px, 44vw, 240px);
  height: clamp(120px, 30vw, 150px);
  display: grid;
  place-items: center;
}

.gp__world {
  position: relative;
  transform-style: preserve-3d;
  width: 1px;
  height: 1px;
}

.gp__tile {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--tw) * 1px - 3px);
  height: calc(var(--th) * 1px - 3px);
  transform: translate3d(var(--tx), var(--ty), var(--tz, 0px)) translate(-50%, -50%);
  background: #4cd4a6;
  border: 1px solid rgba(23, 20, 26, 0.3);
  border-radius: 4px;
  box-shadow: 0 6px 12px rgba(23, 20, 26, 0.32);
}

.gp__meta {
  margin: 0;
  font-size: clamp(9px, 2.4vw, 11px);
  color: rgba(23, 20, 26, 0.78);
}

.gp__count {
  font-weight: 800;
  color: #2f6df6;
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.gp__metaUnit {
  color: rgba(23, 20, 26, 0.72);
}

@media (max-width: 340px) {
  .gp {
    gap: 4px;
  }
  .gp__field {
    width: 156px;
    height: 108px;
  }
  .gp__hint {
    font-size: 8px;
  }
  .gp__meta {
    font-size: 7px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gp.is-still .gp__tile {
    transition: none;
  }
}

// 격자 좌표 변환(02) — 바둑판 (col,row) 를 등각 화면 좌표 (x,y) 로 바꾸는 공식은
// x=(col-row)*타일폭/2, y=(col+row)*타일높이/2 다. 값은 CSS 변수(--tx·--ty·--tz)로 두고
// calc() 로 실제 px 를 만들어 translate3d 에 넣는다. 세로로 들어 올리는 파도(--tz)만
// 매 프레임 새로 계산해 갱신한다 — 격자 자체의 좌표식은 한 번만 계산해 고정한다.
(function () {
  var root = document.getElementById('gp');
  var world = document.getElementById('world');
  var nEl = document.getElementById('n');
  if (!root || !world || !nEl) return;

  function mat4RotateX(deg) {
    var r = deg * Math.PI / 180, c = Math.cos(r), s = Math.sin(r);
    return [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
  }
  function mat4RotateZ(deg) {
    var r = deg * Math.PI / 180, c = Math.cos(r), s = Math.sin(r);
    return [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
  }
  function mat4Mul(a, b) {
    var out = new Array(16);
    for (var col = 0; col < 4; col++) {
      for (var row = 0; row < 4; row++) {
        var sum = 0;
        for (var k = 0; k < 4; k++) sum += a[k * 4 + row] * b[col * 4 + k];
        out[col * 4 + row] = sum;
      }
    }
    return out;
  }
  function mat4ToCss(m) {
    var s = '';
    for (var i = 0; i < m.length; i++) s += (i ? ',' : '') + m[i].toFixed(6);
    return 'matrix3d(' + s + ')';
  }

  var TILT = -35.264;   // 정확한 등각 각도
  world.style.transform = mat4ToCss(mat4Mul(mat4RotateX(TILT), mat4RotateZ(45)));

  var N = 6;                 // 한 변 칸 수 — N*N 격자
  var TILE_W = 34, TILE_H = 17;   // 등각 2:1 비율 — 폭이 높이의 두 배
  nEl.textContent = String(N * N);

  var tiles = [];
  var minX = Infinity, maxX = -Infinity, maxY = -Infinity;
  for (var row = 0; row < N; row++) {
    for (var col = 0; col < N; col++) {
      var x = (col - row) * TILE_W / 2;
      var y = (col + row) * TILE_H / 2;
      if (x < minX) minX = x;
      if (x > maxX) maxX = x;
      if (y > maxY) maxY = y;
      tiles.push({ col: col, row: row, x: x, y: y });
    }
  }
  var shiftX = -(minX + maxX) / 2;
  var shiftY = -maxY / 2;

  var els = [];
  for (var i = 0; i < tiles.length; i++) {
    var tdata = tiles[i];
    var el = document.createElement('div');
    el.className = 'gp__tile';
    el.style.setProperty('--tw', String(TILE_W));
    el.style.setProperty('--th', String(TILE_H));
    el.style.setProperty('--tx', (tdata.x + shiftX).toFixed(2) + 'px');
    el.style.setProperty('--ty', (tdata.y + shiftY).toFixed(2) + 'px');
    el.style.setProperty('--tz', '0px');
    world.appendChild(el);
    els.push({ el: el, col: tdata.col, row: tdata.row });
  }

  var AMP = 13;
  function paint(t) {
    for (var i = 0; i < els.length; i++) {
      var it = els[i];
      var phase = (it.col + it.row) * 0.9 - t * 3.1;
      var z = Math.max(0, Math.sin(phase)) * AMP;
      it.el.style.setProperty('--tz', z.toFixed(2) + 'px');
    }
  }

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) {
    paint(0.6);
    root.classList.add('is-still');
  } else {
    var start = performance.now();
    (function step(now) {
      paint((now - start) / 1000);
      requestAnimationFrame(step);
    })(start);
  }
})();

// IsometricGridCoordinatePlacement — vanilla 판(run/333/demo/02-isometric-grid-coordinate-placement/index.html)
// 의 React 포트. 바둑판 (col,row) 를 등각 화면 좌표 (x,y) 로 바꾸는 공식
// x=(col-row)*tileWidth/2, y=(col+row)*tileHeight/2 을 한 번만 계산해 고정하고,
// 세로로 들어 올리는 파도(--tz)만 매 프레임 다시 계산해 갱신한다.
import { useEffect, useRef } from "react";
import styles from "./IsometricGridCoordinatePlacement.module.scss";

export type IsometricGridCoordinatePlacementProps = {
  duration?: string;
  easing?: string;
  color?: string;
};

type Box<T> = { current: T };
type Tile = { el: HTMLDivElement; col: number; row: number };

const HINT = "타일마다 x=(col-row)×타일폭/2, y=(col+row)×타일높이/2 를 계산해 마름모 격자로 배치하고 파도처럼 들어 올립니다";
const ARIA_FIELD = "바둑판 좌표를 마름모 격자로 바꾸고 파도처럼 들어 올리는 장면";
const UNIT = "칸 · 2:1 등각 격자";

function mat4RotateX(deg: number): number[] {
  const r = (deg * Math.PI) / 180, c = Math.cos(r), s = Math.sin(r);
  return [1, 0, 0, 0, 0, c, s, 0, 0, -s, c, 0, 0, 0, 0, 1];
}
function mat4RotateZ(deg: number): number[] {
  const r = (deg * Math.PI) / 180, c = Math.cos(r), s = Math.sin(r);
  return [c, s, 0, 0, -s, c, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
}
function mat4Mul(a: number[], b: number[]): number[] {
  const out = new Array<number>(16);
  for (let col = 0; col < 4; col++) {
    for (let row = 0; row < 4; row++) {
      let sum = 0;
      for (let k = 0; k < 4; k++) sum += a[k * 4 + row] * b[col * 4 + k];
      out[col * 4 + row] = sum;
    }
  }
  return out;
}
function mat4ToCss(m: number[]): string {
  return "matrix3d(" + m.map((v) => v.toFixed(6)).join(",") + ")";
}

const TILT = -35.264;
const N = 6;
const TILE_W = 34, TILE_H = 17;
const AMP = 13;

export default function IsometricGridCoordinatePlacement({
  duration = "2s",
  easing = "ease-out",
  color = "#17141a"
}: IsometricGridCoordinatePlacementProps) {
  const rootRef = useRef<HTMLDivElement | null>(null);
  const worldRef = useRef<HTMLDivElement | null>(null);
  const countRef = useRef<HTMLElement | null>(null);
  const tilesRef = useRef<Tile[]>([]) as Box<Tile[]>;
  const rafRef = useRef(0) as Box<number>;

  useEffect(() => {
    const world = worldRef.current;
    const root = rootRef.current;
    if (!world || !root) return;

    world.style.transform = mat4ToCss(mat4Mul(mat4RotateX(TILT), mat4RotateZ(45)));
    if (countRef.current) countRef.current.textContent = String(N * N);

    const raw: { col: number; row: number; x: number; y: number }[] = [];
    let minX = Infinity, maxX = -Infinity, maxY = -Infinity;
    for (let row = 0; row < N; row++) {
      for (let col = 0; col < N; col++) {
        const x = ((col - row) * TILE_W) / 2;
        const y = ((col + row) * TILE_H) / 2;
        if (x < minX) minX = x;
        if (x > maxX) maxX = x;
        if (y > maxY) maxY = y;
        raw.push({ col, row, x, y });
      }
    }
    const shiftX = -(minX + maxX) / 2;
    const shiftY = -maxY / 2;

    const tiles: Tile[] = [];
    for (const t of raw) {
      const el = document.createElement("div");
      el.className = styles.tile;
      el.style.setProperty("--tw", String(TILE_W));
      el.style.setProperty("--th", String(TILE_H));
      el.style.setProperty("--tx", (t.x + shiftX).toFixed(2) + "px");
      el.style.setProperty("--ty", (t.y + shiftY).toFixed(2) + "px");
      el.style.setProperty("--tz", "0px");
      world.appendChild(el);
      tiles.push({ el, col: t.col, row: t.row });
    }
    tilesRef.current = tiles;

    function paint(t: number): void {
      for (const it of tilesRef.current) {
        const phase = (it.col + it.row) * 0.9 - t * 3.1;
        const z = Math.max(0, Math.sin(phase)) * AMP;
        it.el.style.setProperty("--tz", z.toFixed(2) + "px");
      }
    }

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) {
      paint(0.6);
      root.classList.add(styles.isStill);
    } else {
      const start = performance.now();
      const step = (now: number): void => {
        paint((now - start) / 1000);
        rafRef.current = requestAnimationFrame(step);
      };
      rafRef.current = requestAnimationFrame(step);
    }
    return () => {
      cancelAnimationFrame(rafRef.current);
      while (world.firstChild) world.removeChild(world.firstChild);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <main className={styles.stage}>
      <div className={styles.gp} ref={rootRef} data-duration={duration} data-easing={easing} data-color={color}>
        <p className={styles.hint}>{HINT}</p>
        <div className={styles.field} role="img" aria-label={ARIA_FIELD}>
          <div className={styles.world} ref={worldRef}></div>
        </div>
        <p className={styles.meta}>
          <b className={styles.count} ref={countRef}>36</b>
          <span className={styles.metaUnit}>{UNIT}</span>
        </p>
      </div>
    </main>
  );
}