Restyle lobby menu

mafia-rust · Dec 3, 2023 · 6d874e1 · 6d874e1 · vercel · Dec 3, 2023
1 parent a8cb611
commit 6d874e1
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 103 deletions.
diff --git a/client/src/menu/lobby/LobbyMenu.tsx b/client/src/menu/lobby/LobbyMenu.tsx
@@ -42,20 +42,22 @@ export default class LobbyMenu extends React.Component<LobbyMenuProps, LobbyMenu
         return <div className="lm">
             <LobbyMenuHeader host={this.state.host}/>
             <main>
-                <div className="left">
+                <div>
                     <LobbyPlayerList/>
-                    <section>
-                        <header>
-                            <h2>{translate("menu.wiki.title")}</h2>
-                        </header>
+                    {Anchor.isMobile() || <section>
+                        <h2>{translate("menu.wiki.title")}</h2>
                         <WikiSearch/>
-                    </section>
+                    </section>}
                 </div>
-                <div className="right">
+                <div>
                     {Anchor.isMobile() && <h1>{translate("menu.lobby.gameSettings")}</h1>}
                     <LobbyPhaseTimePane/>
                     <LobbyRolePane/>
                     <LobbyExcludedRoles/>
+                    {Anchor.isMobile() && <section>
+                        <h2>{translate("menu.wiki.title")}</h2>
+                        <WikiSearch/>
+                    </section>}
                 </div>
             </main>
         </div>
@@ -64,31 +66,17 @@ export default class LobbyMenu extends React.Component<LobbyMenuProps, LobbyMenu
 
 // There's probably a better way to do this that doesn't need the mobile check.
 function LobbyMenuHeader(props: { host?: boolean }): JSX.Element {
-    if (Anchor.isMobile()) {
-        return <header>
-            <div>
-                <button className="leave" onClick={() => GAME_MANAGER.leaveGame()}>
-                    {translate("menu.button.leave")}
-                </button>
-                <RoomCodeButton/>
-                <button disabled={!props.host} className="start" onClick={()=>{GAME_MANAGER.sendStartGamePacket()}}>
-                    {translate("menu.lobby.button.start")}
-                </button>
-            </div>
-            <h1>{GAME_MANAGER.gameState.myName!}</h1>
-        </header>
-    } else {
-        return <header>
-            <button className="leave" onClick={() => GAME_MANAGER.leaveGame()}>
-                {translate("menu.button.leave")}
-            </button>
-            <RoomCodeButton/>
-            <h1>{GAME_MANAGER.gameState.myName!}</h1>
-            <button disabled={!props.host} className="start" onClick={()=>{GAME_MANAGER.sendStartGamePacket()}}>
-                {translate("menu.lobby.button.start")}
-            </button>
-        </header>
-    }
+    return <header>
+        <button className="leave" onClick={() => GAME_MANAGER.leaveGame()}>
+            {translate("menu.button.leave")}
+        </button>
+        <RoomCodeButton/>
+        {Anchor.isMobile() || <h1>{GAME_MANAGER.gameState.myName!}</h1>}
+        <button disabled={!props.host} className="start" onClick={()=>{GAME_MANAGER.sendStartGamePacket()}}>
+            {translate("menu.lobby.button.start")}
+        </button>
+        {Anchor.isMobile() && <h1>{GAME_MANAGER.gameState.myName!}</h1>}
+    </header>
 }
 
 function RoomCodeButton(props: {}): JSX.Element {

diff --git a/client/src/menu/lobby/LobbyPhaseTimePane.tsx b/client/src/menu/lobby/LobbyPhaseTimePane.tsx
@@ -141,13 +141,11 @@ export default class LobbyPhaseTimePane extends React.Component<{}, PhaseTimePan
     }
 
     render() {return(<section className="time">
-        <header>
-            <h2>{translate("menu.lobby.timeSettings")}</h2>
-            <div>
-                {this.renderTimeModeDropdown()}
-                {this.renderEditButton()}
-            </div>
-        </header>
+        <h2>{translate("menu.lobby.timeSettings")}</h2>
+        <div>
+            {this.renderTimeModeDropdown()}
+            {this.renderEditButton()}
+        </div>
         {this.state.advancedEditing ? this.renderInputColumn() : null}
     </section>)}
 }
