gpop note colour changer

Colour is changed in settings

目前為 2022-10-18 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         gpop note colour changer
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Colour is changed in settings
// @author       Commensalism
// @match        http*://gpop.io/settings/
// @match        http*://gpop.io/play/*
// @match        http*://gpop.io/room/*
// @match        http*://gpop.io/create/
// @icon         https://gpop.io/icon.ico?v=1.16.40
// @grant        none
// @license      MIT
// ==/UserScript==
function readcookies()
{
    var properties = document.cookie.split('; ');
    var obj = {};
    properties.forEach(function(property) {
        var tup = property.split('=');
        obj[tup[0]] = tup[1];
    });
    return obj
}
(function() {
    if (document.location.href == "http://gpop.io/settings/" || document.location.href == "https://gpop.io/settings/")
    {
        let panel = document.createElement("div")
        document.querySelector("#main > div:nth-child(5)").after(panel)
        panel.outerHTML = `<div class="settingspage-section">
                <div class="settingspage-section-title">Classic Mode: Key Colors <span style="color: deeppink; size: 0.5em; border: double thick blueviolet; background-color: #ff00ff55; padding-left: 2px; padding-right: 2px; padding-top: 1px; padding-bottom: 2px; border-radius: 45px;">mod</span></div>
                <div class="settingspage-section-row">
                    <div class="settingspage-section-row-1">Key [A]:</div>
                    <input id="setting-c-a" value="ffffff">
                </div>
                <div class="settingspage-section-row">
                    <div class="settingspage-section-row-1">Key [S]:</div>
                    <input id="setting-c-s" value="ffffff">
                </div>
                <div class="settingspage-section-row">
                    <div class="settingspage-section-row-1">Key [D]:</div>
                    <input id="setting-c-d" value="ffffff">
                </div>
                <div class="settingspage-section-row">
                    <div class="settingspage-section-row-1">Key [F]:</div>
                    <input id="setting-c-f" value="ffffff">
                </div>
                <div class="settingspage-section-note">Note: Only hex color format is supported</div>
            </div>`
        document.querySelector("#setting-c-a").onkeypress = null
        document.querySelector("#setting-c-a").addEventListener('change', function() {document.querySelector("#setting-c-a").parentElement.style.color = "#" + document.querySelector("#setting-c-a").value})

        document.querySelector("#setting-c-s").onkeypress = null
        document.querySelector("#setting-c-s").addEventListener('change', function() {document.querySelector("#setting-c-s").parentElement.style.color = "#" + document.querySelector("#setting-c-s").value})

        document.querySelector("#setting-c-d").onkeypress = null
        document.querySelector("#setting-c-d").addEventListener('change', function() {document.querySelector("#setting-c-d").parentElement.style.color = "#" + document.querySelector("#setting-c-d").value})

        document.querySelector("#setting-c-f").onkeypress = null
        document.querySelector("#setting-c-f").addEventListener('change', function() {document.querySelector("#setting-c-f").parentElement.style.color = "#" + document.querySelector("#setting-c-f").value})

        document.querySelector("#settings-save").addEventListener("click", function() {document.cookie = "notecolor=" + encodeURIComponent(`${document.querySelector("#setting-c-a").value};${document.querySelector("#setting-c-s").value};${document.querySelector("#setting-c-d").value};${document.querySelector("#setting-c-f").value};`) + "; path=/; max-age=9999999"})
    }
    else if (document.location.href.startsWith("http://gpop.io/play/") || document.location.href.startsWith("https://gpop.io/play/"))
    {
        let colors = decodeURIComponent(readcookies().notecolor).split(";")
        // Getting the stylesheet
        let stylesheet = document.styleSheets[5];
        let elementRules;

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(1) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[0]);
        elementRules.style.setProperty('background-color', "#" + colors[0] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(2) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[1]);
        elementRules.style.setProperty('background-color', "#" + colors[1] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(3) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[2]);
        elementRules.style.setProperty('background-color', "#" + colors[2] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(4) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[3]);
        elementRules.style.setProperty('background-color', "#" + colors[3] + "33");
    }
    else if (document.location.href.startsWith("http://gpop.io/room/") || document.location.href.startsWith("https://gpop.io/room/"))
    {
        let colors = decodeURIComponent(readcookies().notecolor).split(";")
        // Getting the stylesheet
        let stylesheet = document.styleSheets[7];
        let elementRules;

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(1) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[0]);
        elementRules.style.setProperty('background-color', "#" + colors[0] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(2) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[1]);
        elementRules.style.setProperty('background-color', "#" + colors[1] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(3) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[2]);
        elementRules.style.setProperty('background-color', "#" + colors[2] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(4) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[3]);
        elementRules.style.setProperty('background-color', "#" + colors[3] + "33");
    }
    else if (document.location.href.startsWith("http://gpop.io/create/") || document.location.href.startsWith("https://gpop.io/create/"))
    {
        let colors = decodeURIComponent(readcookies().notecolor).split(";")
        // Getting the stylesheet
        let stylesheet = document.styleSheets[4];
        let elementRules;

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(1) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[0]);
        elementRules.style.setProperty('background-color', "#" + colors[0] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(2) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[1]);
        elementRules.style.setProperty('background-color', "#" + colors[1] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(3) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[2]);
        elementRules.style.setProperty('background-color', "#" + colors[2] + "33");

        for(let i = 0; i < stylesheet.cssRules.length; i++) {
            if(stylesheet.cssRules[i].selectorText === '.pp-notes2:nth-child(4) .pp-note') {
                elementRules = stylesheet.cssRules[i];
            }
        }

        elementRules.style.setProperty('color', "#" + colors[3]);
        elementRules.style.setProperty('background-color', "#" + colors[3] + "33");
    }
})();