From 8b470c054738496819e25d010b47f7f27ec9c717 Mon Sep 17 00:00:00 2001
From: Jack Papel <jackpapel@live.com>
Date: Wed, 4 Dec 2024 20:41:38 -0500
Subject: [PATCH] Add hover highlighting for panels + default sizes

---
 client/src/menu/game/GameScreen.tsx           | 48 ++++++++++++-------
 client/src/menu/game/gameScreen.css           |  5 ++
 .../menu/spectator/SpectatorGameScreen.tsx    | 19 +-------
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/client/src/menu/game/GameScreen.tsx b/client/src/menu/game/GameScreen.tsx
index 12762485f..3beb72806 100644
--- a/client/src/menu/game/GameScreen.tsx
+++ b/client/src/menu/game/GameScreen.tsx
@@ -192,32 +192,46 @@ export default function GameScreen(): ReactElement {
         return () => removeSwipeEventListener(swipeEventListener);
     })
 
-    const allMenusClosed = menuController.menusOpen().length === 0;
-    const minSize = 10;
-
     return <MenuControllerContext.Provider value={menuController}>
         <div className="game-screen">
             <div className="header">
                 <HeaderMenu chatMenuNotification={chatMenuNotification}/>
             </div>
-            <PanelGroup direction="horizontal" className="content">
-                {menuController.menusOpen().map((menu, index, menusOpen) => {
-                    const MenuElement = MENU_ELEMENTS[menu];
-                    return <>
-                        <Panel minSize={minSize}>
-                            <MenuElement />
-                        </Panel>
-                        {menusOpen.some((_, i) => i > index) && <PanelResizeHandle />}
-                    </>
-                })}
-                {allMenusClosed && <Panel><div className="no-content">
-                    {translate("menu.gameScreen.noContent")}
-                </div></Panel>}
-            </PanelGroup>
+            <GameScreenMenus />
         </div>
     </MenuControllerContext.Provider>
 }
 
+export function GameScreenMenus(): ReactElement {
+    const menuController = useContext(MenuControllerContext)!;
+    const minSize = 10; // Percentage
+
+    // These don't add up to 100, but the panel group will fix it
+    const defaultSizes = {
+        [ContentMenu.ChatMenu]: 35,
+        [ContentMenu.RoleSpecificMenu]: 15,
+        [ContentMenu.WillMenu]: 15,
+        [ContentMenu.PlayerListMenu]: 25,
+        [ContentMenu.GraveyardMenu]: 10,
+        [ContentMenu.WikiMenu]: 15,
+    }
+
+    return <PanelGroup direction="horizontal" className="content">
+        {menuController.menusOpen().map((menu, index, menusOpen) => {
+            const MenuElement = MENU_ELEMENTS[menu];
+            return <>
+                <Panel className="panel" minSize={minSize} defaultSize={defaultSizes[menu]}>
+                    <MenuElement />
+                </Panel>
+                {menusOpen.some((_, i) => i > index) && <PanelResizeHandle className="panel-handle"/>}
+            </>
+        })}
+        {menuController.menusOpen().length === 0 && <Panel><div className="no-content">
+            {translate("menu.gameScreen.noContent")}
+        </div></Panel>}
+    </PanelGroup>
+}
+
 export function ContentTab(props: Readonly<{
     helpMenu: WikiArticleLink | null
     close: ContentMenu | false, 
diff --git a/client/src/menu/game/gameScreen.css b/client/src/menu/game/gameScreen.css
index 33f58b8eb..146a59bd6 100644
--- a/client/src/menu/game/gameScreen.css
+++ b/client/src/menu/game/gameScreen.css
@@ -31,6 +31,11 @@
     border-right-color: var(--background-border-shadow-color);
 }
 
+.game-screen .content > .panel-handle[data-resize-handle-state="hover"],
+.game-screen .content > .panel-handle[data-resize-handle-state="drag"] {
+    outline: .13rem solid var(--focus-outline-color);
+}
+
 @media only screen and (max-width: 600px) {
     .game-screen .content > div > div {
         width: 100%;
diff --git a/client/src/menu/spectator/SpectatorGameScreen.tsx b/client/src/menu/spectator/SpectatorGameScreen.tsx
index a518568f9..6389a03c1 100644
--- a/client/src/menu/spectator/SpectatorGameScreen.tsx
+++ b/client/src/menu/spectator/SpectatorGameScreen.tsx
@@ -2,10 +2,8 @@ import React, { ReactElement, useContext } from "react";
 import "./spectatorGameScreen.css";
 import "../game/gameScreen.css"
 import HeaderMenu from "../game/HeaderMenu";
-import { MenuController, useMenuController, MenuControllerContext, MENU_ELEMENTS } from "../game/GameScreen";
+import { MenuController, useMenuController, MenuControllerContext, GameScreenMenus } from "../game/GameScreen";
 import { MobileContext } from "../Anchor";
-import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
-import translate from "../../game/lang";
 
 let CONTENT_CONTROLLER: MenuController | undefined;
 
@@ -40,20 +38,7 @@ export default function SpectatorGameScreen(): ReactElement {
                 <div className="header">
                     <HeaderMenu chatMenuNotification={false}/>
                 </div>
-                <PanelGroup direction="horizontal" className="content">
-                    {contentController.menusOpen().map((menu, index, menusOpen) => {
-                        const MenuElement = MENU_ELEMENTS[menu];
-                        return <>
-                            <Panel minSize={10}>
-                                <MenuElement />
-                            </Panel>
-                            {menusOpen.some((_, i) => i > index) && <PanelResizeHandle />}
-                        </>
-                    })}
-                    {contentController.menusOpen().length === 0 && <Panel><div className="no-content">
-                        {translate("menu.gameScreen.noContent")}
-                    </div></Panel>}
-                </PanelGroup>
+                <GameScreenMenus />
             </div>
         </MenuControllerContext.Provider>
     );