{"size": 4029, "ext": "js", "max_stars_repo_path": "src/hoc/keyboardManager/index.js", "max_stars_repo_name": "JsQkzoo18/Game-15", "max_stars_repo_stars_event_min_datetime": "2018-11-21T05:39:52.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-25T15:31:03.000Z", "max_issues_repo_path": "src/hoc/keyboardManager/index.js", "max_issues_repo_name": "JsQkzoo18/Game-15", "max_issues_repo_issues_event_min_datetime": "2020-04-14T21:19:55.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-10T12:12:25.000Z", "max_forks_repo_path": "src/hoc/keyboardManager/index.js", "max_forks_repo_name": "3izzo/N-Puzzle", "max_forks_repo_forks_event_min_datetime": "2018-11-22T07:14:47.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-24T08:55:26.000Z"}
{"max_stars_count": 173, "max_issues_count": 5, "max_forks_count": 34, "avg_line_length": 25.3396226415, "max_line_length": 79, "alphanum_fraction": 0.6299329859}
import React, { useState, useEffect } from 'react';

const useMovement = () => {
  const [event, handleEvent] = useState(null);

  const emit = (event, data) => {
    handleEvent([event, data]);
  };

  const map = {
    38: 0, // Up
    39: 1, // Right
    40: 2, // Down
    37: 3, // Left
    75: 0, // Vim up
    76: 1, // Vim right
    74: 2, // Vim down
    72: 3, // Vim left
    87: 0, // W
    68: 1, // D
    83: 2, // S
    65: 3 // A
  };

  // Respond to direction keys
  const handleKey = event => {
    const modifiers =
      event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
    const mapped = map[event.which];
    if (!modifiers) {
      if (mapped !== undefined) {
        event.preventDefault();
        emit('move', mapped);
      }
    }

    // R key restarts the game
    if (!modifiers && event.which === 82) {
      restart.call(self, event);
    }
  };

  const listenKey = () => {
    window.document.addEventListener('keydown', handleKey);
  };

  const restart = event => {
    event.preventDefault();
    emit('restart');
  };

  const keepPlaying = event => {
    event.preventDefault();
    emit('keepPlaying');
  };

  let eventTouchstart = null,
    eventTouchmove = null,
    eventTouchend = null,
    touchStartClientX = null,
    touchStartClientY = null;

  if (window.navigator.msPointerEnabled) {
    //Internet Explorer 10 style
    eventTouchstart = 'MSPointerDown';
    eventTouchmove = 'MSPointerMove';
    eventTouchend = 'MSPointerUp';
  } else {
    eventTouchstart = 'touchstart';
    eventTouchmove = 'touchmove';
    eventTouchend = 'touchend';
  }

  const eventTouchStartListner = event => {
    if (
      (!window.navigator.msPointerEnabled && event.touches.length > 1) ||
      event.targetTouches > 1
    ) {
      return; // Ignore if touching with more than 1 finger
    }

    if (window.navigator.msPointerEnabled) {
      touchStartClientX = event.pageX;
      touchStartClientY = event.pageY;
    } else {
      touchStartClientX = event.touches[0].clientX;
      touchStartClientY = event.touches[0].clientY;
    }

    //event.preventDefault();
  };

  const eventTouchmoveListner = event => {
    // event.preventDefault();
  };

  const eventTouchendListner = event => {
    if (
      (!window.navigator.msPointerEnabled && event.touches.length > 0) ||
      event.targetTouches > 0
    ) {
      return; // Ignore if still touching with one or more fingers
    }

    let touchEndClientX;
    let touchEndClientY;

    if (window.navigator.msPointerEnabled) {
      touchEndClientX = event.pageX;
      touchEndClientY = event.pageY;
    } else {
      touchEndClientX = event.changedTouches[0].clientX;
      touchEndClientY = event.changedTouches[0].clientY;
    }

    const dx = touchEndClientX - touchStartClientX;
    const absDx = Math.abs(dx);

    const dy = touchEndClientY - touchStartClientY;
    const absDy = Math.abs(dy);

    if (Math.max(absDx, absDy) > 10) {
      // (right : left) : (down : up)
      emit('move', absDx > absDy ? (dx > 0 ? 1 : 3) : dy > 0 ? 2 : 0);
    }
  };

  const listenSwipe = () => {
    window.document.addEventListener(eventTouchstart, eventTouchStartListner);
    window.document.addEventListener(eventTouchmove, eventTouchmoveListner);
    window.document.addEventListener(eventTouchend, eventTouchendListner);
  };

  const removeEventListeners = () => {
    window.document.removeEventListener('keydown', handleKey);
    window.document.removeEventListener(
      eventTouchstart,
      eventTouchStartListner
    );
    window.document.removeEventListener(eventTouchmove, eventTouchmoveListner);
    window.document.removeEventListener(eventTouchend, eventTouchendListner);
  };

  useEffect(() => {
    listenKey();
    listenSwipe();
    return () => removeEventListeners();
  });

  return event;
};

const KeyBoardManager = PassedComponent => props => {
  const eventType = useMovement();
  return <PassedComponent eventType={eventType} {...props} />;
};

export default KeyBoardManager;
