fix some layout problems

Author: h908714124

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

@@ -136,20 +136,24 @@ function isLastChildVisible(container) {
 }
 
 function SplitPane({className, messageRef, topElement, bottomElement}) {
+  let [initialized, setInitialized] = useState(false)
   let [dragOffset, setDragOffset] = useState(Number.NaN)
-  let [splitPos, setSplitPos] = useState(200)
+  let [splitPos, setSplitPos] = useState(60)
   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)
+    let container = containerRef.current
+    if (initialized && container) {
+      setTimeout(() => {
+        let pos = getSplitPos(splitPosRef.current, container)
+        setSplitPos(pos)
+      }, 0)
     }
-  }, [chatState])
+  }, [chatState, initialized])
 
   useEffect(() => {
     let onMouseMove = (e) => {
@@ -166,15 +170,18 @@ function SplitPane({className, messageRef, topElement, bottomElement}) {
       window.document.removeEventListener("mouseup", onMouseUp)
     }
   }, [dragOffset, setDragOffset])
+
   let onMouseDown = useCallback((e) => {
     e.preventDefault()
     setDragOffset(splitPosRef.current - e.clientY)
   }, [setDragOffset])
+
   let topElementHeight = Math.trunc(splitPos)
   if (containerRef.current) {
     let rect = containerRef.current.getBoundingClientRect()
     topElementHeight = Math.trunc(getSplitPos(splitPos, containerRef.current) - rect.top)
   }
+
   return (
     <div
       ref={(ref) => {
@@ -183,7 +190,10 @@ function SplitPane({className, messageRef, topElement, bottomElement}) {
         }
         if (!containerRef.current) {
           let rect = ref.getBoundingClientRect()
-          setSplitPos(getSplitPos(rect.top + 4.5 * getRemInPixel(), ref))
+          let pos = getSplitPos(rect.top + 60, ref)
+          setSplitPos(pos)
+          splitPosRef.current = pos
+          setInitialized(true)
         }
         containerRef.current = ref
       }}

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

@@ -60,10 +60,23 @@ import {
   createGameState,
 } from "./state.js"
 
-export const Game = () => {
+export function Game() {
+  let [gameState, setGameState] = useState(initialState())
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth.game)
+  return (
+    <div
+      style={{ width: vw() - sidebarWidth }}
+      className="h-full">
+      <MuteIcon />
+      <Board gameState={gameState} setGameState={setGameState} />
+      <GamePanel gameState={gameState} />
+    </div>
+  )
+}
+
+function Board({gameState, setGameState}) {
   let [cursor_x, setCursor_x] = useState(-1)
   let [cursor_y, setCursor_y] = useState(-1)
-  let [gameState, setGameState] = useState(initialState())
   let zoom = useViewStateStore(state => state.zoom)
   let {gameId} = useParams()
   let toggleChatState = useChatStore(state => state.toggleChatState)
@@ -80,10 +93,8 @@ export const Game = () => {
   let [forbidden_x, forbidden_y] = gameState.forbidden
   let canvasRef = useRef()
   let countingGroup = !gameHasEnded(gameState) && counting ? getCountingGroup(board, cursor_x, cursor_y) : undefined
-  let sidebarWidth = useLayoutStore(state => state.sidebarWidth.game)
   let dragging = useLayoutStore(state => state.dragging)
   let muted = useMuteStore(state => state.muted)
-  let setMuteState = useMuteStore((state) => state.setMuted)
   let howler = useRef()
   let playClickSound = useCallback(() => {
     if (muted) {
@@ -224,15 +235,7 @@ export const Game = () => {
       destination: "/app/game/move",
       body: JSON.stringify(move),
     })
-  }, [gameState, context, auth, board, stompClient, counting, forbidden_x, forbidden_y, movesLength, myColor, playClickSound])
-
-  let onMuteClick = useCallback(() => {
-    if (muted) {
-      setMuteState(false)
-    } else {
-      setMuteState(true)
-    }
-  }, [setMuteState, muted])
+  }, [gameState, setGameState, toggleChatState, context, auth, board, stompClient, counting, forbidden_x, forbidden_y, movesLength, myColor, playClickSound])
 
   useEffect(() => {
     if (!board.length) {
@@ -286,7 +289,7 @@ export const Game = () => {
       setGameState(createGameState(game, auth))
       toggleChatState()
     }, () => navigate(base + "/lobby"))
-  }, [queueStatus, auth, id, gameId, navigate])
+  }, [setGameState, toggleChatState, queueStatus, auth, id, gameId, navigate])
 
   useEffect(() => {
     let sub = stompClient.subscribe("/topic/move/" + gameId, (message) => {
@@ -295,43 +298,23 @@ export const Game = () => {
       toggleChatState()
     })
     return sub.unsubscribe
-  }, [gameState, stompClient, gameId])
+  }, [gameState, setGameState, toggleChatState, stompClient, gameId])
 
   if (!board.length) {
     return <div>Loading...</div>
   }
 
   return (
-    <div
-      style={{ width: (vw() - sidebarWidth) + "px" }}
-      className="h-full">
-      <div className="grid h-full">
-        <canvas className="place-self-center" ref={canvasRef}
-          onMouseLeave={() => {
-            setCursor_x(-1)
-            setCursor_y(-1)
-          }}
-          onMouseMove={onMouseMove}
-          onClick={onClick}
-          width={context.width} height={context.width}>
-        </canvas>
-      </div>
-      <div className="absolute left-2 top-2">
-        <button onClick={onMuteClick}>
-          <IconContext.Provider value={{
-            size: "1.5em",
-            className: "pl-[4px]",
-          }}>
-            {muted && (
-              <FaVolumeMute />
-            )}
-            {!muted && (
-              <FaVolumeUp />
-            )}
-          </IconContext.Provider>
-        </button>
-      </div>
-      <GamePanel gameState={gameState} />
+    <div className="grid h-full">
+      <canvas className="place-self-center" ref={canvasRef}
+        onMouseLeave={() => {
+          setCursor_x(-1)
+          setCursor_y(-1)
+        }}
+        onMouseMove={onMouseMove}
+        onClick={onClick}
+        width={context.width} height={context.width}>
+      </canvas>
     </div>
   )
 }
