make Pencil button switch between modes on long-press

src/components/UI.jsx

@@ -33,6 +33,9 @@ const UI = () => {
   return (
     <>
       <Alert />
+      {(showMvmCtrls
+        || (isOnMobile && (is3D || (holdPaint > 0) && !isHistoricalView))
+      ) && <MovementControls />}
       {(isHistoricalView) ? (
         <HistorySelect />
       ) : (
@@ -40,8 +43,6 @@ const UI = () => {
           <PalselButton />
           <Palette />
           {(!is3D) && <GlobeButton />}
-          {(showMvmCtrls || ((is3D || holdPaint) && isOnMobile))
-            && <MovementControls />}
           {(!is3D && isOnMobile) && <PencilButton />}
           <CoolDownBox />
         </>

src/components/buttons/PencilButton.jsx

@@ -2,11 +2,12 @@
  *
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { TbPencil, TbPencilMinus } from 'react-icons/tb';
 import { t } from 'ttag';
 
+import useLongPress from '../hooks/useLongPress';
 import { HOLD_PAINT } from '../../core/constants';
 import { selectHoldPaint } from '../../store/actions';
 
@@ -20,25 +21,71 @@ const PencilButton = () => {
   ], shallowEqual);
   const dispatch = useDispatch();
 
+  const onLongPress = useCallback(() => {
+    let nextMode;
+    switch (holdPaint) {
+      case HOLD_PAINT.OFF:
+      case HOLD_PAINT.PENCIL:
+        if (window.ssv?.backupurl) {
+          nextMode = HOLD_PAINT.HISTORY;
+          break;
+        }
+      // eslint-disable-next-line no-fallthrough
+      case HOLD_PAINT.HISTORY:
+        if (window.let_me_cheat) {
+          nextMode = HOLD_PAINT.OVERLAY;
+          break;
+        }
+      // eslint-disable-next-line no-fallthrough
+      default:
+        nextMode = (holdPaint)
+          ? HOLD_PAINT.OFF
+          : HOLD_PAINT.PENCIL;
+    }
+    dispatch(selectHoldPaint(nextMode));
+  }, [holdPaint, dispatch]);
+
+  const onShortPress = useCallback(() => {
+    dispatch(selectHoldPaint(
+      (holdPaint)
+        ? HOLD_PAINT.OFF
+        : HOLD_PAINT.PENCIL,
+    ));
+  }, [holdPaint, dispatch]);
+
+  const refCallback = useLongPress(onShortPress, onLongPress);
+
+  let className = 'actionbuttons';
+  let title = t`Enable Pencil`;
+  switch (holdPaint) {
+    case HOLD_PAINT.PENCIL:
+      className += ' ppencil pressed';
+      title = t`Disable Pencil`;
+      break;
+    case HOLD_PAINT.HISTORY:
+      className += ' phistory pressed';
+      title = t`Disable History Pencil`;
+      break;
+    case HOLD_PAINT.OVERLAY:
+      className += ' poverlay pressed';
+      title = t`Disable Overlay Pencil`;
+      break;
+    default:
+  }
+
   return (
     <div
       id="pencilbutton"
-      className={
-        `actionbuttons${(holdPaint === HOLD_PAINT.PENCIL) ? ' pressed' : ''}`
-      }
+      className={className}
       style={{
-        bottom: (holdPaint === HOLD_PAINT.PENCIL || showMvmCtrls) ? 180 : 98,
+        bottom: (holdPaint || showMvmCtrls) ? 180 : 98,
       }}
       role="button"
-      title={(holdPaint === HOLD_PAINT.PENCIL)
-        ? t`Disable Pencil`
-        : t`Enable Pencil`}
+      title={title}
       tabIndex={-1}
-      onClick={() => dispatch(selectHoldPaint(
-        (holdPaint === HOLD_PAINT.PENCIL) ? HOLD_PAINT.OFF : HOLD_PAINT.PENCIL,
-      ))}
+      ref={refCallback}
     >
-      {(holdPaint === HOLD_PAINT.PENCIL) ? <TbPencilMinus /> : <TbPencil />}
+      {(holdPaint) ? <TbPencilMinus /> : <TbPencil />}
     </div>
   );
 };