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>>>(); let game_meta = expect_context::<ReadSignal<Option<GameStateMeta>>>();
view! { view! {
<Show when=move || { game_meta().is_some() }> <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="p-4">{game_meta().unwrap().black.0}</p>
<p class="absolute right-4 bottom-4">Pick: {game_meta().unwrap().black.1}</p> <p class="absolute right-4 bottom-4">Pick: {game_meta().unwrap().black.1}</p>
</div> </div>
@ -19,7 +19,7 @@ pub fn WhiteCard(card_data: WhiteCardMeta) -> impl IntoView {
let set_card_clicked = expect_context::<WriteSignal<String>>(); let set_card_clicked = expect_context::<WriteSignal<String>>();
view! { 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> <p class="p-4">{card_data.text}</p>
<button <button
class="absolute w-full h-full opacity-10 left-0 top-0" 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() // Judge hand
.unwrap() <div class="flex flex-nowrap overflow-scroll lg:inline-flex lg:flex-wrap lg:justify-center lg:overflow-none">
.cards_to_judge {judge_round()
.into_iter() .unwrap()
.map(|group| { .cards_to_judge
view! { .into_iter()
<div class="inline-flex flex-wrap"> .map(|group| {
{group view! {
.into_iter() <div class="inline-flex flex-wrap">
.map(|card| { {group
view! { .into_iter()
<Show when={ .map(|card| {
let waste_of_memory = card.clone(); view! {
move || { !selected_cards().contains(&waste_of_memory) } <Show when={
}> let waste_of_memory = card.clone();
<WhiteCard card_data=card.clone() /> move || { !selected_cards().contains(&waste_of_memory) }
</Show> }>
} <WhiteCard card_data=card.clone() />
}) </Show>
.collect_view()} }
</div> })
} .collect_view()}
}) </div>
.collect_view()} }
})
.collect_view()}
</div>
</Show> </Show>
} }
} }

View file

@ -131,7 +131,7 @@ pub fn PlayingView() -> impl IntoView {
</div> </div>
// Player hand // 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 || { <Show when=move || {
game_state().is_some() game_state().is_some()
}> }>