オンライン対戦できるオセロをつくる(2)の続きです。今回はクライアントサイドの処理を実装します。

cshtml部分

cshtml部分を示します。操作用のボタン類を配置しています。

Pages\reversi\Index.cshtml

wwwroot\reversi\style.css

グローバル変数と定数

グローバル変数と定数を示します。

wwwroot\reversi\app.js

Cellクラスの定義

マスと石を描画するためのCellクラスを定義します。

ページが読み込まれたときの処理

ページが読み込まれたときにおこなわれる処理を示します。

Cellオブジェクトを生成してここからマスを描画します。テキストボックスに以前入力した文字列があるならローカルストレージに保存されているのでこれを読み出してセットします。そのあとイベントリスナの追加、ボリュームコントローラーの生成をおこない、ASP.NET SignalRでHubに接続します。

マスの描画

Cellオブジェクトを生成してここからマスを描画する処理を示します。

イベントリスナの追加

イベントリスナを追加する処理を示します。

ボリュームコントローラーの表示

いまや完全に定番となったボリュームコントローラーを表示する処理です。

接続完了時の処理

Hubに接続したときの処理を示します。このときはサーバーサイドから’SendToClientSuccessfulConnection’が送信されるのでいっしょに送られてくる文字列 entry を表示します。これでエントリーしているユーザーがいるとそのユーザー名も表示されます。いない場合はなにも表示されません。

エントリー完了時の処理

ユーザーがエントリーしたときはサーバーサイドから’SendToClientSuccessfulEntry’が送信されます。

エントリーしたのが自分自身のときはエントリーボタンを消します。

マッチング成功時の処理

マッチングに成功したときはサーバーサイドから’SendToClientMatched’が送信されます。

マッチング成功によって相手を待っているユーザーはいなくなるので待機ユーザーの名前は消します。またマッチングした両プレイヤーにはグローバル変数 myturn に自分が黒なのか白なのかを示す文字をセットします。両プレイヤーは対局者になるのでもし他の対戦の観戦をしているのであれば中止の処理をおこないます。観戦に関する要素も対局が終了するまですべて非表示とします。

盤面の状態が変化したときの処理

対戦または観戦しているときに盤面の状態が変化したときは’SendToClientStatusChanged’が送信されます。このときの処理は対局者と観戦者とでは表示すべき内容が微妙に異なるので別の関数にわけています。

対局者の場合、盤面の状態だけでなく、手番はどちらにあるのか、自分の手番の場合、持ち時間はどれだけあるのかも表示させます。

観戦者の場合、盤面の状態と手番のみを表示させます。

不適切な着手がされたときの処理

不適切な着手がされたときは’SendToClientDeny’が送信されます。効果音を鳴らすとともに、textに着手不可の理由を示す文字列が格納されているのでこれを1秒間表示します。

現在おこなわれている対戦情報の表示

現在おこなわれている対戦情報を表示する処理を示します。

1秒おきに’SendToClientUpdateGames’とともに現在おこなわれている対戦情報に関する文字列が送られてくるのでそれを表示させます。

過去の対戦を観戦する処理

まず過去の対戦データをリクエストすると’SendToClientGotPastMatches’とともにjsonデータが送られてくるのでこれを表示させます。

[観戦する]ボタンをクリック時のイベントリスナを追加する処理を示します。

観戦を希望している対戦のnumと一致する対戦データを探してpastMatchにセットします。もしリアルタイムで観戦している対局があればキャンセルしています。そのあと操作用のボタンを表示します。

次の手を表示させる処理を示します。どんな手を着手したのかを表示したあと石をひっくり返す演出をしたいのでちょっとややこしい処理になっています。

前の手を表示させる処理を示します。

[終了]をクリックしたら過去の対戦の観戦を終了させます。その処理を示します。