Showing
1 changed file
with
38 additions
and
0 deletions
web/src/components/room/Word.tsx
0 → 100644
1 | +import React, { useCallback, useContext } from 'react'; | ||
2 | +import { IndexType } from 'typescript'; | ||
3 | +import SocketContext from '../../contexts/SocketContext'; | ||
4 | +import { MessageResponse, MessageType, RawMessage } from '../common/types'; | ||
5 | + | ||
6 | +interface WordProps { | ||
7 | + index: number; | ||
8 | + word: string; | ||
9 | + setWordChosen: (value: React.SetStateAction<string>) => void; | ||
10 | + setWords: (value: React.SetStateAction<string[]>) => void; | ||
11 | +} | ||
12 | + | ||
13 | +export const Word: React.FC<WordProps> = (props) => { | ||
14 | + const socket = useContext(SocketContext); | ||
15 | + | ||
16 | + const handleChoose = useCallback(() => { | ||
17 | + const rawMessage: RawMessage = { | ||
18 | + type: MessageType.GAME_CHOOSE, | ||
19 | + message: { word: props.word } | ||
20 | + }; | ||
21 | + socket.emit('msg', rawMessage, (response: MessageResponse<undefined>) => { | ||
22 | + if (response.ok) { | ||
23 | + props.setWords([]); | ||
24 | + props.setWordChosen(props.word); | ||
25 | + } | ||
26 | + }); | ||
27 | + }, [props.setWordChosen]); | ||
28 | + | ||
29 | + return ( | ||
30 | + <button className={`bg-green-500 active:bg-green-600 fixed | ||
31 | + text-white font-bold ${'mt-' + 40*(props.index+1)} mt-40 | ||
32 | + px-5 py-2 rounded shadow | ||
33 | + outline-none focus:outline-none hover:shadow-md | ||
34 | + ease-linear transition-all duration-100`} | ||
35 | + type="button" | ||
36 | + onClick={() => handleChoose()}>{props.word}</button> | ||
37 | + ); | ||
38 | +} |
-
Please register or login to post a comment