// ==UserScript==
// @name         カラーピッカーとランダムカラー
// @namespace    http://tampermonkey.net/
// @version      1.91
// @description  カラーピッカーでオリジナルパレット!ランダムカラーで楽しくお絵かき
// @author       you
// @match        https://pictsense.com/*
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==
//なんか問題が起きても責任は取りません
//悪い再配布の可能性があるよ、不安な場合は信頼できる人から共有されたもの使ってね
//全部自己責任だよ
//パソコンのGoogleでしか動作確認してないよ。
(function() {
    'use strict';
    setTimeout(() => {
        if(document.getElementById("nativeColorPicker")) return;
        const container = document.createElement("div");
        container.id = "randomcollarUI";
        container.style.position = "fixed";
        container.style.top = "150px";
        container.style.left = "20px";
        container.style.zIndex = 9999;
        container.style.backgroundColor = "#222";
        container.style.padding = "8px";
        container.style.borderRadius = "6px";
        container.style.color = "#fff";
        container.style.fontFamily = "Arial,sans-serif";
        container.style.userSelect = "none";
        container.style.boxShadow = "0 0 10px #000";
        container.style.cursor = "grab";
        container.innerHTML = `
  
カラーピッカー
  
  
  
  
`;
        document.body.appendChild(container);
        const colorInput = document.getElementById("colorInputNative");
        const colorIndexInput = document.getElementById("colorIndex");
        const applyBtn = document.getElementById("applyColorBtn");
        const randomBtn = document.getElementById("randomColorBtn");
        const paletteButtons = Array.from(document.querySelectorAll("#colorPalette button")).slice(0, 10);
        function updateColorButton(index, hex) {
            const btn = paletteButtons[index];
            btn.setAttribute("data-color", hex.slice(1));
            btn.style.backgroundColor = hex;
            colorIndexInput.value = ((index + 1) % paletteButtons.length) + 1;
        }
        function getRandomColor() {
            // 0-255の値を16進数2桁で返す
            const r = Math.floor(Math.random() * 256).toString(16).padStart(2, "0");
            const g = Math.floor(Math.random() * 256).toString(16).padStart(2, "0");
            const b = Math.floor(Math.random() * 256).toString(16).padStart(2, "0");
            return `#${r}${g}${b}`;
        }
        applyBtn.addEventListener("click", () => {
            const hex = colorInput.value;
            const index = parseInt(colorIndexInput.value, 10) - 1;
            updateColorButton(index, hex);
        });
        randomBtn.addEventListener("click", () => {
            paletteButtons.forEach((btn, i) => {
                const randomHex = getRandomColor();
                updateColorButton(i, randomHex);
            });
            alert("ランダムな色でお絵描きしてみ~");
        });
        // ドラッグで移動
        let isDragging = false;
        let offsetX, offsetY;
        container.addEventListener("mousedown", (e) => {
            isDragging = true;
            offsetX = e.clientX - container.getBoundingClientRect().left;
            offsetY = e.clientY - container.getBoundingClientRect().top;
            container.style.cursor = "grabbing";
        });
        document.addEventListener("mousemove", (e) => {
            if (!isDragging) return;
            container.style.left = `${e.clientX - offsetX}px`;
            container.style.top = `${e.clientY - offsetY}px`;
        });
        document.addEventListener("mouseup", () => {
            isDragging = false;
            container.style.cursor = "grab";
        });
    }, 1500);
})();