From 0c72d75539de46ae2fe7e0dc93b0768aff1589af Mon Sep 17 00:00:00 2001 From: da_b1rmuda Date: Sun, 23 Jun 2024 13:53:38 +0400 Subject: [PATCH] refactoring --- trapWord-client/.env | 3 +- .../src/entitys/Room/api/service.js | 2 +- .../src/pages/HomePage/HomePage.jsx | 24 ++- .../src/pages/LobbyPage/LobbyPage.jsx | 182 +++--------------- .../src/pages/RoundPage/RoundPage.jsx | 2 +- .../src/widgets/HomeWidgets/ModalJoin.jsx | 31 +++ .../src/widgets/LobbyWidgets/AbsentPage.jsx | 7 + .../src/widgets/LobbyWidgets/InviteButton.jsx | 13 ++ .../src/widgets/LobbyWidgets/ModalRefer.jsx | 33 ++++ .../widgets/LobbyWidgets/ParticipantList.jsx | 31 +++ .../src/widgets/LobbyWidgets/SelectName.jsx | 29 +++ .../widgets/LobbyWidgets/StartGameButton.jsx | 22 +++ trapWord-client/src/widgets/index.js | 18 ++ 13 files changed, 231 insertions(+), 166 deletions(-) create mode 100644 trapWord-client/src/widgets/HomeWidgets/ModalJoin.jsx create mode 100644 trapWord-client/src/widgets/LobbyWidgets/AbsentPage.jsx create mode 100644 trapWord-client/src/widgets/LobbyWidgets/InviteButton.jsx create mode 100644 trapWord-client/src/widgets/LobbyWidgets/ModalRefer.jsx create mode 100644 trapWord-client/src/widgets/LobbyWidgets/ParticipantList.jsx create mode 100644 trapWord-client/src/widgets/LobbyWidgets/SelectName.jsx create mode 100644 trapWord-client/src/widgets/LobbyWidgets/StartGameButton.jsx create mode 100644 trapWord-client/src/widgets/index.js diff --git a/trapWord-client/.env b/trapWord-client/.env index 1830e9b..e252886 100644 --- a/trapWord-client/.env +++ b/trapWord-client/.env @@ -1 +1,2 @@ -VITE_API_URL='http://localhost:3000/api' \ No newline at end of file +VITE_API_URL='http://localhost:3000' +VITE_CLIENT_URL='http://localhost:5173' \ No newline at end of file diff --git a/trapWord-client/src/entitys/Room/api/service.js b/trapWord-client/src/entitys/Room/api/service.js index ba8519d..603d30f 100644 --- a/trapWord-client/src/entitys/Room/api/service.js +++ b/trapWord-client/src/entitys/Room/api/service.js @@ -4,7 +4,7 @@ export const roomAPI = createApi({ tagTypes: ['Room'], reducerPath: 'roomAPI', baseQuery: fetchBaseQuery({ - baseUrl: import.meta.env.VITE_API_URL + '/rooms', + baseUrl: import.meta.env.VITE_API_URL + '/api/rooms', keepalive: false, }), endpoints: builder => ({ diff --git a/trapWord-client/src/pages/HomePage/HomePage.jsx b/trapWord-client/src/pages/HomePage/HomePage.jsx index 857eb62..aa7bece 100644 --- a/trapWord-client/src/pages/HomePage/HomePage.jsx +++ b/trapWord-client/src/pages/HomePage/HomePage.jsx @@ -1,19 +1,20 @@ import { Button } from 'antd' +import { useState } from 'react' import { useNavigate } from 'react-router-dom' import { roomAPI } from '../../entitys/Room/api/service.js' +import { ModalJoin } from '../../widgets/index.js' const HomePage = () => { const navigate = useNavigate() const [createRoom, {}] = roomAPI.useCreateRoomMutation() + const [isModalJoin, setIsModalJoin] = useState(false) const onCreateRoomClick = async () => { try { const response = await createRoom() if (response.error) { - // Обработка ошибки, если она есть console.error('Ошибка при создании комнаты:', data.roomCode.error) } else { - // Переходим на страницу лобби с roomCode, если все в порядке const { roomCode } = response.data navigate(`/lobby/${roomCode}`) } @@ -23,14 +24,19 @@ const HomePage = () => { } return ( -
-

Опасные слова

+ <> +
+

Опасные слова

- - -
+ + + +
+ ) } diff --git a/trapWord-client/src/pages/LobbyPage/LobbyPage.jsx b/trapWord-client/src/pages/LobbyPage/LobbyPage.jsx index f4f6274..4773e4c 100644 --- a/trapWord-client/src/pages/LobbyPage/LobbyPage.jsx +++ b/trapWord-client/src/pages/LobbyPage/LobbyPage.jsx @@ -1,18 +1,32 @@ -import { CopyOutlined } from '@ant-design/icons' -import { Avatar, Button, Input, Modal, Space } from 'antd' import React, { useEffect, useState } from 'react' -import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom' +import { Outlet, useLocation, useParams } from 'react-router-dom' import io from 'socket.io-client' import { roomAPI } from '../../entitys/Room/api/service' -const socket = io('http://localhost:3000') +import { + InviteButton, + ModalRefer, + ParticipantList, + SelectName, + StartGameButton, + AbsentPage, +} from '../../widgets' + +const socket = io(import.meta.env.VITE_API_URL) const LobbyPage = () => { const { id } = useParams() + const location = useLocation() + + const isGamePage = location.pathname.endsWith('game') + const isRoundPage = location.pathname.endsWith('round') + const { data: existRoom } = roomAPI.useCheckRoomExistenceQuery(id) const { data: participants, refetch } = roomAPI.useGetPlayersInRoomQuery(id) const [roomExists, setRoomExists] = useState(false) + const [isModalRefer, setIsModalRefer] = useState(false) + const [userName, setUserName] = useState('') const minPlayers = 4 @@ -25,13 +39,8 @@ const LobbyPage = () => { useEffect(() => { socket.on('playerJoined', data => { - console.log('playerJoined', data) - - if (data.roomCode === id) { - refetch() - } + if (data.roomCode === id) refetch() }) - return () => { socket.off('playerJoined') } @@ -43,20 +52,14 @@ const LobbyPage = () => { } if (participants && participants.length >= minPlayers) { return - } else { - return } + return } - const location = useLocation() - const isGamePage = location.pathname.endsWith('game') - const isRoundPage = location.pathname.endsWith('round') - - return ( - <> - {isGamePage || isRoundPage ? ( - - ) : roomExists ? ( + const CheckCurrentPage = () => { + if (isGamePage || isRoundPage) return + if (roomExists) { + return (
{renderConditions()} @@ -66,142 +69,13 @@ const LobbyPage = () => { setIsModalRefer={setIsModalRefer} />
- ) : ( -
Данной игры не существует
- )} - - ) -} - -const ParticipantList = ({ participants }) => { - if (!participants || participants.length === 0) { - return ( -
-

Участники (0)

-
- ) - } - - return ( -
-
-

Участники ({participants.length})

-
-
- {participants && - participants.map((participant, index) => ( -
- - {participant.name} -
- ))} -
-
- ) -} - -const SelectName = ({ setUserName, roomCode }) => { - const [inputValue, setInputValue] = useState('') - const [connectRoom, {}] = roomAPI.useConnectRoomMutation() - - const handleSelectName = () => { - const player = { - name: inputValue, - } - console.log(roomCode) - setUserName(inputValue) - const data = { - roomCode, - player, + ) + } else { + return } - connectRoom(data) - socket.emit('joinRoom', { roomCode, playerName: inputValue }) - } - - useEffect(() => { - socket.on('playerJoined', data => { - console.log('recived', data) - }) - }, []) - - return ( -
- setInputValue(e.target.value)} - /> - -
- ) -} - -const InviteButton = ({ setIsModalRefer }) => { - const handleReferPeople = () => { - setIsModalRefer(true) - } - - return ( - - ) -} - -const StartGameButton = ({ roomCode }) => { - const navigate = useNavigate() - - const handleStartGame = () => { - navigate(`/lobby/${roomCode}/game`) - } - - return ( -
- -
- ) -} - -const ModalRefer = ({ isModalRefer, roomCode, setIsModalRefer }) => { - const roomRef = `http://ip/lobby/${roomCode}` - - const handleCancel = () => { - setIsModalRefer(false) } - return ( - -

Код комнаты: {roomCode}

-

Пригласительная ссылка:

- - - - - - ) + return CheckCurrentPage() } export default LobbyPage diff --git a/trapWord-client/src/pages/RoundPage/RoundPage.jsx b/trapWord-client/src/pages/RoundPage/RoundPage.jsx index 7414196..a0788a2 100644 --- a/trapWord-client/src/pages/RoundPage/RoundPage.jsx +++ b/trapWord-client/src/pages/RoundPage/RoundPage.jsx @@ -82,7 +82,7 @@ const RoundPage = () => { return (
- + {/* */} diff --git a/trapWord-client/src/widgets/HomeWidgets/ModalJoin.jsx b/trapWord-client/src/widgets/HomeWidgets/ModalJoin.jsx new file mode 100644 index 0000000..5c68386 --- /dev/null +++ b/trapWord-client/src/widgets/HomeWidgets/ModalJoin.jsx @@ -0,0 +1,31 @@ +import { Button, Input, Modal } from 'antd' +import { useState } from 'react' +import { useNavigate } from 'react-router-dom' + +export const ModalJoin = ({ isModalJoin, setIsModalJoin }) => { + const [value, setValue] = useState() + const navigate = useNavigate() + + const handleCancel = () => { + setIsModalJoin(false) + } + + const handleConnect = () => { + navigate(`/lobby/${value}`) + setIsModalJoin(false) + } + + return ( + + setValue(e.target.value)} /> + + + ) +} diff --git a/trapWord-client/src/widgets/LobbyWidgets/AbsentPage.jsx b/trapWord-client/src/widgets/LobbyWidgets/AbsentPage.jsx new file mode 100644 index 0000000..b5ad33d --- /dev/null +++ b/trapWord-client/src/widgets/LobbyWidgets/AbsentPage.jsx @@ -0,0 +1,7 @@ +export const AbsentPage = () => { + return ( +
+

Данной игры не существует

+
+ ) +} diff --git a/trapWord-client/src/widgets/LobbyWidgets/InviteButton.jsx b/trapWord-client/src/widgets/LobbyWidgets/InviteButton.jsx new file mode 100644 index 0000000..8df3635 --- /dev/null +++ b/trapWord-client/src/widgets/LobbyWidgets/InviteButton.jsx @@ -0,0 +1,13 @@ +import { Button } from 'antd' + +export const InviteButton = ({ setIsModalRefer }) => { + const handleReferPeople = () => { + setIsModalRefer(true) + } + + return ( + + ) +} diff --git a/trapWord-client/src/widgets/LobbyWidgets/ModalRefer.jsx b/trapWord-client/src/widgets/LobbyWidgets/ModalRefer.jsx new file mode 100644 index 0000000..41fea06 --- /dev/null +++ b/trapWord-client/src/widgets/LobbyWidgets/ModalRefer.jsx @@ -0,0 +1,33 @@ +import { CopyOutlined } from '@ant-design/icons' +import { Button, Input, Modal, Space } from 'antd' + +export const ModalRefer = ({ isModalRefer, roomCode, setIsModalRefer }) => { + const clientUrl = import.meta.env.VITE_CLIENT_URL + const roomRef = `${clientUrl}/lobby/${roomCode}` + + const handleCancel = () => { + setIsModalRefer(false) + } + + return ( + +

Код комнаты: {roomCode}

+

Пригласительная ссылка:

+ + + + + + ) +} diff --git a/trapWord-client/src/widgets/LobbyWidgets/ParticipantList.jsx b/trapWord-client/src/widgets/LobbyWidgets/ParticipantList.jsx new file mode 100644 index 0000000..e2be092 --- /dev/null +++ b/trapWord-client/src/widgets/LobbyWidgets/ParticipantList.jsx @@ -0,0 +1,31 @@ +import { Avatar } from 'antd' + +export const ParticipantList = ({ participants }) => { + if (!participants || participants.length === 0) { + return ( +
+

Участники (0)

+
+ ) + } + return ( +
+
+

Участники ({participants.length})

+
+
+ {participants && + participants.map((participant, index) => ( +
+ + {participant.name} +
+ ))} +
+
+ ) +} diff --git a/trapWord-client/src/widgets/LobbyWidgets/SelectName.jsx b/trapWord-client/src/widgets/LobbyWidgets/SelectName.jsx new file mode 100644 index 0000000..0ee73af --- /dev/null +++ b/trapWord-client/src/widgets/LobbyWidgets/SelectName.jsx @@ -0,0 +1,29 @@ +import { Button, Input } from 'antd' +import { useState } from 'react' +import { roomAPI } from '../../entitys/Room/api/service' + +export const SelectName = ({ setUserName, roomCode }) => { + const [inputValue, setInputValue] = useState('') + const [connectRoom, {}] = roomAPI.useConnectRoomMutation() + + const handleSelectName = () => { + const player = { name: inputValue } + setUserName(inputValue) + const data = { roomCode, player } + connectRoom(data) + socket.emit('joinRoom', { roomCode, playerName: inputValue }) + } + + return ( +
+ setInputValue(e.target.value)} + /> + +
+ ) +} diff --git a/trapWord-client/src/widgets/LobbyWidgets/StartGameButton.jsx b/trapWord-client/src/widgets/LobbyWidgets/StartGameButton.jsx new file mode 100644 index 0000000..140be0c --- /dev/null +++ b/trapWord-client/src/widgets/LobbyWidgets/StartGameButton.jsx @@ -0,0 +1,22 @@ +import { Button } from 'antd' +import { useNavigate } from 'react-router-dom' + +export const StartGameButton = ({ roomCode }) => { + const navigate = useNavigate() + + const handleStartGame = () => { + navigate(`/lobby/${roomCode}/game`) + } + + return ( +
+ +
+ ) +} diff --git a/trapWord-client/src/widgets/index.js b/trapWord-client/src/widgets/index.js new file mode 100644 index 0000000..31003d2 --- /dev/null +++ b/trapWord-client/src/widgets/index.js @@ -0,0 +1,18 @@ +import { AbsentPage } from './LobbyWidgets/AbsentPage' +import { InviteButton } from './LobbyWidgets/InviteButton' + +import { ModalJoin } from './HomeWidgets/ModalJoin' +import { ModalRefer } from './LobbyWidgets/ModalRefer' +import { ParticipantList } from './LobbyWidgets/ParticipantList' +import { SelectName } from './LobbyWidgets/SelectName' +import { StartGameButton } from './LobbyWidgets/StartGameButton' + +export { + AbsentPage, + InviteButton, + ModalJoin, + ModalRefer, + ParticipantList, + SelectName, + StartGameButton, +}