Merge pull request #98 from 5wonju/feat/#82-respawn-btn

Feat/#82 중앙 리스폰 버튼 구현
5wonju · May 15, 2024 · 11e6482 · 11e6482
2 parents cfa85f3 + db13f60
commit 11e6482
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/frontend/app/(page)/(needProtection)/game/component/CharacterController.tsx b/frontend/app/(page)/(needProtection)/game/component/CharacterController.tsx
@@ -6,7 +6,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import Character from './Character'
 
 import * as THREE from 'three'
-import { useCharacterSelectStore, useGameRoomStore, usePlayerStore } from '../lib/store'
+import { useCharacterSelectStore, useGameRoomStore, usePlayerStore, useRespawnButtonStore } from '../lib/store'
 import { controls } from './KeyboardControl'
 import { gameStateEnum, playerMoveStateEnum } from '../lib/store-type'
 import { useMainSocketStore } from '@/app/lib/store'
@@ -23,6 +23,7 @@ const CharacterController = () => {
   const { gameState } = useGameRoomStore((state) => ({
     gameState: state.gameState,
   }))
+  const { letRespawn, setRespawnButton } = useRespawnButtonStore()
 
   // 플레이어 상태
   const { playerMoveState, setPlayerMoveState, playerTeamState } = usePlayerStore((state) => ({
@@ -110,9 +111,14 @@ const CharacterController = () => {
 
   useEffect(() => {
     if (!rigidbody.current) return
-    // 캐릭터가 이동할 때마다 좌표 받아오기
-    // console.log('rigidbody.current', rigidbody.current.linvel())
-  })
+
+    // 리스폰 버튼이 true 이면 플레이어 위치 초기화
+    if (letRespawn) {
+      rigidbody.current.setTranslation(vec3({ x: 0, y: 1, z: 0 }))
+      rigidbody.current.setLinvel(vec3({ x: 0, y: 1, z: 0 }))
+      setRespawnButton(false)
+    }
+  }, [letRespawn, setRespawnButton])
 
   useFrame((state, delta) => {
     if (!rigidbody.current) return

diff --git a/frontend/app/(page)/(needProtection)/game/component/boardContent/IntroductionContent.tsx b/frontend/app/(page)/(needProtection)/game/component/boardContent/IntroductionContent.tsx
@@ -28,18 +28,17 @@ const GameRuleContent = () => {
   return (
     <fieldset className="flex flex-col gap-4 pt-2 items-center justify-around text-black transition-colors">
       <h2 className="text-3xl font-medium">매 라운드 퀴즈가 출제됩니다</h2>
-      <div className="text-md flex flex-col items-center gap-1">
+      <div className="text-md flex flex-col items-center gap-2">
         <p className="flex">
-          {['A', 'B', 'C', 'D'].map((answer, index) => (
-            <>
+          {['A', 'B', 'C', 'D'].map((answer) => (
+            <span key={answer} className='pr-1'>
               <span
                 key={answer}
                 className="font-medium bg-indigo-600 text-white rounded-full size-6 flex items-center justify-center"
               >
                 {answer}
               </span>
-              <span className="last:invisible pr-1">,</span>
-            </>
+            </span>
           ))}
           중 정답이라고 생각되는 구역으로 이동해서 정답을 선택하세요
         </p>
@@ -61,7 +60,7 @@ const GameRuleContent = () => {
 const IntroductionContent = () => {
   // TeamSelectContent, GameRuleContent가 각각 번갈아가면서 보여짐
   const [currentContent, setCurrentContent] = useState(0)
-  const contents = [TeamSelectContent, GameRuleContent]
+  const contents = [<TeamSelectContent key="team-select"/>, <GameRuleContent key="game-rule"/>]
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -73,7 +72,7 @@ const IntroductionContent = () => {
   return (
     <div className="select-none flex flex-col justify-around h-full">
       <RoomInfo />
-      {contents[currentContent]()}
+      {contents[currentContent]}
     </div>
   )
 }

diff --git a/frontend/app/(page)/(needProtection)/game/component/gameControlPanel/RespawnButton.tsx b/frontend/app/(page)/(needProtection)/game/component/gameControlPanel/RespawnButton.tsx
@@ -1,8 +1,12 @@
 import { GrPowerCycle } from 'react-icons/gr'
+import { useRespawnButtonStore } from '../../lib/store'
 
 const RespawnButton = () => {
+  const { setRespawnButton } = useRespawnButtonStore()
+
   const handleRespawn = () => {
     console.log('중앙 리스폰 얍!')
+    setRespawnButton(true)
   }
 
   return (

diff --git a/frontend/app/(page)/(needProtection)/game/lib/store-type.ts b/frontend/app/(page)/(needProtection)/game/lib/store-type.ts
@@ -108,4 +108,9 @@ export interface IRoundResultState {
   roundResults: IUserRoundResult[] | null
   setAnswer: (answer: AnswerEnum | null) => void
   setRoundResults: (gameResults: IUserRoundResult[]) => void
-}
+}
+
+export interface IRespawnButtonState {
+  letRespawn: boolean
+  setRespawnButton: (letRespawn: boolean) => void
+}
diff --git a/frontend/app/(page)/(needProtection)/game/lib/store.ts b/frontend/app/(page)/(needProtection)/game/lib/store.ts
@@ -12,6 +12,7 @@ import {
   IModalState,
   IPlayerState,
   IQuizState,
+  IRespawnButtonState,
   IRoundResultState,
   ITeamSetBoardState,
   playerMoveStateEnum,
@@ -213,3 +214,17 @@ export const useRoundResultStore = create<IRoundResultState>()(
     { name: 'RoundResultStore' }
   )
 )
+
+// :: 리스폰 버튼 클릭 여부
+export const useRespawnButtonStore = create<IRespawnButtonState>()(
+  devtools(
+    immer((set) => ({
+      letRespawn: false,
+      setRespawnButton: (letRespawn: boolean) =>
+        set((state) => {
+          state.letRespawn = letRespawn
+        }),
+    })),
+    { name: 'RespawnButtonStore' }
+  )
+)