reziable panels

client/package.json

@@ -16,6 +16,7 @@
     "marked": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
+    "react-resizable-panels": "^2.1.6",
     "react-scripts": "^5.0.1",
     "react-virtuoso": "^4.12.0",
     "typescript": "^4",

client/src/menu/game/GameScreen.tsx

@@ -16,6 +16,7 @@ import Icon from "../../components/Icon";
 import { Button } from "../../components/Button";
 import translate from "../../game/lang";
 import { useGameState } from "../../components/useHooks";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 
 export enum ContentMenu {
     ChatMenu = "ChatMenu",
@@ -25,6 +26,16 @@ export enum ContentMenu {
     GraveyardMenu = "GraveyardMenu",
     WikiMenu = "WikiMenu",
 }
+
+export const MENU_ELEMENTS = {
+    [ContentMenu.ChatMenu]: ChatMenu,
+    [ContentMenu.PlayerListMenu]: PlayerListMenu,
+    [ContentMenu.RoleSpecificMenu]: AbilityMenu,
+    [ContentMenu.WillMenu]: WillMenu,
+    [ContentMenu.GraveyardMenu]: GraveyardMenu,
+    [ContentMenu.WikiMenu]: WikiMenu
+}
+
 const ALL_CONTENT_MENUS = Object.values(ContentMenu);
 
 export interface MenuController {
@@ -182,23 +193,27 @@ export default function GameScreen(): ReactElement {
     })
 
     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>
-            <div className="content">
-                {menuController.menuOpen(ContentMenu.ChatMenu) && <ChatMenu/>}
-                {menuController.menuOpen(ContentMenu.RoleSpecificMenu) && <AbilityMenu/>}
-                {menuController.menuOpen(ContentMenu.WillMenu) && <WillMenu/>}
-                {menuController.menuOpen(ContentMenu.PlayerListMenu) && <PlayerListMenu/>}
-                {menuController.menuOpen(ContentMenu.GraveyardMenu) && <GraveyardMenu/>}
-                {menuController.menuOpen(ContentMenu.WikiMenu) && <WikiMenu/>}
-                {allMenusClosed && <div className="no-content">
+            <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>}
-            </div>
+                </div></Panel>}
+            </PanelGroup>
         </div>
     </MenuControllerContext.Provider>
 }

client/src/menu/game/gameScreen.css

@@ -19,26 +19,11 @@
 }
 
 .game-screen .content {
-    display: flex;
-    flex-direction: row;
-
-    flex-grow: 1;
-    flex-shrink: 0;
-    flex-basis: auto;
-
     height: 1vh;
-    overflow-x: hidden;
 }
-.game-screen .content > div {
-    overflow-x: hidden;
-    resize: horizontal;
-
+.game-screen .content > div > div{
     height: 100%;
     max-height: 100%;
-
-    max-width: 100%;
-    width: 15%;
-    min-width: 10%;
 
     background-color: var(--background-color);
     border: .13rem solid var(--background-border-color);
@@ -47,7 +32,7 @@
 }
 
 @media only screen and (max-width: 600px) {
-    .game-screen .content > div {
+    .game-screen .content > div > div {
         width: 100%;
         resize: none;
     }

client/src/menu/game/gameScreenContent/chatMenu.css

@@ -1,8 +1,7 @@
 
-.game-screen .content > .chat-menu {
+.game-screen .content .chat-menu {
     display: flex;
     flex-direction: column;
-    width: 45%;
 }
 @media only screen and (max-width: 600px) {
     .game-screen .content > .chat-menu {

client/src/menu/game/gameScreenContent/graveyardMenu.css

@@ -1,6 +1,3 @@
-.game-screen .content > .graveyard-menu {
-    width: 10%;
-}
 @media only screen and (max-width: 600px) {
     .game-screen .content > .graveyard-menu {
         width: 100%;

client/src/menu/game/gameScreenContent/playerListMenu.css

@@ -1,6 +1,3 @@
-.game-screen .content > .player-list-menu {
-    width: 25%;
-}
 @media only screen and (max-width: 600px) {
     .game-screen .content > .player-list-menu {
         width: 100%;

client/src/menu/spectator/SpectatorGameScreen.tsx

@@ -7,8 +7,10 @@ import ChatMenu from "../game/gameScreenContent/ChatMenu";
 import PlayerListMenu from "../game/gameScreenContent/PlayerListMenu";
 import GraveyardMenu from "../game/gameScreenContent/GraveyardMenu";
 import HeaderMenu from "../game/HeaderMenu";
-import { MenuController, ContentMenu, useMenuController, MenuControllerContext } from "../game/GameScreen";
+import { MenuController, ContentMenu, useMenuController, MenuControllerContext, MENU_ELEMENTS } from "../game/GameScreen";
 import { MobileContext } from "../Anchor";
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import translate from "../../game/lang";
 
 
 const DEFAULT_START_PHASE_SCREEN_TIME = 3;
@@ -63,11 +65,20 @@ export default function SpectatorGameScreen(): ReactElement {
                 </div>
                 {showStartedScreen 
                     ? <PhaseStartedScreen/>
-                    : <div className="content">
-                        {contentController.menuOpen(ContentMenu.ChatMenu) && <ChatMenu/>}
-                        {contentController.menuOpen(ContentMenu.PlayerListMenu) && <PlayerListMenu/>}
-                        {contentController.menuOpen(ContentMenu.GraveyardMenu) && <GraveyardMenu/>}
-                    </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>}
             </div>
         </MenuControllerContext.Provider>
     );