sync keyboard event to requestAnimationFrame

KeyBoard.js

export function KeyBoard(keymap) {
  const pressing = new Set();

  window.addEventListener("keydown", ({ key }) => 
    keymap[key] && pressing.add(keymap[key])
  );
  
  window.addEventListener("keyup", ({ key }) => 
    keymap[key] && pressing.delete(keymap[key])
  );

  return () => pressing;
}

main.js

import { KeyBoard } from './KeyBoard';

const getAction = KeyBoard({
  w: 'Up',
  s: 'Down',
  a: 'Left',
  d: 'Right',
});

function loop() {
  // get current press key  
  const pressing = getAction();

  // print out the key you press
  console.log(pressing);
  
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);