Merge pull request #720 from mafia-rust/resizable-panels

reziable panels
mafia-rust · Dec 2, 2024 · 4af5a1a · 4af5a1a
2 parents 9321c2b + aeb883f
commit 4af5a1a
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 155 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/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",

diff --git a/client/src/menu/game/GameScreen.tsx b/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>
 }

diff --git a/client/src/menu/game/gameScreen.css b/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;
     }

diff --git a/client/src/menu/game/gameScreenContent/chatMenu.css b/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 {

diff --git a/client/src/menu/game/gameScreenContent/graveyardMenu.css b/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%;

diff --git a/client/src/menu/game/gameScreenContent/playerListMenu.css b/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%;

diff --git a/client/src/menu/spectator/PhaseStartedScreen.tsx b/client/src/menu/spectator/PhaseStartedScreen.tsx
diff --git a/client/src/menu/spectator/SpectatorGameScreen.tsx b/client/src/menu/spectator/SpectatorGameScreen.tsx
@@ -1,17 +1,11 @@
 import React, { ReactElement, useContext } from "react";
 import "./spectatorGameScreen.css";
-import PhaseStartedScreen from "./PhaseStartedScreen";
-import { useGameState } from "../../components/useHooks";
 import "../game/gameScreen.css"
-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, useMenuController, MenuControllerContext, MENU_ELEMENTS } from "../game/GameScreen";
 import { MobileContext } from "../Anchor";
-
-
-const DEFAULT_START_PHASE_SCREEN_TIME = 3;
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import translate from "../../game/lang";
 
 let CONTENT_CONTROLLER: MenuController | undefined;
 
@@ -26,21 +20,6 @@ type SpectatorContentMenus = {
 }
 
 export default function SpectatorGameScreen(): ReactElement {
-    const showStartedScreen = useGameState(
-        gameState => {
-            if (
-                gameState.phaseState.type === "briefing"
-                || gameState.phaseState.type === "obituary"
-            ) return true;
-
-            const maxTime = gameState.phaseTimes[gameState.phaseState.type];
-            const timePassed = Math.floor(maxTime - gameState.timeLeftMs/1000);
-            return timePassed < DEFAULT_START_PHASE_SCREEN_TIME;
-        },
-        ["phase", "phaseTimeLeft", "tick"],
-        true
-    )!
-
     const mobile = useContext(MobileContext)!;
 
     const contentController = useMenuController<SpectatorContentMenus>(
@@ -61,13 +40,20 @@ export default function SpectatorGameScreen(): ReactElement {
                 <div className="header">
                     <HeaderMenu chatMenuNotification={false}/>
                 </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>
     );