JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<input type="text" id="inp">
<pre id="out"></pre>

JavaScript

const SLOW_DOWN = 10;

const down = new Map();
const justPressed = new Map();
const justReleased = new Map();

function render() {
	out.textContent = JSON.stringify({ down: [...down],
  justPressed: [...justPressed],
  justReleased: [...justReleased]}, null, 2);
}

window.addEventListener('keydown', (event) => {
  down.set(event.code, true);
  justPressed.set(event.code, true);
}, true);

window.addEventListener('keyup', (event) => {
  down.set(event.code, false);
  justReleased.set(event.code, true);
}, true);

function mainLoop() {
  render();

  for (const key of justPressed.keys()) {
    justPressed.delete(key);
  }
  for (const key of justReleased.keys()) {
    justReleased.delete(key);
  }

  let i = SLOW_DOWN;
  const tick = () => {
    i -= 1;
    if (i <= 0) {
      mainLoop();
    } else {
      requestAnimationFrame(tick)
    }
  }
  requestAnimationFrame(tick);
}

mainLoop();