test a bit more

.eslintrc.json

@@ -39,6 +39,7 @@
     "react-hooks/rules-of-hooks": "error",
     "jsx-a11y/click-events-have-key-events":"off",
     "jsx-a11y/no-static-element-interactions":"off",
+    "jsx-a11y/control-has-associated-label": "off",
     "no-continue": "off",
     "no-multiple-empty-lines": "off",
     "react/function-component-definition": "off",

src/components/UI.jsx

@@ -20,10 +20,14 @@ const UI = () => {
     isHistoricalView,
     is3D,
     isOnMobile,
+    showMvmCtrls,
+    holdPaint,
   ] = useSelector((state) => [
     state.canvas.isHistoricalView,
     state.canvas.is3D,
     state.user.isOnMobile,
+    state.gui.showMvmCtrls,
+    state.gui.holdPaint,
   ], shallowEqual);
 
   return (
@@ -36,10 +40,9 @@ const UI = () => {
           <PalselButton />
           <Palette />
           {(!is3D) && <GlobeButton />}
-          {// (isOnMobile) && <MovementControls />
+          {(showMvmCtrls || ((is3D || holdPaint) && isOnMobile))
-          }
+            && <MovementControls />}
-          <MovementControls />
+          {(!is3D && isOnMobile) && <PencilButton />}
-          {(!is3D) && <PencilButton />}
           <CoolDownBox />
         </>
       )}

src/components/buttons/MovementControls.jsx

