-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
QA Create a match as usual and go to the lobby, the lobby should behave as usual. - Check that the chat works accordingly - Check that the new navigation bar works accordingly - Check that u can enter a match
- Loading branch information
1 parent
50296ca
commit 1fb5d95
Showing
16 changed files
with
189 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,54 @@ | ||
| import { FC } from "react"; | ||
| import { text } from "../../assets"; | ||
| import { ChatInput } from "../../atoms"; | ||
| import { CHAT_INPUT_SIZE } from "../../design"; | ||
| import { sendMessage } from "../../service"; | ||
| import { ChatMessageContent } from "../../types"; | ||
| import { GroupedChatMessages } from "./grouped-chat-meesages"; | ||
| import { ChatContainer, ChatMessageListWrapper } from "./styles"; | ||
| import { ChatContainer, ChatMessageInput, ChatMessageListWrapper } from "./styles"; | ||
|
|
||
| interface ChatProps { | ||
| messages: ChatMessageContent[][]; | ||
| messageInput?: string; | ||
| channelId?: string; | ||
|
|
||
| handleSendEvent: (e: React.MouseEvent<HTMLInputElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement>) => void; | ||
| handleKeyEvent: (e: React.KeyboardEvent<HTMLInputElement>) => void; | ||
| setMessageInput: (value: string) => void; | ||
| } | ||
|
|
||
| /** | ||
| * @param {messages} - An array of arrays of messages. Use the parseMessages function to get this. | ||
| * @param {messageInput} - The current value of the message input. | ||
| * @param {handleSendEvent} - A function to handle the send message event. | ||
| * @param {handleKeyEvent} - A function to handle the enter key event that will trigger the send event. | ||
| * @param {setMessageInput} - A function to set/update the messageInput prop value. | ||
| * @param {ChatMessageContent[][]} messages - An array of arrays of messages. Use the parseMessages function to get this. | ||
| * @param {string} messageInput - The current value of the message input. | ||
| * @param {string} channelId - The channel id for the match chat | ||
| * @param {Function} handleKeyEvent - A function to handle the enter key event that will trigger the send event. | ||
| * @param {Function} setMessageInput - A function to set/update the messageInput prop value. | ||
| */ | ||
| export const Chat: FC<ChatProps> = ({ messages, messageInput, handleKeyEvent, setMessageInput, handleSendEvent }) => { | ||
| export const Chat: FC<ChatProps> = ({ messages, messageInput, channelId, handleKeyEvent, setMessageInput }) => { | ||
| const handleSendEvent = (e: React.MouseEvent<HTMLInputElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement>) => { | ||
| e.stopPropagation(); | ||
| if (e.currentTarget.value === "") return; | ||
| sendMessage(channelId, e.currentTarget.value); | ||
| setMessageInput(""); | ||
| }; | ||
|
|
||
| return ( | ||
| <ChatContainer> | ||
| <ChatContainer alignItems="center"> | ||
| <ChatMessageListWrapper> | ||
| {messages.map((groupedMessages, index) => ( | ||
| <GroupedChatMessages key={index} messages={groupedMessages} /> | ||
| ))} | ||
| </ChatMessageListWrapper> | ||
| <ChatInput | ||
| placeholder={text.general.typeHere} | ||
| type="text" | ||
| value={messageInput} | ||
| onChange={(event) => setMessageInput(event.target.value)} | ||
| onClick={(event) => handleSendEvent(event)} | ||
| onKeyDownCapture={(event) => handleKeyEvent(event)} | ||
| /> | ||
| <ChatMessageInput alignItems="center" justifyContent="center"> | ||
| <ChatInput | ||
| placeholder={text.general.typeHere} | ||
| type="text" | ||
| value={messageInput} | ||
| onChange={(event) => setMessageInput(event.target.value)} | ||
| onClick={(event) => handleSendEvent(event)} | ||
| onKeyDownCapture={(event) => handleKeyEvent(event)} | ||
| width={CHAT_INPUT_SIZE} | ||
| /> | ||
| </ChatMessageInput> | ||
| </ChatContainer> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,11 @@ | ||
| import styled from "@emotion/styled"; | ||
| import { BaseRow } from "../../atoms"; | ||
| import { color, containerWidth, lobbySizes } from "../../design"; | ||
| import { color, containerWidth, lobbySizes, zIndex } from "../../design"; | ||
|
|
||
| export const PlayerLineupWrapper = styled(BaseRow)` | ||
| height: ${lobbySizes.md}; | ||
| width: ${containerWidth.fluid}; | ||
| border-top: 1px solid ${color.mediumGrey}; | ||
| position: relative; | ||
| z-index: -${zIndex.background}; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./lobby"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import { FC, MouseEvent, useState } from "react"; | ||
|
|
||
| import { text } from "../../assets"; | ||
| import { BodyText, BoxPattern, RectanglePattern } from "../../atoms"; | ||
| import { PrimaryButton } from "../../molecules"; | ||
| import { PlayerLineup } from "../../molecules/player-lineup"; | ||
| import { sendMessage, useChat, useMatch, useOrderedPlayers, useTotalDiceInMatch } from "../../service"; | ||
| import { useStore } from "../../store"; | ||
| import { MatchNavigationBar, MatchOptionsBar } from "../navigation-bar"; | ||
| import { PlayerLogo } from "../player-logo"; | ||
| import { LobbyWaitingContainer, LobbyWaitingWrapper } from "./styles"; | ||
|
|
||
| export const Lobby: FC = () => { | ||
| const { broadcastPlayerReady } = useMatch(); | ||
| const setPlayerReady = useStore((state) => state.setPlayerReady); | ||
| const isPlayerReady = useStore((state) => state.isPlayerReady); | ||
| const totalDice = useTotalDiceInMatch(); | ||
| const stageNumber = useStore((state) => state.stageNumber); | ||
| const drawRoundCounter = useStore((state) => state.drawRoundCounter); | ||
| const channelId = useStore((state) => state.channelId); | ||
| const [messageInput, setMessageInput] = useState(""); | ||
| const messages = useChat(); | ||
|
|
||
| const players = useOrderedPlayers(); | ||
|
|
||
| const handleClick = async () => { | ||
| await broadcastPlayerReady(); | ||
| setPlayerReady(true); | ||
| }; | ||
|
|
||
| const handleSendEvent = (e: React.MouseEvent<HTMLInputElement, MouseEvent> | React.KeyboardEvent<HTMLInputElement>) => { | ||
| e.stopPropagation(); | ||
| if (e.currentTarget.value === "") return; | ||
| sendMessage(channelId, e.currentTarget.value); | ||
| setMessageInput(""); | ||
| }; | ||
|
|
||
| const handleKeyEvent = (e: React.KeyboardEvent<HTMLInputElement>) => { | ||
| if (e.key === "Enter") handleSendEvent(e); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <MatchOptionsBar totalDice={totalDice} stageNumber={stageNumber} drawNumber={drawRoundCounter} /> | ||
| <MatchNavigationBar /> | ||
| <BoxPattern /> | ||
| <PlayerLineup players={players} /> | ||
| <RectanglePattern> | ||
| <LobbyWaitingWrapper justifyContent="center" alignItems="center"> | ||
| {isPlayerReady ? ( | ||
| <LobbyWaitingContainer justifyContent="center" alignItems="center"> | ||
| <BodyText>{text.general.waitingForTheOthersToBeReady}</BodyText> | ||
| </LobbyWaitingContainer> | ||
| ) : ( | ||
| <PrimaryButton primaryText={text.general.imReady} onClick={handleClick} /> | ||
| )} | ||
| </LobbyWaitingWrapper> | ||
| </RectanglePattern> | ||
| <PlayerLogo | ||
| handleKeyEvent={handleKeyEvent} | ||
| setMessageInput={setMessageInput} | ||
| messageInput={messageInput} | ||
| messages={messages} | ||
| channelId={channelId} | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import styled from "@emotion/styled"; | ||
| import { BaseRow } from "../../atoms"; | ||
| import { color, containerWidth, patternSizes, spacing } from "../../design"; | ||
|
|
||
| export const LobbyWaitingWrapper = styled(BaseRow)` | ||
| width: ${containerWidth.fluid}; | ||
| height: ${patternSizes.md}; | ||
| `; | ||
|
|
||
| export const LobbyWaitingContainer = styled(BaseRow)` | ||
| padding: 0px ${spacing.lg}; | ||
| background: ${color.lightGrey}; | ||
| height: calc(100% - 2px); | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.