change symbols on movement buttons and refine some things

src/components/buttons/MovementControls.jsx

@@ -11,15 +11,26 @@ import {
   shallowEqual,
   useDispatch,
 } from 'react-redux';
+import {
+  PiMagnifyingGlassMinus,
+  PiMagnifyingGlassPlus,
+  PiArrowFatLeft,
+  PiArrowFatRight,
+  PiArrowFatUp,
+  PiArrowFatDown,
+  PiCaretDoubleUp,
+  PiCaretDoubleDown,
+} from "react-icons/pi";
 
 import {
   setMoveU,
   setMoveV,
   setMoveW,
+  cancelMove,
 } from '../../store/actions';
 
 const btnStyle = {
-  fontSize: 34,
+  // fontSize: 34,
 };
 
 const MovementControls = () => {
@@ -29,6 +40,73 @@ const MovementControls = () => {
   ], shallowEqual);
   const dispatch = useDispatch();
 
+  const onPressStart = useCallback((event) => {
+    event.preventDefault();
+    switch (event.currentTarget.id) {
+      case 'forwardbtn':
+        dispatch(setMoveV(-1));
+        break;
+      case 'backwardbtn':
+        dispatch(setMoveV(1));
+        break;
+      case 'leftbtn':
+        dispatch(setMoveU(-1));
+        break;
+      case 'rightbtn':
+        dispatch(setMoveU(1));
+        break;
+      case 'upbtn':
+        dispatch(setMoveW(-1));
+        break;
+      case 'downbtn':
+        dispatch(setMoveW(1));
+        break;
+      default:
+    }
+  }, []);
+
+  const onPressStop = useCallback((event) => {
+    event.preventDefault();
+    switch (event.currentTarget.id) {
+      case 'forwardbtn':
+        dispatch(setMoveV(0));
+        break;
+      case 'backwardbtn':
+        dispatch(setMoveV(0));
+        break;
+      case 'leftbtn':
+        dispatch(setMoveU(0));
+        break;
+      case 'rightbtn':
+        dispatch(setMoveU(0));
+        break;
+      case 'upbtn':
+        dispatch(setMoveW(0));
+        break;
+      case 'downbtn':
+        dispatch(setMoveW(0));
+        break;
+      default:
+    }
+  }, []);
+
+  const onCancel = useCallback((event) => {
+    event.preventDefault();
+    dispatch(cancelMove());
+  }, []);
+
+  const refCallBack = useCallback((node) => {
+    if (!node) {
+      return;
+    }
+    node.addEventListener('touchstart', onPressStart, { passive: false });
+    node.addEventListener('mousedown', onPressStart, { passive: false });
+    node.addEventListener('touchend', onPressStop, { passive: false });
+    node.addEventListener('mouseup', onPressStop, { passive: false });
+    node.addEventListener('mouseleave', onCancel, { passive: false });
+    node.addEventListener('touchcancel', onCancel, { passive: false });
+  }, [onPressStart, onPressStop, onCancel]);
+
   if (!holdPaint && !is3D) {
     return null;
   }
@@ -37,6 +115,7 @@ const MovementControls = () => {
     <>
       <div
         className="actionbuttons"
+        id="forwardbtn"
         role="button"
         tabIndex={0}
         style={{
@@ -44,15 +123,13 @@ const MovementControls = () => {
           left: 57,
           bottom: 139,
         }}
-        onMouseDown={() => dispatch(setMoveV(-1))}
-        onMouseUp={() => dispatch(setMoveV(0))}
-        onTouchStart={() => dispatch(setMoveV(-1))}
-        onTouchEnd={() => dispatch(setMoveV(0))}
+        ref={refCallBack}
       >
-        ↑
+        <PiArrowFatUp />
       </div>
       <div
         className="actionbuttons"
+        id="backwardbtn"
         role="button"
         tabIndex={0}
         style={{
@@ -60,15 +137,13 @@ const MovementControls = () => {
           left: 57,
           bottom: 98,
         }}
-        onMouseDown={() => dispatch(setMoveV(1))}
-        onMouseUp={() => dispatch(setMoveV(0))}
-        onTouchStart={(event) => dispatch(setMoveV(1))}
-        onTouchEnd={(event) => dispatch(setMoveV(0))}
+        ref={refCallBack}
       >
-        ↓
+        <PiArrowFatDown />
       </div>
       <div
         className="actionbuttons"
+        id="leftbtn"
         role="button"
         tabIndex={0}
         style={{
@@ -76,15 +151,13 @@ const MovementControls = () => {
           left: 16,
           bottom: 98,
         }}
-        onMouseDown={() => dispatch(setMoveU(-1))}
-        onMouseUp={() => dispatch(setMoveU(0))}
-        onTouchStart={() => dispatch(setMoveU(-1))}
-        onTouchEnd={() => dispatch(setMoveU(0))}
+        ref={refCallBack}
       >
-        ←
+        <PiArrowFatLeft />
       </div>
       <div
         className="actionbuttons"
+        id="rightbtn"
         role="button"
         tabIndex={0}
         style={{
@@ -92,44 +165,35 @@ const MovementControls = () => {
           left: 98,
           bottom: 98,
         }}
-        onMouseDown={() => dispatch(setMoveU(1))}
-        onMouseUp={() => dispatch(setMoveU(0))}
-        onTouchStart={() => dispatch(setMoveU(1))}
-        onTouchEnd={() => dispatch(setMoveU(0))}
+        ref={refCallBack}
       >
-        →
+        <PiArrowFatRight />
       </div>
       <div
         className="actionbuttons"
+        id="upbtn"
         role="button"
         tabIndex={0}
         style={{
-          ...btnStyle,
           left: 16,
           bottom: 139,
         }}
-        onMouseDown={() => dispatch(setMoveW(-1))}
-        onMouseUp={() => dispatch(setMoveW(0))}
-        onTouchStart={() => dispatch(setMoveW(-1))}
-        onTouchEnd={() => dispatch(setMoveW(0))}
+        ref={refCallBack}
       >
-        ↖
+        {(is3D) ? <PiCaretDoubleUp /> : <PiMagnifyingGlassMinus />}
       </div>
       <div
         className="actionbuttons"
+        id="downbtn"
         role="button"
         tabIndex={0}
         style={{
-          ...btnStyle,
           left: 98,
           bottom: 139,
         }}
-        onMouseDown={() => dispatch(setMoveW(1))}
-        onMouseUp={() => dispatch(setMoveW(0))}
-        onTouchStart={() => dispatch(setMoveW(1))}
-        onTouchEnd={() => dispatch(setMoveW(0))}
+        ref={refCallBack}
       >
-        ↘
+        {(is3D) ? <PiCaretDoubleDown /> : <PiMagnifyingGlassPlus />}
       </div>
     </>
   );