Merge pull request #95 from 5wonju/feat/#50-multiplay

Feat/#50 multiplay
5wonju · May 14, 2024 · 5dece30 · 5dece30
2 parents 3a98258 + ec94824
commit 5dece30
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git a/frontend/app/(page)/(needProtection)/game/component/CharacterController.tsx b/frontend/app/(page)/(needProtection)/game/component/CharacterController.tsx
@@ -46,26 +46,52 @@ const CharacterController = () => {
   const [position, setPosition] = useState({ x: 0, y: 0, z: 0 })
   const [linVelocity, setLinVelocity] = useState({ x: 0, y: 0, z: 0 })
 
+  const roundVector = (vector, decimals = 3) => {
+    const factor = Math.pow(10, decimals)
+    return {
+      x: Math.round(vector.x * factor) / factor,
+      y: Math.round(vector.y * factor) / factor,
+      z: Math.round(vector.z * factor) / factor,
+    }
+  }
+
   useEffect(() => {
     const updateState = () => {
       if (rigidbody.current) {
-        setPosition(rigidbody.current.translation())
-        setLinVelocity(rigidbody.current.linvel())
+        const newPosition = roundVector(rigidbody.current.translation())
+        const newLinVelocity = roundVector(rigidbody.current.linvel())
+
+        if (
+          position.x !== newPosition.x ||
+          position.y !== newPosition.y ||
+          position.z !== newPosition.z
+        ) {
+          setPosition(newPosition)
+        }
+
+        if (
+          linVelocity.x !== newLinVelocity.x ||
+          linVelocity.y !== newLinVelocity.y ||
+          linVelocity.z !== newLinVelocity.z
+        ) {
+          setLinVelocity(newLinVelocity)
+        }
       }
     }
 
-    const intervalId = setInterval(updateState, 100) // 매 0.1초마다 상태 업데이트
+    const intervalId = setInterval(updateState, 500) // 매 0.5초마다 상태 업데이트
 
     return () => clearInterval(intervalId)
-  }, [])
+  }, [position, linVelocity])
 
   const { userInfo } = useAuth()
-  let linvel = rigidbody.current?.linvel()
   useEffect(() => {
     if (socket === null) return
     if (!rigidbody.current) return
     // 플레이어 위치 정보 및 상태 소켓으로 전송
-    console.log(playerMoveState)
+    console.log('살려줘', linVelocity)
+    console.log('크아악', position)
+    console.log(playerTeamState)
     socket.send(
       JSON.stringify({
         eventType: 'MOVE_CHARACTER',
@@ -76,10 +102,11 @@ const CharacterController = () => {
           characterType: characterIndex,
           nickname: userInfo.nickname,
           direction: 'left',
+          team: playerTeamState,
         },
       })
     )
-  }, [playerMoveState, characterIndex, position, linVelocity])
+  }, [playerMoveState, characterIndex, position, linVelocity, playerTeamState])
 
   useEffect(() => {
     if (!rigidbody.current) return
@@ -206,7 +233,7 @@ const CharacterController = () => {
           args={[0.8, 0.4]}
           position={[0, 1.2, 0]}
           restitution={0} // 반발력 설정: 0(완전 흡수) ~ 1(완전 반사)
-          friction={0.1} // 마찰력 설정
+          friction={1} // 마찰력 설정
         />
         <group ref={character}>
           <Character pos={rigidbody.current && rigidbody.current.linvel()} />

diff --git a/frontend/app/(page)/(needProtection)/game/component/OtherController.tsx b/frontend/app/(page)/(needProtection)/game/component/OtherController.tsx
@@ -47,13 +47,13 @@ const OtherController = ({
       rigidbody.current.applyImpulse(jumpImpulse, true)
       isOnFloor.current = false
     }
-    const norm = Math.sqrt(linvel.x ** 2 + linvel.z ** 2)
+    const norm = 3
     // linvel을 기반으로 위치 업데이트
     const currentTranslation = rigidbody.current.translation()
     const newTranslation = {
-      x: currentTranslation.x + (linvel.x * delta) / norm,
+      x: currentTranslation.x + (linvel.x * delta) / 2,
       y: currentTranslation.y,
-      z: currentTranslation.z + (linvel.z * delta) / norm,
+      z: currentTranslation.z + (linvel.z * delta) / 2,
     }
     rigidbody.current.setTranslation(vec3(newTranslation))
 

diff --git a/frontend/app/(page)/(needProtection)/game/component/OtherPlayers.tsx b/frontend/app/(page)/(needProtection)/game/component/OtherPlayers.tsx
@@ -50,12 +50,12 @@ export default function OtherPlayers() {
   // test test test test test
   // const [players, setPlayers] = useState([
   //   {
-  //     pos: { x: 0, y: 0, z: 3 },
+  //     pos: { x: 0, y: 0, z: 0 },
   //     moveState: playerMoveStateEnum.RUN,
   //     characterType: 2,
   //     nickname: '??dsad',
   //     team: teamEnum.RED,
-  //     linvel: { x: 0, y: 0, z: 3 },
+  //     linvel: { x: -3, y: 0, z: 3 },
   //     modelKey: 6,
   //   },
   // ])
@@ -65,12 +65,6 @@ export default function OtherPlayers() {
   //     setPlayers((currentPlayers) =>
   //       currentPlayers.map((player) => ({
   //         ...player,
-  //         pos: {
-  //           ...player.pos,
-  //           x: player.pos.x,
-  //           y: -0.6,
-  //           z: player.pos.z + 1 > 10 ? 0 : player.pos.z + 3,
-  //         },
   //         linvel: {
   //           ...player.linvel,
   //           x: player.linvel.x,
@@ -80,7 +74,6 @@ export default function OtherPlayers() {
   //       }))
   //     )
   //   }, 1000) // 0.1초 마다 실행
-
   //   return () => clearInterval(intervalId)
   // }, [])
   // test test test test test

diff --git a/frontend/app/(page)/(needProtection)/game/component/TeamSpot.tsx b/frontend/app/(page)/(needProtection)/game/component/TeamSpot.tsx
@@ -14,7 +14,7 @@ const TeamSpot = () => {
 
   const handleEnterTeamSpot = (teamColor: teamEnum) => {
     setPlayerTeamState(teamColor)
-    selectTeam(teamColor)
+    // selectTeam(teamColor)
   }
 
   const answers = [teamEnum.RED, teamEnum.BLUE]

diff --git a/frontend/app/(page)/(needProtection)/game/page.tsx b/frontend/app/(page)/(needProtection)/game/page.tsx
@@ -23,7 +23,7 @@ const Game = () => {
         camera={{ position: [0, 40, 20], fov: 42 }}
         className="absolute top-0 bottom-0"
       >
-        {/* <WebGLContextManager /> */}
+        <WebGLContextManager />
         <color attach="background" args={['#dbecfb']} />
         <Suspense>
           <Physics>