diff --git a/src/HUD.jsx b/src/HUD.jsx index 88d10aa..161085a 100644 --- a/src/HUD.jsx +++ b/src/HUD.jsx @@ -115,6 +115,26 @@ export const HUD = () => { > item +
{ + actions.setMenuButton(true); + }} + onMouseUp={(e) => { + actions.setMenuButton(false); + }} + onTouchStart={(e) => { + e.preventDefault(); + actions.setMenuButton(true); + }} + onTouchEnd={(e) => { + e.preventDefault(); + actions.setMenuButton(false); + }} + + > + menu +
)} diff --git a/src/components/PlayerControllerTouch.jsx b/src/components/PlayerControllerTouch.jsx index fd1faec..286538e 100644 --- a/src/components/PlayerControllerTouch.jsx +++ b/src/components/PlayerControllerTouch.jsx @@ -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) { diff --git a/src/components/store.jsx b/src/components/store.jsx index b9ef1d9..dd0d05f 100644 --- a/src/components/store.jsx +++ b/src/components/store.jsx @@ -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 }); + }, }, })); diff --git a/src/index.css b/src/index.css index 0ff6487..a46f051 100644 --- a/src/index.css +++ b/src/index.css @@ -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;