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;