示例图的技术文档

简介

本站中有许多展示游戏状态的示例图。本页描述了如何编辑或创建图片。

每个示例图都是用 YAML 文件生成的。YAML 是一种易于编辑的简单文本格式。

添加新图

创建一个新的 YAML 文件。（可以基于现有的 YAML 文件进行修改。）
在对应的 Markdown 页面中，将其作为 React 组件导入文件顶部，如下所示：

import NewChopMove from "./new-chop-move.yml";

在 Markdown 文件的适当位置插入 React 组件：

<NewChopMove />

参见等级 2 的 Markdown 文件作为文档应如何包含文本和图片的基本示例。

开发

使用 npm run start 在本地查看页面时，你对网站所做的任何更改都会自动更新，无需刷新页面。这包括对 YAML 文件的更改——它们将自动重新转换为 SVG 文件并在浏览器中更新。

YAML 文件格式

表示示例图的 YAML 文件主要分为两段：stacks 和 players。

stacks 是已经打出的牌的列表。默认支持的花色包括：
- r: 红色
- g: 绿色
- b: 蓝色
- y: 黄色
- p: 紫色
- m: 彩色（m 指 multicolor，多色）
players 为每位玩家包含一个条目。每个条目包含他们的手牌 cards。

stacks:
  - r: 1
  - g: 0
  - b: 3
players:
  - cards:
      - type: x
      - type: x
      - type: x
  - cards:
      - type: x
      - type: x
      - type: x

玩家会自动分配以下名称：Alice、Bob、Cathy、Donald 和 Emily。可以通过 name 属性覆盖此设置。比如 Bob 的手牌在某事件前后需要显示两次，这可能很有用。

players 也可以包含 text 而不是 cards。这用于描述游戏中发生的事情。

stacks:
  - r: 0
  - b: 5
  - m: 3
players:
  - cards:
      - type: x
      - type: x
      - type: x
  - text: 外星人将 Bob 替换成了 Zoe。
  - name: Zoe
    cards:
      - type: x
      - type: x
      - type: x

手牌

手牌可以有多种类型：

提示过且已明确的牌，例如 g2
提示过且已知花色的牌，例如 b
提示过且已知数字的牌，例如 4
提示过且有多种可能性的牌，例如 b234、rm4、ym45
未提示过且没有任何标记的牌，例如 x
未提示过但显示标记的牌，例如 xrg23

crossedOut 属性可用于在某些标记上打 X（当该牌的每一张都在其他地方可见时）。

orange 属性可用于用橙色绘制某些数字标记。这对于粉牌有用。

默认情况下，被提示的牌有橙色边框，但可以通过 border 属性覆盖。

trash 属性可用于在牌上绘制垃圾桶图标。

stacks:
  - r: 1
  - b: 1
  - m: 1
players:
  - cards:
      - type: x
      - type: xrbm125
      - type: r4
  - cards:
      - type: m
      - type: b124
      - type: 5
  - cards:
      - type: rm24
      - type: bm3
      - type: rm
  - cards:
      - type: x
        border: true
      - type: m4
        border: false
      - type: xr3
  - cards:
      - type: 134
      - type: rbm12345
        crossedOut: m35
      - type: xrbm12345
        crossedOut: r4
  - name: F
    cards:
      - type: rb2
        crossedOut: b
      - type: b345
        trash: true
        orange: 34
      - type: x

提示

你可以用 clue 属性来标出正在被提示到的牌。

默认情况下没有提示者，但可以通过 clueGiver 属性指定。

你还可以用 retouched 属性来表示提示重新触及一张牌，这会导致箭头比通常更暗。（与 Hanab Live 的行为一致。）

stacks:
  - y: 0
  - p: 0
players:
  - clueGiver: true
    cards:
      - type: p
        clue: p
      - type: x
  - cards:
      - type: x
      - type: yp5
        clue: 5
  - cards:
      - type: p1
        clue: 1
        retouched: true
      - type: x

牌上的文本

可以在牌上放置文本：

middleNote 将文本标签放在牌中间
- 如果文本是半角括号包围的五种花色之一，它会自动着色
above 在牌上方放置标注
below 在牌下方放置标注

above 和 below 具有相同的语法：

above: 绿 3 或 above: 彩 5 将绘制具有指定颜色和文本的框。
还有一些关键字分配了特定的颜色：焦点、弃牌位。
你可以使用 color 属性覆盖颜色。该属性接受 CSS 颜色，此外还支持 rainbow 表示彩色。
你可以通过使用列表使其成为多行注释。
它可以是一个此类文本框的列表，可能具有不同的颜色。

stacks:
  - r: 1
  - b: 1
  - m: 1
players:
  - cards:
      - type: 4
        middleNote: (蓝)
      - type: r
        middleNote: (2)
      - type: x
        middleNote: (CM)
        below:
          text: Bar
          color: yellow
  - cards:
      - type: x
        above: 红 1
      - type: x
        below: 焦点
      - type: x
        above: 彩 4
        below: 弃牌位
  - cards:
      - type: x
        above:
          text:
            - Foo
            - Bar
          color: rainbow
      - type: x
        above:
          text: Foo
          color: indigo
      - type: x
        above: 留牌

弃牌堆

某些示例需要显示弃牌堆中的一些牌。这是通过顶层的 discarded 列表完成的。

stacks:
  - r: 1
  - g: 1
  - b: 2
discarded:
  - r3
  - b5
players:
  - cards:
      - type: x
      - type: x
      - type: x
  - cards:
      - type: x
      - type: x
      - type: x
  - cards:
      - type: x
      - type: x
      - type: x

大文本

对于关键字“诈飞”“飞牌”和“违规！”，颜色被忽略。

stacks:
  - r: 1
  - g: 1
  - b: 1
bigText:
  text: Blah
  color: green
players:
  - cards:
      - type: x
      - type: x
      - type: x
      - type: x
  - cards:
      - type: x
      - type: x
      - type: x
      - type: x

变体

可以通过 suits 添加一些变体的花色。suits 包含一个映射，将表示花色的字母映射为牌图像和标记的文件名部分的映射。目前支持以下变体花色：

black
brown
null（需要用引号括起来，因为通常 null 是 YAML 关键字）
omni
pink
prism-rygbp
teal
white

标准花色不需要在 suits 中重复。

这样做是为了能够区分通常使用相同字母表示的花色，例如“i”同时用于 prism 和 pink。

suits:
  t: teal
  k: black
  i: pink
  w: white
  n: brown
  o: omni
  u: "null"
  s: prism-rygbp
stacks:
  - i: 1
  - w: 0
  - g: 2
  - u: 4
  - n: 5
  - t: 0
  - o: 3
  - k: 4
  - s: 2
players:
  - cards:
      - type: i4
        border: false
      - type: u2
        border: false
      - type: w4
  - cards:
      - type: i12345
      - type: xiwguntoks
      - type: iwguntoks5
  - cards:
      - type: t1
      - type: n2
      - type: o1
  - cards:
      - type: k4
      - type: s3
      - type: s12345

简介​

添加新图​

开发​

YAML 文件格式​

手牌​

提示​

牌上的文本​

弃牌堆​

大文本​

变体​

简介

添加新图

开发

YAML 文件格式

手牌

提示

牌上的文本

弃牌堆

大文本

变体