CraftConnections Notes

Take notes before submitting your guess.
换行
// ==UserScript==
// @name        CraftConnections Notes
// @namespace   yosho.ccn
// @include     https://craftconnections.net/*
// @icon        https://craftconnections.net/favicon.ico
// @grant       GM_addStyle
// @version     1.0.2
// @author      Yosho
// @license     MIT
// @run-at      document-end
// @description Take notes before submitting your guess.
// ==/UserScript==

GM_addStyle(`
    button:is(.dark .dark\\:bg-opacity-90) {
        border: 2px solid white;
    }

    .pointer-events-none {
        pointer-events: auto;
        cursor: default;
    }
`);

//  reinstate if landed on different page
window.navigation.addEventListener("navigate", (event) => {
    setTimeout(loadBoard, 1);
});

function loadBoard() {
    "use strict";
    const grid = document.querySelector(".grid"),
        cells = grid.querySelectorAll(":scope > button"),
        cellData = Array(16).fill(0),
        selected = [];

    for (const i in cells) {
        if (cells[i].innerHTML) //  check if cells actually exist
            try {
                cells[i].addEventListener("wheel", function(event) {
                    cellData[i] = event.deltaY != 0 ? iterator(cellData[i] + (event.deltaY > -1 ? 1 : -1), cellData, event.deltaY) : 0;

                    switch(cellData[i]) {
                        case 1:
                            this.style.backgroundColor = "rgb(253 224 71/var(--tw-bg-opacity))";
                            break;
                        case 2:
                            this.style.backgroundColor = "rgb(132 204 22/var(--tw-bg-opacity))";
                            break;
                        case 3:
                            this.style.backgroundColor = "rgb(147 197 253/var(--tw-bg-opacity))";
                            break;
                        case 4:
                            this.style.backgroundColor = "rgb(192 132 252/var(--tw-bg-opacity))";
                            break;
                        default:
                            this.style.backgroundColor = "";
                    }
                });
                cells[i].addEventListener("click", function() {
                    if (!selected.includes(i))
                        selected.push(i);
                    else
                        selected.splice(selected.indexOf(i), 1);
                });
            } catch(e) {
                console.warn(e);
            }
    }

    // watch for added children to grid
    const gridObserver = new MutationObserver((mutationList) => {
        for (const mutation of mutationList) {
            if (mutation.addedNodes.length > 0 && mutation.addedNodes[0].nodeName === "DIV") {
                for(const i in cellData) {
                    // reset celldata of successfully guessed cells
                    if (cellData[i] != 0 && selected.includes(i))
                        cellData[i] = 0;
                }
                for (const item in selected) {
                    selected.splice(selected.indexOf(item), 1);
                }
            }
        }
    });
    gridObserver.observe(grid, {
        childList: true,
    });

}

// assigns new cell value and handles overflow
function iterator(value, array, direction) {
    value = value < 0 ? 4 : (value > 4 ? 0 : value);

    if (getOccurrence(array, value) > 3 && value != 0) {
        return iterator(value + (direction > -1 ? 1 : -1), array, direction);
    }
    return value;
}

// Fetch occurence of number in array
function getOccurrence(array, value) {
    var count = 0;
    array.forEach((v) => (v === value && count++));
    return count;
}