MauMau/MauMau-Client
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

developmaunt -> mauster #3

Merged
DTieman merged 7 commits from developmaunt into mauster 2024-04-24 18:05:41 +00:00
Conversation 0 Commits 7 Files Changed 23 +6 -7
1 changed files with 6 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b738263726 - Show all commits

13
src/layout/pages/Room.tsx
View File

@@ -31,27 +31,26 @@ const Room = () => {
const {roomId} = useParams(); const {roomId} = useParams();
const playerName = localStorage.getItem('playerName') || Math.random().toString(36).substring(7); const playerName = localStorage.getItem('playerName') ?? Math.random().toString(36).substring(7);
const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`; const WS_URL = `${process.env.REACT_APP_WEBSOCKET_URL}/room/${roomId}/${playerName}`;
const [gameState, setGameState] = React.useState<GameState | undefined>(undefined); const [gameState, setGameState] = React.useState<GameState | undefined>(undefined);
const [lobbyState, setLobbyState] = React.useState<string>(""); const [lobbyState, setLobbyState] = React.useState<string>("");
const [winner, setWinner] = React.useState<string | undefined>(undefined); const [winner, setWinner] = React.useState<string | undefined>(undefined);
const [chatScroll, setChatScroll] = React.useState<boolean>(true);
const chatRef = React.useRef<HTMLOListElement>(null); const chatRef = React.useRef<HTMLOListElement>(null);
const addChatMessage = (message: {Sender: string, Message: string}) => { const addChatMessage = (message: { Sender: string, Message: string }) => {
if(!chatRef.current) return; if (!chatRef.current) return;
const { scrollTop, scrollHeight, clientHeight } = chatRef.current; const {scrollTop, scrollHeight, clientHeight} = chatRef.current;
const newChatElement = document.createElement('li'); const newChatElement = document.createElement('li');
newChatElement.innerHTML = `<strong>${message.Sender}:</strong> ${message.Message}`; newChatElement.innerHTML = `<strong>${message.Sender}:</strong> ${message.Message}`;
chatRef.current.appendChild(newChatElement); chatRef.current.appendChild(newChatElement);
const isNearBottom = scrollTop + clientHeight + newChatElement.scrollHeight * 2 >= scrollHeight; const isNearBottom = scrollTop + clientHeight + newChatElement.scrollHeight * 2 >= scrollHeight;
if (chatScroll && isNearBottom) { if (isNearBottom) {
newChatElement.scrollIntoView({behavior: 'smooth'}); newChatElement.scrollIntoView({behavior: 'smooth'});
} }
} }
@@ -132,7 +131,7 @@ const Room = () => {
{ {
gameState ? gameState ?
<Game gameState={gameState} handleGameAction={handleGameAction}/> <Game gameState={gameState} handleGameAction={handleGameAction}/>
: : lobbyState === 'LOBBY' &&
<Lobby winner={winner} handleLobbyAction={handleLobbyAction}/> <Lobby winner={winner} handleLobbyAction={handleLobbyAction}/>
} }
</main> </main>