Skribbl

// ==UserScript==
// @name         Skribblerator
// @version      3.14
// @description  Add sane keyboard controls to the second-worst Pictionary clone
// @author       jancc
// @match        https://*.skribbl.io/*
// @grant        none
// ==/UserScript==


(function () {
    'use strict';

    let $ = window.jQuery;

    class ColorWheel {
        constructor (wheel) {
            this.wheel = wheel;
            this.index = -1;
        }

        get current () {
            this.index = (this.index + 1) % this.wheel.length;
            return this.wheel[this.index];
        }
    }

    /* the following defines the color sequence that the `W`heel hotkey produces, as manually sorted by the author of the script.
     * the spatial arrangement of the colors in-game is as follows:
     *     0 2 4 6 8 10 12 14 16 18 20
     *     1 3 5 7 9 11 13 15 17 19 21
     * so 0 corresponds to the white color, 1 to the black color, and so on.
     */
    let rainbow= new ColorWheel([8, 9, 7, 5, 4, 6, 20, 21, 19, 18, 16, 17, 15, 14, 12, 13, 11, 10]);

    const toolMap = {
        'pen': 'div[data-tool="pen"]',
        'fill': 'div[data-tool="fill"]',
        'erase': 'div[data-tool="erase"]',

        'white': 'div[data-color="0"]',
        'black': 'div[data-color="1"]',

        'size1': 'div[data-size="0"]',
        'size2': 'div[data-size="0.15"]',
        'size3': 'div[data-size="0.45"]',
        'size4': 'div[data-size="1"]',

        'trash': '#buttonClearCanvas',
    };

    let tools = {};
    for (let tool in toolMap) {
        tools[tool] = $(toolMap[tool]);
    }

    /* the following overrides the default brush sizes; the formula that Skribbl uses to calculate
     * the pixel width of a brush from its data-size value is:
     *     width = data-size * (40 - 4) + 4
     * where the minimum value is 4 pixels, and the maximum value is 40 pixels; so set appropriate
     * values between 0 and 1, inclusive; the defaults can be seen fifteen lines above
     */
    tools.size1.attr('data-size', '0');
    tools.size2.attr('data-size', '0.15');
    tools.size3.attr('data-size', '0.3');
    tools.size4.attr('data-size', '0.5');

    let colorPad, colorItems = [];
    for (let idx in [...Array(22).keys()]) {
        colorItems[idx] = {
            item: (colorPad = $('div[data-color="' + idx + '"]')),
            color: colorPad.css('background-color'),
        };
    }

    let paletteVisible = false;
    $(document).keypress(function (event) {
        if (paletteVisible) {
            /* the following is self-explanatory, but in particular I want to point out that it makes `C` clear the canvas,
             * you can remove it or assign it to something else if you think you might accidentally press this hotkey
             */
            switch (event.key.toUpperCase()) {
                case '1':
                    tools.pen.click();
                    tools.size1.click();
                    break;
                case '2':
                    tools.pen.click();
                    tools.size2.click();
                    break;
                case '3':
                    tools.pen.click();
                    tools.size3.click();
                    break;
                case '4':
                    tools.pen.click();
                    tools.size4.click();
                    break;
                case 'D':
                    tools.black.click();
                    break;
                case 'G':
                    tools.white.click();
                    break;
                case 'C':
                    tools.trash.click();
                    break;
                case 'X':
                    clickComplementColor();
                    break;
                case 'R':
                    colorItems[Math.floor(Math.random() * 4)].item.click();
                    break;
                case 'W':
                    colorItems[rainbow.current].item.click();
                    break;
            }
        }
    });

    let colorPreview = $('.colorPreview');
    function clickComplementColor () {
        let idx, currentColor = colorPreview.css('background-color');
        for (let key in colorItems) {
            if (currentColor === colorItems[key].color) {
                idx = parseInt(key);
                colorItems[idx % 2 ? idx - 1 : idx + 1].item.click();
            }
        }
    }

    let containerToolbar = document.querySelector('.containerToolbar');
    new MutationObserver(function (mutationList, observer) {
        paletteVisible = !(containerToolbar.style.display === 'none');
    }).observe(containerToolbar, {
        attributes: true,
    });

    let buttonsWrapper = $('<div>')
    .attr('id', 'buttonsWrapper')
    .css({
        'display': 'flex',
        'flex-direction': 'column',
    }).appendTo('#containerPlayerlist');

    $('.tooltip-wrapper').appendTo(buttonsWrapper);

    let saveCanvasButton = $('<button>Save canvas</button>')
    .attr({
        class: 'btn btn-warning btn-block',
        id: 'saveCanvasButton',
    }).css({
        'margin-top': '5px',
    }).appendTo(buttonsWrapper);

    let gameCanvas = document.querySelector('#canvasGame'),
        dummyLink = document.createElement('a');
    saveCanvasButton.on('click', function () {
        dummyLink.href = gameCanvas.toDataURL();
        dummyLink.download = Date.now() + '.png';
        dummyLink.click();
    });
})();