対局者のUIは Majiang.UI.Player*1 で実装しますが、その構造はやや複雑です。今回はまず構造から説明します*2。
電脳麻将 で対局者を実現するのは以下の2つのクラスです。
- Majiang.AI
- パッケージ @kobalab/majiang-ai で実装する 麻雀AI です。
- Majiang.UI.Player
- パッケージ @kobalab/majiang-ui で実装する打牌選択などの UI です。今回説明したい対象はこちらです。
電脳麻将UI 〜 設計思想
今回は実装方法の説明ではなく、majiang-ui の設計思想について語ってみたいと思います。これは、「なぜjQueryを使うのか」、「なぜ自前でMVCを実装するのか」、「なぜTypescript化しないのか」に対する回答でもあります。
- パッケージに分割する
- Canvas を使わない
- HTMLを「書かない」
- HTML/CSSに依存しない
- jQuery を使い続ける
- MVCモデルを採用する
- 型を定義しない
- Pug と Stylus を採用する
- CSS用のclassを使わない(試み)
電脳麻将UI 〜 盤面
電脳麻将 では盤面を 卓情報 と呼ぶオブジェクトで表します。これを表示するのが @kobalab/majiang-ui の Majiang.Ui.Board です。
卓情報は現在は以下の3つの場面で生成されます*1。
- 対局中に対局エンジン(Majiang.Game)が生成
- 牌譜再生中に牌譜ビューア(Majiang.UI.Paipu)が牌譜から復元
- ネット対局中にクライアント(Majiang.UI.Player)が通信内容から復元
*1:これ以外にも「牌譜解析ツール」も牌譜から卓情報を復元しています
電脳麻将UI 〜 preload
電脳麻将UI 〜 牌 - koba::blog と 電脳麻将UI 〜 音声 - koba::blog で、電脳麻将 では牌の画像や音声データを「DOMをコピーして使う」と説明しましたが、画像や音声データをブラウザが読み込む前に使ってしまうと、ダウンロード中の画像が表示されたり音声が遅れて再生されたりします。jQuery では
$(function(){ /* ... */ })
の中にプログラムを書くことで、HTMLが読み込まれDOMが構成されるより前にアプケーションが実行されるのを避けるのが「作法」となっていますが、このタイミングでDOMは完成していても外部リソースの読み込みは終わっていないことが多々あります。
続きを読む
