Painter for coloring sendou.ink build-card

sendou-draw.js

// ==UserScript==
// @name         sendou.ink-color-changer
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  change sendou.ink card color
// @author       MeteorV
// @match        https://sendou.ink/u*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=sendou.ink
// @require      https://openuserjs.org/src/libs/sizzle/GM_config.js
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function() {
    'use strict';
    window.addEventListener('load', function() {
        // after load
        update()
    }, false);

    var color_dict = {"color:yellow": "#fbffab", "color:blue":"#abeeff", "color:green":"#dcffa8", "color:red":"#fa7070",
                          "color:grey":"#6e6f73", "color:purple":"#d9c1f5", "color:pink":"#fab4e8", "color:orange":"#fcbf79",
                          "color:navy":"#72c1ff"}
    function update() {
        console.log("[Info]: Start to find");
        var text_divs = document.getElementsByClassName("chakra-popover__body");
        console.log(text_divs, "[Length]:",text_divs.length)
        if(text_divs==null){
            console.log("[Info]: I can't find anything.");
        }
        for(var i=0; i<text_divs.length; i++){
            if(text_divs[i].textContent.includes("color:")){
                let target = text_divs[i].parentNode.parentNode.parentNode.parentNode.parentNode;
                let btn_group = text_divs[i].parentNode.parentNode.parentNode.querySelectorAll('button');
                for(let i=0; i<btn_group.length; i++){
                    btn_group[i].style.color = "#000000";
                }
                console.log("[Target's context]:", text_divs[i].textContent)
                for(const [key, value] of Object.entries(color_dict)){
                    if(text_divs[i].textContent.includes(key)){
                        target.style.backgroundColor = color_dict[key];
                    }
                }// end of for
            }
            if(text_divs[i].textContent.includes("color:#")){
                let target = text_divs[i].parentNode.parentNode.parentNode.parentNode.parentNode;
                let btn_group = text_divs[i].parentNode.parentNode.parentNode.querySelectorAll('button');
                for(let i=0; i<btn_group.length; i++){
                    btn_group[i].style.color = "#000000";
                }
                let idx = text_divs[i].textContent.indexOf("color:#");
                let color_text = text_divs[i].textContent.slice(idx+6, idx+13);
                target.style.backgroundColor = color_text; // e.g. #fbffab
            }
        }// end of for
        return
    }

    function color_rule(rule) {
        console.log("[Info]: Start to find rule img");
        var imgs = document.getElementsByTagName("img");
        console.log(imgs, "[Length]:",imgs.length)
        if(imgs==null){
            console.log("[Info]: I can't find anything.");
        }
        var rule_dict = {"TW":"Mode (TW)", "SZ":"Mode (SZ)", "TC":"Mode (TC)", "RM":"Mode (RM)", "CB":"Mode (CB)"};
        for(var i=0; i<imgs.length; i++){
            if(imgs[i].alt == rule_dict[rule]){
                let target = imgs[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
                let btn_group = target.querySelectorAll('button');
                for(let i=0; i<btn_group.length; i++){
                    btn_group[i].style.color = "#000000";
                }
                target.style.backgroundColor = color_dict["color:yellow"];
            }
        }// end of for
        return
    }

    function color_reset() {
        console.log("[Info]: Start to reset");
        var text_divs = document.getElementsByClassName("chakra-popover__body");
        console.log(text_divs, "[Length]:",text_divs.length)
        if(text_divs==null){
            console.log("[Info]: I can't find anything.");
        }
        for(var i=0; i<text_divs.length; i++){
            // var ldiv = text_divs[i];
            if(text_divs[i].textContent.includes("color:")){
                let target = text_divs[i].parentNode.parentNode.parentNode.parentNode.parentNode;
                let btn_group = text_divs[i].parentNode.parentNode.parentNode.querySelectorAll('button');
                for(let i=0; i<btn_group.length; i++){
                    btn_group[i].style.color = "#1bb300";
                }
                target.style.backgroundColor = null;
            }
            if(text_divs[i].textContent.includes("hidden:true")){
                let target = text_divs[i].parentNode.parentNode.parentNode.parentNode.parentNode;
                target.style.display = "";
            }
        }// end of for
        return
    }

    function remove() {
        console.log("[Info]: Start to hide something.");
        var text_divs = document.getElementsByClassName("chakra-popover__body");
        console.log(text_divs, "[Length]:",text_divs.length)
        if(text_divs==null){
            console.log("[Info]: I can't find anything.");
        }
        for(var i=0; i<text_divs.length; i++){
            // var ldiv = text_divs[i];
            if(text_divs[i].textContent.includes("hidden:true")){
                let target = text_divs[i].parentNode.parentNode.parentNode.parentNode.parentNode;
                target.style.display = "none";
            }
        }// end of for
        return
    }
    GM_registerMenuCommand("著色🎨🖌️!", update, "U");
    GM_registerMenuCommand("隱藏特定組合🗑️", remove, "D");
    GM_registerMenuCommand("高亮: 塗地💧", () => color_rule('TW'));
    GM_registerMenuCommand("高亮: 佔地🌊", () => color_rule("SZ"));
    GM_registerMenuCommand("高亮: 推塔🗼", () => color_rule("TC"));
    GM_registerMenuCommand("高亮: 運魚🐟", () => color_rule("RM"));
    GM_registerMenuCommand("高亮: 投蛤🦪", () => color_rule("CB"));
    GM_registerMenuCommand("還原初始狀態🔄", color_reset, "R");
    // Emoji 參考 https://www.emojiall.com/zh-hant/categories/I
    // 顏色挑選器  https://www.google.com/search?q=online+color+picker
})();

