diff --git a/src/client.js b/src/client.js
index 6d4c5606..44f6f0ff 100644
--- a/src/client.js
+++ b/src/client.js
@@ -39,7 +39,7 @@ persistStore(store, {}, () => {
window.imMobile = function checkMobile() {
delete window.imMobile;
store.dispatch(setMobile(true));
- }
+ };
document.addEventListener('touchstart', window.imMobile, { once: true });
// listen for resize
diff --git a/src/components/UI.jsx b/src/components/UI.jsx
index 6f4e2fb0..9ab911ce 100644
--- a/src/components/UI.jsx
+++ b/src/components/UI.jsx
@@ -20,22 +20,16 @@ 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 (
<>
- {(showMvmCtrls
- || (isOnMobile && (is3D || (holdPaint > 0) && !isHistoricalView))
- ) && }
+
{(isHistoricalView) ? (
) : (
diff --git a/src/components/buttons/MovementControls.jsx b/src/components/buttons/MovementControls.jsx
index a7055a82..7cc8e19d 100644
--- a/src/components/buttons/MovementControls.jsx
+++ b/src/components/buttons/MovementControls.jsx
@@ -3,13 +3,8 @@
* Menu for WASD keys for mobile users
*/
-import React, {
- useCallback,
-} from 'react';
-import {
- useSelector,
- useDispatch,
-} from 'react-redux';
+import React, { useState, useCallback, useEffect } from 'react';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
import {
PiMagnifyingGlassMinus,
PiMagnifyingGlassPlus,
@@ -22,96 +17,103 @@ import {
} from 'react-icons/pi';
import {
- setMoveU,
- setMoveV,
- setMoveW,
- cancelMove,
+ setMoveU, setMoveV, setMoveW, cancelMove,
} from '../../store/actions';
-
-const btnStyle = {
- // fontSize: 34,
-};
+import { selectMovementControlProps } from '../../store/selectors/gui';
const MovementControls = () => {
- const is3D = useSelector((state) => state.canvas.is3D);
+ const [render, setRender] = useState(false);
+ const [is3D, open] = useSelector(
+ selectMovementControlProps,
+ 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:
- }
- }, [dispatch]);
-
- 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:
- }
- }, [dispatch]);
-
- const onCancel = useCallback((event) => {
- event.preventDefault();
- dispatch(cancelMove());
- }, [dispatch]);
+ useEffect(() => {
+ if (open) window.setTimeout(() => setRender(true), 10);
+ }, [open]);
const refCallBack = useCallback((node) => {
if (!node) {
return;
}
+
+ const onPressStart = (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 = (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 = (event) => {
+ event.preventDefault();
+ dispatch(cancelMove());
+ };
+
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]);
+ }, [dispatch]);
- return (
- <>
+ return ((render || open) && (
+
!open && setRender(false)}
+ >
{
className="actionbuttons"
id="backwardbtn"
role="button"
+ key="backward"
tabIndex={0}
style={{
- ...btnStyle,
left: 57,
bottom: 98,
}}
@@ -137,9 +139,9 @@ const MovementControls = () => {
className="actionbuttons"
id="leftbtn"
role="button"
+ key="left"
tabIndex={0}
style={{
- ...btnStyle,
left: 16,
bottom: 98,
}}
@@ -151,9 +153,9 @@ const MovementControls = () => {
className="actionbuttons"
id="rightbtn"
role="button"
+ key="right"
tabIndex={0}
style={{
- ...btnStyle,
left: 98,
bottom: 98,
}}
@@ -165,6 +167,7 @@ const MovementControls = () => {
className="actionbuttons"
id="upbtn"
role="button"
+ key="up"
tabIndex={0}
style={{
left: 16,
@@ -178,6 +181,7 @@ const MovementControls = () => {
className="actionbuttons"
id="downbtn"
role="button"
+ key="down"
tabIndex={0}
style={{
left: 98,
@@ -187,8 +191,8 @@ const MovementControls = () => {
>
{(is3D) ?
:
}
- >
- );
+
+ ));
};
export default MovementControls;
diff --git a/src/store/selectors/gui.js b/src/store/selectors/gui.js
index b812aa08..e6aaf78c 100644
--- a/src/store/selectors/gui.js
+++ b/src/store/selectors/gui.js
@@ -7,3 +7,10 @@
export const selectIsDarkMode = (state) => (
state.gui.style.indexOf('dark') !== -1
);
+
+export const selectMovementControlProps = (state) => [
+ state.canvas.is3D,
+ state.gui.showMvmCtrls || (state.user.isOnMobile
+ && (state.canvas.is3D || (state.gui.holdPaint > 0)
+ && !state.canvas.isHistoricalView)),
+];
diff --git a/src/styles/default.css b/src/styles/default.css
index ddcd8624..deb3e690 100644
--- a/src/styles/default.css
+++ b/src/styles/default.css
@@ -994,6 +994,14 @@ table td span {
background-color: #d2d2d2cc;
}
+#mvmctrls {
+ transition: opacity 0.25s ease;
+ opacity: 0;
+}
+#mvmctrls.show {
+ opacity: 1;
+}
+
#palettebox {
z-index: 1;
bottom: 59px;
@@ -1024,7 +1032,7 @@ table td span {
}
.modal.show, .Alert.show, .overlay.show, .window.show {
- opacity: 1;
+ opacity: 1;
}
.vemb {