ping.user.js

// ==UserScript==
// @name         Outer Empires 2 Latency Display
// @namespace    https://github.com/PlayMaGame/oe2-userscripts
// @author       PlayMaGame
// @license      MIT
// @version      0.5
// @description  Replace version with color-coded ping and FPS for Outer Empires 2
// @match        https://game.dev.outerempires.net/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // FPS tracking
    let currentFPS = 0;
    let frameCount = 0;
    let lastFPSTime = performance.now();

    function trackFPS() {
        frameCount++;
        const now = performance.now();
        const delta = now - lastFPSTime;
        if (delta >= 1000) {
            currentFPS = Math.round((frameCount * 1000) / delta);
            frameCount = 0;
            lastFPSTime = now;
        }
        requestAnimationFrame(trackFPS);
    }
    requestAnimationFrame(trackFPS);

    function getFPSColor(fps) {
        if (fps >= 60) return 'lime';
        if (fps >= 30) return 'yellow';
        return 'red';
    }

    function getLatencyColor(latency) {
        if (latency === 'Error') return 'red';
        if (latency < 50) return 'lime';
        if (latency < 100) return 'yellow';
        return 'red';
    }

    async function measureLatency() {
        const start = performance.now();
        try {
            await fetch('https://game.dev.outerempires.net', {
                method: 'HEAD',
                cache: 'no-store'
            });
            return Math.round(performance.now() - start);
        } catch (error) {
            return 'Error';
        }
    }

    async function updateDisplay() {
        const versionDisplay = document.getElementById('ui_playversion_display');
        if (!versionDisplay) return;

        versionDisplay.style.zIndex = '200';
        versionDisplay.style.whiteSpace = 'nowrap';
        versionDisplay.style.overflow = 'visible';
        versionDisplay.style.position = 'absolute';
		versionDisplay.style.top = '60px'; // <-- add this
        versionDisplay.style.left = '50%';
        versionDisplay.style.transform = 'translateX(-50%)';

        const latency = await measureLatency();

        const sep = ` <span style="color:#555;">&nbsp;|&nbsp;</span> `;

        const pingHTML  = `Ping: <span style="color:${getLatencyColor(latency)};font-weight:bold;">${latency}ms</span>`;
        const fpsHTML   = `FPS: <span style="color:${getFPSColor(currentFPS)};font-weight:bold;">${currentFPS}</span>`;

        versionDisplay.innerHTML = [pingHTML, fpsHTML].join(sep);
    }

    updateDisplay();
    setInterval(updateDisplay, 1000); // Faster refresh so FPS feels live
})();