LoginSignup
3

More than 5 years have passed since last update.

Splatoonの全ブキの合計の塗ポイントをいい感じに表示するブックマークレット

Posted at

概要

Splatoonの全ブキの合計の塗ポイントを出してくれるやつ」という記事に触発されて、もうちょっといい感じにポイントを表示し、かつブックマークレットに登録することで簡単に実行できるようにした。

こんな感じに、一番上に合計ポイントが表示される。

splatoon.gif

使い方

  • 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の重複対策等は何もしていないので、連続で実行すると無限に追加されていってしまう。

splatoon2.gif

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3