開発日記③ 目標順位と自分の席を設定できるようにする

前回までの進捗

前回は、4人分の点数を入力し、現在の順位を表示できるようにした。
これで「今、誰が何着なのか」は分かるようになった。
ただ、このゲームで知りたいのは現在順位だけではない。
自分がどの席にいて、最終的に何着を目指しているのか。
そこまで決まらないと、「何点アガれば条件を達成できるのか」は計算できない。
そこで今回は、条件判定に必要な情報を入力できるようにした。

今回追加する項目

まずは、次の4項目を追加する。

• 自分の席
• 目標順位
• 本場
• 供託リーチ棒

自分の席は、東家・南家・西家・北家から選択する。
目標順位は、ひとまず次の3種類にした。

• トップ
• 2着以上
• ラス回避

本当は「現在の順位を維持する」「特定の相手より上に行く」など、いろいろな条件が考えられる。
ただ、最初から細かく作りすぎると処理が複雑になりそうなので、まずは分かりやすいものに絞った。

目標にも型を付ける

目標順位は文字列として管理する。
ただし、自由にどんな文字でも入れられるようにはせず、使える値をあらかじめ決めておく。

type Goal = 
 | "top"
 | "second_or_better"
 | "avoid_last";

画面上では日本語で表示するけれど、プログラムの中では英語の値を使う。
たとえば「2着以上」とか「連対」とか表示をあとで変更したとしても、内部の値が同じなら判定処理には影響しない。
このあたりは、表示する言葉とプログラムで扱う値を分ける考え方らしい。
まだ慣れてはいないけれど、後から変更しやすくなるのは何となく分かる。

Reactで選択内容を管理する

自分の席と目標順位は、選択欄から変更できるようにした。
選択された値はReactの状態として保持する。
点数入力と同じように、値を変更すると画面側にもすぐ反映される。
今回扱う状態は、だいたい次のようなもの。

• 現在の点数
• 自分の席
• 目標順位
• 本場
• 供託

少しずつ管理する情報が増えてきた。
今はまだ一つの画面に収まっているけれど、このまま機能を追加していくと、コードも長くなりそう。
どこかのタイミングで、画面の部品や処理を分ける必要が出てくるかもしれない。

本場と供託も入力できるようにする

本場と供託は、必要な点数を計算するときに影響する。
ロンの場合、本場が増えるごとに放銃者の支払いが増える。
ツモの場合も、それぞれの支払いに本場分が追加される。
供託リーチ棒があれば、アガった人の点数に加算される。
今回はまだ必要点数の計算までは作らず、数値を入力して保持できるところまでにした。
入力欄では、0以上の整数だけを扱う想定。
マイナスの本場や、小数の供託が存在しても困るので、後で入力チェックも追加したい。

今回できたこと

今回の進捗は以下のとおり。

• 自分の席を選択できるようにした
• 目標順位を選択できるようにした
• 本場を入力できるようにした
• 供託リーチ棒の本数を入力できるようにした
• 選択した条件をReactの状態として管理した

まだ入力欄が増えただけなので、見た目としては地味で前回とほぼ同じ。
ただ、点数と条件がそろったことで、次の計算へ進めるようになった。
次は、入力した点数と目標順位を使って、条件達成に必要な点数を探してみたい。
まずはロンの場合に、誰から何点アガれば目標順位に届くのか。
そこから考えていく予定。

もうすでに締めの言葉も思いつかなくなってきたけど、
牛歩も一歩。牛一。