カラーピッカーと画像保存ボタンを追加します。
// ==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
// ==/UserScript==
(function() {
// 生成
document.getElementById('colorPalette').innerHTML =
'<button type="button" id="cls" class="color" data-color="000000" style="background-color: 000; height: 8px;"></button>'+
'<button type="button" class="color" data-color="000000" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="808080" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="d3d3d3" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ffffff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ff0000" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ff0055" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ff00aa" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ff00ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="d500ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="aa00ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="5500ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="0000ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="002bff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="0055ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="00aaff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="00d5ff" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="00ffd5" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="00ff80" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="00ff2b" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="71ff0e" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="aaff00" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="d5ff00" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ffff00" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ffdd00" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ff7f00" style="background-color: #FF0; height: 8px;"></button>'+
'<button type="button" class="color" data-color="ff2b00" style="background-color: #FF0; height: 8px;"></button>';
document.getElementById('opacitySliderHolder').firstElementChild.innerHTML =
'<input type="color" id="color" value="#000000" style="margin-left: 5px;">';
// 先に定義しとかないといけない変数
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 =
'<style>'+
// 戻すボタン
'#pc #undoButton {'+
'position: relative;'+
'bottom: -2px;'+
'}'+
// 画像保存ボタン
'#saveSubmitButton {'+
'background: #fff url(https://iconbox.fun/wp/wp-content/uploads/1069_dl_h.svg) center no-repeat;'+
'background-size: auto 160%;'+
'width: 60px;'+
'height: 27px;'+
'border: 2px solid #999;'+
'position: relative;'+
'bottom: -4px;'+
'border-radius: 0'+
'}'+
'</style>';
/* カラーピッカー ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
// カラーピッカー適用関数を呼び出し
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();
});
})();