chat split movable

Author: h908714124

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

@@ -5,6 +5,9 @@ import {
   useContext, 
   useRef,
 } from "react"
+import {
+  twJoin,
+} from "tailwind-merge"
 import {
   useAuthStore,
 } from "../store.js"
@@ -23,7 +26,7 @@ export const Chat = ({chatId}) => {
   let auth = useAuthStore(state => state.auth)
 
   useEffect(() => {
-    let sub1 = stompClient.subscribe("/topic/users/Lobby", (message) => {
+    let sub1 = stompClient.subscribe("/topic/users/" + chatId, (message) => {
       let r = JSON.parse(message.body)
       setUsers(r.users)
     })
@@ -47,6 +50,7 @@ export const Chat = ({chatId}) => {
         },
       })
       setMessages(chat.messages || [])
+      setUsers(chat.users || [])
     })
     return () => {
       sub1.unsubscribe()
@@ -84,20 +88,19 @@ export const Chat = ({chatId}) => {
   }), [stompClient, chatId])
 
   return <>
-    <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">
+    <SplitPane
+      messageRef={messageRef}
+      topElement={<>
+        {users.map(user => (
+          <p key={user}>{user}</p>
+        ))}
+      </>}
+      bottomElement={<>
         {messages.map(message => (
             <p key={message.n}>{message.user + ": " + message.message}</p>
         ))}
-      </div>
-    </div>
+      </>}
+    />
     <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"
@@ -118,3 +121,78 @@ function isLastChildVisible(container) {
   let containerBottom = containerTop + container.clientHeight
   return lastChildTop < containerBottom
 }
+
+function SplitPane({messageRef, topElement, bottomElement}) {
+  let [dragging, setDragging] = useState(false)
+  let [splitPos, setSplitPos] = useState(60)
+  let [ghostPos, setGhostPos] = useState(splitPos)
+  let draggingRef = useRef()
+  let ghostPosRef = useRef()
+  let containerRef = useRef()
+  draggingRef.current = dragging
+  ghostPosRef.current = ghostPos
+  useEffect(() => {
+    let mousemove = (e) => {
+      if (!draggingRef.current) {
+        return
+      }
+      let pos = e.clientY
+      let rect = containerRef.current.getBoundingClientRect()
+      setGhostPos(pos - rect.top)
+    }
+    let mouseup = (e) => {
+      if (!draggingRef.current) {
+        return
+      }
+      let pos = e.clientY
+      let rect = containerRef.current.getBoundingClientRect()
+      setGhostPos(pos - rect.top)
+      setSplitPos(pos - rect.top)
+      setDragging(false)
+    }
+    window.document.addEventListener("mousemove", mousemove)
+    window.document.addEventListener("mouseup", mouseup)
+    return () => {
+      window.document.removeEventListener("mousemove", mousemove)
+      window.document.removeEventListener("mouseup", mouseup)
+    }
+  }, [draggingRef, setGhostPos, setDragging])
+  let onMouseDown = useCallback((e) => {
+    e.preventDefault()
+    let pos = e.clientY
+    let rect = containerRef.current.getBoundingClientRect()
+    setGhostPos(pos - rect.top)
+    setDragging(true)
+  }, [setDragging])
+  return (
+    <div
+      ref={(ref) => {
+        containerRef.current = ref
+      }}
+      className={twJoin(
+        "grow border border-gray-500 bg-gray-900 rounded-lg flex flex-col overflow-y-hidden relative",
+        dragging && "cursor-row-resize",
+      )}>
+      <div
+        style={{height: splitPos + "px"}}
+        className="px-1 flex-none overflow-y-scroll">
+        {topElement}
+      </div>
+      <div
+        onMouseDown={onMouseDown}
+        className={twJoin(
+          "w-full flex-none h-[3px] cursor-row-resize",
+          !dragging && "bg-gray-500",
+          dragging && "bg-transparent",
+        )} />
+      {dragging && (
+        <div
+          style={{top: ghostPos + "px"}}
+          className="w-full absolute h-[3px] bg-gray-500 z-20" />
+      )}
+      <div ref={messageRef} className="px-1 overflow-y-scroll">
+        {bottomElement}
+      </div>
+    </div>
+  )
+}

src/main/client/src/component/SideBar.jsx

