電脳麻将UI 〜 牌

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

具体的にはHTML内に以下のような非表示の「雛形」があり、このDOM要素をコピーして使用します。

    <div id="loaddata">
      <img class="pai" data-pai="m1" src="img/m1.png" alt>
      <img class="pai" data-pai="m2" src="img/m2.png" alt>
      <img class="pai" data-pai="m3" src="img/m3.png" alt>
      ......
    </div>

ここでは img 要素を使用していますが、他の要素でも動作することに注意してください。つまりこの部分は

    <span class="pai" data-pai="m1">一萬</span>

のような文字でもよいのです。

これを実装しているのが @kobalab/majiang-ui の関数 Majiang.UI.pai です。

/*
 *  Majiang.UI.pai
 */
"use strict";

const $ = require('jquery');
const label = require('./label')('pai');

module.exports = function(loaddata) {

    const pai = {};

    $('.pai', loaddata).each((i, n)=>{
        let p = $(n).data('pai');
        if ($(n).attr('alt') != null) $(n).attr('alt', label[p]);
        else                          $(n).attr('aria-label', label[p]);
        pai[p] = $(n);
    });

    return function(p){
        return pai[p.slice(0,2)].clone();
    }
}

loaddata で指定されたDOM領域の中から class="pai" の要素を探し、その data-pai 属性の値をキーに要素を保存します。その際にアクセシビリティのために aria-label 属性に「牌名」を設定します。もし alt 属性がある場合には代わりにこちらに牌名を設定しています。返り値 は先ほどキーとした 牌 を引数として雛形からコピーしたDOMノードを返す関数です。

以下で実際の動作を確認できます。

• デモプログラム(pai)