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