Compare commits
1 Commits
main
...
useGamepad
Author | SHA1 | Date |
---|---|---|
Alex | a8cf0d1ca4 |
|
@ -13,10 +13,10 @@
|
||||||
"@react-three/postprocessing": "^2.15.11",
|
"@react-three/postprocessing": "^2.15.11",
|
||||||
"@react-three/rapier": "^1.2.1",
|
"@react-three/rapier": "^1.2.1",
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
|
"joymap": "^2.2.4",
|
||||||
"leva": "^0.9.35",
|
"leva": "^0.9.35",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-gamepad": "^1.0.3",
|
|
||||||
"three": "^0.160.1",
|
"three": "^0.160.1",
|
||||||
"zustand": "^4.5.0"
|
"zustand": "^4.5.0"
|
||||||
},
|
},
|
||||||
|
@ -1862,6 +1862,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||||
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
|
||||||
},
|
},
|
||||||
|
"node_modules/fast-memoize": {
|
||||||
|
"version": "2.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
|
||||||
|
"integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw=="
|
||||||
|
},
|
||||||
"node_modules/fflate": {
|
"node_modules/fflate": {
|
||||||
"version": "0.6.10",
|
"version": "0.6.10",
|
||||||
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
|
"resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
|
||||||
|
@ -2140,6 +2145,16 @@
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/joymap": {
|
||||||
|
"version": "2.2.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/joymap/-/joymap-2.2.4.tgz",
|
||||||
|
"integrity": "sha512-5N0VMbym49AwrfUz0vD6tE++I50SFjBYtwcJsdgE086GgAraGB2YQFsgVj+cG2fd8eUFmK+8U36Ecud3/UYTRg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@babel/runtime": "^7.9.2",
|
||||||
|
"fast-memoize": "^2.5.2",
|
||||||
|
"lodash": "^4.17.15"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/js-tokens": {
|
"node_modules/js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
|
@ -2583,14 +2598,6 @@
|
||||||
"react": ">= 16.8"
|
"react": ">= 16.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-gamepad": {
|
|
||||||
"version": "1.0.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/react-gamepad/-/react-gamepad-1.0.3.tgz",
|
|
||||||
"integrity": "sha512-gMwITmfoHtCaMFpDaEshcjeibHAgynXD28NnS2pa+dG+stwNoN66YDVizN7GfyIrYiW5Ft1ubRxs6/2xW9sRhQ==",
|
|
||||||
"peerDependencies": {
|
|
||||||
"react": ">=15.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/react-is": {
|
"node_modules/react-is": {
|
||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
|
|
|
@ -14,10 +14,10 @@
|
||||||
"@react-three/postprocessing": "^2.15.11",
|
"@react-three/postprocessing": "^2.15.11",
|
||||||
"@react-three/rapier": "^1.2.1",
|
"@react-three/rapier": "^1.2.1",
|
||||||
"gsap": "^3.12.5",
|
"gsap": "^3.12.5",
|
||||||
|
"joymap": "^2.2.4",
|
||||||
"leva": "^0.9.35",
|
"leva": "^0.9.35",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-gamepad": "^1.0.3",
|
|
||||||
"three": "^0.160.1",
|
"three": "^0.160.1",
|
||||||
"zustand": "^4.5.0"
|
"zustand": "^4.5.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -22,6 +22,7 @@ import { PointParticle } from "./Particles/PointParticle";
|
||||||
import { FlameParticles } from "./Particles/FlameParticles";
|
import { FlameParticles } from "./Particles/FlameParticles";
|
||||||
import { useStore } from "./store";
|
import { useStore } from "./store";
|
||||||
import { Cylinder } from "@react-three/drei";
|
import { Cylinder } from "@react-three/drei";
|
||||||
|
import { useGamepad } from "./useGamepad";
|
||||||
|
|
||||||
export const PlayerController = () => {
|
export const PlayerController = () => {
|
||||||
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
||||||
|
@ -63,14 +64,16 @@ export const PlayerController = () => {
|
||||||
let targetZPosition = 8;
|
let targetZPosition = 8;
|
||||||
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
const [steeringAngleWheels, setSteeringAngleWheels] = useState(0);
|
||||||
const engineSound = useRef();
|
const engineSound = useRef();
|
||||||
|
const { buttonA, joystick, RB } = useGamepad();
|
||||||
|
|
||||||
const [scale, setScale] = useState(0);
|
const [scale, setScale] = useState(0);
|
||||||
const { actions, addPastPosition } = useStore();
|
|
||||||
|
|
||||||
useFrame(({ pointer, clock }, delta) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
const time = clock.getElapsedTime();
|
const time = clock.getElapsedTime();
|
||||||
if (!body.current && !mario.current) return;
|
if (!body.current && !mario.current) return;
|
||||||
|
|
||||||
|
// console.log(buttonA, joystick);
|
||||||
|
|
||||||
// HANDLING AND STEERING
|
// HANDLING AND STEERING
|
||||||
const kartRotation =
|
const kartRotation =
|
||||||
kart.current.rotation.y - driftDirection.current * driftForce.current;
|
kart.current.rotation.y - driftDirection.current * driftForce.current;
|
||||||
|
@ -79,8 +82,6 @@ export const PlayerController = () => {
|
||||||
0,
|
0,
|
||||||
-Math.cos(kartRotation)
|
-Math.cos(kartRotation)
|
||||||
);
|
);
|
||||||
actions.setBodyPosition(body.current.translation());
|
|
||||||
actions.setBodyRotation(kart.current.rotation);
|
|
||||||
|
|
||||||
if (leftPressed && currentSpeed > 0) {
|
if (leftPressed && currentSpeed > 0) {
|
||||||
steeringAngle = currentSteeringSpeed;
|
steeringAngle = currentSteeringSpeed;
|
||||||
|
@ -95,6 +96,7 @@ export const PlayerController = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// mouse steering
|
// mouse steering
|
||||||
|
const steer = joystick[0] * 0.8;
|
||||||
|
|
||||||
if (!driftLeft.current && !driftRight.current) {
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
steeringAngle = currentSteeringSpeed * -pointer.x;
|
steeringAngle = currentSteeringSpeed * -pointer.x;
|
||||||
|
@ -106,6 +108,19 @@ export const PlayerController = () => {
|
||||||
steeringAngle = currentSteeringSpeed * -(pointer.x + 0.5);
|
steeringAngle = currentSteeringSpeed * -(pointer.x + 0.5);
|
||||||
targetXPosition = -camMaxOffset * -pointer.x;
|
targetXPosition = -camMaxOffset * -pointer.x;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (steer) {
|
||||||
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
|
steeringAngle = currentSteeringSpeed * -joystick[0];
|
||||||
|
targetXPosition = -camMaxOffset * -joystick[0];
|
||||||
|
} else if (driftLeft.current && !driftRight.current) {
|
||||||
|
steeringAngle = currentSteeringSpeed * -(joystick[0] - 1);
|
||||||
|
targetXPosition = -camMaxOffset * -joystick[0];
|
||||||
|
} else if (driftRight.current && !driftLeft.current) {
|
||||||
|
steeringAngle = currentSteeringSpeed * -(joystick[0] + 1);
|
||||||
|
targetXPosition = -camMaxOffset * -joystick[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
// ACCELERATING
|
// ACCELERATING
|
||||||
|
|
||||||
if (upPressed && currentSpeed < maxSpeed) {
|
if (upPressed && currentSpeed < maxSpeed) {
|
||||||
|
@ -133,6 +148,33 @@ export const PlayerController = () => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (buttonA && currentSpeed < maxSpeed) {
|
||||||
|
// Accelerate the kart within the maximum speed limit
|
||||||
|
setCurrentSpeed(
|
||||||
|
Math.min(currentSpeed + acceleration * delta * 144, maxSpeed)
|
||||||
|
);
|
||||||
|
} else if (
|
||||||
|
buttonA &&
|
||||||
|
currentSpeed > maxSpeed &&
|
||||||
|
boostDuration.current > 0
|
||||||
|
) {
|
||||||
|
setCurrentSpeed(
|
||||||
|
Math.max(currentSpeed - decceleration * delta * 144, maxSpeed)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (buttonA) {
|
||||||
|
if (currentSteeringSpeed < MaxSteeringSpeed) {
|
||||||
|
setCurrentSteeringSpeed(
|
||||||
|
Math.min(
|
||||||
|
currentSteeringSpeed + 0.0001 * delta * 144,
|
||||||
|
MaxSteeringSpeed
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// REVERSING
|
// REVERSING
|
||||||
if (downPressed && currentSpeed < -maxSpeed) {
|
if (downPressed && currentSpeed < -maxSpeed) {
|
||||||
setCurrentSpeed(
|
setCurrentSpeed(
|
||||||
|
@ -140,7 +182,7 @@ export const PlayerController = () => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
// DECELERATING
|
// DECELERATING
|
||||||
else if (!upPressed && !downPressed) {
|
else if (!buttonA && !downPressed) {
|
||||||
if (currentSteeringSpeed > 0) {
|
if (currentSteeringSpeed > 0) {
|
||||||
setCurrentSteeringSpeed(
|
setCurrentSteeringSpeed(
|
||||||
Math.max(currentSteeringSpeed - 0.00005 * delta * 144, 0)
|
Math.max(currentSteeringSpeed - 0.00005 * delta * 144, 0)
|
||||||
|
@ -177,34 +219,58 @@ export const PlayerController = () => {
|
||||||
jumpForce.current += 10;
|
jumpForce.current += 10;
|
||||||
isOnFloor.current = false;
|
isOnFloor.current = false;
|
||||||
jumpIsHeld.current = true;
|
jumpIsHeld.current = true;
|
||||||
|
} else if (RB && isOnFloor.current && !jumpIsHeld.current) {
|
||||||
|
jumpForce.current += 10;
|
||||||
|
isOnFloor.current = false;
|
||||||
|
jumpIsHeld.current = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!isOnFloor.current && jumpForce.current > 0) {
|
if (!isOnFloor.current && jumpForce.current > 0) {
|
||||||
jumpForce.current -= 1 * delta * 144;
|
jumpForce.current -= 1 * delta * 144;
|
||||||
}
|
}
|
||||||
if (!jumpPressed) {
|
if (!jumpPressed && !RB) {
|
||||||
jumpIsHeld.current = false;
|
jumpIsHeld.current = false;
|
||||||
driftDirection.current = 0;
|
driftDirection.current = 0;
|
||||||
driftForce.current = 0;
|
driftForce.current = 0;
|
||||||
driftLeft.current = false;
|
driftLeft.current = false;
|
||||||
driftRight.current = false;
|
driftRight.current = false;
|
||||||
}
|
}
|
||||||
|
console.log(jumpIsHeld.current);
|
||||||
// DRIFTING
|
// DRIFTING
|
||||||
if (
|
// if (
|
||||||
jumpIsHeld.current &&
|
// jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
// currentSteeringSpeed > 0 &&
|
||||||
pointer.x < -0.1 &&
|
// pointer.x < -0.1 &&
|
||||||
!driftRight.current
|
// !driftRight.current
|
||||||
) {
|
// ) {
|
||||||
driftLeft.current = true;
|
// driftLeft.current = true;
|
||||||
}
|
// }
|
||||||
if (
|
// if (
|
||||||
jumpIsHeld.current &&
|
// jumpIsHeld.current &&
|
||||||
currentSteeringSpeed > 0 &&
|
// currentSteeringSpeed > 0 &&
|
||||||
pointer.x > 0.1 &&
|
// pointer.x > 0.1 &&
|
||||||
!driftLeft.current
|
// !driftLeft.current
|
||||||
) {
|
// ) {
|
||||||
driftRight.current = true;
|
// driftRight.current = true;
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (steer) {
|
||||||
|
if (
|
||||||
|
jumpIsHeld.current &&
|
||||||
|
currentSteeringSpeed > 0 &&
|
||||||
|
steer < -0.1 &&
|
||||||
|
!driftRight.current
|
||||||
|
) {
|
||||||
|
driftLeft.current = true;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
jumpIsHeld.current &&
|
||||||
|
currentSteeringSpeed > 0 &&
|
||||||
|
steer > 0.1 &&
|
||||||
|
!driftLeft.current
|
||||||
|
) {
|
||||||
|
driftRight.current = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!jumpIsHeld.current && !driftLeft.current && !driftRight.current) {
|
if (!jumpIsHeld.current && !driftLeft.current && !driftRight.current) {
|
||||||
|
@ -324,7 +390,7 @@ export const PlayerController = () => {
|
||||||
<RigidBody
|
<RigidBody
|
||||||
ref={body}
|
ref={body}
|
||||||
colliders={false}
|
colliders={false}
|
||||||
position={[8, 20, -96]}
|
position={[8, 100, -96]}
|
||||||
centerOfMass={[0, -1, 0]}
|
centerOfMass={[0, -1, 0]}
|
||||||
mass={3}
|
mass={3}
|
||||||
ccd
|
ccd
|
||||||
|
@ -335,12 +401,8 @@ export const PlayerController = () => {
|
||||||
onCollisionEnter={(event) => {
|
onCollisionEnter={(event) => {
|
||||||
isOnFloor.current = true;
|
isOnFloor.current = true;
|
||||||
}}
|
}}
|
||||||
// onCollisionExit={(event) => {
|
|
||||||
// isOnFloor.current = false
|
|
||||||
// }}
|
|
||||||
/>
|
/>
|
||||||
</RigidBody>
|
</RigidBody>
|
||||||
|
|
||||||
<group ref={kart} rotation={[0, Math.PI / 2, 0]}>
|
<group ref={kart} rotation={[0, Math.PI / 2, 0]}>
|
||||||
<group ref={mario}>
|
<group ref={mario}>
|
||||||
<Mario
|
<Mario
|
||||||
|
@ -348,13 +410,6 @@ export const PlayerController = () => {
|
||||||
steeringAngleWheels={steeringAngleWheels}
|
steeringAngleWheels={steeringAngleWheels}
|
||||||
isBoosting={isBoosting}
|
isBoosting={isBoosting}
|
||||||
/>
|
/>
|
||||||
{/* <pointLight
|
|
||||||
position={[0.6, 0.05, 0.5]}
|
|
||||||
intensity={scale}
|
|
||||||
color={turboColor}
|
|
||||||
distance={1}
|
|
||||||
/> */}
|
|
||||||
|
|
||||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||||
<sphereGeometry args={[0.05, 16, 16]} />
|
<sphereGeometry args={[0.05, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
|
@ -365,12 +420,6 @@ export const PlayerController = () => {
|
||||||
opacity={0.4}
|
opacity={0.4}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
{/* <pointLight
|
|
||||||
position={[-0.6, 0.05, 0.5]}
|
|
||||||
intensity={scale}
|
|
||||||
color={turboColor}
|
|
||||||
distance={1}
|
|
||||||
/> */}
|
|
||||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
|
<mesh position={[-0.6, 0.05, 0.5]} scale={scale}>
|
||||||
<sphereGeometry args={[0.05, 16, 16]} />
|
<sphereGeometry args={[0.05, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
|
@ -381,15 +430,6 @@ export const PlayerController = () => {
|
||||||
opacity={0.4}
|
opacity={0.4}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* <Cylinder
|
|
||||||
args={[0.1, 0, 1, 128, 64, true]}
|
|
||||||
position={[-0.6, 0.05, 0.5]}
|
|
||||||
rotation={[Math.PI / 3, 0 , 0]}
|
|
||||||
>
|
|
||||||
<meshStandardMaterial side={THREE.DoubleSide} />
|
|
||||||
</Cylinder> */}
|
|
||||||
{/* <Flame/> */}
|
|
||||||
<FlameParticles isBoosting={isBoosting} />
|
<FlameParticles isBoosting={isBoosting} />
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
@ -414,15 +454,12 @@ export const PlayerController = () => {
|
||||||
turboColor={turboColor}
|
turboColor={turboColor}
|
||||||
/>
|
/>
|
||||||
</group>
|
</group>
|
||||||
|
|
||||||
{/* <ContactShadows frames={1} /> */}
|
|
||||||
<PerspectiveCamera
|
<PerspectiveCamera
|
||||||
makeDefault
|
makeDefault
|
||||||
position={[0, 2, 8]}
|
position={[0, 2, 8]}
|
||||||
fov={50}
|
fov={50}
|
||||||
ref={cam}
|
ref={cam}
|
||||||
/>
|
/>
|
||||||
{/* <PositionalAudio ref={engineSound} url="./sounds/engine.wav" autoplay loop distance={10}/> */}
|
|
||||||
</group>
|
</group>
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
|
|
|
@ -57,7 +57,7 @@ function setItemAt(instances, bodyPosition, bodyRotation, index) {
|
||||||
.add(bodyPosition);
|
.add(bodyPosition);
|
||||||
|
|
||||||
// Apply the offset to position the skid marks behind the body
|
// Apply the offset to position the skid marks behind the body
|
||||||
console.log(bodyPosition);
|
// console.log(bodyPosition);
|
||||||
o.position.copy(bodyPosition.x, bodyPosition.y + 2, bodyPosition.z);
|
o.position.copy(bodyPosition.x, bodyPosition.y + 2, bodyPosition.z);
|
||||||
|
|
||||||
o.rotation.set(0, bodyRotation, 0);
|
o.rotation.set(0, bodyRotation, 0);
|
||||||
|
|
|
@ -6,6 +6,39 @@ export const useStore = create((set, get) => ({
|
||||||
bodyPosition: [0, 0, 0],
|
bodyPosition: [0, 0, 0],
|
||||||
bodyRotation: [0, 0, 0],
|
bodyRotation: [0, 0, 0],
|
||||||
pastPositions: [],
|
pastPositions: [],
|
||||||
|
LeftAxis: [0, 0],
|
||||||
|
buttons : {
|
||||||
|
A: false,
|
||||||
|
B: false,
|
||||||
|
X: false,
|
||||||
|
Y: false,
|
||||||
|
LB: false,
|
||||||
|
RB: false,
|
||||||
|
LT: false,
|
||||||
|
RT: false,
|
||||||
|
Back: false,
|
||||||
|
Start: false,
|
||||||
|
LeftStick: false,
|
||||||
|
RightStick: false,
|
||||||
|
Up: false,
|
||||||
|
Down: false,
|
||||||
|
Left: false,
|
||||||
|
Right: false,
|
||||||
|
},
|
||||||
|
setLeftAxis: (axis) => {
|
||||||
|
set({ LeftAxis: axis });
|
||||||
|
},
|
||||||
|
setButtons: (button, value) => {
|
||||||
|
set((state) => ({
|
||||||
|
buttons: {
|
||||||
|
...state.buttons,
|
||||||
|
[button]: value,
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
getButtons: () => {
|
||||||
|
return get().buttons;
|
||||||
|
},
|
||||||
addPastPosition: (position) => {
|
addPastPosition: (position) => {
|
||||||
set((state) => ({
|
set((state) => ({
|
||||||
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
||||||
|
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
export const useGamepad = () => {
|
||||||
|
const [gamepadInfo, setGamepadInfo] = useState({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
|
||||||
|
|
||||||
|
// Function to update gamepad state
|
||||||
|
const updateGamepadState = () => {
|
||||||
|
const gamepads = navigator.getGamepads ? navigator.getGamepads() : [];
|
||||||
|
const gamepad = gamepads[0]; // Assuming the first gamepad
|
||||||
|
|
||||||
|
if (gamepad) {
|
||||||
|
const newGamepadInfo = {
|
||||||
|
connected: true,
|
||||||
|
buttonA: gamepad.buttons[0].pressed,
|
||||||
|
RB: gamepad.buttons[5].pressed,
|
||||||
|
joystick: [gamepad.axes[0], gamepad.axes[1]]
|
||||||
|
};
|
||||||
|
|
||||||
|
// Update state only if there's a change
|
||||||
|
if (JSON.stringify(newGamepadInfo) !== JSON.stringify(gamepadInfo)) {
|
||||||
|
setGamepadInfo(newGamepadInfo);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (gamepadInfo.connected) {
|
||||||
|
setGamepadInfo({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const gamepadConnected = () => {
|
||||||
|
console.log('Gamepad connected!');
|
||||||
|
updateGamepadState();
|
||||||
|
};
|
||||||
|
|
||||||
|
const gamepadDisconnected = () => {
|
||||||
|
console.log('Gamepad disconnected!');
|
||||||
|
setGamepadInfo({ connected: false, buttonA: false, joystick: [0, 0], RB: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('gamepadconnected', gamepadConnected);
|
||||||
|
window.addEventListener('gamepaddisconnected', gamepadDisconnected);
|
||||||
|
|
||||||
|
// Polling the gamepad state
|
||||||
|
const interval = setInterval(updateGamepadState, 100);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('gamepadconnected', gamepadConnected);
|
||||||
|
window.removeEventListener('gamepaddisconnected', gamepadDisconnected);
|
||||||
|
clearInterval(interval);
|
||||||
|
};
|
||||||
|
}, [gamepadInfo]);
|
||||||
|
|
||||||
|
return gamepadInfo;
|
||||||
|
};
|
Loading…
Reference in New Issue