kasaframe 0.1.3 → 0.1.4

package/themes/server-hall/kit.ts

@@ -0,0 +1,138 @@
+import type { SceneCtx } from "@kasaframe/core";
+import { THREE } from "@kasaframe/themes/stage3d";
+
+// effects.ts 의 이름 있는 내보내기는 theme.json 효과 목록과 같아야 해서, 효과가 아닌 3D 도구(색·빛 번짐 판·글 판)는 여기 둔다
+
+export type V3 = [number, number, number];
+
+export const hex = (ctx: SceneCtx, k: string): string => ctx.style.colors[k] ?? k;
+export const col = (ctx: SceneCtx, k: string): THREE.Color => new THREE.Color(hex(ctx, k));
+
+let glow: THREE.Texture | null = null;
+/** 빛 번짐 한 점 — 가운데가 밝고 둘레로 사라지는 원. 가산 혼합 점·판에 쓴다(후처리 블룸 대신 — SwiftShader 가 버틴다) */
+export function glowTexture(): THREE.Texture {
+  if (glow) return glow;
+  const c = document.createElement("canvas");
+  c.width = c.height = 64;
+  const g = c.getContext("2d")!;
+  const r = g.createRadialGradient(32, 32, 0, 32, 32, 32);
+  r.addColorStop(0, "rgba(255,255,255,1)");
+  r.addColorStop(0.25, "rgba(255,255,255,0.55)");
+  r.addColorStop(1, "rgba(255,255,255,0)");
+  g.fillStyle = r;
+  g.fillRect(0, 0, 64, 64);
+  glow = new THREE.CanvasTexture(c);
+  return glow;
+}
+
+/** 타공 바닥 타일 한 장(60cm) — 모서리 줄과 구멍 격자. repeat 으로 바닥 전체에 깐다 */
+export function tileTexture(ctx: SceneCtx): THREE.Texture {
+  const c = document.createElement("canvas");
+  c.width = c.height = 128;
+  const g = c.getContext("2d")!;
+  g.fillStyle = hex(ctx, "floor");
+  g.fillRect(0, 0, 128, 128);
+  g.fillStyle = hex(ctx, "tile");
+  for (let y = 16; y < 112; y += 8) for (let x = 16; x < 112; x += 8) g.fillRect(x, y, 4, 4);
+  g.strokeStyle = hex(ctx, "line");
+  g.lineWidth = 3;
+  g.strokeRect(1.5, 1.5, 125, 125);
+  const tex = new THREE.CanvasTexture(c);
+  tex.wrapS = tex.wrapT = THREE.RepeatWrapping;
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  return tex;
+}
+
+export interface Plate {
+  mesh: THREE.Mesh;
+  /** 글을 다시 그린다 — 같은 글이면 건너뛴다. force 면 늘 그린다(시각마다 바뀌는 글 — 검사는 같은 시각을 두 번 그려 fillText 까지 견준다) */
+  draw(text: string, force?: boolean): void;
+}
+
+/**
+ * 뒤에서 빛나는 글 판 — 어두운 판에 가는 테, 글은 빛(톤 매핑 안 받음). 장면 build 에서 만든다(글꼴을 다 받은 뒤라 치수가 맞다).
+ * 판 크기는 가장 긴 글(sample)로 정해 두고 글만 바꿔 그린다
+ */
+export function plate(ctx: SceneCtx, o: { sample: string; height: number; font?: "sans" | "display" | "mono"; tone?: string; edge?: string | null; fill?: string | null; align?: "left" | "center" }): Plate {
+  const px = 128;
+  const family = ctx.style.fonts[o.font ?? "display"];
+  const weight = o.font === "mono" ? 700 : 600;
+  const font = `${weight} ${px}px ${family}`;
+  const probe = document.createElement("canvas").getContext("2d")!;
+  probe.font = font;
+  const pad = px * 0.35;
+  const cw = Math.ceil(probe.measureText(o.sample).width + pad * 2);
+  const ch = Math.ceil(px * 1.45);
+  const c = document.createElement("canvas");
+  c.width = cw;
+  c.height = ch;
+  const tex = new THREE.CanvasTexture(c);
+  tex.colorSpace = THREE.SRGBColorSpace;
+  tex.anisotropy = 4;
+  const w = (o.height * cw) / ch;
+  const mesh = new THREE.Mesh(new THREE.PlaneGeometry(w, o.height), new THREE.MeshBasicMaterial({ map: tex, transparent: true, toneMapped: false, depthWrite: false, side: THREE.DoubleSide }));
+  let last: string | null = null;
+  return {
+    mesh,
+    draw(text, force = false) {
+      if (text === last && !force) return;
+      last = text;
+      const g = c.getContext("2d")!;
+      g.clearRect(0, 0, cw, ch);
+      if (o.fill !== null) {
+        g.fillStyle = hex(ctx, o.fill ?? "surface");
+        g.globalAlpha = 0.92;
+        g.fillRect(0, 0, cw, ch);
+        g.globalAlpha = 1;
+      }
+      if (o.edge !== null) {
+        g.strokeStyle = hex(ctx, o.edge ?? "line");
+        g.lineWidth = px * 0.05;
+        g.strokeRect(px * 0.04, px * 0.04, cw - px * 0.08, ch - px * 0.08);
+      }
+      g.font = font;
+      g.fillStyle = hex(ctx, o.tone ?? "ink");
+      g.textBaseline = "middle";
+      g.textAlign = o.align === "left" ? "left" : "center";
+      // 판은 가장 긴 글로 지었다 — 그래도 넘치면 판 안으로 가로만 줄여 그린다(끝 글자가 잘리지 않게)
+      const room = cw - pad * 2;
+      const tw = g.measureText(text).width;
+      g.save();
+      if (tw > room) {
+        const k = room / tw;
+        g.translate(o.align === "left" ? pad : cw / 2, 0);
+        g.scale(k, 1);
+        g.fillText(text, 0, ch / 2 + px * 0.04);
+      } else g.fillText(text, o.align === "left" ? pad : cw / 2, ch / 2 + px * 0.04);
+      g.restore();
+      tex.needsUpdate = true;
+    },
+  };
+}
+
+/** 꺾은선 위 비율 p(0..1)의 점 */
+export function along(path: readonly V3[], p: number): THREE.Vector3 {
+  const v = path.map((q) => new THREE.Vector3(...q));
+  const seg = v.slice(1).map((q, i) => q.distanceTo(v[i]));
+  const total = seg.reduce((a, b) => a + b, 0) || 1;
+  let left = Math.max(0, Math.min(1, p)) * total;
+  for (let i = 0; i < seg.length; i++) {
+    if (left <= seg[i] || i === seg.length - 1) return v[i].clone().lerp(v[i + 1], seg[i] ? Math.min(1, left / seg[i]) : 0);
+    left -= seg[i];
+  }
+  return v[v.length - 1].clone();
+}
+
+export const pathLength = (path: readonly V3[]): number => path.slice(1).reduce((a, q, i) => a + new THREE.Vector3(...q).distanceTo(new THREE.Vector3(...path[i])), 0);
+
+/** 전원이 들어오는 판 — 형광등처럼 두 번 깜빡이고 켜진다. 켜진 뒤엔 1 */
+export const powerOn = (t: number, at: number): number => {
+  const k = t - at;
+  if (k < 0) return 0;
+  if (k < 0.03) return 1;
+  if (k < 0.07) return 0.15;
+  if (k < 0.1) return 1;
+  if (k < 0.13) return 0.4;
+  return 1;
+};

package/themes/server-hall/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>