@@ -8,7 +8,6 @@ import React, {
 } from 'react';
 import {
   useSelector,
-  shallowEqual,
   useDispatch,
 } from 'react-redux';
 import {
@@ -20,7 +19,7 @@ import {
   PiArrowFatDown,
   PiCaretDoubleUp,
   PiCaretDoubleDown,
-} from "react-icons/pi";
+} from 'react-icons/pi';
 
 import {
   setMoveU,
@@ -34,10 +33,7 @@ const btnStyle = {
 };
 
 const MovementControls = () => {
-  const [holdPaint, is3D] = useSelector((state) => [
+  const is3D = useSelector((state) => state.canvas.is3D);
-    state.gui.holdPaint,
-    state.canvas.is3D,
-  ], shallowEqual);
   const dispatch = useDispatch();
 
   const onPressStart = useCallback((event) => {
@@ -92,7 +88,7 @@ const MovementControls = () => {
 
   const onCancel = useCallback((event) => {
     event.preventDefault();
-    dispatch(cancelMove());
+    // dispatch(cancelMove());
   }, []);
 
   const refCallBack = useCallback((node) => {
@@ -107,10 +103,6 @@ const MovementControls = () => {
     node.addEventListener('touchcancel', onCancel, { passive: false });
   }, [onPressStart, onPressStop, onCancel]);
 
-  if (!holdPaint && !is3D) {
-    return null;
-  }
-
   return (
     <>
       <div

src/components/buttons/PencilButton.jsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 import { TbPencil, TbPencilMinus } from 'react-icons/tb';
 import { t } from 'ttag';
 
@@ -11,7 +11,13 @@ import { HOLD_PAINT } from '../../core/constants';
 import { selectHoldPaint } from '../../store/actions';
 
 const PencilButton = () => {
-  const holdPaint = useSelector((state) => state.gui.holdPaint);
+  const [
+    holdPaint,
+    showMvmCtrls,
+  ] = useSelector((state) => [
+    state.gui.holdPaint,
+    state.gui.showMvmCtrls,
+  ], shallowEqual);
   const dispatch = useDispatch();
 
   return (
@@ -20,6 +26,9 @@ const PencilButton = () => {
       className={
         `actionbuttons${(holdPaint === HOLD_PAINT.PENCIL) ? ' pressed' : ''}`
       }
+      style={{
+        bottom: (holdPaint === HOLD_PAINT.PENCIL || showMvmCtrls) ? 180 : 98,
+      }}
       role="button"
       title={(holdPaint === HOLD_PAINT.PENCIL)
         ? t`Disable Pencil`

src/components/windows/Settings.jsx

@@ -11,6 +11,7 @@ import LanguageSelect from '../LanguageSelect';
 import {
   toggleGrid,
   togglePixelNotify,
+  toggleMvmCtrls,
   toggleMute,
   toggleAutoZoomIn,
   toggleCompactPalette,
@@ -56,6 +57,7 @@ function Settings() {
   const [
     isGridShown,
     isPixelNotifyShown,
+    isMvmCtrlsShown,
     autoZoomIn,
     compactPalette,
     isPotato,
@@ -67,6 +69,7 @@ function Settings() {
   ] = useSelector((state) => [
     state.gui.showGrid,
     state.gui.showPixelNotify,
+    state.gui.showMvmCtrls,
     state.gui.autoZoomIn,
     state.gui.compactPalette,
     state.gui.isPotato,
@@ -98,6 +101,14 @@ function Settings() {
       >
         {t`Show circles where pixels are placed.`}
       </SettingsItem>
+      <SettingsItem
+        title={t`Always show Movement Controls`}
+        keyBind={c('keybinds').t`N`}
+        value={isMvmCtrlsShown}
+        onToggle={() => dispatch(toggleMvmCtrls())}
+      >
+        {t`Always show movement control buttons`}
+      </SettingsItem>
       <SettingsItem
         title={t`Disable Game Sounds`}
         keyBind={c('keybinds').t`M`}

src/controls/keypress.js

@@ -8,6 +8,7 @@ import {
   toggleHistoricalView,
   toggleHiddenCanvases,
   togglePixelNotify,
+  toggleMvmCtrls,
   toggleMute,
   selectCanvas,
   selectHoverColor,
@@ -197,6 +198,9 @@ export function createKeyDownHandler(store) {
           ? t`Muted Sound`
           : t`Unmuted Sound`));
         return;
+      case 'n':
+        store.dispatch(toggleMvmCtrls());
+        return;
       case 'r': {
         const { hover } = store.getState().canvas;
         const text = hover.join('_');

src/store/actions/index.js

@@ -45,6 +45,12 @@ export function togglePixelNotify() {
   };
 }
 
+export function toggleMvmCtrls() {
+  return {
+    type: 's/TGL_MVM_CTRLS',
+  };
+}
+
 export function toggleAutoZoomIn() {
   return {
     type: 's/TGL_AUTO_ZOOM_IN',

src/store/reducers/gui.js

@@ -3,6 +3,7 @@ import { HOLD_PAINT } from '../../core/constants';
 const initialState = {
   showGrid: false,
   showPixelNotify: false,
+  showMvmCtrls: false,
   autoZoomIn: false,
   isPotato: false,
   isLightGrid: false,
@@ -43,6 +44,13 @@ export default function gui(
       };
     }
 
+    case 's/TGL_MVM_CTRLS': {
+      return {
+        ...state,
+        showMvmCtrls: !state.showMvmCtrls,
+      };
+    }
+
     case 's/TGL_AUTO_ZOOM_IN': {
       return {
         ...state,
@@ -136,23 +144,29 @@ export default function gui(
     }
 
     case 's/SET_MOVE_U': {
+      const { value } = action;
+      const moveU = state.moveU + value;
       return {
         ...state,
-        moveU: action.value,
+        moveU,
       };
     }
 
     case 's/SET_MOVE_V': {
+      const { value } = action;
+      const moveV = state.moveV + value;
       return {
         ...state,
-        moveV: action.value,
+        moveV,
       };
     }
 
     case 's/SET_MOVE_W': {
+      const { value } = action;
+      const moveW = state.moveW + value;
       return {
         ...state,
-        moveW: action.value,
+        moveW,
       };
     }
 

src/styles/default.css

@@ -461,13 +461,9 @@ tr:nth-child(even) {
   right: 57px;
 }
 #pencilbutton {
-  bottom: 98px;
   left: 16px;
   transition: bottom 300ms ease-in-out;
 }
-#pencilbutton.pressed {
-  bottom: 180px;
-}
 
 #historyselect {
   position: fixed;

src/ui/Chunk2D.js

@@ -16,7 +16,8 @@ class Chunk2D extends Chunk {
     super(zoom, cx, cy);
     this.palette = palette;
     this.image = document.createElement('canvas');
-    this.image.getContext('2d', { willReadFrequently: true, alpha: false });
+    // do NOT use willReadFrequently, it massively trashes Render2D.renderChunks
+    this.image.getContext('2d', { alpha: false });
     this.image.width = TILE_SIZE;
     this.image.height = TILE_SIZE;
     this.ready = false;