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