相変わらず頭が悪いので、今週も日曜になるまでQiitaもnoteも記事を書けず。
日曜の午前中は寝倒してしまったものの、午後は元気に15時ぐらいからQiitaの記事を書き始め……
たのだが、頭が悪いからか22時過ぎまでかかってしまった。
そのあとnoteの記事を書くので……必然的にやれることは少なくなる。
まあ、頭が悪いし今週も雑プログラムで繋ぐ一択となるな……

今回やったこと

なでしこで、カードゲームでの使用を想定した先攻/後攻をランダムで決めるやつを作った。

中央のサイコロボタンを押すと、ボタンの表記がぐるぐるになり、先攻/後攻がランダムに表示される。
ボタンの表記がサイコロに戻ったときに表示されている先攻/後攻を採用する。

スマホなどの小型の機器で実行することを想定し、CSS の rotate を使用して○攻の表記がそれぞれ向かい合わせになっているプレイヤーの方を向くようにした。

技術的には一発で結果を表示してもあまり変わらないはずだが、それだとランダムに決めている感が薄い気がするので、ランダムな結果を途中経過？として何回か表示するようにした。

プログラム

先攻/後攻をランダムで決めるやつ (プログラム貯蔵庫)

ポイント

UIの用意

DOM親要素の「行揃え」に「中央」をDOMスタイル設定。
上ラベルは「？攻」のラベル作成。
それに{
  "文字サイズ": "1000%",
  "display": "inline-block",
  "transform": "rotate(180deg)",
}をDOMスタイル一括設定。
改行作成。
サイコロボタンは「🎲」のボタン作成。
それの「文字サイズ」に「300%」をDOMスタイル設定。
改行作成。
下ラベルは「？攻」のラベル作成。
それの「文字サイズ」に「1000%」をDOMスタイル設定。

それぞれのプレイヤー用に○攻を表示する用のラベルと、選択を開始する用のボタンを用意する。
display を inline-block にしない (デフォルトの inline のままだ) と、rotate が効かないようだった。

選択処理の実行

サイコロボタンをクリックした時には
  サイコロボタンにオフをDOM有効設定。
  サイコロボタンに「🌀」をテキスト設定。
  4のランダム配列生成。
  それを反復
    ビット位置とは変数。
    ビット位置で0から7まで繰り返す
      定数のビットはAND(SHIFT_R(対象,ビット位置),1)。
      もし、ビットならば
        上ラベルに「先攻」をテキスト設定。
        下ラベルに「後攻」をテキスト設定。
      違えば
        上ラベルに「後攻」をテキスト設定。
        下ラベルに「先攻」をテキスト設定。
      ここまで。
      0.05秒待つ。
    ここまで。
  ここまで。
  サイコロボタンにオンをDOM有効設定。
  サイコロボタンに「🎲」をテキスト設定。
ここまで。

サイコロボタンが押されたら、選択処理を行う。
「ランダム配列生成」で高品質なことが期待できる乱数を生成し、生成した各ビットに基づいてそれぞれ先攻/後攻を表示する。

おわりに

なでしこで、ランダムに先攻/後攻を決めるやつを作成した。
実際のカードゲームで使用しようとする際は、ルール上電子機器やこのツールの使用が認められ、かつ対戦相手からこのツールを使用することに関する合意が取れている場合のみ使用するべきである。
(対戦相手が居ない場合は……そもそも先攻/後攻を決めることが求められないのでは？知らんけど)
このツールを使用した・使用しようとした・使用できなかったことにより発生した一切の損害について、作者は責任を負わない。