Hairline: 図形を作成する
あなたはHairlineスタイルの図形を1つ作成します。等角投影の線画であり、単一のストロークで構成される丸みを帯びた立体から成り、ポインタに応答します。これは単一のHTMLファイルとして提供され、インストールは不要です。@lucasmarkes/hairlineの6つの図形が基準であり、examples/terrain.jsとexamples/riffle.jsはそのうちの2つで、あなたが記述する形式のものです。
あなたが記述するのは図形（figure）だけです。エンジン（kernel.js）とページ（bench.html）は固定されており、それらを編集したり、変更したコピーを貼り付けたり、カーネルが既に提供しているものを再度記述したりしないでください。
以下に記載するすべてのファイルはこのスキルのフォルダ内にあります。図形とページはユーザーの作業ディレクトリに記述されます。build.mjs、validate.mjs、look.mjsはこのフォルダ内のパスを使用して、そのディレクトリから実行してください。
0. ソース
リクエストに.svgファイルが添付されている場合のみ実行します。node read.mjs <file.svg>を実行すると、SVGを画像と測定結果のカードとして作業ディレクトリに書き出します。その後、source.mdを読み、その質問に答えてください。オブジェクトとそのパーツはこれで固定されます。ステップ1のすべての概念はこれらを保持します。
1. 概念
concepts.mdを読んでください。これには空の状態のセクションと、マークから描画された図形のセクションがあります。その後、2つまたは3つの概念を、それぞれ1行で提案します。
名前. オブジェクト。ポインタがそれに対して行う動作。読み出し表示の内容。ツアーが停止する場所。
ユーザーに選択してもらうのを待ちます。このステップは、ユーザーがオブジェクトとジェスチャーを既に選択して到着した場合のみスキップします。誰も尋ねる相手がいない場合は、最も強いレストポーズを持つ概念を採用し、その旨を伝えてください。
ソース（ステップ0）がある場合、すべての概念はオブジェクトとそのパーツを保持します。概念はジェスチャーにおいて、またはジェスチャーがリクエストに含まれていた場合は形状と読み出し表示において異なります。
1つの図形には1つのアイデア。理解するためにラベルが必要な概念は、まだ概念ではありません。
2. ビルド
rules.mdを読んでください。10のルールはアドバイスではありません。ルールを破った図形は完成していません。kernel.jsの先頭にあるインデックス（ハッシュ行の下のコメントからvar HLまで）を読んでください。そこには呼び出し可能なすべてのものがリストされています。その下のコードは読まないでください。- あなたの概念に近い方の例を読んでください。連続的なフィールドには
examples/terrain.js、個別のアイテムにはexamples/riffle.jsを参照します。 - 図形を
<name>.jsとしてユーザーの作業ディレクトリに記述します。形式は例と同様にします。HLから必要なものを取得し、mount({ stage, svg, read }, value)を定義して{ set, destroy }を返し、ファイルの末尾をhairline({ name, means, rules, range, tour, mount })で終えます。name: 小文字、1語またはハイフン区切り。means: 図形が何を示すかを140文字以内の1文で記述します。これはステージの下の行です。rules: この図形が最も依存するルールの番号。range: スライダーが駆動する唯一の数値で、強度0、0.5、1での値です。中央の値がデフォルトであり、3つの値は一方向に動きます。mountのvalue、およびスライダーが動いたときにset(value)が受け取るvalueは、この図形独自の数値であり、range上で読み取られ、0から1の範囲ではありません。tour: ページが再生されるときに、見えないポインタが訪れる3～6つのviewBoxポイント、またはnull（未指定）。ユーザーがページに触れていない状態で、見知らぬ人が見る一周を表します。リテラルな[x, y]数値で、少なくとも1つはポイントです。図形自体が再生を開始することはありません。ページの再生ボタンとパッケージが行います。
- 組み立てます。
node build.mjs <name>.jsはhairline-<name>.htmlを書き出します。ステップ3のlook.mjsの実行ごとにも同様に書き出されます。Nodeがない場合は、bench.htmlをコピーし、kernel.jsの内容を/*KERNEL*/の場所に、あなたの図形を/*FIGURE*/の場所に配置します。ファイル操作によって行い、他は変更しないでください。
3. チェック
node look.mjs <name>.js --answer x,y,z --edge x,y,zを実行します。ソースがある場合は--source <file.svg>も追加します。ポイントはあなたの図形のワールドポイントであり、look.mdの指示に従います。これによりページがビルドされ、検証され、8つの画像が1枚のシート（hairline-<name>-look.png）にまとめられ、フレーム、読み出し表示、コンソールがチェックされます。失敗として出力されたすべての行を修正し、終了コード0が返されるまで再度実行します。look.mdを読み、次にシートを読み、その質問に答えてください。失敗したものを修正し、ステップ1に戻ります。
look.mjsはブラウザを必要とし、このフォルダの外にplaywright-coreを1回インストールします。ブラウザがない場合は、ビルドのたびにnode validate.mjs hairline-<name>.htmlでチェックし、look.mdの「ブラウザなしの場合」の指示に従ってルックを行ってください。Nodeがない場合は、validate.mjsの先頭にあるチェックリストを読み、コードから各チェックに回答してください。
バリデーターが拒否するページを引き渡さないでください。実際にルックを行っていないのにルックが完了したと言わないでください。
4. 引き渡し
可能であればhairline-<name>.htmlをアーティファクトとして公開します。できない場合は、ユーザーが開ける場所にファイルを残し、その場所を伝えてください。その後、以下の項目をそれぞれ1行で伝えます。
- メタファー：オブジェクトが何であるか、ポインタがそれに対して何を行うか。
- 依存するルール。
- ツアー：停止する場所を順番に。
- 検証できなかったこと（Nodeなし、ブラウザなしなど）を率直に。
そして、ユーザーにページで再生ボタンを押すか、?play=1を付けて開くように依頼し、一周が図形のストーリーを伝えているかどうかを尋ねてください。誰も尋ねる相手がいない場合は、ツアーは評価されなかったと伝えてください。
5. 調整
ユーザーが変更を求めた場合、<name>.jsのみを編集し、再度look.mjsを実行して新しいシートを読んでください。10番目のバージョンも最初のバージョンと同じ基準で評価されます。一周の変更はtourのみの変更です。
問題が発生した場合
| もしあなたが～しようとしているなら | 代わりにこれを行ってください |
|---|---|
| 図面にラベル、数字、文字を追加する | 幾何学で表現する（ルール10）。名前はread.textContentに記述します |
| 色、塗りつぶし、グローを使用する | 1つのストロークをsilからhiに移動する（ルール04） |
タイマー、requestAnimationFrame、CSSアニメーションを記述する | register(stage, tick)を使用し、スプリングまたはトゥイーンを使用する（ルール07および08） |
| 現在描画されているものに対してポインタをテストする | レストポーズまたはターゲットポーズに対してテストする（ルール01） |
| 12のエッジを持つボックスを描画する | 2つの丸みを帯びたリング（シルエットと1つの折り目）からなるprismを使用する（ルール09） |
| パーツを単純な丸みを帯びたブロックとして描画する | それを構成する特徴、つまり概念で名前を付けたものを与える（concepts.md） |
| レストを平坦、空、または対称のままにする（それが簡単だったため） | 構成する。レストはサムネイルである（ルール05） |
| 所有権を示すためにボックスにマークをスタンプする | マークをオブジェクトとして構築するか、省略する（concepts.md、「マークから」） |
| 動作させるためにカーネルまたはベンチを編集する | 図形が間違っています。図形を変更してください |
| ツアーですべてのパーツを順番に訪問させる | それぞれ異なる答えを示す3つの停止と、その後退場。一周は文章であり、目録ではありません |
| 2つ目のアイデアを許可する | 削除してください。1つの図形、1つのアイデアです |
| SVGからパスをトレースする、またはその座標をコピーする | カードが与える比率で立体としてパーツを構築する（source.md） |
| 装飾であるSVGの一部を保持する | 削除してください。2つまたは3つのパーツがオブジェクトを構成します |