@yamat47/playmaker 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  # @yamat47/playmaker
2
2
 
3
- アメリカンフットボールのプレー図を作成・表示する、UI フレームワーク非依存の TypeScript ライブラリ。
4
- コンテナ要素に図を描き、編集 UI を置き、編集のたびに `PlayData` を渡す。永続化や共有は持たない。
3
+ A UI-framework-agnostic TypeScript library for creating and displaying American football play diagrams.
4
+ It draws the diagram in a container element, places the editing UI, and delivers `PlayData` on every edit. It does not persist or share anything.
5
5
 
6
- - デモ: https://playmaker-demo.yamat47.me/
7
- - ソースと詳しい使い方: https://github.com/yamat47/playmaker
6
+ - Demo: https://playmaker-demo.yamat47.me/
7
+ - Source and detailed usage: https://github.com/yamat47/playmaker
8
8
 
9
- ## インストール
9
+ ## Installation
10
10
 
11
11
  ```sh
12
12
  npm install @yamat47/playmaker
@@ -17,14 +17,15 @@ import { Playmaker, type PlayData } from "@yamat47/playmaker";
17
17
  import "@yamat47/playmaker/styles.css";
18
18
 
19
19
  const playmaker = new Playmaker(document.getElementById("play")!, {
20
- mode: "edit", // "edit"(既定・編集 UI あり)/ "view"(読み取り専用)
21
- initialData: saved, // 永続化しておいた PlayData(省略可)
20
+ mode: "edit", // "edit" (default, with editing UI) / "view" (read-only)
21
+ locale: "en", // language of the editing UI: "en" (default) / "ja"
22
+ initialData: saved, // a persisted PlayData (optional)
22
23
  onChange: (data: PlayData) => save(JSON.stringify(data)),
23
24
  });
24
25
  ```
25
26
 
26
- バンドラを通さず、CDN から読むこともできる。依存は無く、フォントは JS に同梱してある。
27
- URL の `0.1.0` は使う版に置き換える。
27
+ You can also load it from a CDN without a bundler. It has no dependencies, and the fonts are bundled into the JS.
28
+ Replace `0.1.0` in the URL with the version you use.
28
29
 
29
30
  ```html
30
31
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yamat47/playmaker@0.1.0/dist/playmaker.css" />
@@ -35,18 +36,18 @@ URL の `0.1.0` は使う版に置き換える。
35
36
  </script>
36
37
  ```
37
38
 
38
- モダンブラウザと PC のマウス操作を想定する。
39
+ It assumes modern browsers and mouse input on a PC.
39
40
 
40
- ## できること
41
+ ## What it does
41
42
 
42
- - 選手(丸・四角)とラベル、ルート・ブロック・モーションの線を置き、ドラッグで動かす
43
- - 位置は 0.5 ヤードの格子に揃う
44
- - 同梱のフォーメーションとプレーのプリセットを読み込む(`FORMATION_PRESETS`、`PLAY_PRESETS`)
45
- - 編集 UI を含まない PNG を書き出す(`exportToPng`)
46
- - 色とフォントは CSS 変数(`--playmaker-*`)でホストに合わせる
43
+ - Place players (circles and squares) with labels, and route, block, and motion lines, and move them by dragging
44
+ - Positions snap to a 0.5-yard grid
45
+ - Load the bundled formation and play presets (`FORMATION_PRESETS`, `PLAY_PRESETS`)
46
+ - Export a PNG without the editing UI (`exportToPng`)
47
+ - Match the colors and fonts to the host with CSS variables (`--playmaker-*`)
47
48
 
48
- 公開 API の一覧、`PlayData` の形、テーマの変数は、リポジトリの README にある。
49
+ The list of the public API, the shape of `PlayData`, and the theme variables are in the repository README.
49
50
 
50
- ## ライセンス
51
+ ## License
51
52
 
52
53
  MIT
