Feat/game redux

src/Interfaces/io.interface.ts

@@ -10,6 +10,10 @@ export interface ServerToClientEvents {
   LEAVE_ROOM: (gameInfo: Game) => void;
   GAME_START: (gameInfo: Game) => void;
   INIT_DATA: (gameInfo: Game, userData: User) => void;
+  SUBMIT_HINT: (gameInfo: Game) => void;
+  SUBMIT_CODE: () => void;
+  NEW_ROUND: (gameInfo: Game) => void;
+  SHOW_RESULT: (gameInfo: Game) => void;
 }
 
 // * 이벤트를 보낼 때
@@ -21,6 +25,7 @@ export interface ClientToServerEvents {
     done: (confirmRoomId: string) => void,
   ) => void;
   GAME_START: (done: (gameInfo: Game) => void) => void;
-  SUBMIT_HINT: (hints: [string, string, string]) => void;
-  SUBMIT_CODE: (code: number[]) => void;
+  SUBMIT_HINT: (hints: [string, string, string, string], done: (gameInfo: Game) => void) => void;
+  SUBMIT_CODE: (code: [number, number, number], done: (gameInfo: Game) => void) => void;
+  END_GAME: () => void;
 }

src/Pages/Game/Components/CodeGuess.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '../../../Redux/store/rootStore';
 import socket from '../../../Utils/socket';
 
@@ -43,20 +43,26 @@ function handleChange() {
   makeNewOptions(thirdCode, possibleThirdCode, selectedIndex[2]);
 }
 
