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/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/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;
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;