@@ -2,6 +2,7 @@ import {
   useRef,
   useEffect,
   useState,
+  useCallback,
 } from "react"
 import {
   useLayoutStore,
@@ -43,15 +44,16 @@ export const SideBar = ({page, children}) => {
       window.document.removeEventListener("mouseup", mouseup)
     }
   }, [vw, page, draggingRef, setDragging, setSidebarWidth, sanitizeSidebarWidth])
+  let onMouseDown = useCallback((e) => {
+    e.preventDefault()
+    setDragging(true)
+  }, [setDragging])
   return (
     <div
         style={{width: sidebarWidth + "px"}}
         className="fixed top-0 right-0 h-full bg-slate-800">
       <div
-        onMouseDown={(e) => {
-          e.preventDefault()
-          setDragging(true)
-        }}
+        onMouseDown={onMouseDown}
         style={{right: sidebarWidth + "px"}}
         className="fixed top-0 w-[3px] h-full bg-slate-700 z-10 cursor-col-resize" />
       {dragging && (

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

@@ -300,9 +300,7 @@ export const Game = () => {
           width={context.width} height={context.width}>
         </canvas>
       </div>
-      <div
-        style={{right: (sidebarWidth + 12) + "px"}}
-        className="absolute bottom-4">
+      <div className="absolute left-2 top-2">
         <button onClick={onMuteClick}>
           <IconContext.Provider value={{
             size: "1.5em",

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

@@ -40,8 +40,7 @@ public Chat getChat(@PathVariable String id) {
   @MessageMapping("/chat/send/")
   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<>(), new TreeSet<>()));
+    Chat chat = chats.get(chatRequest.id());
     ChatMessage message = new ChatMessage(chat.counter().getAndIncrement(), chatRequest.message(), user);
     chat.messages().add(message);
     if (chat.users().add(user)) {

src/main/java/com/bernd/Chats.java

@@ -1,16 +1,20 @@
 package com.bernd;
 
 import com.bernd.model.Chat;
+import java.util.ArrayList;
 import java.util.LinkedHashMap;
 import java.util.Map;
+import java.util.TreeSet;
+import java.util.concurrent.atomic.AtomicInteger;
 import org.springframework.stereotype.Component;
 
 @Component
 public class Chats {
   private final Map<String, Chat> map = new LinkedHashMap<>();
 
   Chat get(String id) {
-    return map.get(id);
+    return map.computeIfAbsent(id,
+        _id -> new Chat(id, new AtomicInteger(0), new ArrayList<>(), new TreeSet<>()));
   }
 
   Chat put(Chat chat) {

src/main/java/com/bernd/GameController.java

@@ -4,10 +4,14 @@
 import com.bernd.game.MoveList;
 import com.bernd.model.AcceptRequest;
 import com.bernd.model.ActiveGame;
+import com.bernd.model.Chat;
+import com.bernd.model.ChatMessage;
 import com.bernd.model.Game;
 import com.bernd.model.Move;
 import com.bernd.model.OpenGame;
+import com.bernd.model.UsersMessage;
 import com.bernd.model.ViewGame;
+import com.bernd.util.Auth;
 import com.bernd.util.RandomString;
 import java.security.Principal;
 import org.springframework.http.HttpStatus;
@@ -33,18 +37,20 @@ public class GameController {
   private final Games games;
   private final OpenGames openGames;
   private final ActiveGames activeGames;
+  private final Chats chats;
 
   GameController(
       MessageSendingOperations<String> operations,
       Users users,
       Games games,
       OpenGames openGames,
-      ActiveGames activeGames) {
+      ActiveGames activeGames, Chats chats) {
     this.operations = operations;
     this.users = users;
     this.games = games;
     this.openGames = openGames;
     this.activeGames = activeGames;
+    this.chats = chats;
   }
 
   @ResponseBody
@@ -55,6 +61,10 @@ public ViewGame getGame(@PathVariable String id, Principal p) {
     if (game == null) {
       throw new ResponseStatusException(HttpStatus.NOT_FOUND, "no such game");
     }
+    Chat chat = chats.get(id);
+    if (chat.users().add(Auth.getPrincipal(p))) {
+      operations.convertAndSend("/topic/users/" + chat.id(), new UsersMessage(chat.users()));
+    }
     return game.toView();
   }