Added return to menu functionality to mobile with menu button

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>
           </>
           )}
         </>

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) {

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 });
+    },
   },
  
 }));

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;