lobby/settings ui touchups
This commit is contained in:
parent
4a41ace4d0
commit
6be2263f40
|
|
@ -231,15 +231,7 @@ impl GameSettings {
|
|||
}
|
||||
|
||||
pub fn min_players_needed(&self) -> usize {
|
||||
let (wolves, villagers) = (self.wolves_count(), self.village_roles_count());
|
||||
|
||||
if wolves > villagers {
|
||||
wolves + 1 + wolves
|
||||
} else if wolves < villagers {
|
||||
wolves + villagers
|
||||
} else {
|
||||
wolves + villagers + 1
|
||||
}
|
||||
(2 * self.wolves_count() + 1).max(3)
|
||||
}
|
||||
|
||||
pub fn new_slot(&mut self, role: RoleTitle) -> SlotId {
|
||||
|
|
|
|||
|
|
@ -81,8 +81,8 @@ body {
|
|||
body {
|
||||
min-height: 100vh;
|
||||
max-width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 0px;
|
||||
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;
|
||||
top: 90%;
|
||||
// left: 0;
|
||||
margin-top: 100px;
|
||||
min-width: 20vw;
|
||||
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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -29,16 +29,13 @@ 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
|
||||
.iter()
|
||||
.map(|p| html! {<LobbyPlayer on_action={on_action} player={p.clone()} />})
|
||||
.collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
<div class="lobby-player-list">
|
||||
{
|
||||
players
|
||||
.iter()
|
||||
.map(|p| html! {<LobbyPlayer on_action={on_action} player={p.clone()} />})
|
||||
.collect::<Html>()
|
||||
}
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue