開発日記② 入力した点数から順位を表示する

前回までの進捗

前回は、東家・南家・西家・北家の点数を入力し、4人分の合計点を表示するところまで作った。
まだゲームらしい画面ではないけれど、とりあえず入力した数字が画面に反映されるようにはなった。
今回はそこから一歩進めて、入力した点数をもとに現在の順位を表示できるようにしていく。

点数をまとめて管理する

まず、4人分の点数をそれぞれ別の値として扱うのではなく、ひとつにまとめて管理することにした。
イメージとしては、こんな感じ。

type scores = {
  east: number,　　//東家の点数
  south: number,　 //南家の点数
  west: number,　　//西家の点数
  north: number　　//北家の点数
}

これらを「現在の点数」というひとまとまりのデータとして持つ。

直感的には、プレイヤークラスが点数属性を持って…となりそうな気がするが、
ChatGPT的にはいきなりそこまではいかない方針らしい。
まあ確かに、全体イメージがないままクラスを作ると
試行錯誤のときの手間が増えそうか…？

同点の場合も考える

次に順位だが、単に点数順に並べればいいとは限らない。
基本的には点数が高い順に並べればいいが、
同じ点数の人がいた場合を考える必要がある。
単純に点数だけで並べると、同点になったときの順位が安定しない可能性がある。
今回の試作では、同点の場合は次の順番で上位として扱うことにした。

東家＞南家＞西家＞北家

本当は、対局開始時点の上記順が一般的なルールだが、
ここもまずはシンプルに現時点での席で順位を決めると仮置きした。
正式なゲームとしてどこまで対応するかは今後考えるとして、まずは判定結果が毎回変わらないことを優先する。

こういう細かいルールは、実際に処理を書き始めてから気付くことが多い。
「点数を並べるだけならすぐ終わる」と思っていたけれど、思ったより考えることがある。

入力ミスを確認する

入力ミスも確認しないといけない。
点数入力欄には、自由に数字を入れられる。
そのままだと、

• 100点単位ではない
• 点数が空欄になっている
• 4人の合計点が合わない

といった状態も発生する。

入力が間違っているのに、堂々と順位を表示してしまうのはよろしくない。
そこで、点数がおかしい場合には警告を表示するようにした。
まずは4人の合計が10万点になっているかを確認する程度だけれど、入力ミスには気付きやすくなったと思う。
＃前回時点では本当にただの合計値しか出してなかった。
将来的に供託リーチ棒を扱うようになれば、その分も考慮する必要がある。

Reactで表示を更新する

画面の更新はちゃんと作ればReactがしてくれるらしい。
点数を変更すると、合計点と順位も自動で更新される。
入力欄の値を取得して、表示する場所を探して、文字を書き換える。
以前ならそんな処理を自分で書いていた気がするけれど、
Reactでは元になるデータを変更すると、
それに合わせて画面も更新してくれるとのことだ。

まだ内部の仕組みまで理解できているわけではない。
それでも、「点数から順位を計算して表示する」という処理に集中しやすいのはありがたい。

今回できたこと

今回の進捗をまとめると、こんな感じ。

• 4人分の点数をまとめて管理
• 入力した点数から現在順位を計算
• 同点時の順位ルールを追加
• 合計点がおかしい場合に警告を表示
• 点数変更時に順位と合計を自動更新

体裁は後回し気味でちょっと見づらいが、
下段のほうは左端が順位になっているし、同点でも南家のほうが順位が高くなっている。

前回より少しだけ、画面の情報が増えた。
次は、自分がどの席なのか、何着を目指すのかといった条件を入力できるようにしたい。
点数と順位が分かるだけでは、まだ「何点アガれば目標を達成できるのか」までは判断できない。
その計算に必要な情報を、少しずつ増やしていく。

プログラムもブログもちょっと知見を得て、ちょっと進んだ。
牛歩も一歩。牛一。