対局者のUIは Majiang.UI.Player*1 で実装しますが、その構造はやや複雑です。今回はまず構造から説明します*2。電脳麻将 で対局者を実現するのは以下の2つのクラスです。 Majiang.AI パッケージ @kobalab/majiang-ai で実装する 麻雀AI です。 Majiang.UI.P…

今回は実装方法の説明ではなく、majiang-ui の設計思想について語ってみたいと思います。これは、「なぜjQueryを使うのか」、「なぜ自前でMVCを実装するのか」、「なぜTypescript化しないのか」に対する回答でもあります。 パッケージに分割する Canvas を使…

電脳麻将 では盤面を 卓情報 と呼ぶオブジェクトで表します。これを表示するのが @kobalab/majiang-ui の Majiang.Ui.Board です。 卓情報は現在は以下の3つの場面で生成されます*1。 対局中に対局エンジン(Majiang.Game)が生成 牌譜再生中に牌譜ビューア(Ma…

電脳麻将 では以下の端末からのアクセスを想定し、CSSによるレスポンシブデザインで最適な表示になるよう調整しています。 PC画面 横幅が広いことを利用したレイアウトを行う。 スマホ画面 iPhone SE のアスペクト比を基準とし、それより「細い」画面も想定…