diff --git a/client/src/menu/lobby/LobbyPlayerList.tsx b/client/src/menu/lobby/LobbyPlayerList.tsx
@@ -52,16 +52,15 @@ export default class LobbyPlayerList extends React.Component<{}, PlayerListState
         </div>
     )}
 
-    renderPlayers(){return(<div>
-        {this.state.players.map((player, i)=>{
-            return(<div key={i}>
-                <StyledText>
-                    {player.toString()}
-                </StyledText>
-                {/* <button onClick={()=>{GAME_MANAGER.sendKickPlayerPacket(player.id)}}>{translate("menu.lobby.kick")}</button> */}
-            </div>)
-        })}
-    </div>)}
+    renderPlayers() {
+        return <ol>
+            {this.state.players.map((player, i)=>{
+                return <li key={i}>
+                    <StyledText>{player.toString()}</StyledText>
+                </li>
+            })}
+        </ol>
+    }
 
     render(){return(<section>
         {this.renderName()}

diff --git a/client/src/menu/lobby/LobbyRolePane.tsx b/client/src/menu/lobby/LobbyRolePane.tsx
@@ -48,21 +48,14 @@ export default class LobbyRolePane extends React.Component<{}, RolePaneState> {
     }
 
     render(){return(<section>
-        <header>
-            <h2>{translate("menu.lobby.roleList")}</h2>
-            <div>
-                {/* TODO, role list presets */}
-            </div>
-        </header>
-        <div> {
-            this.state.roleList.map((_, index) => {
-                return <RolePicker
-                    disabled={!this.state.host}
-                    roleOutline={this.state.roleList[index]}
-                    onChange={(value: RoleOutline) => {this.onChangeRolePicker(index, value);}}
-                    key={index}
-                />
-            })
-        } </div>
+        <h2>{translate("menu.lobby.roleList")}</h2>
+        {this.state.roleList.map((_, index) => {
+            return <RolePicker
+                disabled={!this.state.host}
+                roleOutline={this.state.roleList[index]}
+                onChange={(value: RoleOutline) => {this.onChangeRolePicker(index, value);}}
+                key={index}
+            />
+        })}
     </section>)}
 }
diff --git a/client/src/menu/lobby/lobbyMenu.css b/client/src/menu/lobby/lobbyMenu.css
@@ -1,84 +1,75 @@
 
 .lm {
-    display: block;
-    padding: 2%;
+    display: flex;
+    flex-direction: column;
+    padding: 2rem;
 }
 
 .lm > header {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    padding-bottom: 1rem;
+    gap: 0.5rem;
 }
 
-.lm > header input{
-    background: none;
-    border: none;
-    width: 0;
-    padding: 0;
-    margin: 0;
-}
 .lm > header h1{
     font-size: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     flex-grow: 1;
 }
+
 .lm > header button{
     font-size: 1.5rem;
-    margin: .5%;
-    padding: .5%;
+    padding: .5rem;
+}
+
+.lm > main ol {
+    list-style: none;
 }
 
 .lm > main {
     display: flex;
     flex-direction: row;
-    justify-content: space-evenly;
+    flex-wrap: wrap;
+    column-gap: 2rem;
 }
+
 @media only screen and (max-width: 600px) {
-    .lm > main {
-        flex-direction: column;
-    }
-    .lm > header {
-        flex-direction: column;
-    }
-    .lm > header > :first-child {
-        display: flex;
-        justify-content: space-between;
+    .lm > header button {
+        font-size: 1.2rem;
     }
 }
+
 .lm > main > div {
-    width: 100%;
+    width: 47%;
+    flex-grow: 1;
 }
 
-.lm input {
-    width: 100%;
-    margin: .5%;
+.lm > main > div > h1 {
+    padding-bottom: 1rem;
 }
 
-.lm {
-    margin-bottom: 4%;
+.lm input {
+    width: 100%;
 }
 
 .lm .name-box {
     display: flex;
     flex-direction: row;
-    margin-top: 2%;
-    margin-bottom: 2%;
+    margin-bottom: 1rem;
 }
 
-.lm > h1 {
-    font-size: 125%;
-    width: 100%;
-    margin-bottom: 2%;
-}
 .lm section {
-    margin-bottom: 5%;
+    margin-bottom: 2rem;
 }
+
 .lm .time-picker {
     display: flex;
-    margin-left: 2%;
-    margin-right: 2%;
+    align-items: center;
 }
 
 .lm .excluded-roles > div:nth-of-type(1) {