fix an issue where the chat ghostbar is in the wrong position after game end

Author: h908714124

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

@@ -10,12 +10,14 @@ import {
 } from "tailwind-merge"
 import {
   useAuthStore,
+  useChatStore,
 } from "src/store.js"
 import {
   StompContext,
   tfetch,
   doTry,
   getRemInPixel,
+  DELTA,
 } from "src/util.js"
 
 export const Chat = ({chatId, className}) => {
@@ -139,6 +141,15 @@ function SplitPane({className, messageRef, topElement, bottomElement}) {
   let splitPosRef = useRef()
   splitPosRef.current = splitPos
   let containerRef = useRef()
+  let chatState = useChatStore(state => state.chatState)
+
+  // force re-render: sidebar layout may have changed
+  useEffect(() => {
+    let splitPos = splitPosRef.current
+    if (containerRef.current) {
+      setTimeout(() => setSplitPos(getSplitPos(chatState ? splitPos + DELTA : splitPos - DELTA), containerRef.current), 0)
+    }
+  }, [chatState])
 
   useEffect(() => {
     let onMouseMove = (e) => {
@@ -162,7 +173,7 @@ function SplitPane({className, messageRef, topElement, bottomElement}) {
   let topElementHeight = Math.trunc(splitPos)
   if (containerRef.current) {
     let rect = containerRef.current.getBoundingClientRect()
-    topElementHeight = Math.trunc(splitPos - rect.top)
+    topElementHeight = Math.trunc(getSplitPos(splitPos, containerRef.current) - rect.top)
   }
   return (
     <div
@@ -208,7 +219,7 @@ function SplitBar({splitPos, dragOffset, onMouseDown, container}) {
     <div
       onMouseDown={Number.isNaN(dragOffset) ? onMouseDown : undefined}
       style={{
-        top: Math.trunc(splitPos) - 1,
+        top: Math.trunc(getSplitPos(splitPos, container)) - 1,
         height: Math.trunc(getRemInPixel() * 0.5) + 2,
         width: rect.width,
         left: rect.left - parentRect.left,

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

@@ -34,6 +34,7 @@ import {
 import {
   useAuthStore,
   useMuteStore,
+  useChatStore,
 } from "src/store.js"
 import {
   useLayoutStore,
@@ -65,6 +66,7 @@ export const Game = () => {
   let [gameState, setGameState] = useState(initialState())
   let zoom = useViewStateStore(state => state.zoom)
   let {gameId} = useParams()
+  let toggleChatState = useChatStore(state => state.toggleChatState)
   let navigate = useNavigate()
   let stompClient = useContext(StompContext)
   let auth = useAuthStore(state => state.auth)
@@ -215,6 +217,7 @@ export const Game = () => {
     }
     if (!isSelfPlay(gameState)) { // myColor is 0 in self play
       setGameState(addMove(gameState, {...move, color: myColor}))
+      toggleChatState()
     }
     playClickSound()
     stompClient.publish({
@@ -281,13 +284,15 @@ export const Game = () => {
         },
       })
       setGameState(createGameState(game, auth))
+      toggleChatState()
     }, () => navigate(base + "/lobby"))
   }, [queueStatus, auth, id, gameId, navigate])
 
   useEffect(() => {
     let sub = stompClient.subscribe("/topic/move/" + gameId, (message) => {
       let move = JSON.parse(message.body)
       setGameState(addMove(gameState, move))
+      toggleChatState()
     })
     return sub.unsubscribe
   }, [gameState, stompClient, gameId])

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

@@ -195,5 +195,5 @@ function getScore(board) {
       }
     }
   }
-  return { w, b }
+  return {w, b}
 }

src/main/client/src/store.js

@@ -42,6 +42,16 @@ export const useMuteStore = create(
           muted: mute
         }))
     }),
-    { name: "mute-storage" }
+    { name: "mute-storage" },
   )
 )
+
+// trick to re-render the chat
+export const useChatStore = create((set, get) => ({
+  chatState: false,
+  toggleChatState: () =>
+    set(() => ({
+      chatState: !get().chatState
+    }))
+  }),
+)