対局者の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 のアスペクト比を基準とし、それより「細い」画面も想定…

今回は牌山と河(捨て牌)の表示について説明します。 牌山 Majiang.UI.Shan デモ 河 Majiang.UI.He CSS デモ

電脳麻将UI 〜 面子 - koba::blog に続いて、今回は手牌全体の表示について説明していきます。 上記の手牌の場合、電脳麻将 では以下の構成*1でHTMLを生成します*2。 *1:Pug の記法で表記しました *2:現在リファクタリング中の実装です

電脳麻将 では牌を画像として表示していますが、副露メンツ内の横向きとなっている牌はどのように実現しているのでしょうか*1。例えば の場合、HTMLは以下となっています。 *1:実は11年前の開発最初期にも 説明 したことがあります

電脳麻将UI 〜 牌 - koba::blog と 電脳麻将UI 〜 音声 - koba::blog で、電脳麻将 では牌の画像や音声データを「DOMをコピーして使う」と説明しましたが、画像や音声データをブラウザが読み込む前に使ってしまうと、ダウンロード中の画像が表示されたり音声…

電脳麻将UI 〜 牌 - koba::blog で 電脳麻将 では牌の表示を「雛形のコピー」で実装していることを説明しましたが、チー・ポンなどの鳴きの発声に使う音声データも同様の方法で処理しています。具体的な雛形は下記としています*1。 *1:preload を指定してい…

電脳麻将 では牌を画像として表示していますが、JavaScriptのプログラムではこの画像がどこにあるか知らず、画像のURLも使用していません。HTML内に非表示の雛形があり、それをコピーして表示しています。具体的にはHTML内に以下のような非表示の「雛形」が…

電脳麻将 の 牌譜エディタ では「牌画像と入力フィールドを切り替える」UIを採用しています。通常は牌画像を表示し、フォーカスが当たると入力フィールドに切り替わります。この動きを実現しているのが flipInput*1 です。子要素 A、B を持つ要素 X に flipI…

電脳麻将 は ver.2.0.0 からキーボードで打牌選択できるようになりました。これを実現しているのが selector です。リストを表すDOMノードに selector を適用すると、 矢印キーなどで1つ1つ選択し、Enterキーで確定 マウスを合わせることで選択し、クリック…

電脳麻将 のスマートフォン表示では、画面サイズに関わらず画面いっぱいに卓を表示していますが、それを実現しているのが関数 scale() です。スマートフォン用の表示では、卓は 800x450px の固定サイズで描画し、スマートフォン画面の縮尺をそれに合わせてい…

かつて 電脳麻将 では、画面要素の fade-in/out を jQuery の メソッド で行っていましたが、ver.1.4.2 でCSSの機能で行うように変更しています。 アニメーションをjQueryに依存しないようにする · Issue #77 · kobalab/Majiang · GitHub jQuery ではCSSの o…

1年半ほど前に 電脳麻将 のUIのリファクタリングを始めたのですが、気力が続かずこの一年以上放置状態になっていました。 GitHub - kobalab/test-ui: 電脳麻将のUIをテストする · GitHub どこまで続くか分かりませんが、このプロジェクトを再開しようと思い…