wip 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,7 +16,6 @@ import {
 
 export const Chat = ({chatId}) => {
   let [messages, setMessages] = useState([])
-  let divRef = useRef()
   let messageRef = useRef()
   let needsScroll = useRef(false)
   let stompClient = useContext(StompContext)
@@ -28,8 +24,7 @@ export const Chat = ({chatId}) => {
   useEffect(() => {
     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
@@ -54,7 +49,7 @@ export const Chat = ({chatId}) => {
     if (!needsScroll.current) {
       return
     }
-    window.setTimeout(() => divRef.current?.scrollIntoView({behavior: "smooth"}), 0)
+    window.setTimeout(() => messageRef.current?.lastChild?.scrollIntoView({behavior: "smooth"}), 0)
   }, [messages])
 
   let onSendMessage = useCallback((event) => doTry(async () => {
@@ -71,14 +66,22 @@ 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">
+          <p>Radolf!</p>
+          <p>Radolf!</p>
+          <p>Radolf!</p>
+          <p>Radolf!</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 +90,11 @@ export const Chat = ({chatId}) => {
     </form>
   </>
 }
+
+function isLastChildVisible(container) {
+  let lastChild = container.lastChild
+  let lastChildTop = lastChild.offsetTop
+  let containerTop = container.scrollTop + container.offsetTop
+  let containerBottom = containerTop + container.clientHeight
+  return lastChildTop < containerBottom
+}

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

@@ -11,14 +11,17 @@ import {
 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-4 pl-2 h-full flex flex-col gap-y-1">
         <Panel />
       </div>
     </SideBar>
@@ -48,18 +51,14 @@ function Panel() {
       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>
+  return <>
+    <div className="flex-none h-12 border border-gray-500 bg-gray-900 rounded-lg p-1 overflow-y-scroll">
+      {users.map(user => (
+        <div key={user}>
+          {user}
+        </div>
+      ))}
     </div>
-  )
+    <Chat chatId="Lobby"/>
+  </>
 }