adam/cards
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix overlapping text and make game header take up less space

Browse source
This commit is contained in:
Adam 2024-09-04 19:10:27 -04:00
parent 71bd306ffb
commit 912741acb4
1 changed files with 44 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

90
client/src/components/game/header.rs
View file

@ -6,12 +6,12 @@ fn Meta() -> impl IntoView {
let game_meta = expect_context::<ReadSignal<Option<GameMeta>>>(); let game_meta = expect_context::<ReadSignal<Option<GameMeta>>>();
view! { view! {
<span> <div class="shrink-0">
<p>Name: {move || game_meta().unwrap().name}</p> <p>{move || game_meta().unwrap().name}</p>
<p>White Deck: {move || game_meta().unwrap().white_count}</p> <p>"⬜ " {move || game_meta().unwrap().white_count}</p>
<p>White Discard: {move || game_meta().unwrap().white_discard_count}</p> <p>"⬛ " {move || game_meta().unwrap().black_count}</p>
<p>Black Deck: {move || game_meta().unwrap().black_count}</p> <p>"♻ " {move || game_meta().unwrap().white_discard_count}</p>
</span> </div>
} }
} }
@ -21,45 +21,43 @@ fn Scoreboard() -> impl IntoView {
view! { view! {
<Show when=move || { game_meta().is_some() }> <Show when=move || { game_meta().is_some() }>
<span class="absolute top-0 right-0"> <table class="table-auto">
<table class="min-w-full table-auto"> <thead>
<thead> <tr>
<tr> <th></th>
<th></th> <th></th>
<th></th> <th>"Score"</th>
<th>"Score"</th> </tr>
</tr> </thead>
</thead> {game_meta()
{game_meta() .unwrap()
.unwrap() .players
.players .into_iter()
.into_iter() .map(|player| {
.map(|player| { view! {
view! { <tr>
<tr> <td>
<td> {if game_meta().unwrap().czar == player.name {
{if game_meta().unwrap().czar == player.name { "👑"
"👑" } else if player.submitted {
} else if player.submitted { "🟢"
"🟢" } else {
} else { "⚫"
"⚫" }}
}} </td>
</td> <td>
<td> {if game_meta().unwrap().host == player.name {
{if game_meta().unwrap().host == player.name { "⚜ "
"⚜ " } else {
} else { ""
"" }} {player.name}
}} {player.name} </td>
</td> <td class="text-center">{player.score}</td>
<td class="text-center">{player.score}</td> </tr>
</tr> }
} })
}) .collect_view()}
.collect_view()} </table>
</table>
</span>
</Show> </Show>
} }
} }
@ -67,7 +65,7 @@ fn Scoreboard() -> impl IntoView {
#[component] #[component]
pub fn Header() -> impl IntoView { pub fn Header() -> impl IntoView {
view! { view! {
<div class="relative"> <div class="flex flex-wrap justify-between">
<Meta /> <Meta />
<Scoreboard /> <Scoreboard />
</div> </div>