koishi-plugin-cchess 1.2.0 → 1.3.0

package/lib/index.js

@@ -38,6 +38,209 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_koishi = require("koishi");
+
+// src/m3.ts
+var WHITE_X = 95.047;
+var WHITE_Y = 100;
+var WHITE_Z = 108.883;
+function labToXyz(l, a, b) {
+  const fy = (l + 16) / 116;
+  const fx = fy + a / 500;
+  const fz = fy - b / 200;
+  const f = /* @__PURE__ */ __name((t) => t > 6 / 29 ? t * t * t : 3 * (6 / 29) ** 2 * (t - 4 / 29), "f");
+  return [f(fx) * WHITE_X, f(fy) * WHITE_Y, f(fz) * WHITE_Z];
+}
+__name(labToXyz, "labToXyz");
+function gamma(value) {
+  return value <= 31308e-7 ? value * 12.92 : 1.055 * value ** (1 / 2.4) - 0.055;
+}
+__name(gamma, "gamma");
+function xyzToRgb(x, y, z) {
+  x /= 100;
+  y /= 100;
+  z /= 100;
+  return [
+    gamma(3.2406 * x - 1.5372 * y - 0.4986 * z),
+    gamma(-0.9689 * x + 1.8758 * y + 0.0415 * z),
+    gamma(0.0557 * x - 0.204 * y + 1.057 * z)
+  ];
+}
+__name(xyzToRgb, "xyzToRgb");
+var EPSILON = 1 / 512;
+function lch(tone, chroma, hue) {
+  const radian = hue * Math.PI / 180;
+  const at = /* @__PURE__ */ __name((c) => xyzToRgb(...labToXyz(tone, Math.cos(radian) * c, Math.sin(radian) * c)), "at");
+  const inGamut = /* @__PURE__ */ __name((rgb2) => rgb2.every((value) => value >= -EPSILON && value <= 1 + EPSILON), "inGamut");
+  let rgb = at(chroma);
+  if (!inGamut(rgb)) {
+    let low = 0;
+    let high = chroma;
+    while (high - low > 0.05) {
+      const mid = (low + high) / 2;
+      if (inGamut(at(mid))) low = mid;
+      else high = mid;
+    }
+    rgb = at(low);
+  }
+  return "#" + rgb.map((value) => Math.round(Math.min(1, Math.max(0, value)) * 255).toString(16).padStart(2, "0")).join("");
+}
+__name(lch, "lch");
+function degamma(value) {
+  value /= 255;
+  return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+}
+__name(degamma, "degamma");
+function lchOf(hex) {
+  const value = parseInt(hex.replace("#", "").slice(0, 6), 16) || 0;
+  const r = degamma(value >> 16 & 255);
+  const g = degamma(value >> 8 & 255);
+  const b = degamma(value & 255);
+  const x = (0.4124 * r + 0.3576 * g + 0.1805 * b) * 100 / WHITE_X;
+  const y = (0.2126 * r + 0.7152 * g + 0.0722 * b) * 100 / WHITE_Y;
+  const z = (0.0193 * r + 0.1192 * g + 0.9505 * b) * 100 / WHITE_Z;
+  const f = /* @__PURE__ */ __name((t) => t > (6 / 29) ** 3 ? Math.cbrt(t) : t / (3 * (6 / 29) ** 2) + 4 / 29, "f");
+  const [fx, fy, fz] = [f(x), f(y), f(z)];
+  const a = 500 * (fx - fy);
+  const bb = 200 * (fy - fz);
+  return {
+    tone: 116 * fy - 16,
+    chroma: Math.hypot(a, bb),
+    hue: (Math.atan2(bb, a) * 180 / Math.PI + 360) % 360
+  };
+}
+__name(lchOf, "lchOf");
+function harmonize(hex, tone, chroma = 48, fallbackHue = 0) {
+  const source = lchOf(hex);
+  const hue = source.chroma < 4 ? fallbackHue : source.hue;
+  return lch(tone, source.chroma < 4 ? Math.min(chroma, 6) : chroma, hue);
+}
+__name(harmonize, "harmonize");
+function palette(hue, chroma) {
+  const cache = /* @__PURE__ */ new Map();
+  return (tone) => {
+    const hit = cache.get(tone);
+    if (hit) return hit;
+    const value = lch(tone, chroma, hue);
+    cache.set(tone, value);
+    return value;
+  };
+}
+__name(palette, "palette");
+function palettesOf(hue, options = {}) {
+  const { chroma = 56, tertiaryShift = 60 } = options;
+  return {
+    primary: palette(hue, chroma),
+    secondary: palette(hue, Math.max(16, chroma / 3.2)),
+    tertiary: palette(hue + tertiaryShift, Math.max(28, chroma / 1.8)),
+    neutral: palette(hue, 4),
+    neutralVariant: palette(hue, 9),
+    error: palette(36, 68)
+  };
+}
+__name(palettesOf, "palettesOf");
+function scheme(hue, dark = false, options = {}) {
+  const p = palettesOf(hue, options);
+  const { primary: P, secondary: S, tertiary: T, neutral: N, neutralVariant: V, error: E } = p;
+  if (dark) {
+    return {
+      primary: P(80),
+      onPrimary: P(20),
+      primaryContainer: P(30),
+      onPrimaryContainer: P(90),
+      secondary: S(80),
+      onSecondary: S(20),
+      secondaryContainer: S(30),
+      onSecondaryContainer: S(90),
+      tertiary: T(80),
+      onTertiary: T(20),
+      tertiaryContainer: T(30),
+      onTertiaryContainer: T(90),
+      error: E(80),
+      onError: E(20),
+      errorContainer: E(30),
+      onErrorContainer: E(90),
+      background: N(6),
+      onBackground: N(90),
+      surface: N(6),
+      onSurface: N(90),
+      surfaceVariant: V(30),
+      onSurfaceVariant: V(80),
+      surfaceDim: N(6),
+      surfaceBright: N(24),
+      surfaceContainerLowest: N(4),
+      surfaceContainerLow: N(10),
+      surfaceContainer: N(12),
+      surfaceContainerHigh: N(17),
+      surfaceContainerHighest: N(22),
+      outline: V(60),
+      outlineVariant: V(30),
+      inverseSurface: N(90),
+      inverseOnSurface: N(20),
+      inversePrimary: P(40),
+      scrim: N(0),
+      shadow: N(0)
+    };
+  }
+  return {
+    primary: P(40),
+    onPrimary: P(100),
+    primaryContainer: P(90),
+    onPrimaryContainer: P(30),
+    secondary: S(40),
+    onSecondary: S(100),
+    secondaryContainer: S(90),
+    onSecondaryContainer: S(30),
+    tertiary: T(40),
+    onTertiary: T(100),
+    tertiaryContainer: T(90),
+    onTertiaryContainer: T(30),
+    error: E(40),
+    onError: E(100),
+    errorContainer: E(90),
+    onErrorContainer: E(30),
+    background: N(98),
+    onBackground: N(10),
+    surface: N(98),
+    onSurface: N(10),
+    surfaceVariant: V(90),
+    onSurfaceVariant: V(30),
+    surfaceDim: N(87),
+    surfaceBright: N(98),
+    surfaceContainerLowest: N(100),
+    surfaceContainerLow: N(96),
+    surfaceContainer: N(94),
+    surfaceContainerHigh: N(92),
+    surfaceContainerHighest: N(90),
+    outline: V(50),
+    outlineVariant: V(80),
+    inverseSurface: N(20),
+    inverseOnSurface: N(95),
+    inversePrimary: P(80),
+    scrim: N(0),
+    shadow: N(0)
+  };
+}
+__name(scheme, "scheme");
+var SHAPE = {
+  none: 0,
+  extraSmall: 4,
+  small: 8,
+  medium: 12,
+  large: 16,
+  largeIncreased: 20,
+  extraLarge: 28,
+  extraLargeIncreased: 32,
+  extraExtraLarge: 48,
+  full: 9999
+};
+var FONT_STACK = '"Roboto Flex", "Roboto", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif';
+var MEDAL = {
+  gold: lch(58, 52, 85),
+  silver: lch(66, 5, 260),
+  bronze: lch(48, 36, 48)
+};
+
+// src/index.ts
 var path = __toESM(require("path"));
 var fs = __toESM(require("fs"));
 var name = "cchess";
@@ -115,6 +318,22 @@ function apply(ctx, config) {
       }
     });
   });
+  const FRAME = scheme(60);
+  function roundRect(context, x, y, width, height, radius) {
+    const r = Math.max(0, Math.min(radius, width / 2, height / 2));
+    context.beginPath();
+    context.moveTo(x + r, y);
+    context.lineTo(x + width - r, y);
+    context.arcTo(x + width, y, x + width, y + r, r);
+    context.lineTo(x + width, y + height - r);
+    context.arcTo(x + width, y + height, x + width - r, y + height, r);
+    context.lineTo(x + r, y + height);
+    context.arcTo(x, y + height, x, y + height - r, r);
+    context.lineTo(x, y + r);
+    context.arcTo(x, y, x + r, y, r);
+    context.closePath();
+  }
+  __name(roundRect, "roundRect");
   const CELL_WIDTH = 54;
   const ARROW_OFFSET = 33;
   const BOARD_PADDING = 33;
@@ -132,8 +351,14 @@ function apply(ctx, config) {
   const thinkingDepth = Math.max(1, Math.round(config.defaultEngineThinkingDepth) || 1);
   const ENGINE_TIMEOUT = 120 * 1e3;
   const piecesImgResources = loadPiecesImageResources(config.pieceSkin);
-  const outerFrameImg = fs.readFileSync(path.join(__dirname, "assets", "棋盘皮肤", `外框.png`));
   const boardSkinImg = fs.readFileSync(path.join(__dirname, "assets", "棋盘皮肤", `${config.boardSkin}.webp`));
+  const FRAME_WIDTH = 620;
+  const FRAME_HEIGHT = 780;
+  const FRAME_BOARD = { x: 36.5, y: 90, width: 550, height: 605 };
+  const FRAME_ZOOM = FRAME_BOARD.width / BOARD_WIDTH;
+  const FILES = ["a", "b", "c", "d", "e", "f", "g", "h", "i"];
+  const RED_FILES = ["九", "八", "七", "六", "五", "四", "三", "二", "一"];
+  const ARROW_COLOR = harmonize("#80ab45", 58, 56);
   const possibleFigureNames = ["将", "士", "象", "车", "马", "炮", "卒", "帅", "仕", "相", "兵"];
   ctx.model.extend("cchess_game_records", {
     id: "unsigned",
@@ -1389,12 +1614,42 @@ function apply(ctx, config) {
   }
   __name(convertTurnToString, "convertTurnToString");
   async function createImage(buffer) {
-    const canvas = await ctx.canvas.createCanvas(620 * scale, 780 * scale);
+    const canvas = await ctx.canvas.createCanvas(FRAME_WIDTH * scale, FRAME_HEIGHT * scale);
     const context = canvas.getContext("2d");
-    const outerFrame = await ctx.canvas.loadImage(outerFrameImg);
-    context.drawImage(outerFrame, 0, 0, 620 * scale, 780 * scale);
+    context.scale(scale, scale);
+    context.fillStyle = FRAME.surfaceContainer;
+    roundRect(context, 0, 0, FRAME_WIDTH, FRAME_HEIGHT, SHAPE.extraLarge);
+    context.fill();
     const boardImg = await ctx.canvas.loadImage(buffer);
-    context.drawImage(boardImg, 36.5 * scale, 90 * scale, 550 * scale, 605 * scale);
+    context.drawImage(
+      boardImg,
+      FRAME_BOARD.x,
+      FRAME_BOARD.y,
+      FRAME_BOARD.width,
+      FRAME_BOARD.height
+    );
+    const columnAt = /* @__PURE__ */ __name((col) => FRAME_BOARD.x + (col * CELL_WIDTH + BOARD_PADDING) * FRAME_ZOOM, "columnAt");
+    const rowAt = /* @__PURE__ */ __name((row) => FRAME_BOARD.y + (row * CELL_WIDTH + BOARD_PADDING) * FRAME_ZOOM, "rowAt");
+    context.textAlign = "center";
+    context.textBaseline = "middle";
+    const label = /* @__PURE__ */ __name((text, x, y, size, color) => {
+      context.font = `600 ${size}px ${FONT_STACK}`;
+      context.fillStyle = color;
+      context.fillText(text, x, y);
+    }, "label");
+    for (let col = 0; col < 9; col++) {
+      const x = columnAt(isFlipBoard ? 8 - col : col);
+      label(FILES[col], x, 30, 22, FRAME.onSurfaceVariant);
+      label(String(col + 1), x, 64, 22, FRAME.outline);
+      label(RED_FILES[col], x, FRAME_HEIGHT - 62, 24, FRAME.onSurfaceVariant);
+      label(FILES[col], x, FRAME_HEIGHT - 26, 22, FRAME.outline);
+    }
+    for (let row = 0; row < 10; row++) {
+      const y = rowAt(isFlipBoard ? 9 - row : row);
+      const text = String(9 - row);
+      label(text, 19, y, 22, FRAME.outline);
+      label(text, FRAME_WIDTH - 19, y, 22, FRAME.outline);
+    }
     return canvas.toBuffer(imageMimeType);
   }
   __name(createImage, "createImage");
@@ -1864,7 +2119,7 @@ function apply(ctx, config) {
       let dist = Math.sqrt((startX - endX) ** 2 + (startY - endY) ** 2);
       let adjustedEndX = startX + (endX - startX) * (dist - 30) / dist;
       let adjustedEndY = startY + (endY - startY) * (dist - 30) / dist;
-      await drawLineArrow(context, startX * scale, startY * scale, adjustedEndX * scale, adjustedEndY * scale, "rgba(128, 171, 69, 0.7)", 15 * scale);
+      await drawLineArrow(context, startX * scale, startY * scale, adjustedEndX * scale, adjustedEndY * scale, ARROW_COLOR + "b3", 15 * scale);
     }
     if (moveList.length > 0) {
       const currentMoveId = moveList[moveList.length - 1].moveId;

package/lib/m3.d.ts

@@ -0,0 +1,256 @@
+/**
+ * Material 3 Expressive 设计系统。
+ *
+ * 只依赖标准库，输出纯 CSS 变量与常量，任何渲染后端（puppeteer / canvas）都能用。
+ * 色板按 M3 的做法从一个源色推出六套色调板，再按角色映射成明暗两套配色。
+ */
+/** M3 的「色调」就是 CIE L*，0 为黑、100 为白。 */
+export type Tone = number;
+/** LCh -> #rrggbb。超出 sRGB 色域时按二分法降低彩度，色调与色相保持不变。 */
+export declare function lch(tone: Tone, chroma: number, hue: number): string;
+/** `#rrggbb` -> LCh，`lch()` 的逆运算。 */
+export declare function lchOf(hex: string): {
+    tone: number;
+    chroma: number;
+    hue: number;
+};
+/**
+ * 把一个任意来源的颜色（头像主色、用户自选色）收进本设计系统。
+ *
+ * 只保留它的色相，色调与彩度一律换成设计系统里的取值——于是每个人都还有
+ * 自己的颜色，整张图的明度节奏却是齐的，不会因为某个头像特别暗就糊成一团。
+ * 彩度太低的灰色头像没有可用的色相，退回主色。
+ */
+export declare function harmonize(hex: string, tone: Tone, chroma?: number, fallbackHue?: number): string;
+/** 一套色调板：固定色相与彩度，按色调取色。 */
+export type Palette = (tone: Tone) => string;
+export declare function palette(hue: number, chroma: number): Palette;
+export interface Palettes {
+    primary: Palette;
+    secondary: Palette;
+    tertiary: Palette;
+    neutral: Palette;
+    neutralVariant: Palette;
+    error: Palette;
+}
+export interface SourceOptions {
+    /** 主色彩度，默认 56，够鲜艳又不至于在浅色调上大面积溢出色域。 */
+    chroma?: number;
+    /**
+     * 第三色相对主色的相位差，默认 +60°。
+     * 这个值规范里是个经验值，并非永远合适：暖橙 +60° 会落到发闷的橄榄绿，
+     * 这种时候改成 -60° 取玫红，强调色才跳得出来。
+     */
+    tertiaryShift?: number;
+}
+/**
+ * 按 M3 的推导规则从源色相生成六套色调板。
+ *
+ * Expressive 相比基础风格更敢用彩度：第三色比规范里的保守取值更高，
+ * 中性色也留了一点源色的味道，成片的表面不会灰得发死。
+ */
+export declare function palettesOf(hue: number, options?: SourceOptions): Palettes;
+export interface Scheme {
+    primary: string;
+    onPrimary: string;
+    primaryContainer: string;
+    onPrimaryContainer: string;
+    secondary: string;
+    onSecondary: string;
+    secondaryContainer: string;
+    onSecondaryContainer: string;
+    tertiary: string;
+    onTertiary: string;
+    tertiaryContainer: string;
+    onTertiaryContainer: string;
+    error: string;
+    onError: string;
+    errorContainer: string;
+    onErrorContainer: string;
+    background: string;
+    onBackground: string;
+    surface: string;
+    onSurface: string;
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+    surfaceDim: string;
+    surfaceBright: string;
+    surfaceContainerLowest: string;
+    surfaceContainerLow: string;
+    surfaceContainer: string;
+    surfaceContainerHigh: string;
+    surfaceContainerHighest: string;
+    outline: string;
+    outlineVariant: string;
+    inverseSurface: string;
+    inverseOnSurface: string;
+    inversePrimary: string;
+    scrim: string;
+    shadow: string;
+}
+/** 生成一套完整的角色配色。`dark` 为真时返回暗色方案。 */
+export declare function scheme(hue: number, dark?: boolean, options?: SourceOptions): Scheme;
+/**
+ * M3 Expressive 形状刻度（px）。
+ * Expressive 把圆角整体推大了一档，容器之间靠「圆角差」而不是分隔线来分层。
+ */
+export declare const SHAPE: {
+    readonly none: 0;
+    readonly extraSmall: 4;
+    readonly small: 8;
+    readonly medium: 12;
+    readonly large: 16;
+    readonly largeIncreased: 20;
+    readonly extraLarge: 28;
+    readonly extraLargeIncreased: 32;
+    readonly extraExtraLarge: 48;
+    readonly full: 9999;
+};
+/** 正文与标题字体栈，覆盖 Windows / macOS / Linux 与随包字体三种情况。 */
+export declare const FONT_STACK = "\"Roboto Flex\", \"Roboto\", \"Noto Sans SC\", \"PingFang SC\", \"Microsoft YaHei\", \"Source Han Sans SC\", system-ui, sans-serif";
+/** 等宽字体栈，用于比分、倒计时这类需要对齐的数字。 */
+export declare const MONO_STACK = "\"Roboto Mono\", \"JetBrains Mono\", \"SF Mono\", \"Cascadia Mono\", Consolas, \"Noto Sans Mono\", monospace";
+export interface TypeStyle {
+    size: number;
+    line: number;
+    weight: number;
+    tracking: number;
+}
+/**
+ * M3 Expressive 字阶。`emphasized` 档提高字重，用在需要被一眼看到的地方，
+ * 这是 Expressive 与基础风格最直观的差别之一。
+ */
+export declare const TYPE: {
+    displayLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    displayMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    displaySmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    headlineLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    headlineMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    headlineSmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    titleLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    titleMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    titleSmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    bodyLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    bodyMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    bodySmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    labelLarge: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    labelMedium: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+    labelSmall: {
+        size: number;
+        line: number;
+        weight: number;
+        tracking: number;
+    };
+};
+/**
+ * Expressive 的强调字重。取 600 而非规范里的 500：很多机器上只装了 400 / 700 两档，
+ * 500 会回落成常规字重，强调就白做了；600 在这种字体集下会匹配到 700，效果才稳定。
+ * 正文维持 400，字重拉高反而伤可读性。
+ */
+export declare const EMPHASIZED_WEIGHT: {
+    readonly display: 600;
+    readonly headline: 600;
+    readonly title: 600;
+    readonly label: 600;
+};
+/** 阴影高度（dp -> box-shadow），M3 只有 0 ~ 5 六档。 */
+export declare const ELEVATION: readonly ["none", "0 1px 2px 0 rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15)", "0 1px 2px 0 rgba(0,0,0,.30), 0 2px 6px 2px rgba(0,0,0,.15)", "0 1px 3px 0 rgba(0,0,0,.30), 0 4px 8px 3px rgba(0,0,0,.15)", "0 2px 3px 0 rgba(0,0,0,.30), 0 6px 10px 4px rgba(0,0,0,.15)", "0 4px 4px 0 rgba(0,0,0,.30), 0 8px 12px 6px rgba(0,0,0,.15)"];
+/** 把配色方案铺成 `--md-sys-color-*` 变量。 */
+export declare function colorVars(s: Scheme): string;
+/** 形状、字阶、高度的变量，与配色一起构成完整的令牌集。 */
+export declare function systemVars(): string;
+/** 一段可直接塞进 `<style>` 的基础样式：令牌 + 排版重置。 */
+export declare function baseline(s: Scheme): string;
+/**
+ * 通用组件样式。各插件按需挑用，命名统一为 `m3-` 前缀。
+ *
+ * Expressive 的取向体现在三处：圆角整体偏大且同一张图里刻意拉开层次、
+ * 强调元素用高彩度的容器色而不是描边、以及成组元素之间用间距而不是分隔线来断句。
+ */
+/** 金银铜。色调依次 58 / 66 / 48，深浅本身就排出了名次。 */
+export declare const MEDAL: {
+    readonly gold: string;
+    readonly silver: string;
+    readonly bronze: string;
+};
+export declare function components(): string;
+/**
+ * 浏览器端的配色小库，序列化进页面脚本用。
+ *
+ * 有些图是在页面里用 canvas 画的，那边拿不到这个模块。与其在客户端另写一套
+ * HSL 近似，不如把同一套 LCh 运算原样送过去——服务端与浏览器端算出来的颜色
+ * 必须一致，否则「同一支色相」的承诺在两边会对不上。
+ *
+ * 暴露的接口与本模块同名：`M3.lch` / `M3.lchOf` / `M3.harmonize`。
+ */
+export declare function clientColorScript(): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "koishi-plugin-cchess",
   "description": "Koishi 的中国象棋插件。",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "files": [