Merge pull request #26 from Waiklam/main

Added return to menu (input select) in game on all inputs (issue #20)

package-lock.json

@@ -1372,7 +1372,7 @@
       "version": "18.2.18",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
       "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1390,6 +1390,24 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "peer": true
+    },
+    "node_modules/@types/three": {
+      "version": "0.161.2",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.161.2.tgz",
+      "integrity": "sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==",
+      "peer": true,
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/webxr": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
@@ -2233,6 +2251,12 @@
         "three": ">=0.137"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "peer": true
+    },
     "node_modules/methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",

src/App.jsx

@@ -16,8 +16,10 @@ export const Controls = {
   boost: 'boost',
   shoot: 'shoot',
   slow: 'slow',
-  reset: 'reset'
+  reset: 'reset',
+  escape: 'escape'
 }
+
 function App() {
   const map = useMemo(
     () => [
@@ -28,7 +30,8 @@ function App() {
       { name: Controls.jump, keys: ['Space'] },
       { name: Controls.slow, keys: ['Shift'] },
       { name: Controls.shoot, keys: ['KeyE', 'Click'] },
-      { name: Controls.reset, keys: ['KeyR'] }
+      { name: Controls.reset, keys: ['KeyR'] },
+      { name: Controls.escape, keys: ['Escape']}
     ],
     []
   )

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/PlayerController.jsx

@@ -40,6 +40,7 @@ export const PlayerController = ({
   const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
   const shootPressed = useKeyboardControls((state) => state[Controls.shoot]);
   const resetPressed = useKeyboardControls((state) => state[Controls.reset]);
+  const escPressed = useKeyboardControls((state) => state[Controls.escape]);
 
   const [isOnGround, setIsOnGround] = useState(false);
   const body = useRef();
@@ -115,6 +116,10 @@ export const PlayerController = ({
       -Math.cos(kartRotation)
     );
     
+    if (escPressed) {
+      actions.setGameStarted(false);
+    }
+
     if (leftPressed && currentSpeed > 0) {
       steeringAngle = currentSteeringSpeed;
       targetXPosition = -camMaxOffset;

src/components/PlayerControllerGamepad.jsx

@@ -86,7 +86,7 @@ export const PlayerControllerGamepad = ({
 
   const { actions, shouldSlowDown, item, bananas, coins, id, controls } = useStore();
   const slowDownDuration = useRef(1500);
-  const { buttonA, buttonB, RB, LB, joystick, select} = useGamepad();
+  const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
 
   useFrame(({ pointer, clock }, delta) => {
     if (player.id !== id) return;
@@ -110,6 +110,10 @@ export const PlayerControllerGamepad = ({
       -Math.cos(kartRotation)
     );
 
+    if (start) {
+      actions.setGameStarted(false);
+    }
+
     // mouse steering
 
     if (!driftLeft.current && !driftRight.current) {

src/components/PlayerControllerKeyboard.jsx

@@ -40,6 +40,7 @@ export const PlayerControllerKeyboard = ({
   const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
   const shootPressed = useKeyboardControls((state) => state[Controls.shoot]);
   const resetPressed = useKeyboardControls((state) => state[Controls.reset]);
+  const escPressed = useKeyboardControls((state) => state[Controls.escape]);
 
   const [isOnGround, setIsOnGround] = useState(false);
   const body = useRef();
@@ -115,6 +116,10 @@ export const PlayerControllerKeyboard = ({
       -Math.cos(kartRotation)
     );
     
+    if (escPressed) {
+      actions.setGameStarted(false);
+    }
+
     if (leftPressed && currentSpeed > 0) {
       steeringAngle = currentSteeringSpeed;
       targetXPosition = -camMaxOffset;

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;