Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

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

s4kr4
Webエンジニア
https://s4kr4.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away