解説

カード・言語・音

カードを同じ描画モデルで描き、色に頼らずに読み、録音した音は必要になってから読み込みます。

同じ描画モデル

hitotsuCardShapesが描画の要素を返します。hitotsuCardSvgはSVG文書にし、Reactのカードも同じ形を使います。基本の大きさは100×140です。カードがnullなら裏面を描き、calledで場のワイルドの色を示します。

import { hitotsuCardShapes, hitotsuCardSvg, hitotsuWords } from "@johnmorrisdotca/hitotsu";

console.log(hitotsuWords("R70", "ja"));
console.log(hitotsuCardShapes("R70").map((shape) => shape.kind));
console.log(hitotsuCardSvg("R70", { width: 80 }).slice(0, 120));

赤の7
[
  'rect', 'rect',
  'rect', 'text',
  'text', 'text',
  'text', 'text'
]
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 140" width="80" height="112" aria-hidden="true"><rect x="0" y="

色だけに頼らない

カードには色に加えて言葉と四隅の元素があります。hitotsuWordsは英語か日本語でカードを読み、hitotsuStringsはラベルと通知を返します。表示先はルールを変えずに文言とテーマを上書きできます。

必要になってから音を読む

card-soundsにcreateCardSoundsがあります。読み込みや最初の音が必要になるまで、音声コンテキストも録音の取得も始めません。音はユーザーの操作から始め、希望に合わせて消音します。自分で作った音のハンドルは片付けるときにcloseを呼びます。soundTimesは全体の時間幅を保ちながら同時に使う録音数を制限します。

ソースを見る GitHub で編集@johnmorrisdotca/hitotsu 1.4.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。