Taming.io Keystrokes

A simple script to see visually the keys you have pressed. (Stylish for recording, streaming, etc.)
当前为 2023-05-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Taming.io Keystrokes
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  A simple script to see visually the keys you have pressed. (Stylish for recording, streaming, etc.)
// @author       You
// @match        https://taming.io
// @icon         https://taming.io/img/item/amber-spear.png
// @grant        none
// ==/UserScript==

const keystrokes = document.createElement("div");
keystrokes.className = "keystrokes";
keystrokes.innerHTML = `
<div class="w">
    W
  </div>
  <!-- A -->
  <div class="a">
    A
  </div>
  <!-- S -->
  <div class="s">
    S
  </div>
  <!-- D -->
  <div class="d">
    D
  </div>
  <!-- LMB -->
  <div class="lmb">
    <span id="lmb">CPS: </span>
  </div>
  <!-- RMB -->
  <div class="rmb">
   <span id="rmb">CPS: </span>
  </div>
  <!-- SPACE -->
  <div class="space">
    <svg xmlns="http://www.w3.org/2000/svg" width="40px" style="position: absolute; top: 0px; left: 72.5px;" viewBox="0 0 512 512">
      <polygon fill="var(--ci-primary-color, currentColor)" points="40 288 40 416 464 416 464 288 432 288 432 384 72 384 72 288 40 288" class="ci-primary" />
    </svg>
  </div>
`;

const injectCSS = `
.keystrokes {
  width:240px;
  height: 240px;
  text-align: center;
  vertical-align: middle;
  font-family: "Lato", sans-serif;
  pointer-events: none;
  user-select: none;
  position: absolute;
  bottom: 50%;
  left: -30px;
  z-index: 999;
  opacity: 0.7;
  animation: rainbow 10s infinite;
  font-weight: 500;
}
.w,
.a,
.s,
.d,
.space,
.lmb,
.rmb {
  position: absolute;
  font-family: "Lato", sans-serif;
  transition: 0.3s;
  background: #000000;
  border-radius: 5px;
}

.w,
.a,
.s,
.d {
  width: 55px;
  height: 60px;
  line-height: 60px;
  font-size: 20px;
  font-weight: 1000;
}
.lmb,
.rmb {
  font-size: 14px;
  line-height: 40px;
}
.w {
  left: 100px;
  top: 15px;
}
.a {
  left: 35px;
  top: 80px;
}
.s {
  left: 100px;
  top: 80px;
}
.d {
  left: 165px;
  top: 80px;
}
.lmb {
  width: 87.5px;
  height: 40px;
  top: 145px;
  left: 34.5px;
}
.rmb {
  width: 87.5px;
  height: 40px;
  top: 145px;
  left: 132.5px;
}
.space {
  width: 185px;
  height: 40px;
  top: 195px;
  left: 35px;
}

@keyframes rainbow
{
0%
{
color: #ff0000;
}

10%
{
color: #fc7b03;
}

20%
{
color: #fcf803;
}

30%
{
color: #98fc03;
}

40%
{
color: #03fc28;
}

50%
{
color: #03fccf;
}

60%
{
color: #03c2fc;
}

70%
{
color: #033dfc;
}

80%
{
color: #6b03fc;
}

90%
{
color: #e803fc;
}

100%
{
color: #fc031c;
}

}
`;

function createVisual() {
  let s = document.createElement("style");
  s.type = "text/css";
  s.innerHTML = injectCSS;
  document.head.appendChild(s);
  document.body.appendChild(keystrokes);
}

let seconds = 0;
let leftMouseClicks = 0;
let rightMouseClicks = 0;
let keys = [];

window.addEventListener("keydown", function (e) {
  keys[e.keyCode] = e.type == "keydown";

  if (keys[87]) {
    document.getElementsByClassName("w")[0].style.backgroundColor = "#424242";
  }
  if (keys[65]) {
    document.getElementsByClassName("a")[0].style.backgroundColor = "#424242";
  }
  if (keys[83]) {
    document.getElementsByClassName("s")[0].style.backgroundColor = "#424242";
  }
  if (keys[68]) {
    document.getElementsByClassName("d")[0].style.backgroundColor = "#424242";
  }

  if (keys[32]) {
    document.getElementsByClassName("space")[0].style.backgroundColor =
      "#424242";
  }
});
window.addEventListener("keyup", function (e) {
  keys[e.keyCode] = e.type == "keydown";
  if (e.keyCode != 32) {
    document.getElementsByClassName(e.key.toLowerCase())[0].style.background =
      "#000000";
  } else {
    document.getElementsByClassName("space")[0].style.background = "#000000";
  }
});

window.onload = function () {
  createVisual();
  function cps() {
    document.onclick = function () {
      leftMouseClicks++;
      document.getElementsByClassName("lmb")[0].style.background = "#424242";
    };

    this.secCounter = setInterval(function () {
      seconds++;
    }, 100);
    this.reset = function () {
      leftMouseClicks = 0;
      rightMouseClicks = 0;
      seconds = 0;
    };

    this.getLeftCps = function () {
      return Math.ceil((leftMouseClicks / seconds) * 10);
    };

    this.getRightCps = function () {
      return Math.ceil((rightMouseClicks / seconds) * 10);
    };
  }

  var counter = new cps();

  setInterval(function () {
    if (counter.getLeftCps) {
      document.getElementById("lmb").innerHTML = "CPS: " + counter.getLeftCps();
    }

    if (counter.getRightCps) {
      document.getElementById("rmb").innerHTML =
        "CPS: " + counter.getRightCps();
    }

    document.getElementsByClassName("lmb")[0].style.background = "#000000";
    document.getElementsByClassName("rmb")[0].style.background = "#000000";

    counter.reset();
  }, 1000);
};

document.addEventListener("contextmenu", (event) => {
  event.preventDefault();
  rightMouseClicks++;
  document.getElementsByClassName("rmb")[0].style.background = "#424242";
});