change symbols on movement buttons and refine some things
This commit is contained in:
parent
a14b16247a
commit
ff93e13675
|
@ -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>
|
||||
</>
|
||||
);
|
||||
|
|
Loading…
Reference in New Issue
Block a user