Overnap

정답을 맞춘 효과 추가

...@@ -23,9 +23,11 @@ export const Chat: React.FC<ChatProps> = (props) => { ...@@ -23,9 +23,11 @@ export const Chat: React.FC<ChatProps> = (props) => {
23 } 23 }
24 24
25 socket.on('msg', handleChatData); 25 socket.on('msg', handleChatData);
26 + socket.on('msg', handleAcceptMessage);
26 27
27 return () => { 28 return () => {
28 socket.off('msg', handleChatData); 29 socket.off('msg', handleChatData);
30 + socket.off('msg', handleAcceptMessage);
29 } 31 }
30 }, []); 32 }, []);
31 33
...@@ -47,6 +49,16 @@ export const Chat: React.FC<ChatProps> = (props) => { ...@@ -47,6 +49,16 @@ export const Chat: React.FC<ChatProps> = (props) => {
47 } 49 }
48 }, [input]); 50 }, [input]);
49 51
52 + const handleAcceptMessage = useCallback((rawMessage: RawMessage) => {
53 + if (rawMessage.type === MessageType.GAME_ACCEPT) {
54 + const message: ChatData = {
55 + sender: 'SYSTEM',
56 + message: 'That\'s correct!'
57 + };
58 + setChatLines(oldChatLines => [...oldChatLines, message]);
59 + }
60 + }, []);
61 +
50 return ( 62 return (
51 <div className={props.w}> 63 <div className={props.w}>
52 <div className={`${props.h} w-full py-2 rounded shadow flex flex-col overflow-y-scroll`}> 64 <div className={`${props.h} w-full py-2 rounded shadow flex flex-col overflow-y-scroll`}>
......
...@@ -55,15 +55,24 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => { ...@@ -55,15 +55,24 @@ export const GameBoard: React.FC<GameBoardProps> = ({ isInGame }) => {
55 } 55 }
56 }, [wordChosen]); 56 }, [wordChosen]);
57 57
58 + const handleAnswer = useCallback((rawMessage: RawMessage) => {
59 + if (rawMessage.type === MessageType.GAME_ACCEPT) {
60 + const { answer } = rawMessage.message as { answer: string };
61 + setWordChosen(answer);
62 + }
63 + }, []);
64 +
58 useEffect(() => { 65 useEffect(() => {
59 socket.on('msg', handleStart); 66 socket.on('msg', handleStart);
60 socket.on('msg', handleGetWordLength); 67 socket.on('msg', handleGetWordLength);
61 socket.on('msg', handleWordSet); 68 socket.on('msg', handleWordSet);
69 + socket.on('msg', handleAnswer);
62 70
63 return () => { 71 return () => {
64 socket.off('msg', handleStart); 72 socket.off('msg', handleStart);
65 socket.off('msg', handleGetWordLength); 73 socket.off('msg', handleGetWordLength);
66 socket.off('msg', handleWordSet); 74 socket.off('msg', handleWordSet);
75 + socket.off('msg', handleAnswer);
67 } 76 }
68 }, []); 77 }, []);
69 78
......