even more mobile friendly

This commit is contained in:
Adam 2024-09-12 22:30:37 -04:00
parent 08d094fd4a
commit 8fecd58d06
3 changed files with 30 additions and 27 deletions

View file

@ -6,7 +6,7 @@ pub fn BlackCard() -> impl IntoView {
let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
view! {
<Show when=move || { game_meta().is_some() }>
<div class="relative m-2 w-40 h-60 text-white bg-black rounded-lg shadow-black shadow-md">
<div class="relative m-2 w-36 h-56 shrink-0 text-white bg-black rounded-lg shadow-black shadow-md">
<p class="p-4">{game_meta().unwrap().black.0}</p>
<p class="absolute right-4 bottom-4">Pick: {game_meta().unwrap().black.1}</p>
</div>
@ -19,7 +19,7 @@ pub fn WhiteCard(card_data: WhiteCardMeta) -> impl IntoView {
let set_card_clicked = expect_context::<WriteSignal<String>>();
view! {
<div class="relative m-2 w-40 h-60 text-black bg-white rounded-lg shadow-black drop-shadow-lg">
<div class="relative m-2 w-36 h-56 shrink-0 text-black bg-white rounded-lg shadow-black drop-shadow-lg">
<p class="p-4">{card_data.text}</p>
<button
class="absolute w-full h-full opacity-10 left-0 top-0"

View file

@ -119,30 +119,33 @@ pub fn JudgingView() -> impl IntoView {
}
}
>
{judge_round()
.unwrap()
.cards_to_judge
.into_iter()
.map(|group| {
view! {
<div class="inline-flex flex-wrap">
{group
.into_iter()
.map(|card| {
view! {
<Show when={
let waste_of_memory = card.clone();
move || { !selected_cards().contains(&waste_of_memory) }
}>
<WhiteCard card_data=card.clone() />
</Show>
}
})
.collect_view()}
</div>
}
})
.collect_view()}
// Judge hand
<div class="flex flex-nowrap overflow-scroll lg:inline-flex lg:flex-wrap lg:justify-center lg:overflow-none">
{judge_round()
.unwrap()
.cards_to_judge
.into_iter()
.map(|group| {
view! {
<div class="inline-flex flex-wrap">
{group
.into_iter()
.map(|card| {
view! {
<Show when={
let waste_of_memory = card.clone();
move || { !selected_cards().contains(&waste_of_memory) }
}>
<WhiteCard card_data=card.clone() />
</Show>
}
})
.collect_view()}
</div>
}
})
.collect_view()}
</div>
</Show>
}
}

View file

@ -131,7 +131,7 @@ pub fn PlayingView() -> impl IntoView {
</div>
// Player hand
<div class="inline-flex flex-wrap justify-center">
<div class="flex flex-nowrap overflow-scroll lg:inline-flex lg:flex-wrap lg:justify-center lg:overflow-none">
<Show when=move || {
game_state().is_some()
}>