@@ -1,41 +1,43 @@
1
1
  /**
2
- * 今の PlayData のスキーマの版。スキーマを変えるときは 1 上げ、`PLAY_DATA_MIGRATIONS` に
3
- * 1 つ前の版から変換する段を足す。
2
+ * Current version of the PlayData schema. When the schema changes, raise it by 1 and add a step
3
+ * to `PLAY_DATA_MIGRATIONS` that converts from the previous version.
4
4
  */
5
5
  export declare const CURRENT_PLAY_DATA_VERSION: 2;
6
6
 
7
- /** リスナを登録し、購読をやめるための IDisposable を返す。 */
7
+ /** Registers a listener and returns an IDisposable that ends the subscription. */
8
8
  declare type Event_2<T> = (listener: (e: T) => void) => IDisposable;
9
9
  export { Event_2 as Event }
10
10
 
11
11
  /**
12
- * サイドラインの間の幅。規定は 160 フィート(53⅓ ヤード)だが、中央(26.5)が
13
- * 0.5 ヤードの格子点に乗るように 53 ヤードへ丸める。本物の寸法との差は 1 フィートで、
14
- * 図の見た目には出ない。
12
+ * Width between the sidelines. The rule says 160 feet (53⅓ yards), but it is rounded to 53 yards
13
+ * so that the center (26.5) lands on a 0.5 yard grid point. The difference from the real
14
+ * dimension is 1 foot, which does not show in the diagram.
15
15
  */
16
16
  export declare const FIELD_WIDTH_YARDS = 53;
17
17
 
18
+ /** English names of the zones. The `en` dictionary uses them; other locales carry their own. */
18
19
  export declare const FIELD_ZONE_LABELS: {
19
- readonly "own-redzone": "自陣RZ";
20
- readonly middle: "中央";
21
- readonly redzone: "相手RZ";
20
+ readonly "own-redzone": "Own red zone";
21
+ readonly middle: "Midfield";
22
+ readonly redzone: "Red zone";
22
23
  };
23
24
 
24
25
  /**
25
- * フィールドのどの範囲を映すか。
26
- * - `middle`: センター付近
27
- * - `redzone`: 相手のゴール側
28
- * - `own-redzone`: 自陣のゴール側
26
+ * Which part of the field is shown.
27
+ * - `middle`: around midfield
28
+ * - `redzone`: the opponent's goal side
29
+ * - `own-redzone`: the own goal side
29
30
  */
30
31
  export declare const FIELD_ZONE_VALUES: readonly ["own-redzone", "middle", "redzone"];
31
32
 
32
33
  /**
33
- * フィールド上の位置(ヤード)。縦は LOS(`field.losYard`)からの距離で持つので、
34
- * ゾーンを切り替えて LOS が動いても、図は形を保ったまま一緒に動く。
35
- * - lateralYard: 0 = 左サイドライン … FIELD_WIDTH_YARDS = 右サイドライン
36
- * - downfieldYard: 0 = LOS。正が攻撃方向(画面の上)、負がバックフィールド
34
+ * Position on the field (in yards). The vertical value is the distance from the LOS
35
+ * (`field.losYard`), so when switching zones moves the LOS, the diagram keeps its shape and
36
+ * moves along with it.
37
+ * - lateralYard: 0 = left sideline ... FIELD_WIDTH_YARDS = right sideline
38
+ * - downfieldYard: 0 = LOS. Positive is the offense direction (screen top), negative the backfield
37
39
  *
38
- * どちらも GRID_STEP_YARDS の倍数で、モデルの中に格子の外の位置は無い。
40
+ * Both are multiples of GRID_STEP_YARDS; the model holds no position off the grid.
39
41
  */
