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
|
||||
</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 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);
|
||||
|
||||
useFrame(({ pointer, clock }, delta) => {
|
||||
|
@ -109,6 +109,10 @@ export const PlayerControllerTouch = ({
|
|||
-Math.cos(kartRotation)
|
||||
);
|
||||
|
||||
if (menuButton) {
|
||||
actions.setGameStarted(false);
|
||||
}
|
||||
|
||||
// mouse steering
|
||||
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
|
|
|
@ -32,6 +32,7 @@ export const useStore = create((set, get) => ({
|
|||
joystickX: 0,
|
||||
driftButton: false,
|
||||
itemButton: false,
|
||||
menuButton: false,
|
||||
addPastPosition: (position) => {
|
||||
set((state) => ({
|
||||
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
||||
|
@ -160,6 +161,9 @@ export const useStore = create((set, get) => ({
|
|||
setItemButton: (itemButton) => {
|
||||
set({ itemButton });
|
||||
},
|
||||
setMenuButton: (menuButton) => {
|
||||
set({ menuButton });
|
||||
},
|
||||
},
|
||||
|
||||
}));
|
||||
|
|
|
@ -353,6 +353,23 @@ body::-webkit-scrollbar {
|
|||
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) {
|
||||
.home {
|
||||
gap: 50px;
|
||||
|
|
Loading…
Reference in New Issue