示例图的技术文档

简介

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

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

添加新图

在想要添加新图的 Markdown 页面旁的同名子文件夹下创建一个新的 YAML 文件。（可以基于现有的 YAML 文件进行修改。）
在的 Markdown 页面中，将其作为 React 组件导入文件顶部，如下所示：

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

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

<NewChopMove />

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

开发

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

通用原则

创建或修改图片时应遵守一些通用的原则，最好从复制或者修改已有图片开始。

Examples should normally use 5 stacks and 3 players. Include more only if needed.
Stacks can be skipped if they are not at all important to the scenario.
Only include card identities that are relevant to the scenario. The less details, the clearer and more general.
- Identify cards with the type: attribute.
  - Make sure to use border: false if they haven't been touched by a clue.
  - Cards that have been touched by a clue are partially identified. (For example type: 2.)
  - Additionally, if a note has been written, put it in the middleNote attribute.
  - Use multiple types sparingly, and only when relevant to the variant (i.e. rainbow/pink).
- Usually do not identify cards in the clue giver's or clue receiver's hand.
  - Cards that are seen by only some players should have their identities above the card. (For instance: above: Red 2.)
If a clue is given, always include who gives it using the clueGiver: true attribute.
- The clue giver is usually Alice.
- Make sure to include all touched cards with the clue: X attribute.
- Morph touched cards like the game UI would do, using type: X attribute.
- Indicate the focus of the clue with a gold message below the card. (For example below: Play or below: Stall.)
- Retouched cards must have retouched: true to make the arrow grey.
- Almost always indicate what the receiving player would write on the card using the middleNote attribute.
  - Use shorthand notation, and include all possibilities:
    - Fully identified: b2
    - Partially identified: b23, ryg2
    - Chop moved: cm. Additionally chop moved cards should have cm: true to draw a white border.
    - Known trash: kt. Additionally, known trash should have trash: true to draw a trash can.
- Other cards whose identities are inferred from the given clue should have a black message below the card. (For example below: Finesse.)
  - It is not necessary to write notes on those cards, as they will usually blind play right away.
  - Do write their actual identities using above:, as those are known by the clue giver.
Illegal clues and/or misplays should clearly be marked in red color.
Mistakes or suboptimal clues should be marked in orange color.
Alternative actions (discards, plays) should be marked below: in cyan color.
- The player whose action it is should be marked with clueGiver: true.
Other information about cards should be marked below:.

每个例子都不一样，这些是通用原则，运用你的判断力。

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 或 space 而不是 cards。其中 text 用于描述游戏中发生的事情，而 space 用于增加一些垂直间距。

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
  - name: 间距：
    cards:
      - type: x
      - type: x
      - type: x
  - space: 5
  - name: 小
    cards:
      - type: x
      - type: x
      - type: x
  - space
  - name: 默认
    cards:
      - type: x
      - type: x
      - type: x
  - space: 100
  - name: 大
    cards:
      - type: x
      - type: x
      - type: x

另外，players 也可以包含 offset，用来滚动玩家名称。

stacks:
  - r: 0
  - b: 5
  - m: 3
players:
  - cards:
      - type: x
      - type: x
      - type: x
  - cards:
      - type: x
      - type: x
      - type: x
        clue: r
  - text: Bob 重新审视自己的手牌
  - offset: -1
    cards:
      - type: x
      - type: x
      - type: r2

手牌

手牌可以有多种类型：

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

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

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

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

cm 属性可用于在牌周围绘制白色边框。

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

fix 属性可用于在牌上绘制扳手图标。

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
        middleNote: cm
        cm: true
  - 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
        fix: true

提示

你可以用 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
        above:
          text:
            - 多
            - 行
        below: 焦点
      - type: x
        above: 彩 4
        below: 弃牌位
  - cards:
      - type: x
        above:
          text:
            - Foo
            - Bar
          color: rainbow
      - type: x
        above:
          text: Foo
          color: indigo
        below: 坏
      - type: x
        above: 出牌

有些所写会展开为更长的文本：

stacks:
  - r: 1
  - b: 1
  - m: 1
players:
  - cards:
      - type: r
        below: cm
      - type: 4
        clue: 4
        below: op
      - type: 4
        clue: 4
        below: sp

弃牌堆

某些示例需要显示弃牌堆中的一些牌。这是通过顶层的 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 文件详细格式

手牌

提示

牌上的文本

弃牌堆

大文本

变体