Merge pull request #26 from Waiklam/main
Added return to menu (input select) in game on all inputs (issue #20)pull/24/head
commit
4d0200845c
|
@ -1372,7 +1372,7 @@
|
||||||
"version": "18.2.18",
|
"version": "18.2.18",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz",
|
||||||
"integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
|
"integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==",
|
||||||
"dev": true,
|
"devOptional": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
|
@ -1390,6 +1390,24 @@
|
||||||
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
|
||||||
"integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
|
"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": {
|
"node_modules/@types/webxr": {
|
||||||
"version": "0.5.10",
|
"version": "0.5.10",
|
||||||
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
|
"resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.10.tgz",
|
||||||
|
@ -2233,6 +2251,12 @@
|
||||||
"three": ">=0.137"
|
"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": {
|
"node_modules/methods": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
|
||||||
|
|
|
@ -16,8 +16,10 @@ export const Controls = {
|
||||||
boost: 'boost',
|
boost: 'boost',
|
||||||
shoot: 'shoot',
|
shoot: 'shoot',
|
||||||
slow: 'slow',
|
slow: 'slow',
|
||||||
reset: 'reset'
|
reset: 'reset',
|
||||||
|
escape: 'escape'
|
||||||
}
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const map = useMemo(
|
const map = useMemo(
|
||||||
() => [
|
() => [
|
||||||
|
@ -28,7 +30,8 @@ function App() {
|
||||||
{ name: Controls.jump, keys: ['Space'] },
|
{ name: Controls.jump, keys: ['Space'] },
|
||||||
{ name: Controls.slow, keys: ['Shift'] },
|
{ name: Controls.slow, keys: ['Shift'] },
|
||||||
{ name: Controls.shoot, keys: ['KeyE', 'Click'] },
|
{ name: Controls.shoot, keys: ['KeyE', 'Click'] },
|
||||||
{ name: Controls.reset, keys: ['KeyR'] }
|
{ name: Controls.reset, keys: ['KeyR'] },
|
||||||
|
{ name: Controls.escape, keys: ['Escape']}
|
||||||
],
|
],
|
||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
|
|
20
src/HUD.jsx
20
src/HUD.jsx
|
@ -115,6 +115,26 @@ export const HUD = () => {
|
||||||
>
|
>
|
||||||
item
|
item
|
||||||
</div>
|
</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>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -40,6 +40,7 @@ export const PlayerController = ({
|
||||||
const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
|
const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
|
||||||
const shootPressed = useKeyboardControls((state) => state[Controls.shoot]);
|
const shootPressed = useKeyboardControls((state) => state[Controls.shoot]);
|
||||||
const resetPressed = useKeyboardControls((state) => state[Controls.reset]);
|
const resetPressed = useKeyboardControls((state) => state[Controls.reset]);
|
||||||
|
const escPressed = useKeyboardControls((state) => state[Controls.escape]);
|
||||||
|
|
||||||
const [isOnGround, setIsOnGround] = useState(false);
|
const [isOnGround, setIsOnGround] = useState(false);
|
||||||
const body = useRef();
|
const body = useRef();
|
||||||
|
@ -114,6 +115,10 @@ export const PlayerController = ({
|
||||||
0,
|
0,
|
||||||
-Math.cos(kartRotation)
|
-Math.cos(kartRotation)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (escPressed) {
|
||||||
|
actions.setGameStarted(false);
|
||||||
|
}
|
||||||
|
|
||||||
if (leftPressed && currentSpeed > 0) {
|
if (leftPressed && currentSpeed > 0) {
|
||||||
steeringAngle = currentSteeringSpeed;
|
steeringAngle = currentSteeringSpeed;
|
||||||
|
|
|
@ -86,7 +86,7 @@ export const PlayerControllerGamepad = ({
|
||||||
|
|
||||||
const { actions, shouldSlowDown, item, bananas, coins, id, controls } = useStore();
|
const { actions, shouldSlowDown, item, bananas, coins, id, controls } = useStore();
|
||||||
const slowDownDuration = useRef(1500);
|
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) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
if (player.id !== id) return;
|
if (player.id !== id) return;
|
||||||
|
@ -110,6 +110,10 @@ export const PlayerControllerGamepad = ({
|
||||||
-Math.cos(kartRotation)
|
-Math.cos(kartRotation)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (start) {
|
||||||
|
actions.setGameStarted(false);
|
||||||
|
}
|
||||||
|
|
||||||
// mouse steering
|
// mouse steering
|
||||||
|
|
||||||
if (!driftLeft.current && !driftRight.current) {
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
|
|
|
@ -40,6 +40,7 @@ export const PlayerControllerKeyboard = ({
|
||||||
const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
|
const jumpPressed = useKeyboardControls((state) => state[Controls.jump]);
|
||||||
const shootPressed = useKeyboardControls((state) => state[Controls.shoot]);
|
const shootPressed = useKeyboardControls((state) => state[Controls.shoot]);
|
||||||
const resetPressed = useKeyboardControls((state) => state[Controls.reset]);
|
const resetPressed = useKeyboardControls((state) => state[Controls.reset]);
|
||||||
|
const escPressed = useKeyboardControls((state) => state[Controls.escape]);
|
||||||
|
|
||||||
const [isOnGround, setIsOnGround] = useState(false);
|
const [isOnGround, setIsOnGround] = useState(false);
|
||||||
const body = useRef();
|
const body = useRef();
|
||||||
|
@ -114,6 +115,10 @@ export const PlayerControllerKeyboard = ({
|
||||||
0,
|
0,
|
||||||
-Math.cos(kartRotation)
|
-Math.cos(kartRotation)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (escPressed) {
|
||||||
|
actions.setGameStarted(false);
|
||||||
|
}
|
||||||
|
|
||||||
if (leftPressed && currentSpeed > 0) {
|
if (leftPressed && currentSpeed > 0) {
|
||||||
steeringAngle = currentSteeringSpeed;
|
steeringAngle = currentSteeringSpeed;
|
||||||
|
|
|
@ -84,7 +84,7 @@ export const PlayerControllerTouch = ({
|
||||||
const effectiveBoost = useRef(0);
|
const effectiveBoost = useRef(0);
|
||||||
const text = useRef();
|
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);
|
const slowDownDuration = useRef(1500);
|
||||||
|
|
||||||
useFrame(({ pointer, clock }, delta) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
|
@ -109,6 +109,10 @@ export const PlayerControllerTouch = ({
|
||||||
-Math.cos(kartRotation)
|
-Math.cos(kartRotation)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (menuButton) {
|
||||||
|
actions.setGameStarted(false);
|
||||||
|
}
|
||||||
|
|
||||||
// mouse steering
|
// mouse steering
|
||||||
|
|
||||||
if (!driftLeft.current && !driftRight.current) {
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
|
|
|
@ -32,6 +32,7 @@ export const useStore = create((set, get) => ({
|
||||||
joystickX: 0,
|
joystickX: 0,
|
||||||
driftButton: false,
|
driftButton: false,
|
||||||
itemButton: false,
|
itemButton: false,
|
||||||
|
menuButton: false,
|
||||||
addPastPosition: (position) => {
|
addPastPosition: (position) => {
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
||||||
|
@ -160,6 +161,9 @@ export const useStore = create((set, get) => ({
|
||||||
setItemButton: (itemButton) => {
|
setItemButton: (itemButton) => {
|
||||||
set({ itemButton });
|
set({ itemButton });
|
||||||
},
|
},
|
||||||
|
setMenuButton: (menuButton) => {
|
||||||
|
set({ menuButton });
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
}));
|
}));
|
||||||
|
|
|
@ -353,6 +353,23 @@ body::-webkit-scrollbar {
|
||||||
cursor: pointer;
|
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) {
|
@media screen and (max-width: 1000px) {
|
||||||
.home {
|
.home {
|
||||||
gap: 50px;
|
gap: 50px;
|
||||||
|
|
Loading…
Reference in New Issue