show chat users

Author: h908714124

src/main/client/src/component/Chat.jsx

@@ -5,9 +5,6 @@ import {
   useContext, 
   useRef,
 } from "react"
-import {
-  useParams,
-} from "react-router-dom"
 import {
   useAuthStore,
 } from "../store.js"
@@ -19,17 +16,20 @@ import {
 
 export const Chat = ({chatId}) => {
   let [messages, setMessages] = useState([])
-  let divRef = useRef()
+  let [users, setUsers] = useState([])
   let messageRef = useRef()
   let needsScroll = useRef(false)
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
 
   useEffect(() => {
-    stompClient.subscribe("/topic/chat/" + chatId, (m) => {
+    let sub1 = stompClient.subscribe("/topic/users/Lobby", (message) => {
+      let r = JSON.parse(message.body)
+      setUsers(r.users)
+    })
+    let sub2 = stompClient.subscribe("/topic/chat/" + chatId, (m) => {
       let message = JSON.parse(m.body)
-      let msg = messageRef.current
-      needsScroll.current = msg.scrollHeight <= msg.scrollTop + msg.offsetHeight
+      needsScroll.current = isLastChildVisible(messageRef.current)
       setMessages(previous => {
         if (previous.length && previous[previous.length - 1].n === message.n) {
           return previous
@@ -48,13 +48,26 @@ export const Chat = ({chatId}) => {
       })
       setMessages(chat.messages || [])
     })
+    return () => {
+      sub1.unsubscribe()
+      sub2.unsubscribe()
+    }
   }, [stompClient, auth, chatId])
 
   useEffect(() => {
     if (!needsScroll.current) {
       return
     }
-    window.setTimeout(() => divRef.current?.scrollIntoView({behavior: "smooth"}), 0)
+    window.setTimeout(() => {
+      if (!messageRef.current) {
+        return
+      }
+      let lastChild = messageRef.current.lastChild
+      if (!lastChild) {
+        return
+      }
+      lastChild.scrollIntoView({behavior: "smooth"})
+    }, 0)
   }, [messages])
 
   let onSendMessage = useCallback((event) => doTry(async () => {
@@ -71,14 +84,21 @@ export const Chat = ({chatId}) => {
   }), [stompClient, chatId])
 
   return <>
-    <div ref={messageRef}
-      className="grow border border-gray-500 bg-gray-900 rounded-lg p-1 overflow-y-scroll">
-      {messages.map(message => (
-          <p key={message.n}>{message.user + ": " + message.message}</p>
-      ))}
-      <div ref={divRef} />
+    <div
+      className="grow border border-gray-500 bg-gray-900 rounded-lg flex flex-col overflow-y-hidden">
+        <div className="px-1 flex-none h-14 overflow-y-scroll">
+          {users.map(user => (
+            <p key={user}>{user}</p>
+          ))}
+        </div>
+      <div className="w-full flex-none h-[2px] bg-gray-500" />
+      <div ref={messageRef} className="px-1 overflow-y-scroll">
+        {messages.map(message => (
+            <p key={message.n}>{message.user + ": " + message.message}</p>
+        ))}
+      </div>
     </div>
-    <form className="flex-0 mb-2" onSubmit={onSendMessage}>
+    <form className="flex-none mb-2" onSubmit={onSendMessage}>
       <input
         className="w-full rounded-lg p-2 border border-gray-500 bg-stone-800 text-stone-100"
         type="text"
@@ -87,3 +107,14 @@ export const Chat = ({chatId}) => {
     </form>
   </>
 }
+
+function isLastChildVisible(container) {
+  let lastChild = container.lastChild
+  if (!lastChild) {
+    return false
+  }
+  let lastChildTop = lastChild.offsetTop
+  let containerTop = container.scrollTop + container.offsetTop
+  let containerBottom = containerTop + container.clientHeight
+  return lastChildTop < containerBottom
+}

src/main/client/src/feature/game/Game.jsx

@@ -210,7 +210,7 @@ export const Game = () => {
       destination: "/app/game/move",
       body: JSON.stringify(move),
     })
-  }, [context, currentPlayer, currentColor, auth, board, stompClient, counting, forbidden_x, forbidden_y, gameHasEnded, movesLength, addMove, isSelfPlay, myColor, muted])
+  }, [context, currentPlayer, currentColor, auth, board, stompClient, counting, forbidden_x, forbidden_y, gameHasEnded, movesLength, addMove, isSelfPlay, myColor, muted, sound])
 
   let onMuteClick = useCallback(() => {
     if (muted) {

src/main/client/src/feature/lobby/LobbyPanel.jsx

@@ -1,24 +1,24 @@
 import {
-  useContext,
   useEffect,
-  useState,
 } from "react"
 import {
   tfetch,
-  StompContext,
   doTry,
 } from "../../util.js"
 import {
   useAuthStore,
 } from "../../store.js"
+import {
+  Chat,
+} from "../../component/Chat.jsx"
 import {
   SideBar,
 } from "../../component/SideBar.jsx"
 
 export const LobbyPanel = () => {
   return (
     <SideBar page="lobby">
-      <div className="pt-2">
+      <div className="pr-3 pt-2 pl-2 h-full flex flex-col gap-y-1">
         <Panel />
       </div>
     </SideBar>
@@ -27,8 +27,6 @@ export const LobbyPanel = () => {
 
 function Panel() {
   let auth = useAuthStore(state => state.auth)
-  let stompClient = useContext(StompContext)
-  let [users, setUsers] = useState([])
   useEffect(() => {
     doTry(() => {
       tfetch("/api/lobby/hello", {
@@ -38,28 +36,8 @@ function Panel() {
       })
     })
     return undefined
-  }, [setUsers, auth])
-  useEffect(() => {
-    let sub1 = stompClient.subscribe("/topic/lobby/users", (message) => {
-      let r = JSON.parse(message.body)
-      setUsers(r.users)
-    })
-    return () => {
-      sub1.unsubscribe()
-    }
-  }, [setUsers, stompClient])
-  return (
-    <div className="mt-2">
-      <div className="pl-2 pb-2 border-b border-b-slate-700">
-        {auth.name}
-      </div>
-      <div className="pl-2 mt-2">
-        {users.map(user => (
-          <div key={user}>
-            {user}
-          </div>
-        ))}
-      </div>
-    </div>
-  )
+  }, [auth])
+  return <>
+    <Chat chatId="Lobby"/>
+  </>
 }

src/main/java/com/bernd/ChatController.java

@@ -3,10 +3,8 @@
 import com.bernd.model.Chat;
 import com.bernd.model.ChatMessage;
 import com.bernd.model.ChatRequest;
+import com.bernd.model.UsersMessage;
 import com.bernd.util.Auth;
-import java.security.Principal;
-import java.util.ArrayList;
-import java.util.concurrent.atomic.AtomicInteger;
 import org.springframework.http.ResponseEntity;
 import org.springframework.messaging.core.MessageSendingOperations;
 import org.springframework.messaging.handler.annotation.MessageMapping;
@@ -15,6 +13,11 @@
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.ResponseBody;
 
+import java.security.Principal;
+import java.util.ArrayList;
+import java.util.TreeSet;
+import java.util.concurrent.atomic.AtomicInteger;
+
 @Controller
 public class ChatController {
 
@@ -38,9 +41,12 @@ public Chat getChat(@PathVariable String id) {
   public ResponseEntity<?> sendChat(ChatRequest chatRequest, Principal principal) {
     String user = Auth.getPrincipal(principal);
     Chat chat = chats.map().computeIfAbsent(chatRequest.id(),
-        id -> new Chat(id, new AtomicInteger(0), new ArrayList<>()));
+        id -> new Chat(id, new AtomicInteger(0), new ArrayList<>(), new TreeSet<>()));
     ChatMessage message = new ChatMessage(chat.counter().getAndIncrement(), chatRequest.message(), user);
     chat.messages().add(message);
+    if (chat.users().add(user)) {
+      operations.convertAndSend("/topic/users/" + chat.id(), new UsersMessage(chat.users()));
+    }
     operations.convertAndSend("/topic/chat/" + chat.id(), message);
     return ResponseEntity.ok().build();
   }

src/main/java/com/bernd/model/Chat.java

@@ -1,10 +1,12 @@
 package com.bernd.model;
 
 import java.util.List;
+import java.util.Set;
 import java.util.concurrent.atomic.AtomicInteger;
 
 public record Chat(
     String id,
     AtomicInteger counter,
-    List<ChatMessage> messages) {
+    List<ChatMessage> messages,
+    Set<String> users) {
 }

src/main/java/com/bernd/model/UsersMessage.java

@@ -0,0 +1,7 @@
+package com.bernd.model;
+
+import java.util.Set;
+
+public record UsersMessage(
+    Set<String> users) {
+}