// ==UserScript==

// @name Show Fps and cps

// @namespace -
// @version 1
// @description Keystrokes!
// @author AZ noobs
// @match *://sploop.io/*
// @match *://dynast.io/*
// @grant none
// ==/UserScript==
var FPS,cps = 0,Mcps = 0,Hue = 0;
(function() {
var UPDATE_DELAY = 360;
var lastUpdate = 0;
var frames = 0;
function updateCounter() {
var now = Date.now();
var elapsed = now - lastUpdate;
if (elapsed < UPDATE_DELAY) {
++frames;
} else {
FPS = Math.round(frames / (elapsed / 1000));
frames = 0;
lastUpdate = now;
}
requestAnimationFrame(updateCounter);
}
lastUpdate = Date.now();
requestAnimationFrame(updateCounter);
})();
document.addEventListener("mousedown", click, false);
document.addEventListener("mouseup", endclick, false);
function click(e) {
if ((e.button == 0 || 1 || 2) || e.keycode == 32) {
cps++
setTimeout(() => {
cps--
}, 900);
}
if (e.button == 0) { document.getElementById("LeftClick").style.backgroundColor
= "white";}
if (e.button == 2)
{ document.getElementById("RightClick").style.backgroundColor = "white";}
}
function endclick(e) {
if (e.button == 0) {document.getElementById("LeftClick").style.backgroundColor
= "rgba(0, 0, 0, 0.4)";}
if (e.button == 2) {document.getElementById("RightClick").style.backgroundColor
= "rgba(0, 0, 0, 0.4)";}
}
document.addEventListener('keydown', (e)=>{
if (e.keyCode == 69) {document.getElementById("key").style.backgroundColor =
"white";
cps++
setTimeout(() => {
cps--
}, 900);}
if (e.keyCode == 87) {document.getElementById("keyW").style.backgroundColor =
"white";}
 if (e.keyCode == 82) {document.getElementById("keyR").style.backgroundColor =
"white";}
if (e.keyCode == 70) {document.getElementById("keyF").style.backgroundColor =
"white";}
if (e.keyCode == 69 && document.activeElement.tagName !== "INPUT") {
if ($("#keyE").css("backgroundColor") == "rgba(0, 0, 0, 0.4)") {
$("#keyE").css("backgroundColor", "white");
} else {
$("#keyE").css("backgroundColor", "rgba(0, 0, 0, 0.4)");
}
}
if (e.keyCode == 81) {document.getElementById("keyQ").style.backgroundColor =
"red";}
if (e.keyCode == 65) {document.getElementById("keyA").style.backgroundColor =
"white";}
if (e.keyCode == 83) {document.getElementById("keyS").style.backgroundColor =
"white";}
if (e.keyCode == 68) {document.getElementById("keyD").style.backgroundColor =
"white";}
})
document.addEventListener('keyup', (e)=>{
if (e.keyCode == 32) {document.getElementById("SpaceBar").style.backgroundColor
= "rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 87) {document.getElementById("keyW").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 82) {document.getElementById("keyR").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 70) {document.getElementById("keyF").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 81) {document.getElementById("keyQ").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 65) {document.getElementById("keyA").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 83) {document.getElementById("keyS").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
if (e.keyCode == 68) {document.getElementById("keyD").style.backgroundColor =
"rgba(0, 0, 0, 0.4)";}
})
setInterval(() => {
if (cps > Mcps) Mcps = cps
Hue += Math.random() * .4
Show.style.color = `hsl(${Hue}, 100%, 70%)`
Panel.style.color = `hsl(${Hue}, 100%, 70%)`
Show.innerHTML = `${FPS}FPS<br>${cps}cps ৡ`
}, 0);
let Show = document.createElement("div");
Show.id = "SHOW"
document.body.prepend(Show);
let Panel = document.createElement("div");
Panel.innerHTML = `
<div id="Panel">
</div>
`
document.body.appendChild(Panel)

var styleItem = document.createElement("style");

styleItem.type = "text/css";
styleItem.appendChild(document.createTextNode(`
#SHOW {
 font-size: 18px;
position: absolute;
width: 75px;
height: 50px;
top:30px;
left:10px;
z-index:1000000;
display: block;
text-align: center;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 0 0 2px #6dd1ff,0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0
10px rgba(0, 0, 0, 1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2);
}

`))
document.head.appendChild(styleItem);
document.getElementById("SHOW").addEventListener('mousedown', function (e) {

let prevX = e.clientX;

let prevY = e.clientY;

window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);
function mousemove(e) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;

const rect = document.getElementById("SHOW").getBoundingClientRect();

document.getElementById("SHOW").style.left = rect.left - newX + 'px';

document.getElementById("SHOW").style.top = rect.top - newY + 'px';

prevX = e.clientX;
prevY = e.clientY;
}
function mouseup() {
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
}
});
document.getElementById("Panel").addEventListener('mousedown', function (e) {

let prevX = e.clientX;

let prevY = e.clientY;

window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseup', mouseup);
function mousemove(e) {
let newX = prevX - e.clientX;
let newY = prevY - e.clientY;
 const rect = document.getElementById("Panel").getBoundingClientRect();

document.getElementById("Panel").style.left = rect.left - newX + 'px';

document.getElementById("Panel").style.top = rect.top - newY + 'px';

prevX = e.clientX;
prevY = e.clientY;
}
function mouseup() {
window.removeEventListener('mousemove', mousemove);
window.removeEventListener('mouseup', mouseup);
}
});

document.getElementById('hat-menu').style.background = "rgba(0,0,0,0)"
document.getElementById("hat_menu_content").style.background = "rgba(0,0,0,0)"
var styleItem1 = document.createElement("style");
styleItem1.type = "text/css";
styleItem1.appendChild(document.createTextNode(`
.green-button {
background-color: rgba(0, 0, 0, 0.5);
box-shadow:none;
}
.green-button:hover {
background-color: rgba(0, 0, 0);
box-shadow:none;
}
.menu .content .menu-item {
border-bottom: none;
}
#hat-menu {
border: none;
opacity: 0.9;
}
.header {
opacity: 0.4;
}
.description {
opacity: 0.4;
}
`))
document.head.appendChild(styleItem1);

setInterval(() => {
if (cps > Mcps) Mcps = cps
Hue += Math.random() * .4
var styleItem1 = document.createElement("style");
styleItem1.type = "text/css";
styleItem1.appendChild(document.createTextNode(`
#hat-menu .green-button {
color: hsl(${Hue}, 100%, 70%);
}
`))
})