電脳麻将 では牌を画像として表示していますが、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ノードを返す関数です。
以下で実際の動作を確認できます。