tagpro-show-keypresses.user.js

// ==UserScript==
// @name         TagPro show 4 key-presses (spectator only)
// @version      1.0.0
// @description  Shows up to four arrows on every player, one for every direction being pressed.
// @author       github.com/JeremyRH
// @match        https://tagpro.koalabeast.com/game
// @match        https://bash-tp.github.io/tagpro-vcr/game.html
// @match        https://keratagpro.github.io/tagpro-vcr/game.html
// @grant        none
// ==/UserScript==

let drawLoopCallbackId;

function drawLoop() {
  drawLoopCallbackId = requestAnimationFrame(drawLoop);

  for (const player of Object.values(tagpro.players)) {
    drawPlayerArrows(player);
  }
}

function handleSpectator({ type: isSpectator }) {
  // Always cancel any scheduled loop to ensure only one loop runs.
  cancelAnimationFrame(drawLoopCallbackId);

  if (isSpectator) {
    drawLoop();
  }
}


function createArrow(rotation) {
  const arrow = new PIXI.Graphics();

  arrow.beginFill(0xffffff);
  arrow.lineStyle(1, 0x000000);
  arrow.moveTo(0, -21);
  arrow.lineTo(5, -16);
  arrow.lineTo(-5, -16);
  arrow.lineTo(0, -21);
  arrow.endFill();
  arrow.rotation = rotation;

  return arrow;
}

function createPlayerArrows() {
  const container = new PIXI.Container();
  const up = createArrow(0);
  const right = createArrow(Math.PI / 2);
  const down = createArrow(Math.PI);
  const left = createArrow(Math.PI * 1.5);

  container.addChild(up, right, down, left);
  container.x = 20;
  container.y = 20;

  return { container, up, right, down, left };
}

const arrowsSymbol = Symbol("arrowGraphics");

function drawPlayerArrows(player) {
  if (!player.sprite) {
    return;
  }

  let playerArrows = player[arrowsSymbol];

  if (!playerArrows) {
    playerArrows = player[arrowsSymbol] = createPlayerArrows();
    player.sprite.addChild(playerArrows.container);
  }

  if (player.draw && !player.dead) {
    playerArrows.up.visible = player.up;
    playerArrows.right.visible = player.right;
    playerArrows.down.visible = player.down;
    playerArrows.left.visible = player.left;
    playerArrows.container.visible = true;
  } else {
    playerArrows.container.visible = false;
  }
}


(function init() {
  "use strict";

  if (!window.tagpro || !window.PIXI) {
    throw new Error("window.tagpro or window.PIXI is not defined.");
  }

  if (!tagpro.socket) {
    setTimeout(init, 200);
    return;
  }

  // Handle changing from spectator to player and player to spectator.
  tagpro.socket.on("spectator", handleSpectator);

  if (tagpro.spectator) {
    drawLoop();
  }
})();