lobby/settings ui touchups

werewolves-proto/src/game/settings.rs

@@ -231,15 +231,7 @@ impl GameSettings {
     }
 
     pub fn min_players_needed(&self) -> usize {
-        let (wolves, villagers) = (self.wolves_count(), self.village_roles_count());
+        (2 * self.wolves_count() + 1).max(3)
-
-        if wolves > villagers {
-            wolves + 1 + wolves
-        } else if wolves < villagers {
-            wolves + villagers
-        } else {
-            wolves + villagers + 1
-        }
     }
 
     pub fn new_slot(&mut self, role: RoleTitle) -> SlotId {

werewolves/index.scss

@@ -81,8 +81,8 @@ body {
 body {
 	min-height: 100vh;
 	max-width: 100vw;
-	top: 0;
+	top: 0px;
-	left: 0;
+	left: 0px;
 
 	font-size: 1.5vh;
 	user-select: none;
@@ -174,7 +174,10 @@ nav.host-nav {
 }
 
 .lobby-player-list {
+	overflow: hidden;
 	padding-bottom: 80px;
+	flex-shrink: 1;
+
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
@@ -334,23 +337,29 @@ button {
 
 	&:disabled:hover::after {
 		content: attr(reason);
+		overflow-y: hidden;
 		position: absolute;
-		margin-top: 10px;
+		margin-top: 100px;
-		top: 90%;
+		min-width: 20vw;
-		// left: 0;
 		font: 'Cute Font';
-		// color: #000;
-		// background-color: #fff;
 		color: rgba(255, 0, 0, 1);
-		background-color: rgba(255, 0, 0, 0.3);
+		background-color: black;
 		border: 1px solid rgba(255, 0, 0, 0.3);
-		min-width: 50vw;
-		width: fit-content;
 		padding: 3px;
 		z-index: 4;
+		align-self: center;
+		justify-self: center;
 	}
 }
 
+.host-setup {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	font-family: 'Cute Font';
+	font-size: 1.5em;
+	overflow-y: hidden;
+}
 
 .settings {
 	list-style: none;
@@ -369,6 +378,15 @@ button {
 		padding: 0px;
 		font-size: 0.7em;
 	}
+
+	.settings-info {
+		display: flex;
+		flex-direction: column;
+		flex-wrap: nowrap;
+		gap: 5px;
+		text-align: left;
+		width: fit-content;
+	}
 }
 
 .wolves-intro {
@@ -822,7 +840,7 @@ clients {
 .client-nav {
 	max-width: 100%;
 	padding: 10px;
-	height: 37px;
+	height: 38px;
 	display: flex;
 	flex-direction: row;
 	justify-content: baseline;
@@ -2219,3 +2237,7 @@ li.choice {
 .has-confirm {
 	cursor: pointer;
 }
+
+.dimmed {
+	filter: opacity(70%);
+}

werewolves/src/clients/host/host.rs

@@ -467,7 +467,7 @@ impl Component for Host {
                     let _ = loc.replace("/");
                 }
             });
-            let screen = if self.big_screen {
+            let screen = self.big_screen.then_some({
                 let to_normal = Callback::from(|_| {
                     if let Some(loc) = gloo::utils::document().location() {
                         let _ = loc.replace("/host");
@@ -476,20 +476,7 @@ impl Component for Host {
                 html! {
                     <Button on_click={to_normal}>{"small screen"}</Button>
                 }
-            } else {
+            });
-                // let to_big = Callback::from(|_| {
-                //     if let Some(loc) = gloo::utils::document().location() {
-                //         let _ = loc.replace("/host/big");
-                //     }
-                // });
-                html! {
-                    <a href="/host/big">
-                        <Button on_click={Callback::default()}>
-                            {"big screen 📺"}
-                        </Button>
-                    </a>
-                }
-            };
             let story_on_click = if let HostState::Story { .. } = &self.state {
                 crate::callback::send_message(HostMessage::GetState, self.send.clone())
             } else {
@@ -765,7 +752,7 @@ impl Host {
             })
         });
         html! {
-            <div class="column-list">
+            <div class="host-setup">
                 {settings}
                 <Lobby players={players} on_action={on_action}/>
             </div>

werewolves/src/components/lobby.rs

@@ -29,8 +29,6 @@ pub struct LobbyProps {
 #[function_component]
 pub fn Lobby(LobbyProps { players, on_action }: &LobbyProps) -> Html {
     html! {
-        <div class="column-list">
-            <p style="text-align: center;">{format!("Players in lobby: {}", players.len())}</p>
         <div class="lobby-player-list">
             {
                 players
@@ -39,6 +37,5 @@ pub fn Lobby(LobbyProps { players, on_action }: &LobbyProps) -> Html {
                     .collect::<Html>()
             }
         </div>
-        </div>
     }
 }

werewolves/src/components/settings.rs

@@ -285,6 +285,11 @@ pub fn Settings(
             <Signin callback={on_add_player.clone()}/>
         </div>
     };
+    let current_roles = settings.slots().len();
+    let min_roles = settings.min_players_needed();
+    let min_roles_class = (current_roles < min_roles).then_some("red");
+    let player_count = players_in_lobby.len();
+    let player_count_class = (player_count != current_roles).then_some("red");
 
     html! {
         <div class="settings">
@@ -301,11 +306,36 @@ pub fn Settings(
             >
                 {"add player"}
             </ClickableField>
-            <p>{format!("min roles for setup: {}", settings.min_players_needed())}</p>
+
-            <p>{format!("current role count: {}", settings.slots().len())}</p>
             <div class="roles-add-list">
                 {add_roles_buttons}
             </div>
+            <div class="settings-info">
+                <span class="current-min-role-count">
+                    <span class="dimmed">{"current/minimum roles: "}</span>
+                    <span class={classes!(min_roles_class)}>
+                        <span class="current-roles">
+                            {current_roles}
+                        </span>
+                        {"/"}
+                        <span class="min-roles">
+                            {min_roles}
+                        </span>
+                    </span>
+                </span>
+                <span class="player-role-count">
+                    <span class="dimmed">{"players/roles: "}</span>
+                    <span class={classes!(player_count_class)}>
+                        <span>
+                            {player_count}
+                        </span>
+                        {"/"}
+                        <span>
+                            {current_roles}
+                        </span>
+                    </span>
+                </span>
+            </div>
             <div class="roles-in-setup">
                 <h3>{"roles in the game"}</h3>
                 <div class="role-list">