完成品どーん(2回目)

前回のあらすじ

ダイスの期待値求めてくれるサービスがないから作ることにした！
せっかくだから他にも機能を付けることにした！
- 「ダイスロール」と「CCFOLIA出力」
前回は「ダイス予測」を作った！

この記事では「ダイスロール」と「CCFOLIA出力」を作っていく過程を解説していくよ。

ダイスロール

▼ 完成図 ▼

このサービスの目標は「BCDiceを使ってダイスが振れる」ということ。そのためにまずはBCDiceのお勉強から始めることにする。

BCDiceというのはTRPGのダイスを振るためのRuby製OSSツールで、100以上のシステムに対応しており、CCFOLIAやTRPGスタジオといったセッションツールに搭載されている。BCDice APIというREST APIサーバー(のソースコード)が公式で提供されている。有志によってホストされているものがいくつかあるので今回はそれを利用させていただこうと思う。

BCDice API

v2APIの仕様は以下のページにまとめられている。

ダイスを振るためにはゲームシステムのIDが必要で、ゲームシステムのIDを得るためにはゲームシステムのID一覧にアクセスする必要がある、がここではいったん省略してダイスを振る部分を先に解説していく。

ダイスを振るエンドポイントは/v2/game_system/{id}/rollなのでその部分を掘り下げていこうと思う。

引数

パラメータ	種別	例	説明
`{id}`	URLに埋め込む	`Gorilla`	ゲームシステムのID
`command`	GET/POSTパラメータ	`4d10>=15`	コマンドの文字列

レスポンス例

{
  "ok": true,
  "text": "(4D10>=15) ＞ 25[8,3,5,9] ＞ 25 ＞ 成功",
  "secret": false,
  "success": true,
  "failure": false,
  "critical": false,
  "fumble": false,
  "rands": [
    {
      "kind": "normal",
      "sides": 10,
      "value": 8
    },
    {
      "kind": "normal",
      "sides": 10,
      "value": 3
    },
    {
      "kind": "normal",
      "sides": 10,
      "value": 5
    },
    {
      "kind": "normal",
      "sides": 10,
      "value": 9
    }
  ]
}

いろいろ情報が含まれてるが、ダイス結果を表示したいだけなので今回はok、text、success、failure、critical、fumbleだけ使うことにする。ユーザーから受け取った入力をAPIに渡して結果を受け取ったら、textをsuccess、failure、critical、fumbleに応じた色で表示させるようなプログラムを目標とする。

とりあえずダイスを振るプログラムがこんな感じ

fetch(`${config.apiServer}/v2/game_system/${config.system.id}/roll?command=${encodeURI(formatedInput)}`)
.then((res) => res.json())
.then((res: BCDice.DiceRollResponse): diceRollResult | errorResult => {
  if (res.ok) {
    return {
      success: true,
      result: res,
    };
  } else {
    return {
      success: false,
    };
  }
})
.catch((err) => {
  console.error(err);

  toast({
    title: t('errors.notFound'),
    status: 'error',
    isClosable: true,
  });
  return {
    success: false,
  };
}),

特別なことをしているわけではないので割と分かりやすいとは思う。

また、ここでダイスを振るのに必要なシステム名は/v2/game_systemで一覧を取得できる。システムごとの詳細情報はv2/game_system/{id}で取得できる。

これを使って下のようなシステム選択のUIを実装した。

基本はChakra UIを使ってデザインを組み立てているのだが、Chakra UIにいい感じのセレクトボックスがなかったのでこれは自分でいい感じのものをこしらえた。詳しくはソースコードを読んで頂ければと(汚いのはゆるして...)

CCFOLIA出力

▼ 完成図 ▼

なんか2つだけだと寂しいし適当に機能つけ足しとくか的な思考で生み出されたもの。でも実装が意外と面倒で1日ぐらいかかった。

特筆すべき事項は全然ないが、せっかくなのでクリップボードからの読み込み・クリップボードへの書き込みについて解説しようと思う。

クリップボードから読み込み

if (navigator.clipboard) {
  navigator.clipboard.readText().then((text) => {
    console.log(`Your clipboard is "${text}"`);
  });
}

クリップボードへの書き込み

const str = 'クリップボードに書き込む内容';
if(navigator.clipboard){
  navigator.clipboard.writeText(str).then(() => {
    console.log('Copied!');
  });
}

ただしこれはClipboard APIという新しめの機能を使う方法なのであまり後方互換性はよくない。2022年6月28日時点の対応状況は以下の表を参照。メジャーなブラウザはだいたいサポートしているのであまり気にせずに使えるだろうと思う。

▼ 参考記事 ▼

(最新のブラウザの対応状況はこのサイトを参照)

おわりに

今回内容がうすうすだった気がします。それはそれとしてダイススペックは頑張って作ったので気になったら使ってみてください。

次partはダイス予測のアプデについて書こうと思います。気長にお待ちくださいな。

2022/8/16追記
part3書きました。ダイス予測のアルゴリズムを改善するお話です。