From f25076b904bd3f460ec9413d7dfa917616d0ad8a Mon Sep 17 00:00:00 2001 From: Wai Date: Sun, 18 Feb 2024 13:07:04 -0500 Subject: [PATCH 1/2] Added return to menu functionality for kb/ kbm/ gamepad --- package-lock.json | 26 ++++++++++++++++++++- src/App.jsx | 7 ++++-- src/components/PlayerController.jsx | 5 ++++ src/components/PlayerControllerGamepad.jsx | 6 ++++- src/components/PlayerControllerKeyboard.jsx | 5 ++++ 5 files changed, 45 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0e51f3e..7de5594 100644 --- a/package-lock.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index bedae7b..6a7b1a5 100644 --- a/src/App.jsx +++ b/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']} ], [] ) diff --git a/src/components/PlayerController.jsx b/src/components/PlayerController.jsx index 22c71e2..3774e10 100644 --- a/src/components/PlayerController.jsx +++ b/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(); @@ -114,6 +115,10 @@ export const PlayerController = ({ 0, -Math.cos(kartRotation) ); + + if (escPressed) { + actions.setGameStarted(false); + } if (leftPressed && currentSpeed > 0) { steeringAngle = currentSteeringSpeed; diff --git a/src/components/PlayerControllerGamepad.jsx b/src/components/PlayerControllerGamepad.jsx index a37cc15..c821a30 100644 --- a/src/components/PlayerControllerGamepad.jsx +++ b/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) { diff --git a/src/components/PlayerControllerKeyboard.jsx b/src/components/PlayerControllerKeyboard.jsx index b680166..ab9bd72 100644 --- a/src/components/PlayerControllerKeyboard.jsx +++ b/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(); @@ -114,6 +115,10 @@ export const PlayerControllerKeyboard = ({ 0, -Math.cos(kartRotation) ); + + if (escPressed) { + actions.setGameStarted(false); + } if (leftPressed && currentSpeed > 0) { steeringAngle = currentSteeringSpeed; From e466e324833ea4229f284f7e84fc367ddf05e283 Mon Sep 17 00:00:00 2001 From: Wai Date: Sun, 18 Feb 2024 13:20:47 -0500 Subject: [PATCH 2/2] Added return to menu functionality to mobile with menu button --- src/HUD.jsx | 20 ++++++++++++++++++++ src/components/PlayerControllerTouch.jsx | 6 +++++- src/components/store.jsx | 4 ++++ src/index.css | 17 +++++++++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) 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;