diff --git a/src/components/Experience.jsx b/src/components/Experience.jsx index 2b16f7f..887da95 100644 --- a/src/components/Experience.jsx +++ b/src/components/Experience.jsx @@ -23,34 +23,65 @@ import { ItemBox } from "./models/misc/Gift"; import { useStore } from "./store"; import { Shell } from "./models/items/Mario_shell_red"; import { Coin } from "./models/misc/Super_mario_bros_coin"; -import { RPC, insertCoin, myPlayer, onPlayerJoin, useMultiplayerState } from "playroomkit"; +import { + RPC, + getState, + insertCoin, + isHost, + myPlayer, + onPlayerJoin, + useMultiplayerState, +} from "playroomkit"; import { PlayerDummies } from "./PlayerDummies"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useFrame } from "@react-three/fiber"; export const Experience = () => { const onCollide = (event) => { console.log(event); }; - const { bananas, shells, players, id, actions} = useStore(); - const [networkBananas, setNetworkBananas] = useMultiplayerState("bananas", []); + const { bananas, shells, players, id, actions } = useStore(); + const [networkBananas, setNetworkBananas] = useMultiplayerState( + "bananas", + [] + ); const [networkShells, setNetworkShells] = useMultiplayerState("shells", []); + const testing = getState("bananas"); + + // useEffect(() => { + // setNetworkBananas(bananas); + // }, [bananas]); + + // useEffect(() => { + // setNetworkShells(shells); + // }, [shells]); return ( <> - {players.map((player) => ( - - ))} - {players.map((player) => ( - + + ))} + + {players.map((player) => ( + ))} - - + {/* */} {/* */} @@ -58,23 +89,25 @@ export const Experience = () => { - - - {/* {bananas.map((banana) => ( + {networkBananas.map((banana) => ( - ))} */} - - {shells.map((shell) => ( + ))} + {networkShells.map((shell) => ( ))} diff --git a/src/components/PlayerController.jsx b/src/components/PlayerController.jsx index 7a1626f..7763e20 100644 --- a/src/components/PlayerController.jsx +++ b/src/components/PlayerController.jsx @@ -28,7 +28,7 @@ import { CoinParticles } from "./Particles/coins/CoinParticles"; import { ItemParticles } from "./Particles/items/ItemParticles"; import { isHost } from "playroomkit"; -export const PlayerController = ( { player, userPlayer }) => { +export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNetworkShells, networkBananas, networkShells }) => { const upPressed = useKeyboardControls((state) => state[Controls.up]); const downPressed = useKeyboardControls((state) => state[Controls.down]); @@ -330,8 +330,7 @@ export const PlayerController = ( { player, userPlayer }) => { if (driftLeft.current || driftRight.current) { const oscillation = Math.sin(time * 1000) * 0.1; const vibration = oscillation + 0.9; - - if (turboColor === 0xffffff) { + if (turboColor === 0xffffff) { setScale(vibration * 0.8); } else { setScale(vibration); @@ -419,36 +418,34 @@ export const PlayerController = ( { player, userPlayer }) => { // ITEMS if(shootPressed && item === "banana") { - const distanceBehind = 2; // Adjust this value as needed + const distanceBehind = 2; const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind); - // Get the current position of the kart + const kartPosition = new THREE.Vector3(...vec3(body.current.translation())); - // Calculate the position for the new banana + const bananaPosition = kartPosition.sub(scaledBackwardDirection); const newBanana = { id: Math.random() + "-" + +new Date(), position: bananaPosition, player: true, }; - actions.addBanana(newBanana); - actions.useItem(); + setNetworkBananas([...networkBananas, newBanana]); + actions.useItem(); } if(shootPressed && item === "shell") { - const distanceBehind = -1; // Adjust this value as needed + const distanceBehind = -2; const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind); - // Get the current position of the kart const kartPosition = new THREE.Vector3( body.current.translation().x, body.current.translation().y, body.current.translation().z ); - // Calculate the position for the new banana const shellPosition = kartPosition.sub(scaledBackwardDirection); const newShell = { id: Math.random() + "-" + +new Date(), @@ -456,7 +453,7 @@ export const PlayerController = ( { player, userPlayer }) => { player: true, rotation: kartRotation }; - actions.addShell(newShell); + setNetworkShells([...networkShells, newShell]); actions.useItem(); } @@ -513,6 +510,7 @@ export const PlayerController = ( { player, userPlayer }) => { currentSpeed={currentSpeed} steeringAngleWheels={steeringAngleWheels} isBoosting={isBoosting} + shouldLaunch={shouldLaunch} /> diff --git a/src/components/PlayerDummies.jsx b/src/components/PlayerDummies.jsx index de572de..cc548b3 100644 --- a/src/components/PlayerDummies.jsx +++ b/src/components/PlayerDummies.jsx @@ -106,6 +106,7 @@ export const PlayerDummies = ( { player, userPlayer }) => { if(bodyPosition && bodyRotation && kart.current && mario.current){ kart.current.position.set(bodyPosition.x, bodyPosition.y -.5, bodyPosition.z); kart.current.rotation.set(0, bodyRotation, 0); + body.current.setTranslation([bodyPosition.x, bodyPosition.y, bodyPosition.z]); } }); @@ -113,6 +114,16 @@ export const PlayerDummies = ( { player, userPlayer }) => { return player.id != id? ( <> + + + @@ -120,6 +131,7 @@ export const PlayerDummies = ( { player, userPlayer }) => { currentSpeed={currentSpeed} steeringAngleWheels={steeringAngleWheels} isBoosting={isBoosting} + shouldLaunch={shouldLaunch} /> diff --git a/src/components/models/characters/Mario_kart.jsx b/src/components/models/characters/Mario_kart.jsx index 7179497..f49c8a0 100644 --- a/src/components/models/characters/Mario_kart.jsx +++ b/src/components/models/characters/Mario_kart.jsx @@ -11,7 +11,7 @@ import FakeFlame from '../../ShaderMaterials/FakeFlame/FakeFlame' import { useStore } from '../../store' import gsap from 'gsap' -export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props }) { +export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, shouldLaunch, ...props }) { const { nodes, materials } = useGLTF('./models/characters/mariokarttest.glb') const frontLeftWheel = useRef() @@ -39,11 +39,11 @@ export function Mario({ currentSpeed, steeringAngleWheels, isBoosting, ...props }) useEffect(() => { - if (shouldSlow) { + if (shouldLaunch) { gsap.to(mario.current.rotation, {duration: 1.5, y: Math.PI * 3}) mario.current.rotation.set(0, 0, 0); } - }, [shouldSlow]) + }, [shouldLaunch]) return ( { if(other.rigidBodyObject.name === "player"){ actions.setShouldSlowDown(true); + setNetworkBananas(networkBananas.filter((banana) => banana.id !== id)); } - actions.removeBananaById(id); }} colliders={false} name='banana' @@ -43,7 +43,7 @@ export function Banana({onCollide, id, ...props}) { - + diff --git a/src/components/models/items/Mario_shell_red.jsx b/src/components/models/items/Mario_shell_red.jsx index e6aecce..acc92ae 100644 --- a/src/components/models/items/Mario_shell_red.jsx +++ b/src/components/models/items/Mario_shell_red.jsx @@ -7,45 +7,70 @@ Source: https://sketchfab.com/3d-models/mario-shell-red-76a81ff57398423d80800259 Title: Mario Shell Red */ -import React, { useEffect, useRef } from 'react' -import { useGLTF } from '@react-three/drei' -import { BallCollider, RigidBody, vec3 } from '@react-three/rapier' -import { useFrame } from '@react-three/fiber'; +import React, { useEffect, useRef } from "react"; +import { useGLTF } from "@react-three/drei"; +import { BallCollider, RigidBody, vec3 } from "@react-three/rapier"; +import { useFrame } from "@react-three/fiber"; +import { useStore } from "../../store"; -export function Shell(props) { - const { nodes, materials } = useGLTF('./models/items/mario_shell_red.glb') +export function Shell({ id, position, rotation, setNetworkShells, networkShells, ...props}) { + const { nodes, materials } = useGLTF("./models/items/mario_shell_red.glb"); const rigidBody = useRef(); const ref = useRef(); const shell_speed = 100; + const {actions} = useStore(); useEffect(() => { const velocity = { - x : -Math.sin(props.rotation) * shell_speed, - y : 0, - z : -Math.cos(props.rotation) * shell_speed, + x: -Math.sin(rotation) * shell_speed, + y: 0, + z: -Math.cos(rotation) * shell_speed, }; rigidBody.current.setLinvel(velocity, true); - },[]); + }, []); useFrame((state, delta) => { - const rigidBodyPosition = rigidBody.current.translation(); - ref.current.position.set(rigidBodyPosition.x, rigidBodyPosition.y, rigidBodyPosition.z); - ref.current.rotation.z += 0.2 * delta * 144; + if(rigidBody.current && ref.current){ + const rigidBodyPosition = rigidBody.current.translation(); + ref.current.position.set( + rigidBodyPosition.x, + rigidBodyPosition.y, + rigidBodyPosition.z + ); + ref.current.rotation.z += 0.2 * delta * 144; + } }); - return ( - - - - - - + { + if (other.rigidBodyObject.name === "player") { + actions.setShouldSlowDown(true); + setNetworkShells( + networkShells.filter((shell) => shell.id !== id) + ); + } + }} + > + + + - ) + ); } -useGLTF.preload('./models/items/mario_shell_red.glb') +useGLTF.preload("./models/items/mario_shell_red.glb"); diff --git a/src/components/store.jsx b/src/components/store.jsx index 187286c..22ee87a 100644 --- a/src/components/store.jsx +++ b/src/components/store.jsx @@ -20,7 +20,7 @@ export const useStore = create((set, get) => ({ pastPositions: [], shouldSlowdown: false, bananas: [], - items: ["banana"], + items: ["mushroom"], item: "", shells: [], skids: [],