developmaunt -> mauster #3

Merged
DTieman merged 7 commits from developmaunt into mauster 2024-04-24 18:05:41 +00:00
Showing only changes of commit b738263726 - Show all commits

View File

@@ -31,14 +31,13 @@ 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 }) => {
@@ -51,7 +50,7 @@ const Room = () => {
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>