40
42
  export declare interface FieldPosition {
41
43
  readonly lateralYard: number;
@@ -45,29 +47,33 @@ export declare interface FieldPosition {
45
47
  export declare interface FieldState {
46
48
  readonly zone: FieldZone;
47
49
  /**
48
- * LOS の絶対ヤード。今はゾーンから決まり、読み込んだデータの値は使わない。
49
- * 保存するデータから選手の絶対位置を復元できるよう、値としては持たせる。
50
+ * Absolute yard of the LOS. For now it is derived from the zone, and the loaded value is not
51
+ * used. It is kept as a value so the absolute player positions can be recovered from saved data.
50
52
  */
51
53
  readonly losYard: number;
52
54
  }
53
55
 
54
56
  export declare type FieldZone = (typeof FIELD_ZONE_VALUES)[number];
55
57
 
56
- /** 読み込むと、players を今の図に足す。プリセットのほかに、利用者が作った隊形も渡せる。 */
58
+ /**
59
+ * Loading adds players to the current diagram. Besides the presets, a formation built by the
60
+ * consumer can be passed as well.
61
+ */
57
62
  export declare interface Formation {
58
63
  readonly id: string;
59
64
  readonly name: string;
60
- /** 読み込んだときの選手の配置には影響しない。 */
65
+ /** Does not affect where the players are placed when loaded. */
61
66
  readonly side: TeamSide;
62
- /** 1 人以上。 */
67
+ /** At least one player. */
63
68
  readonly players: readonly FormationPlayer[];
64
69
  }
65
70
 
66
71
  export declare const FORMATION_PRESETS: readonly Formation[];
67
72
 
68
73
  /**
69
- * 隊形の 1 人。`id` は持たず、読み込むたびに振る。同じ隊形を 2 回読んでも、
70
- * 図にいる選手とも Undo で戻る選手とも id がぶつからない。
74
+ * One player of a formation. It has no `id`; one is assigned on every load. Even when the same
75
+ * formation is loaded twice, ids collide neither with players in the diagram nor with players
76
+ * that Undo brings back.
71
77
  */
72
78
  export declare type FormationPlayer = Omit<Player, "id">;
73
79
 
@@ -76,8 +82,9 @@ export declare function getFormationPreset(id: string): Formation | undefined;
76
82
  export declare function getPlayPreset(id: string): PlayPreset | undefined;
77
83
 
78
84
  /**
79
- * 位置を置ける格子の刻み(ヤード)。横はサイドライン、縦は LOS を原点にする。
80
- * 図の中の位置はすべてこの格子点にあるので、要素同士を揃える操作が無くても縦横が揃う。
85
+ * Step of the grid (in yards) that positions can be placed on. The origin is the sideline
86
+ * laterally and the LOS vertically. Every position in the diagram sits on a grid point, so
87
+ * elements line up vertically and horizontally without an explicit align operation.
81
88
  */
82
89
  export declare const GRID_STEP_YARDS = 0.5;
83
90
 
@@ -87,44 +94,45 @@ export declare interface IDisposable {
87
94
 
88
95
  export declare interface ImageExportOptions {
89
96
  /**
90
- * PNG の幅(px)。高さはゾーンの窓の縦横比から決める。
91
- * 未指定、有限でない値、1 未満は 1600 にし、4096 を超える幅は 4096 に切り詰める。
97
+ * The PNG width (px). The height is derived from the aspect ratio of the zone's window.
98
+ * Unspecified, non-finite, or below 1 becomes 1600; a width above 4096 is clamped to 4096.
92
99
  */
93
100
  width?: number | undefined;
94
101
  }
95
102
 
96
103
  /**
97
- * 1 本の線。起点は座標ではなく選手の id で持つので、選手を動かすと線の起点も付いてくる。
98
- * `color` と `thickness` を省くと、テーマの色と種別ごとの既定の太さで描く。
104
+ * A single line. The start is held as a player id rather than coordinates, so moving the player
105
+ * carries the line's start along. Omitting `color` and `thickness` draws with the theme color
106
+ * and the default width of the kind.
99
107
  */
100
108
  export declare interface Line {
101
109
  readonly id: string;
102
110
  readonly kind: LineKind;
103
- /** 起点となる選手の id。実在しない参照は復元時に除外される。 */
111
+ /** Id of the player at the start. A reference to a missing player is dropped on restore. */
104
112
  readonly startPlayerId: string;
105
- /** 起点と終点の間の中継点(0 個可)。 */
113
+ /** Intermediate points between the start and the end (may be empty). */
106
114
  readonly waypoints: readonly FieldPosition[];
107
- /** 終点(ヤード空間)。 */
115
+ /** End point (in yard space). */
108
116
  readonly end: FieldPosition;
109
117
  readonly interpolation: LineInterpolation;
110
- /** CSS の色の文字列。 */
118
+ /** A CSS color string. */
111
119
  readonly color?: string;
112
- /** 種別ごとの既定の太さに対する倍率。省くと DEFAULT_LINE_THICKNESS。 */
120
+ /** Multiplier on the default width of the kind. DEFAULT_LINE_THICKNESS when omitted. */
113
121
  readonly thickness?: number;
114
122
  }
115
123
 
116
124
  /**
117
- * 線の補間方法。どの種別の線にも効く。
118
- * - `straight`: 制御点を直線で結ぶ
119
- * - `bezier`: 制御点をすべて通る滑らかな曲線で結ぶ
125
+ * Interpolation of a line. Applies to every kind of line.
126
+ * - `straight`: joins the control points with straight segments
127
+ * - `bezier`: joins the control points with a smooth curve that passes through all of them
120
128
  */
121
129
  declare const LINE_INTERPOLATION_VALUES: readonly ["straight", "bezier"];
122
130
 
123
131
  /**
124
- * 線の種別。色ではなく終点の記法と線種で見分ける。
125
- * - `route`: レシーバーやランナーの走路。終点に矢印を描く
126
- * - `block`: ブロックの割り当て。route と同じ太さで、終点に T 字のバーを描く
127
- * - `motion`: スナップ前の選手の移動。破線で、終点に矢印を描く
132
+ * Kind of a line. Kinds are told apart by the end marker and the stroke style, not by color.
133
+ * - `route`: the path of a receiver or runner. Drawn with an arrow at the end
134
+ * - `block`: a blocking assignment. Same width as route, with a T bar at the end
135
+ * - `motion`: a player's movement before the snap. Dashed, with an arrow at the end
128
136
  */
129
137
  declare const LINE_KIND_VALUES: readonly ["route", "block", "motion"];
130
138
 
@@ -133,33 +141,34 @@ export declare type LineInterpolation = (typeof LINE_INTERPOLATION_VALUES)[numbe
133
141
  export declare type LineKind = (typeof LINE_KIND_VALUES)[number];
134
142
 
135
143
  /**
136
- * どの版で保存したデータでも、今の版の PlayData にする。壊れたデータを渡しても投げない。
137
- * 返り値は新しいオブジェクトで、入力と参照を共有しない。
138
- * 選手、線、waypoint は MAX_PLAYERS、MAX_LINES、MAX_WAYPOINTS_PER_LINE の個数までしか読まない。
144
+ * Turns data saved by any version into a PlayData of the current version. Does not throw on
145
+ * broken data. The return value is a new object that shares no references with the input.
146
+ * Players, lines, and waypoints are read only up to MAX_PLAYERS, MAX_LINES, and
147
+ * MAX_WAYPOINTS_PER_LINE.
139
148
  */
140
149
  export declare function migratePlayData(raw: unknown): PlayData;
141
150
 
142
151
  export declare const PLAY_PRESETS: readonly PlayPreset[];
143
152
 
144
- /** プレーの種類。色は持たず、一覧でどう見せるかは使う側が決める。 */
153
+ /** The kind of play. It carries no color; how it appears in a list is up to the consumer. */
145
154
  export declare type PlayCategory = "run-zone" | "run-gap" | "pass-quick" | "pass-dropback" | "pass-deep" | "pa" | "rpo" | "coverage" | "pressure";
146
155
 
147
156
  /**
148
- * プレー図のデータ。保存したものを `restorePlayData` に渡すと、古い版や版の無いもの、
149
- * 新しい版のものも今の版に寄せて読む。
157
+ * Data of a play diagram. Passing saved data to `restorePlayData` loads it coerced to the
158
+ * current version, whether it is an older version, has no version, or is a newer version.
150
159
  */
151
160
  export declare interface PlayData {
152
161
  readonly version: typeof CURRENT_PLAY_DATA_VERSION;
153
162
  readonly field: FieldState;
154
- /** 後の要素ほど上に重ねて描く。 */
163
+ /** Later elements are drawn on top. */
155
164
  readonly players: readonly Player[];
156
- /** 後の要素ほど上に重ねて描く。 */
165
+ /** Later elements are drawn on top. */
157
166
  readonly lines: readonly Line[];
158
167
  }
159
168
 
160
169
  /**
161
- * 型付きで組み立てて読み込む図。LOS の位置は読み込むときにゾーンから決め直すので、
162
- * `field.losYard` は省略できる。
170
+ * A diagram built with types and loaded. The LOS position is derived again from the zone on
171
+ * load, so `field.losYard` can be omitted.
163
172
  */
164
173
  export declare interface PlayDataInput extends Omit<PlayData, "field"> {
165
174
  readonly field: Omit<FieldState, "losYard"> & {
@@ -168,8 +177,8 @@ export declare interface PlayDataInput extends Omit<PlayData, "field"> {
168
177
  }
169
178
 
170
179
  /**
171
- * 1 人の選手。`color` は CSS の色の文字列で、省くとテーマの色で描く。
172
- * `fill` を省くと DEFAULT_PLAYER_FILL で描く。
180
+ * A single player. `color` is a CSS color string; when omitted, the theme color is used.
181
+ * When `fill` is omitted, DEFAULT_PLAYER_FILL is used.
173
182
  */
174
183
  export declare interface Player {
175
184
  readonly id: string;
@@ -181,14 +190,15 @@ export declare interface Player {
181
190
  }
182
191
 
183
192
  /**
184
- * 選手マーカーの塗り。枠線だけ(`outline`)か、色で塗りつぶす(`solid`)か。
185
- * 形状とは独立に持ち、攻守や役割の見分けに使う。パネルはこの順にスウォッチを並べる。
193
+ * Fill of a player marker: outline only (`outline`) or filled with the color (`solid`).
194
+ * Held independently of the shape, it tells offense and defense or roles apart. The panel lists
195
+ * its swatches in this order.
186
196
  */
187
197
  declare const PLAYER_FILL_VALUES: readonly ["outline", "solid"];
188
198
 
189
199
  /**
190
- * 選手マーカーの形状。種類が多いと図が散らかるので、丸と四角の 2 種だけにする。
191
- * どちらも外接円を当たり判定にできるので、hit-test は形状で分けない。
200
+ * Shape of a player marker. Many shapes would clutter the diagram, so only circle and square.
201
+ * Both can use the circumscribed circle as the hit area, so the hit test does not branch on shape.
192
202
  */
193
203
  declare const PLAYER_SHAPE_VALUES: readonly ["circle", "square"];
194
204
 
@@ -197,19 +207,19 @@ export declare type PlayerFill = (typeof PLAYER_FILL_VALUES)[number];
197
207
  export declare type PlayerShape = (typeof PLAYER_SHAPE_VALUES)[number];
198
208
 
199
209
  /**
200
- * container の中にプレー図を描き、edit モードでは編集 UI も置く。
201
- * dispose すると、置いた要素をすべて取り除く。
202
- * dispose したあとの変更は例外を投げずに何もせず、開発時だけ console.warn で知らせる。
203
- * getPlayData と fieldZone は、dispose した時点の図を返す。
210
+ * Draws the play diagram inside container and, in edit mode, also places the editing UI.
211
+ * dispose removes every element it placed.
212
+ * Changes after dispose do nothing instead of throwing; in development, console.warn reports it.
213
+ * getPlayData and fieldZone return the diagram as it was at dispose.
204
214
  */
205
215
  export declare class Playmaker implements IDisposable {
206
216
  /**
207
- * 編集コマンドと Undo / Redo の確定ごとに 1 回、最新の図の深いコピーを渡す。
208
- * `version` は常に現行なので、受け取った値をそのまま永続化できる。
209
- * 構築時、`setPlayData` と `restorePlayData` での読み込み、PNG の書き出しでは発火しない
210
- * (読み込みは編集ではないため)。
211
- * コピーはリスナごとに作るので、受け手が書き換えても、この図とほかのリスナには波及しない。
212
- * 返り値を dispose すると購読をやめる。
217
+ * Fires once per committed edit command or Undo / Redo, with a deep copy of the latest diagram.
218
+ * `version` is always the current one, so the received value can be persisted as is.
219
+ * Does not fire at construction, on loads through `setPlayData` and `restorePlayData`, or on PNG
220
+ * export (a load is not an edit).
221
+ * The copy is made per listener, so mutating it affects neither this diagram nor other listeners.
222
+ * Disposing the return value ends the subscription.
213
223
  */
214
224
  readonly onDidChange: Event_2<PlayData>;
215
225
  private readonly store;
@@ -217,98 +227,120 @@ export declare class Playmaker implements IDisposable {
217
227
  private readonly surface;
218
228
  private readonly session;
219
229
  private currentMode;
230
+ private readonly messages;
220
231
  private panel;
221
232
  private ui;
222
233
  constructor(container: HTMLElement, options?: PlaymakerOptions);
223
234
  get mode(): PlaymakerMode;
224
235
  /**
225
- * モードを切り替える。図と Undo の履歴は残し、編集 UI とポインタ、キーの入力だけを付け外しする。
226
- * view にすると、ドラッグや作図の途中の操作は取り消し、選択の強調も描かない。
236
+ * Switches the mode. The diagram and Undo history stay; only the editing UI and the pointer and
237
+ * key input are attached or detached. View cancels a drag or drawing in progress and draws no
238
+ * selection highlight.
227
239
  */
228
240
  setMode(mode: PlaymakerMode): void;
229
241
  get fieldZone(): FieldZone;
230
242
  /**
231
- * LOS をそのゾーンの既定の位置へ移し、選手と線も一緒に動かす。
232
- * 編集なので Undo と onDidChange の対象になる。view モードでも呼べる。
243
+ * Moves the LOS to the default position of that zone, and moves the players and lines with it.
244
+ * This is an edit, so Undo and onDidChange cover it. Callable in view mode as well.
233
245
  */
234
246
  setFieldZone(zone: FieldZone): void;
235
247
  /**
236
- * 隊形の選手を今の図に追記し、置いたら true を返す。攻守の隊形を順に重ねられる。
237
- * 選手の位置は LOS からの相対(`lateralYard` と `downfieldYard`)で書く。
238
- * 外から渡した隊形は正規化してから読むので、位置の読めない選手は捨てる。
239
- * 置ける選手が 1 人もいないときと、置くと選手が 64 人を超えるときは、1 人も置かずに false を返す。
240
- * 編集なので Undo と onDidChange の対象になる。view モードでも呼べる。
248
+ * Appends the formation's players to the current diagram and returns true once placed. Offense
249
+ * and defense formations can be layered in turn. Player positions are relative to the LOS
250
+ * (`lateralYard` and `downfieldYard`). A formation passed from outside is normalized before it is
251
+ * read, so players whose position cannot be read are dropped. When no player can be placed, or
252
+ * placing them would exceed 64 players, places none and returns false.
253
+ * This is an edit, so Undo and onDidChange cover it. Callable in view mode as well.
241
254
  */
242
255
  loadFormation(formation: Formation): boolean;
243
256
  /**
244
- * 型付きで組み立てた図を読み込み、今の図と置き換える。`getPlayData` の戻り値や、
245
- * プリセットの `data` もそのまま渡せる。
246
- * 型に合っていても、重複した id と件数の上限を超えた分は `restorePlayData` と同じく正規化する。
247
- * 読み込みは編集ではないので、Undo の履歴は消え、onDidChange は発火しない。
257
+ * Loads a diagram built with the types and replaces the current one. The return value of
258
+ * `getPlayData` and a preset's `data` can be passed as is.
259
+ * Even when the input matches the types, duplicate ids and entries past the count limits are
260
+ * normalized as in `restorePlayData`.
261
+ * A load is not an edit, so the Undo history is cleared and onDidChange does not fire.
248
262
  */
249
263
  setPlayData(data: PlayDataInput): void;
250
264
  /**
251
- * 永続化しておいた値を、形を確かめずに受け取って読み込み、今の図と置き換える。
252
- * 旧版、版の無いもの、未来版、壊れたデータも、例外を投げずに今のスキーマへ寄せ、読めない要素だけを捨てる。
253
- * 選手 64 人、線 128 本、線 1 本あたり waypoint 32 個を超える分は、先頭から上限までを残して捨てる。
254
- * 読み込みは編集ではないので、Undo の履歴は消え、onDidChange は発火しない。
265
+ * Accepts a persisted value unchecked, loads it, and replaces the current diagram.
266
+ * Old versions, unversioned values, future versions, and broken data are coerced to the current
267
+ * schema without throwing; only the elements that cannot be read are dropped.
268
+ * Anything past 64 players, 128 lines, or 32 waypoints per line is dropped, keeping the first
269
+ * entries up to the limit.
270
+ * A load is not an edit, so the Undo history is cleared and onDidChange does not fire.
255
271
  */
256
272
  restorePlayData(raw: unknown): void;
257
273
  /**
258
- * 今の図の深いコピー。`version` は常に現行で、そのまま JSON にして永続化できる。
259
- * `restorePlayData` か `initialData` に戻すと、同じ図になる。
260
- * 編集でも件数の上限は超えられず、上限に達すると選手の追加、フォーメーションの読み込み、作図は何もしない。
274
+ * A deep copy of the current diagram. `version` is always the current one, so it can be turned
275
+ * into JSON and persisted as is. Passing it back through `restorePlayData` or `initialData`
276
+ * yields the same diagram. Edits cannot exceed the count limits either: at a limit, adding a
277
+ * player, loading a formation, and drawing a line do nothing.
261
278
  */
262
279
  getPlayData(): PlayData;
263
280
  /**
264
- * 呼んだ時点で確定しているプレー図を PNG 画像(Blob)として書き出す。
265
- * 選択の強調、waypoint のハンドル、ドラッグや作図の途中の形、ツールバーとパネルは入らない。
266
- * view と edit のどちらのモードでも使える。
267
- * 同梱フォントを読み込み終えてから描くので、構築の直後に呼んでもヤードの数字と選手のラベルは同梱フォントになる。
268
- * フォントを読み込めなかったときは代わりのフォントで描く。
269
- * canvas を確保できないとき、PNG に変換できないとき、dispose したあとは、例外を投げずに reject する。
281
+ * Exports the play diagram as committed at the time of the call as a PNG image (Blob).
282
+ * The selection highlight, waypoint handles, the shape of a drag or drawing in progress, and the
283
+ * toolbar and panel are not included. Usable in both view and edit mode.
284
+ * Draws after the bundled font has finished loading, so even a call right after construction
285
+ * renders the yard numbers and player labels in the bundled font. If the font fails to load,
286
+ * draws with a fallback font. Rejects without throwing when a canvas cannot be obtained, the
287
+ * PNG conversion fails, or the Playmaker is disposed.
270
288
  */
271
289
  exportToPng(options?: ImageExportOptions): Promise<Blob>;
272
290
  /**
273
- * 図とパネルの色を、テーマの CSS 変数から読み直す。CSS 変数を変えてもブラウザは知らせてこないので、
274
- * ホストが祖先の要素で変数を変えたあとに呼ぶ。
291
+ * Re-reads the colors of the diagram and the panel from the theme CSS variables. The browser does
292
+ * not report CSS variable changes, so the host calls this after changing them on an ancestor.
275
293
  */
276
294
  refresh(): void;
277
295
  dispose(): void;
278
- /** dispose したあとの呼び出しは何もしないので、開発時だけそのことを知らせる。 */
296
+ /** Calls after dispose do nothing, so report that in development only. */
279
297
  private warnIgnoredAfterDispose;
280
298
  private replaceUi;
281
299
  private createUi;
282
300
  private draw;
283
- /** view モードでは undefined を返し、格子や選択の強調のような編集中だけの層を描かせない。 */
301
+ /** Undefined in view mode, so edit-only layers (the grid, selection highlight) are not drawn. */
284
302
  private surfaceOverlay;
285
303
  }
286
304
 
305
+ /** Languages the built-in UI ships. The host picks one at construction. */
306
+ export declare const PLAYMAKER_LOCALE_VALUES: readonly ["en", "ja"];
307
+
308
+ export declare type PlaymakerLocale = (typeof PLAYMAKER_LOCALE_VALUES)[number];
309
+
287
310
  export declare type PlaymakerMode = "view" | "edit";
288
311
 
289
312
  export declare interface PlaymakerOptions {
290
313
  /**
291
- * 最初のモード。既定は "edit"。"view" は編集 UI を置かず、ポインタとキーの操作も受けない。
292
- * あとから `setMode` で切り替えられる。
314
+ * The initial mode. The default is "edit". "view" places no editing UI and accepts no pointer
315
+ * or keyboard input. `setMode` switches the mode later.
293
316
  */
294
317
  mode?: PlaymakerMode | undefined;
295
- /** 最初に表示する図。`restorePlayData` と同じく、形を確かめずに受け取って今のスキーマへ寄せる。 */
318
+ /**
319
+ * The first diagram to show. Like `restorePlayData`, it is accepted without checking its shape
320
+ * and coerced to the current schema.
321
+ */
296
322
  initialData?: unknown;
297
- /** 構築時に `onDidChange` へ登録するリスナ。解除するには Playmaker を dispose する。 */
323
+ /** A listener added to `onDidChange` at construction. Dispose the Playmaker to remove it. */
298
324
  onChange?: ((data: PlayData) => void) | undefined;
325
+ /**
326
+ * Language of the built-in UI (the toolbar and the property panel). The default is "en".
327
+ * Fixed at construction; to switch, construct again with the same data.
328
+ * Error messages are English regardless of the locale, because they are for developers.
329
+ */
330
+ locale?: PlaymakerLocale | undefined;
299
331
  }
300
332
 
301
- /** 線まで描き込んだプレー図に、一覧に出すための情報を添えたもの。 */
333
+ /** A play diagram drawn down to the lines, with the information needed to show it in a list. */
302
334
  export declare interface PlayPreset {
303
335
  readonly id: string;
304
336
  readonly name: string;
305
337
  readonly side: TeamSide;
306
338
  readonly category: PlayCategory;
307
- /** パーソネルか隊形の短い注記(例: "11 pers"、"Nickel")。 */
339
+ /** A short note on the personnel or formation (for example "11 pers" or "Nickel"). */
308
340
  readonly personnel: string;
309
- /** コンセプトの 1 行の説明。 */
341
+ /** A one-line description of the concept. */
310
342
  readonly summary: string;
311
- /** そのまま setPlayData に渡せる。 */
343
+ /** Can be passed to setPlayData as is. */
312
344
  readonly data: PlayData;
313
345
  }
314
346