// ==UserScript==
// @name Sploo.io Better Health Bar & Show FPS And CPS
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Show %HP, FPS & CPS for Sploop.io
// @author normalplayer
// @match *://sploop.io/*
// @icon https://i.postimg.cc/vBz07fcS/Screenshot-2025-08-28-090152.png
// @grant none
// ==/UserScript==
(function() {
'use strict';
function lerpColor(a, b, amount) {
const ah = parseInt(a.replace(/#/g, ''), 16),
ar = ah >> 16, ag = (ah >> 8) & 0xff, ab = ah & 0xff;
const bh = parseInt(b.replace(/#/g, ''), 16),
br = bh >> 16, bg = (bh >> 8) & 0xff, bb = bh & 0xff;
const rr = ar + amount * (br - ar),
rg = ag + amount * (bg - ag),
rb = ab + amount * (bb - ab);
return '#' + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1);
}
function drawHpText(ctx, text, xPos, yPos, color) {
ctx.save();
ctx.font = "20px 'Baloo Paaji'";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillStyle = color;
ctx.fillText(text, xPos, yPos);
ctx.restore();
}
const enhanceFillRect = function (fill) {
return function (x, y, width, height) {
const fullWidth = 95;
const hpPercent = Math.max(0, Math.min(1, width / fullWidth));
const percentText = `${~~(width / fullWidth * 100)}%`;
const centerX = x + fullWidth / 2;
let color;
if (this.fillStyle === "#a4cc4f") {
if (hpPercent > 0.5) {
color = lerpColor("#a4cc4f", "#e09f3e", (1 - hpPercent) * 2);
} else {
color = lerpColor("#e09f3e", "#cc5151", (0.5 - hpPercent) * 2);
}
this.fillStyle = color;
drawHpText(this, percentText, centerX, y + height + 9, color);
}
if (this.fillStyle === "#cc5151") {
if (hpPercent > 0.5) {
color = lerpColor("#cc5151", "#e09f3e", (1 - hpPercent) * 2);
} else {
color = lerpColor("#e09f3e", "#a4cc4f", (0.5 - hpPercent) * 2);
}
this.fillStyle = color;
drawHpText(this, percentText, centerX, y + height + 9, color);
}
fill.call(this, x, y, width, height);
};
};
const FillRect = CanvasRenderingContext2D.prototype.fillRect;
CanvasRenderingContext2D.prototype.fillRect = enhanceFillRect(FillRect);
const { fillText } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.fillText = function (...args) {
if (typeof args[0] === "string") {
this.lineWidth = 8;
this.strokeStyle = "#313131";
this.strokeText.apply(this, args);
}
return fillText.apply(this, args);
};
const overlay = document.createElement("canvas");
overlay.width = window.innerWidth;
overlay.height = window.innerHeight;
overlay.style.position = "absolute";
overlay.style.top = "0";
overlay.style.left = "0";
overlay.style.pointerEvents = "none";
overlay.style.zIndex = "9999";
document.body.appendChild(overlay);
const octx = overlay.getContext("2d");
let frameCount = 0;
let fpsStartTime = performance.now();
let fps = 0;
let cps = 0;
document.addEventListener("mousedown", () => {
cps++;
setTimeout(() => { cps--; }, 1000);
});
function loop() {
const now = performance.now();
frameCount++;
if (now - fpsStartTime >= 1000) {
fps = frameCount;
frameCount = 0;
fpsStartTime = now;
}
octx.clearRect(0, 0, overlay.width, overlay.height);
octx.save();
octx.font = "20px 'Baloo Paaji'";
octx.fillStyle = "white";
octx.textBaseline = "top";
octx.fillText(`FPS: ${fps}`, 10, 5);
octx.fillText(`CPS: ${cps}`, 10, 30);
octx.restore();
requestAnimationFrame(loop);
}
loop();
window.addEventListener("resize", () => {
overlay.width = window.innerWidth;
overlay.height = window.innerHeight;
});
const { strokeRect } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.strokeRect = function(x, y, w, h) {
if ((w === 40 && h === 40) || this.strokeStyle === "#bfbfbf" || this.strokeStyle === "#dedede") {
return;
}
return strokeRect.call(this, x, y, w, h);
};
const { stroke } = CanvasRenderingContext2D.prototype;
CanvasRenderingContext2D.prototype.stroke = function(...args) {
if (this.strokeStyle === "#bfbfbf" || this.strokeStyle === "#dedede") {
return;
}
return stroke.apply(this, args);
};
})();
