Feature/fix touch bug

package.json

@@ -65,6 +65,7 @@
     "react-dnd-touch-backend": "^11.1.3",
     "react-dom": "^17.0.2",
     "react-grid-layout": "^0.16.6",
+    "react-hammerjs": "^1.0.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.2.0",
     "react-intl": "^2.7.2",

src/components/Board/Tile/Tile.component.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Scannable } from 'react-scannable';
-
+import Hammer from 'react-hammerjs';
 import './Tile.css';
 
 const propTypes = {
@@ -37,6 +37,7 @@ const Tile = props => {
     children,
     className: classNameProp,
     variant,
+    onClick,
     ...other
   } = props;
 
@@ -67,9 +68,24 @@ const Tile = props => {
 
   return (
     <Scannable onSelect={onSelect} id={'scannable'}>
-      <button className={className} type="button" {...other}>
-        <div className={tileShapeClassName} style={tileShapeStyles} />
-        {children}
+      <button className={className} {...other}>
+        <Hammer
+          onPress={e => {
+            if (typeof onClick === 'function') {
+              onClick();
+            }
+          }}
+          options={{
+            recognizers: {
+              press: { time: 20, threshold: 500 }
+            }
+          }}
+        >
+          <div>
+            <div className={tileShapeClassName} style={tileShapeStyles} />
+            {children}
+          </div>
+        </Hammer>
       </button>
     </Scannable>
   );

src/components/Board/Tile/Tile.test.js

@@ -4,6 +4,7 @@ import { Scannable } from 'react-scannable';
 
 import Symbol from '../Symbol';
 import Tile from './Tile.component';
+import Hammer from 'react-hammerjs';
 
 it('renders without crashing', () => {
   const wrapper = shallow(<Tile />);
@@ -56,8 +57,11 @@ it('on tile click', () => {
     variant: 'button',
     onClick: jest.fn()
   };
-  const wrapper = shallow(<Tile {...props} />);
-  wrapper.find('button').simulate('click');
+  const wrapper = mount(<Tile {...props} />);
+  wrapper
+    .find(Hammer)
+    .props()
+    .onPress();
   expect(props.onClick.mock.calls.length).toEqual(1);
 });
 

yarn.lock

@@ -14654,4 +14654,4 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/zrender/-/zrender-5.3.1.tgz#fa8e63ac7e719cfd563831fe8c42a9756c5af384"
   integrity sha512-7olqIjy0gWfznKr6vgfnGBk7y4UtdMvdwFmK92vVQsQeDPyzkHW1OlrLEKg6GHz1W5ePf0FeN1q2vkl/HFqhXw==
   dependencies:
-    tslib "2.3.0"
+    tslib "2.3.0"