Showing
2 changed files
with
21 additions
and
0 deletions
| ... | @@ -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 | ... | ... |
-
Please register or login to post a comment