From 2457382052a60513286611913e83a4518ab33be4 Mon Sep 17 00:00:00 2001 From: HF Date: Wed, 24 Jan 2024 02:51:43 +0100 Subject: [PATCH] give movement controls transition animations --- src/client.js | 2 +- src/components/UI.jsx | 8 +- src/components/buttons/MovementControls.jsx | 162 ++++++++++---------- src/store/selectors/gui.js | 7 + src/styles/default.css | 10 +- 5 files changed, 101 insertions(+), 88 deletions(-) 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 {