Imanok

Imanok.js

import { useCallback, useEffect, useState } from 'react';

const Imanok = ({ callback }) => {
  const expected = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];
  const [keys, setKeys] = useState([]);

  const onKeyDown = useCallback(
    event => {
      const newKeys = [...keys];
      newKeys.push(event.keyCode);
      setKeys(newKeys);
    },
    [keys]
  );

  const onKeyUp = useCallback(
    event => {
      const index = keys.lastIndexOf(event.keyCode);

      if (keys[index] !== expected[index]) {
        setKeys([]);
      }

      if (keys.length === expected.length) {
        if (keys.every((value, idx) => value === expected[idx])) {
          setKeys([]);
          callback();
        }
      }
    },
    [keys]
  );

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown, false);
    document.addEventListener('keyup', onKeyUp, false);

    return () => {
      document.removeEventListener('keydown', onKeyDown, false);
      document.removeEventListener('keyup', onKeyUp, false);
    };
  }, [onKeyDown, onKeyUp]);

  return null;
};

export default Imanok;