Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Game Screen Content Menus #738

Merged
merged 1 commit into from
Dec 5, 2024
Merged

Improve Game Screen Content Menus #738

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 31 additions & 17 deletions client/src/menu/game/GameScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
5 changes: 5 additions & 0 deletions client/src/menu/game/gameScreen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
19 changes: 2 additions & 17 deletions client/src/menu/spectator/SpectatorGameScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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>
);
Expand Down
Loading