reorder game screen menus

mafia-rust · Dec 8, 2024 · 2c84104 · 2c84104
1 parent 5de5d67
commit 2c84104
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 47 deletions.
diff --git a/client/src/menu/game/GameScreen.tsx b/client/src/menu/game/GameScreen.tsx
@@ -148,12 +148,12 @@ export default function GameScreen(): ReactElement {
     const menuController = useMenuController(
         mobile ? 2 : Infinity, 
         {
+            WikiMenu: false,
+            GraveyardMenu: !mobile,
+            PlayerListMenu: true,
             ChatMenu: true,
-            RoleSpecificMenu: !mobile,
             WillMenu: !mobile,
-            PlayerListMenu: true,
-            GraveyardMenu: !mobile,
-            WikiMenu: false,
+            RoleSpecificMenu: !mobile,
         },
         () => MENU_CONTROLLER_HOLDER.controller!,
         menuController => MENU_CONTROLLER_HOLDER.controller = menuController

diff --git a/client/src/menu/game/HeaderMenu.tsx b/client/src/menu/game/HeaderMenu.tsx
@@ -174,6 +174,27 @@ function MenuButtons(props: Readonly<{ chatMenuNotification: boolean }>): ReactE
     const menuController = useContext(MenuControllerContext)!;
 
     return <div className="menu-buttons">
+        <Button className="wiki-menu-colors"
+            highlighted={menuController.menusOpen().includes(ContentMenu.WikiMenu)} 
+            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.WikiMenu)}
+        >
+            {translate("menu.wiki.icon")}
+            <span className="mobile-hidden">{translate("menu.wiki.title")}</span>
+        </Button>
+        <Button className="graveyard-menu-colors" 
+            highlighted={menuController.menusOpen().includes(ContentMenu.GraveyardMenu)}
+            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.GraveyardMenu)}
+        >
+            {translate("menu.gameMode.icon")}
+            <span className="mobile-hidden">{translate("menu.gameMode.title")}</span>
+        </Button>
+        <Button className="player-list-menu-colors"
+            highlighted={menuController.menusOpen().includes(ContentMenu.PlayerListMenu)}
+            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.PlayerListMenu)}
+        >
+            {translate("menu.playerList.icon")}
+            <span className="mobile-hidden">{translate("menu.playerList.title")}</span>
+        </Button>
         <Button className="chat-menu-colors"
             highlighted={menuController.menusOpen().includes(ContentMenu.ChatMenu)}
             onClick={()=>menuController.closeOrOpenMenu(ContentMenu.ChatMenu)}
@@ -182,6 +203,13 @@ function MenuButtons(props: Readonly<{ chatMenuNotification: boolean }>): ReactE
             {translate("menu.chat.icon")}
             <span className="mobile-hidden">{translate("menu.chat.title")}</span>
         </Button>
+        {GAME_MANAGER.getMySpectator() || <Button className="will-menu-colors" 
+            highlighted={menuController.menusOpen().includes(ContentMenu.WillMenu)}
+            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.WillMenu)}
+        >
+            {translate("menu.will.icon")}
+            <span className="mobile-hidden">{translate("menu.will.title")}</span>
+        </Button>}
         {!GAME_MANAGER.getMySpectator() && <Button className="role-specific-colors" 
                 highlighted={menuController.menusOpen().includes(ContentMenu.RoleSpecificMenu)}
                 onClick={()=>menuController.closeOrOpenMenu(ContentMenu.RoleSpecificMenu)}
@@ -192,34 +220,6 @@ function MenuButtons(props: Readonly<{ chatMenuNotification: boolean }>): ReactE
                 </span>
             </Button>
         }
-        {GAME_MANAGER.getMySpectator() || <Button className="will-menu-colors" 
-            highlighted={menuController.menusOpen().includes(ContentMenu.WillMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.WillMenu)}
-        >
-            {translate("menu.will.icon")}
-            <span className="mobile-hidden">{translate("menu.will.title")}</span>
-        </Button>}
-        <Button className="player-list-menu-colors"
-            highlighted={menuController.menusOpen().includes(ContentMenu.PlayerListMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.PlayerListMenu)}
-        >
-            {translate("menu.playerList.icon")}
-            <span className="mobile-hidden">{translate("menu.playerList.title")}</span>
-        </Button>
-        <Button className="graveyard-menu-colors" 
-            highlighted={menuController.menusOpen().includes(ContentMenu.GraveyardMenu)}
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.GraveyardMenu)}
-        >
-            {translate("menu.gameMode.icon")}
-            <span className="mobile-hidden">{translate("menu.gameMode.title")}</span>
-        </Button>
-        {GAME_MANAGER.getMySpectator() || <Button className="wiki-menu-colors"
-            highlighted={menuController.menusOpen().includes(ContentMenu.WikiMenu)} 
-            onClick={()=>menuController.closeOrOpenMenu(ContentMenu.WikiMenu)}
-        >
-            {translate("menu.wiki.icon")}
-            <span className="mobile-hidden">{translate("menu.wiki.title")}</span>
-        </Button>}
     </div>
 }
 

diff --git a/client/src/menu/game/gameScreenContent/PlayerListMenu.tsx b/client/src/menu/game/gameScreenContent/PlayerListMenu.tsx
@@ -164,6 +164,18 @@ function PlayerCard(props: Readonly<{
             <StyledText>{translate("menu.playerList.player.votes", numVoted)}</StyledText>
         }
         <VoteButton playerIndex={props.playerIndex} />
+        {GAME_MANAGER.getMySpectator() ||
+            <Button 
+                disabled={isPlayerSelf}
+                onClick={()=>{
+                    // GAME_MANAGER.prependWhisper(props.playerIndex); return true;
+                    setWhisperChatOpen(!whisperChatOpen);
+                }}
+                pressedChildren={() => <Icon>done</Icon>}
+            >
+                <Icon>chat</Icon>
+            </Button>
+        }
         {GAME_MANAGER.getMySpectator() || (() => {
             const filter = props.playerIndex;
             const isFilterSet = chatFilter?.type === "playerNameInMessage" && (chatFilter.player === filter);
@@ -181,19 +193,6 @@ function PlayerCard(props: Readonly<{
                 <Icon>filter_alt</Icon>
             </Button>
         })()}
-        {GAME_MANAGER.getMySpectator() ||
-            <Button 
-                disabled={isPlayerSelf}
-                onClick={()=>{
-                    // GAME_MANAGER.prependWhisper(props.playerIndex); return true;
-                    setWhisperChatOpen(!whisperChatOpen);
-                }}
-                pressedChildren={() => <Icon>done</Icon>}
-            >
-                <Icon>chat</Icon>
-            </Button>
-        }
-
     </div>
     {alibiOpen && mostRecentBlockMessage !== undefined ? <div onClick={()=>setAlibiOpen(false)}>
         <ChatMessage message={mostRecentBlockMessage}/>

diff --git a/client/src/menu/spectator/SpectatorGameScreen.tsx b/client/src/menu/spectator/SpectatorGameScreen.tsx
@@ -22,9 +22,9 @@ export default function SpectatorGameScreen(): ReactElement {
     const contentController = useMenuController<SpectatorContentMenus>(
         mobile ? 2 : Infinity,
         {
-            ChatMenu: true,
+            GraveyardMenu: !mobile,
             PlayerListMenu: true,
-            GraveyardMenu: !mobile
+            ChatMenu: true
         },
         () => CONTENT_CONTROLLER!,
         contentController => CONTENT_CONTROLLER = contentController