// ==UserScript==
// @name ピクトセンス 画像保存&カラーピッカー
// @namespace http://tampermonkey.net/
// @version 2.0.0
// @description カラーピッカーと画像保存ボタンを追加します。
// @author あるぱか
// @match https://pictsense.com/*
// @icon https://www.google.com/s2/favicons?sz=64&domain=pictsense.com
// @grant none
// @license MIT
// @downloadURL none
// ==/UserScript==
(function() {
// 生成
document.getElementById('colorPalette').innerHTML =
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
''+
'';
document.getElementById('opacitySliderHolder').firstElementChild.innerHTML =
'';
// 先に定義しとかないといけない変数
const saveToolButton = document.createElement("button");
saveToolButton.type = "button";
saveToolButton.id = "saveSubmitButton";
// ゲーム画面検出
const saveObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
console.log(mutation)
// クラス名colorが検出された場合、画像保存ツールボタンを作成
if(mutation.target.className === "color") {
saveObserver.disconnect(); //停止
const undo = document.querySelector("#undoButton").closest("div");
undo.appendChild(saveToolButton);
}
});
});
// ゲーム画面検出 設定 開始
const saveTargetNode = document.getElementById('gameScreen');
const saveConfig = {subtree: true, childList: true, attributeOldValue: true,}
saveObserver.observe(saveTargetNode, saveConfig);
// CSS設定
const CSSs = document.createElement("div");
document.getElementById("base").appendChild(CSSs);
CSSs.innerHTML =
'';
/* カラーピッカー ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
// カラーピッカー適用関数を呼び出し
const colorPicker = document.querySelector("#color");
colorPicker.addEventListener("input", updateFirst, false);
// カラーピッカーを適用
function updateFirst(e) {
const pickcolor = document.querySelector("#cls");
if (pickcolor) {
const color = e.target.value;
pickcolor.style.backgroundColor = color;
pickcolor.dataset.color = color.slice(1);
MouseDown();
}
}
// 色反映
const target = document.querySelector("#colorPalette > button:nth-child(1)");
function MouseDown() {
const { left, top } = target.getBoundingClientRect();
target.dispatchEvent(new MouseEvent('mousedown', {
bubbles: true,
cancelable: true,
view: window,
clientX: left,
clientY: top,
}));
}
/* 画像保存ツール ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
// 画像保存変数
const canvas = document.getElementById("canvas");
const link = document.createElement("a");
// クリックで画像保存
saveToolButton.addEventListener('click', () => {
// 現在時刻の取得&ファイル名に追加
const d = new Date();
const fileName = window.location.hash.slice(3) +
"_" +
(d.getFullYear()) +
("0" + (d.getMonth() + 1)).slice(-2) +
("0" + d.getDate()).slice(-2) +
"_" +
("0" + d.getHours()).slice(-2) +
("0" + d.getMinutes()).slice(-2) +
("0" + d.getSeconds()).slice(-2);
// 画像保存
link.href = canvas.toDataURL("image/png");
link.download = fileName + ".png";
link.click();
});
})();