Demo

請右鍵 - 新分頁開啟，查看 https://i.imgur.com/CwHPoBz.mp4

安裝方式

1. 安裝 TemperMonkey -> 點我到 Chrome 商店 || 點我到 Edge 商店 || 點我到 Firefox 商店

2. 到瀏覽器右上方的拼圖圖案，找到 TemperMonkey，點選大頭針讓它 "固定"
   

3. 點選 "新增腳本"
   

4. 你會看到有很多的程式碼，全部刪掉 (會變成下圖這樣)
   

5. 然後把上面的程式碼全部複製起來，貼到裡面去
   

6. 點選 "檔案" -> "儲存"，或是按 Ctrl+S (Mac 用戶可能是 Command+S)
   

7. 到 https://sendou.ink/u/，你應該可以看到右上方的 TemperMonkey 插件有一個紅色的 1
   

到這邊就完成安裝了，後面教學如何使用。

使用方式

1. 到 sendou.ink 的你的個人頁面，或是你可以到這個 user 頁面 搜尋你自己。
   如果你有登入，你應該可以看到紅色框框的 "Add build"
   
   (註 : 不用搜這個 ID，你應該搜不到 XD)

2. 編輯其中一個 Build (套裝)，或是想要新增一個也可以，在 Description 裡面寫 color:blue
   記得儲存 !
   

3. 你的插件應該要有一個紅色的 1，點下去
   

點下去之後你應該可以看到像下面這張圖片

如果看的到，代表蠻順利的 ! 你點下 "著色" 後，它應該就會幫你把剛剛 Description 寫 color:blue 的那張卡片著色成水藍色。
效果如圖

如果您到下面這個頁面，使用 TamperMonkey 腳本點擊 "著色"，您應該可以看到如圖
https://sendou.ink/u/697386710341779466

• 如果您看不到 "著色" 之類的延伸按扭，可以嘗試新建另一個腳本，然後把下面這個網址內的 Code 貼進去新腳本
  然後儲存 -> 讓我的腳本和它的腳本同時啟用
  https://gist.github.com/disco0/68798129c8673d460cbb7a4bc1517cd3

後面開始介紹一些功能相關。

功能介紹

著色功能

用途 : 讓一些你喜歡的裝備用不同的顏色進行 Highlight，例如最愛用的就是紅色；或是搶魚裝備統一用黃色

• 只能在 Description 的欄位寫
• 目前提供以下的顏色指定
  • 後面會介紹進階用法

color:red
color:orange
color:yellow
color:green
color:blue
color:navy
color:purple
color:grey
color:pink

• 冒號 : 的前後不可以有空格。
• 你可以在它的前後打一長串，例如這樣

這套游很快 !          <---  前面的行可以有文字沒關係
color:pink
加速白給，真爽 !   <---  後面的行也可以有文字沒關係

• 進階使用 : 利用色號進行指定。舉例 : color:#dcffa8
  • 注意 : 色號是 # 後面加六個字元。上面那個舉例可以仔細數。
  • 可以參考 顏色挑選器，找到喜歡的後複製色號。
• 如果你想回復原狀，可以直接重新整理頁面，或是點選 "還原初始狀態"
  

隱藏某些你暫時不想看到的組合

用途 : 有一些已經做好的裝備/或是目前還沒做好的裝備，你想要隱藏，不想讓版面太雜亂
就可以使用這個功能。

• 只能在 Description 的欄位寫
• 方法和著色差不多，但是所使用的文字是 hidden:true
  • 你可以複製、或是背起來 (?) hidden冒號true
• 在 Description 寫了 hidden:true 之後，可以點選 "隱藏特定組合" 來進行隱藏。
  
• 如果你想回復原狀，可以直接重新整理頁面，或是點選 "還原初始狀態"
  

高亮 (Highlight) 特定真格規則的組合

用途 : 有時候我只想看和 "佔地" 有關的裝備，就可以使用這個功能。

• 只需要在裝備的編輯中，下面勾選對應的規則就可以了。
  • TW: 塗地，SZ: 佔地，TC: 推塔，RM: 運魚，CB: 投蛤
  • 
  • 
• 如果您先著色了 SZ，再著色了 TC，那這兩個會同時顯示。
• 如果想要恢復原狀，請直接重新整理頁面。

聲明

此腳本僅供個人使用，嚴禁作為販售用途 (也不值錢阿這個)。
主要是看到網站描述 Editing profile colors is available for patrons of tier "Supporter" ($5 dollar tier)
點下去發現是每個月都要 5 美金 ! 77777 我不如自己做 !
如果有一些 Feature request 或是問題疑問，可以在下面留言 (如果是 Sovled Problem, 可能會為了整潔刪除留言)。
如果是從 [斯普拉遁學院 Discord 群組] 看到這篇的，有疑問也可以直接在閒聊的頻道 Tag 我 (@ MeteorV 開頭)