Overnap

정답을 맞춘 효과 추가

......@@ -23,9 +23,11 @@ export const Chat: React.FC<ChatProps> = (props) => {
}
socket.on('msg', handleChatData);
socket.on('msg', handleAcceptMessage);
return () => {
socket.off('msg', handleChatData);
socket.off('msg', handleAcceptMessage);
}
}, []);
......@@ -47,6 +49,16 @@ export const Chat: React.FC<ChatProps> = (props) => {
}
}, [input]);
const handleAcceptMessage = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_ACCEPT) {
const message: ChatData = {
sender: 'SYSTEM',
message: 'That\'s correct!'
};
setChatLines(oldChatLines => [...oldChatLines, message]);
}
}, []);
return (
<div className={props.w}>
<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 }) => {
}
}, [wordChosen]);
const handleAnswer = useCallback((rawMessage: RawMessage) => {
if (rawMessage.type === MessageType.GAME_ACCEPT) {
const { answer } = rawMessage.message as { answer: string };
setWordChosen(answer);
}
}, []);
useEffect(() => {
socket.on('msg', handleStart);
socket.on('msg', handleGetWordLength);
socket.on('msg', handleWordSet);
socket.on('msg', handleAnswer);
return () => {
socket.off('msg', handleStart);
socket.off('msg', handleGetWordLength);
socket.off('msg', handleWordSet);
socket.off('msg', handleAnswer);
}
}, []);
......