Added return to menu functionality to mobile with menu button
parent
f25076b904
commit
e466e32483
20
src/HUD.jsx
20
src/HUD.jsx
|
@ -115,6 +115,26 @@ export const HUD = () => {
|
||||||
>
|
>
|
||||||
item
|
item
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
className="controls menuButton"
|
||||||
|
onMouseDown={(e) => {
|
||||||
|
actions.setMenuButton(true);
|
||||||
|
}}
|
||||||
|
onMouseUp={(e) => {
|
||||||
|
actions.setMenuButton(false);
|
||||||
|
}}
|
||||||
|
onTouchStart={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
actions.setMenuButton(true);
|
||||||
|
}}
|
||||||
|
onTouchEnd={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
actions.setMenuButton(false);
|
||||||
|
}}
|
||||||
|
|
||||||
|
>
|
||||||
|
menu
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -84,7 +84,7 @@ export const PlayerControllerTouch = ({
|
||||||
const effectiveBoost = useRef(0);
|
const effectiveBoost = useRef(0);
|
||||||
const text = useRef();
|
const text = useRef();
|
||||||
|
|
||||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls, joystickX, driftButton, itemButton } = useStore();
|
const { actions, shouldSlowDown, item, bananas, coins, id, controls, joystickX, driftButton, itemButton, menuButton } = useStore();
|
||||||
const slowDownDuration = useRef(1500);
|
const slowDownDuration = useRef(1500);
|
||||||
|
|
||||||
useFrame(({ pointer, clock }, delta) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
|
@ -109,6 +109,10 @@ export const PlayerControllerTouch = ({
|
||||||
-Math.cos(kartRotation)
|
-Math.cos(kartRotation)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (menuButton) {
|
||||||
|
actions.setGameStarted(false);
|
||||||
|
}
|
||||||
|
|
||||||
// mouse steering
|
// mouse steering
|
||||||
|
|
||||||
if (!driftLeft.current && !driftRight.current) {
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
|
|
|
@ -32,6 +32,7 @@ export const useStore = create((set, get) => ({
|
||||||
joystickX: 0,
|
joystickX: 0,
|
||||||
driftButton: false,
|
driftButton: false,
|
||||||
itemButton: false,
|
itemButton: false,
|
||||||
|
menuButton: false,
|
||||||
addPastPosition: (position) => {
|
addPastPosition: (position) => {
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
||||||
|
@ -160,6 +161,9 @@ export const useStore = create((set, get) => ({
|
||||||
setItemButton: (itemButton) => {
|
setItemButton: (itemButton) => {
|
||||||
set({ itemButton });
|
set({ itemButton });
|
||||||
},
|
},
|
||||||
|
setMenuButton: (menuButton) => {
|
||||||
|
set({ menuButton });
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -353,6 +353,23 @@ body::-webkit-scrollbar {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.controls.menuButton {
|
||||||
|
right: 50px;
|
||||||
|
top: 60px;
|
||||||
|
font-family: "Hanken Grotesk";
|
||||||
|
border-radius: 100px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
height: 66.6667px;
|
||||||
|
width: 66.6667px;
|
||||||
|
border: none;
|
||||||
|
flex-shrink: 0;
|
||||||
|
touch-action: none;
|
||||||
|
color: white;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1000px) {
|
@media screen and (max-width: 1000px) {
|
||||||
.home {
|
.home {
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
Loading…
Reference in New Issue