Draw Circle Under Dynamic Sprites

Draw_Circle_Under_Dynamic_Sprites.user.js

// ==UserScript==
// @name            Draw Circle Under Dynamic Sprites
// @description     Draws a circle under Boosts, Pups, Bombs & Portals (for use with Pizza Respawn Warnings)
// @version         0.0.1
// @match           https://*.koalabeast.com/game
// @match           https://*.koalabeast.com/game?*
// @updateURL       https://gist.github.com/nabbynz/99b5e6b829056c170a83e0f115717641/raw/Draw_Circle_Under_Dynamic_Sprites.user.js
// @downloadURL     https://gist.github.com/nabbynz/99b5e6b829056c170a83e0f115717641/raw/Draw_Circle_Under_Dynamic_Sprites.user.js
// @license         GPL version 3 or any later version; http://www.gnu.org/copyleft/gpl.html
// @grant           none
// @author          nabby
// ==/UserScript==

'use strict';

console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + ')');

/* eslint-env jquery */
/* globals tagpro, tagproConfig, PIXI */
/* eslint-disable no-multi-spaces */
/* eslint-disable dot-notation */


tagpro.ready(() => {
    let addSprites = function() {
        let tiles = [ 5, 14, 15, 6, 10, 13, 24, 25 ]; // boosts, pups, bombs, portals

        let circleCanvas = createCanvas(40, 40);
        let circleCtx = circleCanvas.getContext('2d');

        circleCtx.strokeStyle = '#222222';
        circleCtx.lineWidth = 2;
        circleCtx.setLineDash([4, 4]);
        circleCtx.beginPath();
        circleCtx.arc(20, 20, 14, 0, Math.PI * 2);
        circleCtx.stroke();
        circleCtx.closePath();

        for (let x = 0; x < tagpro.map.length; x++) {
            for (let y = 0; y < tagpro.map[0].length; y++) {
                const baseTileId = Math.floor(tagpro.map[x][y]);

                if (tiles.indexOf(baseTileId) >= 0) {
                    let sprite = new PIXI.Sprite.from(circleCanvas);

                    sprite.x = x * 40;
                    sprite.y = y * 40;

                    tagpro.renderer.layers.midground.addChildAt(sprite, 0);
                }
            }
        }
    };

    let waitForMidground = () => {
        if (!tagpro.map || !tagpro.map.length || !tagpro.renderer || !tagpro.renderer.layers || !tagpro.renderer.layers.midground) {
            setTimeout(waitForMidground, 50);
            return false;
        }

        addSprites();
    };

    waitForMidground();
});

function createCanvas(width, height, forceDOM = false) {
    if (!forceDOM && typeof OffscreenCanvas !== 'undefined') {
        return new OffscreenCanvas(width, height); // An 'OffscreenCanvas' is smaller and faster than a DOM canvas.

    } else {
        let canvas = document.createElement('canvas');
        canvas.width = width;
        canvas.height = height;
        return canvas;
    }
}