@@ -357,3 +340,20 @@ function getCountingGroup(board, cursor_x, cursor_y) {
   }
   return has
 }
+
+function MuteIcon() {
+  let toggleMuted = useMuteStore((state) => state.toggleMuted)
+  let muted = useMuteStore(state => state.muted)
+  return (
+    <div className="absolute left-2 top-2">
+      <button onClick={toggleMuted}>
+        <IconContext.Provider value={{
+          size: "1.5em",
+          className: "pl-[4px]",
+        }}>
+          {muted ? <FaVolumeMute /> : <FaVolumeUp /> }
+        </IconContext.Provider>
+      </button>
+    </div>
+  )
+}

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

@@ -18,6 +18,7 @@ import {
   StompContext,
   tfetch,
   doTry,
+  vw,
 } from "src/util.js"
 import {
   LobbyPanel,
@@ -31,6 +32,9 @@ import {
 import {
   useAuthStore,
 } from "src/store.js"
+import {
+  useLayoutStore,
+} from "src/layout.js"
 import {
   CgClose,
 } from "react-icons/cg"
@@ -76,8 +80,11 @@ export function Lobby() {
     })
     navigate(base + "/game/" + response.id)
   }), [auth, navigate])
+  let sidebarWidth = useLayoutStore(state => state.sidebarWidth.lobby)
   return (
-    <>
+    <div
+      style={{ width: vw() - sidebarWidth }}
+      className="h-full">
       <div className={twJoin(
           "mt-2 inline-flex py-2 pr-4 gap-x-1 border-r-2 border-y-2",
           isNewGameOpen && "rounded-r-full border-slate-600",
@@ -110,7 +117,7 @@ export function Lobby() {
         )}
       </div>
       <LobbyPanel />
-    </>
+    </div>
   )
 }
 

src/main/client/src/store.js

@@ -35,11 +35,11 @@ export const useAuthStore = create(
 
 export const useMuteStore = create(
   persist(
-    (set) => ({
+    (set, get) => ({
       muted: false,
-      setMuted: (mute) => 
+      toggleMuted: () =>
         set(() => ({
-          muted: mute
+          muted: !get().muted
         }))
     }),
     { name: "mute-storage" },