おきみやげのブックマークレット

かわいいおきつねがどんどんでてくるゲームの合成ページで、
合成待ちの置土産が何個あるのかをぱっと確認したい時のブックマークレット。

↓↓↓↓↓↓
◆こちらからどうぞ
↑↑↑↑↑↑

・きつねが多くてページが分割されてても全部読みに行きます
・CCSでページ結合しててもOK
・「全部」ページから実行すると、すべての置土産を一覧表示
・勢力ごとのページから実行すると、その勢力の分を一覧表示

一応整形されたソースも載せておきますです。
javascriptあんまよくわかってないんでこんなんで良いのかどうか…
ここだめとか指摘ありましたらお願いします。
一応Firefox25とChrome33で動作確認しました。IEは多分むりです。

// 与えられたDOM要素内の、置土産の個数を数える
// 種類ごとの個数を連想配列で返す(こんな感じで→{"ひよこ":2, "転生の秘宝":15, …})
function getGiftCount(elem)
{
    var a=elem.querySelectorAll('form>table>tbody>tr>td:nth-child(2)');
    var map = {};
    
    for (var i=0; i<a.length; i++) {
        var giftname = a[i].children[6].nextSibling.textContent;
        if (map[giftname] == null) {
            map[giftname] = 1;
        }
        else {
            map[giftname]++;
        }
    }
    
    return map;
}

// xhrでとってきたXMLをcallback関数に渡す
function XHR(url,callback)
{
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                callback(xhr.responseXML);
            }
            else {
                getResultBox().innerHTML = "つながりまへん";
            }
        }
    }
    xhr.responseType = "document";
    xhr.send();
}

// 合成画面のページ分割のリンク先を配列で返す
function getConvLinks()
{
    var link = [];
    var pagelist = document.querySelector('div.page_list');
    var alist = pagelist.querySelectorAll('span>a');
    for (var i=0; i<alist.length; i++) {
    	// CCSで結合されてたら無視する
        if (alist[i].style.display != "none") {
            link.push(alist[i].href);
        }
    }
    return link;
}

// 結果を表示するエリアをなければ作る
// てきとう
function createResultBox()
{
    var box = getResultBox();
    if (!box) {
        box = document.createElement("div");
        box.id = "gifts_result_box";
        box.style.position = "absolute";
        box.style.right = 0;
        box.style.top = 0;
        //box.style.width = "100px";
        box.style.backgroundColor = "#444";
        box.style.fontSize = "70%";
        document.body.appendChild(box);
    }
    box.innerHTML = "よみこみちう...";
}
createResultBox();


// 結果を表示するエリアの要素を返す
function getResultBox()
{
	return document.querySelector('div#gifts_result_box');
}


var done = 0;        //全てのページから読み込み終わりましたか?の判定
var gifts_all = {};  //分割されたページごとの置土産リスト


// 置土産リスト(getGiftCountでとってくるやつ)を足し合わせる
// 結果はgifts_allへ
function mergeGifts(gifts)
{
    for (key in gifts) {
        if (gifts_all[key] == null) {
            gifts_all[key] = gifts[key];
        }
        else {
            gifts_all[key] += gifts[key];
        }
    }
}

// 結果表示エリアに結果を表示する
function showResult()
{
    var box = getResultBox();
    var htmlstr = "<table>";
    for (key in gifts_all) {
        htmlstr += "<tr><td>" + key + "</td><td style='text-align:right;'>" + gifts_all[key] + "</td></tr>";
    }
    box.innerHTML = htmlstr + "</table>";
}


// いま合成のページにいますか
if (/^\/conv/.test(location.pathname)) {
	// 最初に現在のページ分
	mergeGifts(getGiftCount(document));
	var links = getConvLinks();
	// ページ分割ない場合はここで結果表示して終了
	if (links.length == 0) {
	    showResult();
	}
	else {
		// ページ分割の分
	    for (var i=0; i<links.length; i++) {
	        XHR(links[i], function (res) {
	            mergeGifts(getGiftCount(res));
	            done++;
	            if (done == links.length) {
	                showResult();
	            }
	        });
	    }
	}
}
else {
	getResultBox().innerHTML = "合成のページじゃないです";
}

コメントを残す

メールアドレスが公開されることはありません。