kasaframe 0.1.1 → 0.1.4

package/themes/receipt/effects.ts

@@ -0,0 +1,257 @@
+import { clamp, ease, rand, scaleOf, type SceneCtx, type Style } from "@kasaframe/core";
+import { dropBurst, type DropBurstState } from "@kasaframe/motion";
+
+// 계산대 위 영수증 프린터 — 계산대는 서 있고, 움직이는 것은 찍히며 밀려 올라오는 종이·뜯겨 나가는 장·도장 하나뿐.
+// 한 장이 거래(요청) 한 건이다
+
+const paint = (ctx: SceneCtx, key: string): string => ctx.style.colors[key] ?? key;
+
+function div(parent: HTMLElement, css: string, text = ""): HTMLDivElement {
+  const d = document.createElement("div");
+  d.style.cssText = `position:absolute;pointer-events:none;${css}`;
+  d.textContent = text;
+  parent.append(d);
+  return d;
+}
+
+/** 계산대 — 나무 탁자 한 장. 꼼짝 않는다 */
+export function counterTop(el: HTMLElement, o: { ctx: SceneCtx }): (t: number) => void {
+  div(el, `inset:-40px;background:${paint(o.ctx, "bg")}`);
+  return () => {};
+}
+
+/** 프린터 몸통 — 종이가 나오는 틈(head)을 윗변에 둔 검은 상자. 종이 위에 얹어 종이가 틈에서 나오는 것처럼 보이게 한다 */
+export function printerBody(el: HTMLElement, o: { ctx: SceneCtx; x?: number; head?: number; width?: number }): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const w = o.width ?? 1320 * u;
+  const x = o.x ?? ctx.meta.width / 2;
+  const head = o.head ?? ctx.meta.height - 110 * u;
+  const body = div(el, `left:${x - w / 2}px;top:${head - 6 * u}px;width:${w}px;height:${ctx.meta.height - head + 80 * u}px;border-radius:${22 * u}px ${22 * u}px 0 0;background:${paint(ctx, "body")}`);
+  div(body, `left:${36 * u}px;right:${36 * u}px;top:${2 * u}px;height:${10 * u}px;border-radius:${5 * u}px;background:${paint(ctx, "slot")}`);
+  return () => {};
+}
+
+/** 점 채움 — 고정폭 한 줄에 왼쪽·오른쪽을 두고 사이를 점으로(한글은 두 칸) */
+export function leader(left: string, right: string, cols = 32, dot = "."): string {
+  const width = (s: string) => Array.from(s).reduce((a, ch) => a + (/[ᄀ-ᇿ㄰-㆏가-힯　-〿＀-￯]/.test(ch) ? 2 : 1), 0);
+  const n = Math.max(1, cols - width(left) - width(right) - 2);
+  return `${left} ${dot.repeat(n)} ${right}`;
+}
+
+/** 감열 인쇄 — 한 줄이 위에서부터 점 줄 몇 번에 나뉘어 찍힌다(가림 비율 Style). 앉은 뒤엔 아무것도 안 바꾼다 */
+export function thermalPrint(t: number, o: { at: number; rows?: number; dur?: number }): Style {
+  const rows = o.rows ?? 4;
+  const dur = o.dur ?? 0.12;
+  if (t < o.at) return { clip: { bottom: 1 } };
+  const k = Math.min(rows, Math.floor(((t - o.at) / dur) * rows) + 1);
+  return k >= rows ? {} : { clip: { bottom: 1 - k / rows } };
+}
+
+/** 금액 세기 — 찍히는 동안 0 에서 값까지 자리가 돈다(감열 프린터가 합계를 다시 찍듯 줄마다), 그 뒤 값 그대로 */
+export function tally(t: number, o: { at: number; dur?: number; to: number; from?: number; decimals?: number; prefix?: string; suffix?: string }): string {
+  const dur = o.dur ?? 0.5;
+  const k = clamp((t - o.at) / dur);
+  const v = (o.from ?? 0) + (o.to - (o.from ?? 0)) * (k >= 1 ? 1 : ease.outCubic(k));
+  return `${o.prefix ?? ""}${(k >= 1 ? o.to : v).toFixed(o.decimals ?? 0)}${o.suffix ?? ""}`;
+}
+
+/** 바코드 — 글에서 정한 막대(같은 글이면 같은 막대)가 위에서 아래로 점 줄마다 찍힌다. 영수증 꼬리 */
+export function barcode(el: HTMLElement, o: { ctx: SceneCtx; text: string; at: number; width: number; height: number; dur?: number }): (t: number) => void {
+  const { ctx } = o;
+  const NS = "http://www.w3.org/2000/svg";
+  const s = document.createElementNS(NS, "svg");
+  s.setAttribute("width", String(o.width));
+  s.setAttribute("height", String(o.height));
+  s.style.cssText = "display:block;margin:0 auto";
+  const bars: number[] = [];
+  for (let i = 0; i < 64; i++) bars.push(1 + Math.floor(rand(o.text, i) * 3));
+  const total = bars.reduce((a, b) => a + b, 0) * 2;
+  const unit = o.width / total;
+  let x = 0;
+  const g = document.createElementNS(NS, "g");
+  bars.forEach((b) => {
+    const r = document.createElementNS(NS, "rect");
+    r.setAttribute("x", (x * unit).toFixed(2));
+    r.setAttribute("y", "0");
+    r.setAttribute("width", (b * unit).toFixed(2));
+    r.setAttribute("height", String(o.height));
+    r.setAttribute("fill", paint(ctx, "ink"));
+    g.append(r);
+    x += b * 2;
+  });
+  s.append(g);
+  el.append(s);
+  return (t) => {
+    const st = thermalPrint(t, { at: o.at, rows: 6, dur: o.dur ?? 0.18 });
+    s.style.visibility = t >= o.at ? "visible" : "hidden";
+    s.style.clipPath = st.clip ? `inset(0 0 ${((st.clip.bottom ?? 0) * 100).toFixed(1)}% 0)` : "none";
+  };
+}
+
+export interface ReceiptLine {
+  /** 찍히는 시각 — 이때부터 다음 줄 시각까지 종이가 이 줄 높이만큼 밀려 올라온다 */
+  at: number;
+  /** text 한 줄 · item 이름 … 값 · rule 점선 · big 두 배 높이 · total 합계 · void 취소(줄 긋고 VOID) · blank · barcode · html(로고 같은 그림 — 높이는 rows 줄) */
+  kind?: "text" | "item" | "rule" | "big" | "total" | "void" | "blank" | "barcode" | "html";
+  text?: string;
+  /** item·total·void 의 오른쪽 값 — 함수면 그 t 의 값(찍히는 동안 세기) */
+  right?: string | ((t: number) => string);
+  align?: "left" | "center" | "right";
+  /** 꼬리 줄처럼 옅게 */
+  faint?: boolean;
+  bold?: boolean;
+  /** html 줄의 내용과 높이(줄 수) */
+  html?: string;
+  rows?: number;
+}
+
+export interface ReceiptOpts {
+  ctx: SceneCtx;
+  /** 종이 가운데 x · 프린터 틈 y · 종이 폭 */
+  x?: number;
+  head?: number;
+  width?: number;
+  lines: readonly ReceiptLine[];
+  /** 글 크기 — 한 줄 높이는 그 1.5 배 */
+  size?: number;
+  /** 마지막 줄 밀림 시간 */
+  tail?: number;
+  /** 이 시각에 톱니 칼날에 뜯겨 위로 날아간다 */
+  tear?: number;
+  /** 뜯은 장을 날려 보내지 않고 들어 올려 보인다(끝 카드) */
+  present?: boolean;
+  /** 뜯은 장을 계산대 이 자리(장 가운데)로 던져 둔다 — 흩어진 영수증 */
+  toss?: { x: number; y: number; rot: number };
+}
+
+/**
+ * 영수증 한 장 = 거래(요청) 한 건 — 줄이 찍힐 때마다 종이가 프린터 틈에서 그 줄 높이만큼 밀려 올라온다(다음 줄 시각까지 이어서 민다).
+ * 이름 · 점 · 값 줄, 점선, 두 배 높이 합계, VOID 취소 줄, 바코드 꼬리. tear 에 뜯겨 날아가고 다음 장이 나온다
+ */
+export function receiptRoll(el: HTMLElement, o: ReceiptOpts): (t: number) => void {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  const W = o.width ?? 1200 * u;
+  const x = o.x ?? ctx.meta.width / 2;
+  const head = o.head ?? ctx.meta.height - 110 * u;
+  const size = o.size ?? 52 * u;
+  const pad = 30 * u;
+  const lead = 36 * u;
+  const mono = ctx.style.fonts.mono;
+  const ink = paint(ctx, "ink");
+  // 틈 위만 보이는 창 — 아직 안 나온 종이는 프린터 안에 있다
+  const win = div(el, `left:${x - W / 2 - 40 * u}px;top:-200px;width:${W + 80 * u}px;height:${head + 200}px;overflow:hidden`);
+  const paper = div(win, `left:${40 * u}px;top:0;width:${W}px;background:${paint(ctx, "paper")};box-shadow:${6 * u}px ${6 * u}px 0 rgba(0,0,0,0.12)`);
+  const heights = { text: 1.5, item: 1.5, rule: 0.9, big: 2.6, total: 2.2, void: 1.5, blank: 0.7, barcode: 3.4 };
+  const rows: { el: HTMLDivElement; h: number; at: number; right?: { el: HTMLElement; fn: (t: number) => string } }[] = [];
+  const codes: ((t: number) => void)[] = [];
+  let y = lead;
+  for (const l of o.lines) {
+    const kind = l.kind ?? "text";
+    const h = (kind === "html" ? (l.rows ?? 3) * 1.5 : heights[kind]) * size;
+    const row = div(paper, `left:${pad}px;right:${pad}px;top:${y}px;height:${h}px;display:flex;align-items:center;justify-content:${l.align === "center" ? "center" : l.align === "right" ? "flex-end" : "flex-start"};gap:${0.4 * size}px;font:${kind === "big" || kind === "total" || l.bold ? 700 : 400} ${kind === "big" ? size * 2.1 : kind === "total" ? size * 1.5 : size}px/1 ${mono};color:${l.faint ? paint(ctx, "heat") : ink};white-space:pre;visibility:hidden`);
+    let right: { el: HTMLElement; fn: (t: number) => string } | undefined;
+    if (kind === "rule") {
+      const dash = document.createElement("div");
+      dash.style.cssText = `flex:1;border-top:${3 * u}px dashed ${ink}`;
+      row.append(dash);
+    } else if (kind === "barcode") codes.push(barcode(row, { ctx, text: l.text ?? "receipt", at: l.at, width: W - 2 * pad, height: h * 0.72 }));
+    else if (kind === "item" || kind === "total" || kind === "void") {
+      const left = document.createElement("span");
+      left.textContent = l.text ?? "";
+      const fill = document.createElement("span");
+      fill.style.cssText = `flex:1;align-self:flex-end;margin-bottom:${0.32 * size}px;border-bottom:${2.5 * u}px dotted ${kind === "total" ? "transparent" : ink}`;
+      const r = document.createElement("span");
+      r.textContent = typeof l.right === "function" ? l.right(1e9) : (l.right ?? "");
+      row.append(left, fill, r);
+      if (kind === "void") {
+        div(row, `left:0;right:${4 * size}px;top:50%;height:${3 * u}px;background:${ink}`);
+        const tag = document.createElement("span");
+        tag.textContent = "VOID";
+        tag.style.cssText = `font-weight:700;border:${2.5 * u}px solid ${ink};padding:0 ${0.2 * size}px`;
+        row.append(tag);
+      }
+      if (kind === "total") row.style.borderTop = `${4 * u}px double ${ink}`;
+      if (typeof l.right === "function") right = { el: r, fn: l.right };
+    } else if (kind === "html") {
+      const art = document.createElement("div");
+      art.style.cssText = `height:${h * 0.82}px;color:${ink}`;
+      art.innerHTML = l.html ?? "";
+      row.append(art);
+    } else row.textContent = l.text ?? "";
+    rows.push({ el: row, h, at: l.at, right });
+    y += h;
+  }
+  const total = y + lead;
+  paper.style.height = `${total}px`;
+  // 톱니 위 끝 — 앞 장을 뜯어 낸 자리
+  const tooth = 14 * u;
+  const n = Math.ceil(W / (tooth * 2));
+  const zig = Array.from({ length: n + 1 }, (_, i) => `${((i * 100) / n).toFixed(2)}% ${i % 2 ? tooth : 0}px`).join(",");
+  paper.style.clipPath = `polygon(${zig}, 100% 100%, 0 100%)`;
+  const tail = o.tail ?? 0.3;
+  const feedEnd = rows.map((r, i) => (i + 1 < rows.length ? Math.max(r.at + 0.06, rows[i + 1].at) : r.at + tail));
+  return (t) => {
+    let fed = 0;
+    rows.forEach((r, i) => {
+      r.el.style.visibility = t >= r.at ? "visible" : "hidden";
+      if (r.right) r.right.el.textContent = r.right.fn(t);
+      const k = clamp((t - r.at) / (feedEnd[i] - r.at));
+      // 처음은 한 번 툭 밀고 나머지는 다음 줄까지 고르게 — 감열 프린터의 드르륵
+      fed += r.h * (k <= 0 ? 0 : 0.45 * ease.outCubic(clamp(k / 0.25)) + 0.55 * k);
+    });
+    for (const b of codes) b(t);
+    // 종이는 자리(top·left)로 옮긴다 — 화면을 덮는 큰 글 덩어리를 transform 으로 옮기면 검사가 카메라로 본다. 기울기는 던지는 쪽지만
+    let ty = head - lead - fed + 200;
+    let tx = 0;
+    let rot = 0;
+    const torn = o.tear !== undefined && t >= o.tear;
+    // 던진 장은 틈 창 밖으로 나가야 한다 — 뜯은 뒤에는 남은 종이가 다 프린터 몸통 밑이라 창을 열어도 된다
+    win.style.overflow = torn && o.toss ? "visible" : "hidden";
+    if (o.tear !== undefined && torn) {
+      if (o.toss) {
+        const e = ease.outCubic(clamp((t - o.tear) / 0.34));
+        const cy = ty - 200 + total / 2;
+        tx = (o.toss.x - x) * e;
+        ty += (o.toss.y - cy) * e;
+        rot = o.toss.rot * e;
+      } else if (o.present) {
+        ty -= 120 * u * ease.outCubic(clamp((t - o.tear) / 0.5));
+      } else {
+        const k = ease.inCubic(clamp((t - o.tear) / 0.42));
+        ty -= (head + total) * k;
+        tx = -160 * u * k;
+      }
+    }
+    paper.style.top = `${ty.toFixed(1)}px`;
+    paper.style.left = `${(40 * u + tx).toFixed(1)}px`;
+    paper.style.transform = rot ? `rotate(${rot.toFixed(2)}deg)` : "none";
+  };
+}
+
+/**
+ * 드롭 = 도장 — 영수증 위에 빨간 고무 도장이 위에서 쾅 찍힌다(넘쳤다 앉고 조금 기운 채). 글은 두 줄(큰 수 · 작은 말).
+ * 돌려준 shake 는 화면 틀에
+ */
+export function paidStamp(el: HTMLElement, o: { ctx: SceneCtx; drop?: number; x?: number; y?: number; big: string; small?: string; angle?: number }): (t: number) => DropBurstState {
+  const { ctx } = o;
+  const u = scaleOf(ctx.meta);
+  // 도장 잉크는 종이·계산대 어디에 걸려도 읽히게 짙은 빨강(stamp 칸) — 없으면 강조 색
+  const red = ctx.style.colors.stamp ?? paint(ctx, "accent");
+  const box = div(el, `left:${o.x ?? ctx.meta.width / 2}px;top:${o.y ?? ctx.meta.height * 0.42}px;transform:translate(-50%,-50%);padding:${24 * u}px ${48 * u}px ${18 * u}px;border:${12 * u}px solid ${red};border-radius:${18 * u}px;color:${red};text-align:center;font-family:${ctx.style.fonts.mono};mix-blend-mode:multiply;visibility:hidden`);
+  div(box, "position:relative;font-size:" + 210 * u + "px;font-weight:700;line-height:1", o.big);
+  if (o.small) div(box, `position:relative;margin-top:${8 * u}px;font-size:${52 * u}px;font-weight:700;line-height:1.1;white-space:pre`, o.small);
+  const flash = div(el, `inset:0;background:${red};opacity:0;mix-blend-mode:multiply`);
+  const D = ctx.beats.drop(o.drop ?? 0);
+  const ang = o.angle ?? -8;
+  return (t) => {
+    const s = dropBurst(t, { beats: ctx.beats, drop: o.drop ?? 0, rules: ctx.style.motion, scene: ctx.id, source: "paidStamp" });
+    box.style.visibility = t >= D ? "visible" : "hidden";
+    const k = clamp((t - D) / 0.16);
+    const sc = t < D ? 1.6 : 1.6 - 0.6 * ease.outBack(k);
+    box.style.transform = `translate(-50%,-50%) rotate(${ang}deg) scale(${sc.toFixed(4)})`;
+    flash.style.opacity = (s.flash * 0.25).toFixed(3);
+    return s;
+  };
+}

package/themes/receipt/sample/assets/og/logo.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1140 650" width="1140" height="650" fill="none" role="img" aria-label="OpenGateway">
+  <title>OpenGateway</title>
+  <g id="logo" stroke="currentColor" fill="currentColor">
+    <rect id="node-in" x="36" y="36" width="420" height="578" rx="89" fill="none" stroke-width="72"/>
+    <rect id="bar-in" x="72" y="272" width="277" height="106" stroke="none"/>
+    <path id="node-out" d="M684 213 L684 125 A89 89 0 0 1 773 36 L1015 36 A89 89 0 0 1 1104 125 L1104 525 A89 89 0 0 1 1015 614 L773 614 A89 89 0 0 1 684 525 L684 436" fill="none" stroke-width="72" stroke-linecap="butt"/>
+    <g id="arrow">
+      <rect id="arrow-shaft" x="420" y="272" width="394" height="106" stroke="none"/>
+      <path id="arrow-head" d="M833 220 L970 325 L833 430 Z" stroke-width="38" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>