change symbols on movement buttons and refine some things
This commit is contained in:
parent
a14b16247a
commit
ff93e13675
|
@ -11,15 +11,26 @@ import {
|
||||||
shallowEqual,
|
shallowEqual,
|
||||||
useDispatch,
|
useDispatch,
|
||||||
} from 'react-redux';
|
} from 'react-redux';
|
||||||
|
import {
|
||||||
|
PiMagnifyingGlassMinus,
|
||||||
|
PiMagnifyingGlassPlus,
|
||||||
|
PiArrowFatLeft,
|
||||||
|
PiArrowFatRight,
|
||||||
|
PiArrowFatUp,
|
||||||
|
PiArrowFatDown,
|
||||||
|
PiCaretDoubleUp,
|
||||||
|
PiCaretDoubleDown,
|
||||||
|
} from "react-icons/pi";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
setMoveU,
|
setMoveU,
|
||||||
setMoveV,
|
setMoveV,
|
||||||
setMoveW,
|
setMoveW,
|
||||||
|
cancelMove,
|
||||||
} from '../../store/actions';
|
} from '../../store/actions';
|
||||||
|
|
||||||
const btnStyle = {
|
const btnStyle = {
|
||||||
fontSize: 34,
|
// fontSize: 34,
|
||||||
};
|
};
|
||||||
|
|
||||||
const MovementControls = () => {
|
const MovementControls = () => {
|
||||||
|
@ -29,6 +40,73 @@ const MovementControls = () => {
|
||||||
], shallowEqual);
|
], shallowEqual);
|
||||||
const dispatch = useDispatch();
|
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) {
|
if (!holdPaint && !is3D) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
@ -37,6 +115,7 @@ const MovementControls = () => {
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className="actionbuttons"
|
className="actionbuttons"
|
||||||
|
id="forwardbtn"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
style={{
|
style={{
|
||||||
|
@ -44,15 +123,13 @@ const MovementControls = () => {
|
||||||
left: 57,
|
left: 57,
|
||||||
bottom: 139,
|
bottom: 139,
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => dispatch(setMoveV(-1))}
|
ref={refCallBack}
|
||||||
onMouseUp={() => dispatch(setMoveV(0))}
|
|
||||||
onTouchStart={() => dispatch(setMoveV(-1))}
|
|
||||||
onTouchEnd={() => dispatch(setMoveV(0))}
|
|
||||||
>
|
>
|
||||||
↑
|
<PiArrowFatUp />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="actionbuttons"
|
className="actionbuttons"
|
||||||
|
id="backwardbtn"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
style={{
|
style={{
|
||||||
|
@ -60,15 +137,13 @@ const MovementControls = () => {
|
||||||
left: 57,
|
left: 57,
|
||||||
bottom: 98,
|
bottom: 98,
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => dispatch(setMoveV(1))}
|
ref={refCallBack}
|
||||||
onMouseUp={() => dispatch(setMoveV(0))}
|
|
||||||
onTouchStart={(event) => dispatch(setMoveV(1))}
|
|
||||||
onTouchEnd={(event) => dispatch(setMoveV(0))}
|
|
||||||
>
|
>
|
||||||
↓
|
<PiArrowFatDown />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="actionbuttons"
|
className="actionbuttons"
|
||||||
|
id="leftbtn"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
style={{
|
style={{
|
||||||
|
@ -76,15 +151,13 @@ const MovementControls = () => {
|
||||||
left: 16,
|
left: 16,
|
||||||
bottom: 98,
|
bottom: 98,
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => dispatch(setMoveU(-1))}
|
ref={refCallBack}
|
||||||
onMouseUp={() => dispatch(setMoveU(0))}
|
|
||||||
onTouchStart={() => dispatch(setMoveU(-1))}
|
|
||||||
onTouchEnd={() => dispatch(setMoveU(0))}
|
|
||||||
>
|
>
|
||||||
←
|
<PiArrowFatLeft />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="actionbuttons"
|
className="actionbuttons"
|
||||||
|
id="rightbtn"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
style={{
|
style={{
|
||||||
|
@ -92,44 +165,35 @@ const MovementControls = () => {
|
||||||
left: 98,
|
left: 98,
|
||||||
bottom: 98,
|
bottom: 98,
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => dispatch(setMoveU(1))}
|
ref={refCallBack}
|
||||||
onMouseUp={() => dispatch(setMoveU(0))}
|
|
||||||
onTouchStart={() => dispatch(setMoveU(1))}
|
|
||||||
onTouchEnd={() => dispatch(setMoveU(0))}
|
|
||||||
>
|
>
|
||||||
→
|
<PiArrowFatRight />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="actionbuttons"
|
className="actionbuttons"
|
||||||
|
id="upbtn"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
style={{
|
style={{
|
||||||
...btnStyle,
|
|
||||||
left: 16,
|
left: 16,
|
||||||
bottom: 139,
|
bottom: 139,
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => dispatch(setMoveW(-1))}
|
ref={refCallBack}
|
||||||
onMouseUp={() => dispatch(setMoveW(0))}
|
|
||||||
onTouchStart={() => dispatch(setMoveW(-1))}
|
|
||||||
onTouchEnd={() => dispatch(setMoveW(0))}
|
|
||||||
>
|
>
|
||||||
↖
|
{(is3D) ? <PiCaretDoubleUp /> : <PiMagnifyingGlassMinus />}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="actionbuttons"
|
className="actionbuttons"
|
||||||
|
id="downbtn"
|
||||||
role="button"
|
role="button"
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
style={{
|
style={{
|
||||||
...btnStyle,
|
|
||||||
left: 98,
|
left: 98,
|
||||||
bottom: 139,
|
bottom: 139,
|
||||||
}}
|
}}
|
||||||
onMouseDown={() => dispatch(setMoveW(1))}
|
ref={refCallBack}
|
||||||
onMouseUp={() => dispatch(setMoveW(0))}
|
|
||||||
onTouchStart={() => dispatch(setMoveW(1))}
|
|
||||||
onTouchEnd={() => dispatch(setMoveW(0))}
|
|
||||||
>
|
>
|
||||||
↘
|
{(is3D) ? <PiCaretDoubleDown /> : <PiMagnifyingGlassPlus />}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue
Block a user