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",
|
||||
"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",
|
||||
|
|
|
@ -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']}
|
||||
],
|
||||
[]
|
||||
)
|
||||
|
|
20
src/HUD.jsx
20
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>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 });
|
||||
},
|
||||
},
|
||||
|
||||
}));
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue