Black border of monochrome custom stones

OGS Development
4

If I understand correctly, you are looking for something like this?

It’s a Tampermonkey script I wrote which removes the black border around the white stones, giving them a “flat” look against a plain background

relevant code

This is the code, just for modifying the border, not changing the background colors… not tested :stuck_out_tongue:

You can set the color at line ctx.strokeStyle = color; to some other hex value, or play around with line width

(function() {
    function setup() {
        console.log("[ogs border] setting up");
        // custom place stone function for flat edges
        var placeStoneFn = function(color) {
            return function(ctx, shadow_ctx, stone, cx, cy, radius) {
                let lineWidth = radius * 0.10;
                if (lineWidth < 0.3) {
                    lineWidth = 0;
                }
                ctx.fillStyle = color;
                ctx.strokeStyle = color; // changed to use same color as stone, instead of line color
                if (lineWidth > 0) {
                    ctx.lineWidth = lineWidth;
                }
                ctx.beginPath();
                ctx.arc(cx, cy, radius - lineWidth / 2, 0.001, 2 * Math.PI, false); /* 0.001 to workaround fucked up chrome bug */
                if (lineWidth > 0) {
                    ctx.stroke();
                }
                ctx.fill();
            };
        };

        GoThemes.white.Plain.prototype.placeWhiteStone = placeStoneFn(white);
        GoThemes.black.Plain.prototype.placeBlackStone = placeStoneFn(black);

        // click the theme selector which will trigger a redraw
        document.querySelector("div.theme-set div.selector").click();
 
        console.log("[ogs border] done");
    };
 
    // set up the mutation observer
    // altho this should be installed with @run-at idle, I still saw the code run prior to these globals being available, so just watch the page for updates until they are present
    var observer = new MutationObserver(function (mutations, me) {
        if (typeof data !== "undefined" && typeof GoThemes !== "undefined") {
            setup();
            me.disconnect(); // stop observing
        } else {
            console.log("[ogs no border] data or GoThemes not found, waiting...");
        }
    });
 
    // start observing
    observer.observe(document, {
        childList: true,
        subtree: true
    });
})();
3 Likes