概要
「Splatoonの全ブキの合計の塗ポイントを出してくれるやつ」という記事に触発されて、もうちょっといい感じにポイントを表示し、かつブックマークレットに登録することで簡単に実行できるようにした。
こんな感じに、一番上に合計ポイントが表示される。
使い方
- Chromeのブックマークレットに、以下のコードを登録する。
javascript:(function(){var sum=0;$(".equip-painted-point-number").each(function(){sum+=Number($(this).text())});for(var sumStr=sum.toString(),sumDiv=$("<div>",{"class":"equip-painted-point-number"}).css("right","122px"),count=sumStr.length-1,i=count;i>=0;i--){var digit="digit-1"+"0".repeat(count-i),number="typography-number-white-"+sumStr[i];sumDiv.append($("<span>",{"class":digit+" "+number,text:sumStr[i]}))}var sumDOM=$("<li>",{"class":"equip-painted-data"});sumDOM.append($("<div>",{"class":"equip-paited-weapon"}),sumDiv,$("<div>",{"class":"equip-paited-point-unit"}).css("right","94px").append($("<span>",{"class":"typography-point",text:"p"}))),$(".equip-painted-rank").prepend(sumDOM);})()
イカリングにログインし、「そうび」ページに移動
登録したブックマークレットを叩く
整形コード
特に難しいことはしていないので、何をしているかはコードを読めば理解していただけると思う。
ポイントとしては、DOMのclassを動的に割り当て、CSSのbackground属性で指定されるSVGを変化させているところ。
typography-number-white-X
クラスのX
の数値に対応する文字画像が呼び出されるので、ループを回してここにそれぞれの桁の数字を入れている。
javascript:(function() {
var sum = 0;
$(".equip-painted-point-number").each(function() {
sum += Number($(this).text());
});
var sumStr = sum.toString();
var sumDiv = $("<div>", {class: "equip-painted-point-number"}).css("right", "122px");;
var count = sumStr.length - 1;
for (var i = count; i >= 0; i--) {
var digit = "digit-1" + "0".repeat(count - i);
var number = "typography-number-white-" + sumStr[i];
sumDiv.append($("<span>", {class: digit + " " + number, text: sumStr[i]}));
}
var sumDOM = $("<li>", {class: "equip-painted-data"});
sumDOM.append(
$("<div>", {class: "equip-paited-weapon"}),
sumDiv,
$("<div>", {class: "equip-paited-point-unit"})
.css("right", "94px")
.append(
$("<span>", {class: "typography-point", text: "p"})
)
);
$(".equip-painted-rank").prepend(sumDOM);
})()
余談
DOMの重複対策等は何もしていないので、連続で実行すると無限に追加されていってしまう。