-function handleSubmit() {
-  const firstSelect = document.getElementById('guessFirstCode') as HTMLSelectElement;
-  const firstCode = Number(firstSelect.options[firstSelect.selectedIndex].value);
-  const secondSelect = document.getElementById('guessSecondCode') as HTMLSelectElement;
-  const secondCode = Number(secondSelect.options[secondSelect.selectedIndex].value);
-  const thirdSelect = document.getElementById('guessThirdCode') as HTMLSelectElement;
-  const thirdCode = Number(thirdSelect.options[thirdSelect.selectedIndex].value);
-  socket.emit('SUBMIT_CODE', [firstCode, secondCode, thirdCode]);
-}
-
 function CodeGuess() {
-  const currentTeam =
-    useSelector((rootState: RootState) => rootState.game.stageNumber) % 4 === 1 ? 'sovietTeam' : 'usaTeam';
-  const hints = useSelector((rootState: RootState) => rootState.game[currentTeam].hints);
+  const { stageNumber } = useSelector((rootState: RootState) => rootState.game);
+  const currentTeam = stageNumber % 4 === 1 ? 'sovietTeam' : 'usaTeam';
+  const { hints } = useSelector((rootState: RootState) => rootState.game[currentTeam]);
+  const { answerCode } = useSelector((rootState: RootState) => rootState.game);
+  const dispatch = useDispatch();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const firstSelect = document.getElementById('guessFirstCode') as HTMLSelectElement;
+    const firstCode = Number(firstSelect.options[firstSelect.selectedIndex].value);
+    const secondSelect = document.getElementById('guessSecondCode') as HTMLSelectElement;
+    const secondCode = Number(secondSelect.options[secondSelect.selectedIndex].value);
+    const thirdSelect = document.getElementById('guessThirdCode') as HTMLSelectElement;
+    const thirdCode = Number(thirdSelect.options[thirdSelect.selectedIndex].value);
+    socket.emit('SUBMIT_CODE', [firstCode, secondCode, thirdCode], (gameInfo) => {
+      dispatch(gameInfo);
+    });
+  };
+
   return (
     <GuessForm onChange={handleChange} onSubmit={handleSubmit}>
       <div className='formArea'>
@@ -67,7 +73,7 @@ function CodeGuess() {
           </tr>
           <tr>
             <td className='labelArea'>
-              <label htmlFor='guessFirstCode'>{hints[0]}</label>
+              <label htmlFor='guessFirstCode'>{hints[Math.floor(stageNumber / 4)][answerCode[0] - 1]}</label>
             </td>
             <td>
               <select name='guessFirstCode' id='guessFirstCode' required>
@@ -83,7 +89,7 @@ function CodeGuess() {
           </tr>
           <tr>
             <td className='labelArea'>
-              <label htmlFor='guessSecondCode'>{hints[1]}</label>
+              <label htmlFor='guessSecondCode'>{hints[Math.floor(stageNumber / 4)][answerCode[1] - 1]}</label>
             </td>
             <td>
               <select name='guessSecondCode' id='guessSecondCode' required>
@@ -93,7 +99,7 @@ function CodeGuess() {
           </tr>
           <tr>
             <td className='labelArea'>
-              <label htmlFor='guessThirdCode'>{hints[2]}</label>
+              <label htmlFor='guessThirdCode'>{hints[Math.floor(stageNumber / 4)][answerCode[2] - 1]}</label>
             </td>
             <td>
               <select name='guessThirdCode' id='guessThirdCode' required>

src/Pages/Game/Components/HintSubmit.tsx

@@ -1,16 +1,10 @@
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import Game from '../../../Interfaces/Game.interface';
 import socket from '../../../Utils/socket';
 import { RootState } from '../../../Redux/store/rootStore';
-
-function handleSubmit() {
-  const hintformFirst = (document.getElementById('hintform-first') as HTMLInputElement).value;
-  const hintformSecond = (document.getElementById('hintform-second') as HTMLInputElement).value;
-  const hintformThird = (document.getElementById('hintform-third') as HTMLInputElement).value;
-  const hintList: [string, string, string] = [hintformFirst, hintformSecond, hintformThird];
-  socket.emit('SUBMIT_HINT', hintList);
-}
+import useInput from '../../../Hooks/useInput';
+import { updateDB } from '../../../Redux/reducer/updateDB';
 
 function getWords(currentTeam: string, game: Game) {
   if (currentTeam === 'sovietTeam') return game.sovietTeam.words;
@@ -21,7 +15,23 @@ export default function HintSubmit() {
   const answer = useSelector((rootState: RootState) => rootState.game.answerCode);
   const game = useSelector((rootState: RootState) => rootState.game);
   const stage = useSelector((rootState: RootState) => rootState.game.stageNumber);
+  const dispatch = useDispatch();
   const currentTeam = stage % 4 === 0 ? 'sovietTeam' : 'usaTeam';
+  const [firstHint, onChangeFirstHint] = useInput();
+  const [secondHint, onChangeSecondHint] = useInput();
+  const [thirdHint, onChangeThirdHint] = useInput();
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    // const hintList: [string, string, string] = [firstHint, secondHint, thirdHint];
+    const hintList: [string, string, string, string] = [' ', ' ', ' ', ' '];
+    hintList[answer[0] - 1] = firstHint;
+    hintList[answer[1] - 1] = secondHint;
+    hintList[answer[2] - 1] = thirdHint;
+    socket.emit('SUBMIT_HINT', hintList, (gameInfo) => {
+      dispatch(updateDB(gameInfo));
+    });
+  };
 
   const wordList = getWords(currentTeam, game);
   return (
@@ -36,6 +46,7 @@ export default function HintSubmit() {
             type='text'
             name='hints'
             id='hintform-first'
+            onChange={onChangeFirstHint}
             placeholder={`${wordList[answer[0] - 1]}의 힌트...`}
           />{' '}
           <br />
@@ -44,6 +55,7 @@ export default function HintSubmit() {
             type='text'
             name='hints'
             id='hintform-second'
+            onChange={onChangeSecondHint}
             placeholder={`${wordList[answer[1] - 1]}의 힌트...`}
           />{' '}
           <br />
@@ -52,6 +64,7 @@ export default function HintSubmit() {
             type='text'
             name='hints'
             id='hintform-third'
+            onChange={onChangeThirdHint}
             placeholder={`${wordList[answer[2] - 1]}의 힌트...`}
           />{' '}
           <br />

src/Pages/Game/Components/Hints.tsx

@@ -4,16 +4,23 @@ import { RootState } from '../../../Redux/store/rootStore';
 
 function Hints({ team }: { team: string }) {
   const recordFrom = team === 'Soviet' ? 'sovietTeam' : 'usaTeam';
-  const hintRecord = useSelector((rootState: RootState) => rootState.game[recordFrom].hints);
+  let hintRecord = useSelector((rootState: RootState) => rootState.game[recordFrom].hints);
+  const stageNumber = useSelector((rootState: RootState) => rootState.game.stageNumber);
+
+  if (
+    (stageNumber % 4 === 1 && recordFrom === 'sovietTeam') ||
+    (stageNumber % 4 === 3 && recordFrom === 'usaTeam')
+  )
+    hintRecord = hintRecord.slice(0, -1);
   return (
     <Container>
       <Title>{team}</Title>
       <HintArea>
         <ItemList>
-          <Item className='num'>1</Item>
-          <Item className='num'>2</Item>
-          <Item className='num'>3</Item>
-          <Item className='num'>4</Item>
+          <Item>1</Item>
+          <Item>2</Item>
+          <Item>3</Item>
+          <Item>4</Item>
         </ItemList>
         {hintRecord.map((item: string[]) => (
           <ItemList>
@@ -31,11 +38,6 @@ function Hints({ team }: { team: string }) {
 const Container = styled.div`
   width: 35rem;
   margin: 2rem;
-
-  .num {
-    font-size: 1.5rem;
-    color: #2e3c7e;
-  }
 `;
 
 const Title = styled.p`
@@ -56,6 +58,8 @@ const Item = styled.div`
   margin-top: 5px;
   font-weight: bold;
   text-align: center;
+  font-size: 1.5rem;
+  color: #2e3c7e;
 `;
 
 const HintArea = styled.div`

src/Pages/Game/Components/RenderByStage.tsx

@@ -3,81 +3,74 @@ import styled from 'styled-components';
 import Game from '../../../Interfaces/Game.interface';
 import { RootState } from '../../../Redux/store/rootStore';
 import CodeGuess from './CodeGuess';
-import Timer from './Timer';
 import HintSubmit from './HintSubmit';
 import User from '../../../Interfaces/User.interface';
 
 // leader를 stage 로 구할 수 있는 함수.
 // leader/2 가 짝수면 soviet, 홀수면 usa, leader/4 가 해당 팀의 리더
 function getLeader(game: Game, stage: number) {
-  const { players } = stage % 2 ? game.usaTeam : game.sovietTeam;
-  return players[(stage / 2) % players.length];
+  const { players } = Math.floor(stage / 2) % 2 ? game.usaTeam : game.sovietTeam;
+  return players[Math.floor(stage / 2) % players.length];
 }
 
 export default function RenderByStage() {
   const game = useSelector((rootState: RootState) => rootState.game);
   const stage = useSelector((rootState: RootState) => rootState.game.stageNumber);
   const leader = getLeader(game, stage);
   const me: User = useSelector((rootState: RootState) => rootState.user);
-
-  if (stage === 0 && leader.uid === me.uid)
+  if (stage % 4 === 0 && leader.uid === me.uid)
     return (
       <RenderingArea>
         <HintSubmit />
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 0)
+  if (stage % 4 === 0)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 1 && leader.uid === me.uid)
+  if (stage % 4 === 1 && leader.uid === me.uid)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 1)
+  if (stage % 4 === 1)
     return (
       <RenderingArea>
-        <CodeGuess /> <Timer />
+        <CodeGuess />
       </RenderingArea>
     );
-  if (stage === 2 && leader.uid === me.uid)
+  if (stage % 4 === 2 && leader.uid === me.uid)
     return (
       <RenderingArea>
-        <HintSubmit /> <Timer />
+        <HintSubmit />
       </RenderingArea>
     );
-  if (stage === 2)
+  if (stage % 4 === 2)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
-  if (stage === 3 && leader.uid === me.uid)
+  if (stage % 4 === 3 && leader.uid === me.uid)
     return (
       <RenderingArea>
         <Waiting>
           <p>Waiting...</p>
         </Waiting>{' '}
-        <Timer />
       </RenderingArea>
     );
   return (
     <RenderingArea>
-      <CodeGuess /> <Timer />
+      <CodeGuess />
     </RenderingArea>
   );
 }

src/Pages/Game/Components/RoundResult.tsx

@@ -25,7 +25,7 @@ function RoundResult() {
         <HintContainer>
           힌트:
           {hints.map((hint: string) => (
-            <Hint key={hint}>{hint}</Hint>
+            <Hint key={hint}>{hint} </Hint>
           ))}
         </HintContainer>
       </Result>

src/Pages/Game/Components/ScoreTable.tsx

@@ -26,9 +26,9 @@ export default function ScoreTable() {
         </CircleContainer>
         <CircleContainer>
           {sovietTeam.redToken > 0 ? (
-            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
-          ) : (
             <img src='../../img/my-coin-pink.gif' alt='pink' style={{ width: '2rem', height: '2rem' }} />
+          ) : (
+            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
           )}
           <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
         </CircleContainer>
@@ -45,9 +45,9 @@ export default function ScoreTable() {
         </CircleContainer>
         <CircleContainer>
           {usaTeam.redToken > 0 ? (
-            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
-          ) : (
             <img src='../../img/my-coin-pink.gif' alt='pink' style={{ width: '2rem', height: '2rem' }} />
+          ) : (
+            <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
           )}
           <img src='../../img/empty-coin.gif' alt='empty' style={{ width: '2rem', height: '2rem' }} />
         </CircleContainer>
@@ -73,16 +73,3 @@ const ScoreTableArea = styled.table`
 const CircleContainer = styled.td`
   text-align: center;
 `;
-
-const Circle = styled.div<{ filled: boolean; color: string }>`
-  border-radius: 8px;
-  width: 10px;
-  height: 10px;
-  border-style: solid;
-  border-color: ${(props) => props.color};
-  background-color: ${(props) => (props.filled ? props.color : 'white')};
-  display: inline-block;
-  &:first-child {
-    margin-right: 3px;
-  }
-`;

src/Pages/Game/Components/Word.tsx

@@ -8,11 +8,9 @@ import TV from '../../../Assets/img/tv-fullsz.gif';
 function Word() {
   const user: User = useSelector((rootState: RootState) => rootState.user);
   const game: Game = useSelector((rootState: RootState) => rootState.game);
-  console.log(game.sovietTeam.words);
   const wordList = game.sovietTeam.players.find((player) => player.uid === user.uid)
     ? game.sovietTeam.words
     : game.usaTeam.words;
-  console.log(wordList);
   return (
     <Container>
       {wordList.map((word: string, index: number) => (