even more mobile friendly

Cargo.lock

@@ -69,9 +69,9 @@ dependencies = [
 
 [[package]]
 name = "anyhow"
-version = "1.0.87"
+version = "1.0.88"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "10f00e1f6e58a40e807377c75c6a7f97bf9044fab57816f2414e6f5f4499d7b8"
+checksum = "4e1496f8fb1fbf272686b8d37f523dab3e4a7443300055e74cdaa449f3114356"
 
 [[package]]
 name = "approx"
@@ -1309,9 +1309,9 @@ dependencies = [
 
 [[package]]
 name = "leptos-use"
-version = "0.14.0-beta2"
+version = "0.14.0-beta3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "424197a4dfb2cb8814d6be2baae4bcae9d56ce196b3febb7c020ebc282fe334c"
+checksum = "54f877ebb68595efafd4828b6bbd50286bdc064572edd42242a70ae1a2c3b9d5"
 dependencies = [
  "cfg-if",
  "codee",
@@ -2032,9 +2032,9 @@ dependencies = [
 
 [[package]]
 name = "redox_syscall"
-version = "0.5.3"
+version = "0.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2a908a6e00f1fdd0dfd9c0eb08ce85126f6d8bbda50017e74bc4a4b7d4a926a4"
+checksum = "0884ad60e090bf1345b93da0a5de8923c93884cd03f40dfcfddd3b4bee661853"
 dependencies = [
  "bitflags",
 ]
@@ -2449,7 +2449,7 @@ dependencies = [
 [[package]]
 name = "thaw"
 version = "0.4.0-beta2"
-source = "git+https://github.com/adoyle0/thaw.git#aa818b28239fedd76d4e7ee3f7b541a9fd67c6bc"
+source = "git+https://github.com/adoyle0/thaw.git#e9d1630473fd45c05e83999408ef19c8213fc1a1"
 dependencies = [
  "cfg-if",
  "chrono",
@@ -2471,7 +2471,7 @@ dependencies = [
 [[package]]
 name = "thaw_components"
 version = "0.2.0-beta2"
-source = "git+https://github.com/adoyle0/thaw.git#aa818b28239fedd76d4e7ee3f7b541a9fd67c6bc"
+source = "git+https://github.com/adoyle0/thaw.git#e9d1630473fd45c05e83999408ef19c8213fc1a1"
 dependencies = [
  "cfg-if",
  "leptos",
@@ -2484,7 +2484,7 @@ dependencies = [
 [[package]]
 name = "thaw_macro"
 version = "0.1.0-beta2"
-source = "git+https://github.com/adoyle0/thaw.git#aa818b28239fedd76d4e7ee3f7b541a9fd67c6bc"
+source = "git+https://github.com/adoyle0/thaw.git#e9d1630473fd45c05e83999408ef19c8213fc1a1"
 dependencies = [
  "proc-macro2",
  "quote",
@@ -2494,7 +2494,7 @@ dependencies = [
 [[package]]
 name = "thaw_utils"
 version = "0.1.0-beta2"
-source = "git+https://github.com/adoyle0/thaw.git#aa818b28239fedd76d4e7ee3f7b541a9fd67c6bc"
+source = "git+https://github.com/adoyle0/thaw.git#e9d1630473fd45c05e83999408ef19c8213fc1a1"
 dependencies = [
  "cfg-if",
  "chrono",
@@ -2897,9 +2897,9 @@ checksum = "08f95100a766bf4f8f28f90d77e0a5461bbdb219042e7679bebe79004fed8d75"
 
 [[package]]
 name = "unicode-ident"
-version = "1.0.12"
+version = "1.0.13"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "3354b9ac3fae1ff6755cb6db53683adb661634f67557942dea4facebec0fee4b"
+checksum = "e91b56cd4cadaeb79bbf1a5645f6b4f8dc5bde8834ad5894a8db35fda9efa1fe"
 
 [[package]]
 name = "unicode-normalization"

client/src/components/auth.rs

@@ -42,7 +42,7 @@ pub fn Auth() -> impl IntoView {
         <Popover trigger_type=PopoverTriggerType::Click position=PopoverPosition::BottomEnd>
             <PopoverTrigger slot>
                 <Button appearance=ButtonAppearance::Transparent size=ButtonSize::Small>
-                    // on_click=move |_| { show_auth.set(!show_auth()) }
+                    <p class="mx-2">{move || username()}</p>
                     <Avatar class="drop-shadow-md" name=username />
                 </Button>
             </PopoverTrigger>
@@ -52,8 +52,8 @@ pub fn Auth() -> impl IntoView {
                     position=PopoverPosition::BottomStart
                 >
                     <PopoverTrigger slot>
-                        <h2 class="text-2xl">
+                        <h2 class="text-xl">
-                            "Sign In"
+                            "Change Name"
                             <Button
                                 icon=icondata::TbHelp
                                 appearance=ButtonAppearance::Transparent

client/src/components/browser.rs

@@ -72,7 +72,7 @@ pub fn Browser() -> impl IntoView {
                     icon=icondata::AiPlusOutlined
                     appearance=ButtonAppearance::Primary
                     size=ButtonSize::Small
-                    on_click=move |_| show_create_game.set(!show_create_game())
+                    on_click=move |_| nav_context.set("create".to_string())
                 >
                     "Create Game"
                 </Button>
@@ -168,15 +168,6 @@ pub fn Browser() -> impl IntoView {
                         </Table>
                     </div>
                 </Show>
-
-                <div class="overflow-hidden">
-                    <InlineDrawer open=show_create_game position=DrawerPosition::Top>
-                        <DrawerBody>
-                            <CreateGame />
-                        </DrawerBody>
-                    </InlineDrawer>
-                </div>
-
             </Show>
         </div>
     }

client/src/components/browser/create_game.rs

@@ -42,8 +42,6 @@ pub fn CreateGame() -> impl IntoView {
 
     let toggle_show_packs = move |_| show_packs.set(!show_packs());
 
-    let drawer_context = expect_context::<RwSignal<bool>>();
-
     let nav_context = expect_context::<RwSignal<String>>();
     let request_new_game = move |_| {
         set_websocket_send(
@@ -54,7 +52,6 @@ pub fn CreateGame() -> impl IntoView {
             .unwrap(),
         );
         input_game_name.set(String::new());
-        drawer_context.set(false);
         nav_context.set("game".to_string());
     };
 

client/src/components/chat.rs

@@ -1,5 +1,5 @@
 use crate::components::websocket::WebSocketContext;
-use leptos::{ev, html::Textarea, prelude::*};
+use leptos::{html::Textarea, prelude::*};
 use leptos_use::core::ConnectionReadyState;
 use lib::*;
 use serde_json::to_string;
@@ -59,8 +59,10 @@ pub fn Chat() -> impl IntoView {
 
     // Handle sending messages
     let send_message = move |_| {
-        websocket.send(&to_string(&ChatMessage { text: chat_input() }).unwrap());
+        if chat_input() != "" {
-        chat_input.set(String::new());
+            websocket.send(&to_string(&ChatMessage { text: chat_input() }).unwrap());
+            chat_input.set(String::new());
+        }
     };
 
     // Keep chat scrolled to the bottom
@@ -74,51 +76,45 @@ pub fn Chat() -> impl IntoView {
     });
 
     view! {
-        <div class="my-2">
+        <div class="lg:flex lg:justify-between">
-            <h2 class="text-2xl">Chat: {move || chat_name()}</h2>
+            <div class="w-full">
-            <span class="flex justify-between">
+                <h2 class="text-xl">Chat: {move || chat_name()}</h2>
                 <textarea
                     node_ref=chat_history_ref
-                    class="opacity-80 w-full h-60 p-1 font-mono rounded-md resize-none bg-neutral-900 text-neutral-200 drop-shadow-md"
+                    class="opacity-80 w-full h-48 rounded-md resize-none bg-neutral-900 text-neutral-200 drop-shadow-md text-sm"
                     readonly=true
                     wrap="soft"
                 >
                     {move || chat_history.get()}
                 </textarea>
-                <ul class="mx-2">
+                <br />
-                    <h2 class="text-2xl">Users: {move || users().len()}</h2>
-                    {move || users().into_iter().map(|n| view! { <li>{n}</li> }).collect_view()}
-                </ul>
-            </span>
-            <br />
-            <span>
                 <form onsubmit="return false" on:submit=send_message autocomplete="off">
-                    <FieldContextProvider>
+                    <Input
-                        <Field label="Message" name="message">
+                        class="drop-shadow-md w-full"
-                            <Input
+                        value=chat_input
-                                rules=vec![InputRule::required(true.into())]
+                        placeholder="talk shit..."
-                                class="drop-shadow-md"
+                    />
-                                value=chat_input
+                    <Button button_type=ButtonType::Submit class="drop-shadow-md">
-                                placeholder="talk shit..."
+                        "Send"
-                            />
+                    </Button>
-                        </Field>
-                        <Button
-                            button_type=ButtonType::Submit
-                            class="drop-shadow-md"
-                            on_click={
-                                let field_context = FieldContextInjection::expect_context();
-                                move |e: ev::MouseEvent| {
-                                    if !field_context.validate() {
-                                        e.prevent_default()
-                                    }
-                                }
-                            }
-                        >
-                            "Send"
-                        </Button>
-                    </FieldContextProvider>
                 </form>
-            </span>
+            </div>
+            <ul class="mx-2">
+                <h2 class="text-xl">Users: {move || users().len()}</h2>
+                {move || {
+                    users()
+                        .into_iter()
+                        .map(|n| {
+                            view! {
+                                <li>
+                                    <Avatar name=n.clone() />
+                                    {n}
+                                </li>
+                            }
+                        })
+                        .collect_view()
+                }}
+            </ul>
         </div>
     }
 }

client/src/components/footer.rs

@@ -1,21 +1,59 @@
+use crate::components::chat::*;
+use crate::components::debug::*;
 use leptos::prelude::*;
 use thaw::*;
 
 #[component]
 pub fn Footer() -> impl IntoView {
+    let chat_open = RwSignal::new(false);
+
     view! {
+        <br />
+        <br />
         <div
-            class="fixed sm:static bottom-0 left-0 w-full sm:w-auto"
+            class="fixed lg:static bottom-0 left-0 w-full lg:w-auto shadow-inner lg:shadow-none"
             style="background-color: var(--colorNeutralBackground4);"
         >
+            <div class="overflow-hidden">
+                <InlineDrawer open=chat_open position=DrawerPosition::Bottom size=DrawerSize::Small>
+                    <DrawerBody>
+                        <Chat />
+                    </DrawerBody>
+                </InlineDrawer>
+            </div>
             <Divider />
-            <div class="m-2">
+            <div class="flex justify-between">
-                <Link class="p-2" href="https://git.doordesk.net/adam/cards/">
+                <div>
-                    "About"
+                    <Popover
-                </Link>
+                        trigger_type=PopoverTriggerType::Click
-                <Link class="p-2" href="mailto:adam@doordesk.net">
+                        position=PopoverPosition::TopStart
-                    "Contact"
+                    >
-                </Link>
+                        <PopoverTrigger slot>
+                            <Button
+                                icon=icondata::AiBugOutlined
+                                appearance=ButtonAppearance::Transparent
+                            />
+                        </PopoverTrigger>
+                        <Debug />
+                    </Popover>
+                </div>
+                <div class="m-2">
+                    <Link class="p-2" href="https://git.doordesk.net/adam/cards/" target="_blank">
+                        "About"
+                    </Link>
+                    <Link class="p-2" href="mailto:adam@doordesk.net">
+                        "Contact"
+                    </Link>
+                </div>
+                <div>
+                    <Button
+                        icon=icondata::BsChatLeftText
+                        appearance=ButtonAppearance::Transparent
+                        on_click=move |_| {
+                            chat_open.set(!chat_open());
+                        }
+                    />
+                </div>
             </div>
         </div>
     }

client/src/components/game/views/judging.rs

@@ -85,7 +85,7 @@ pub fn JudgingView() -> impl IntoView {
     };
 
     view! {
-        <div class="w-full ms-16 inline-flex flex-wrap">
+        <div class="w-full inline-flex flex-wrap">
             <BlackCard />
             // Selected cards
             {move || {
@@ -125,7 +125,7 @@ pub fn JudgingView() -> impl IntoView {
                 .into_iter()
                 .map(|group| {
                     view! {
-                        <div class="m-2 inline-flex flex-wrap justify-center">
+                        <div class="inline-flex flex-wrap">
                             {group
                                 .into_iter()
                                 .map(|card| {

client/src/components/header.rs

@@ -16,12 +16,6 @@ pub fn Header() -> impl IntoView {
         </div>
         <div class="flex justify-between">
             <TabList selected_value>
-                <Tab value="home">
-                    <Button
-                        appearance=ButtonAppearance::Transparent
-                        icon=icondata::BiHomeAlt2Regular
-                    />
-                </Tab>
                 <Tab value="browser">
                     <Button
                         appearance=ButtonAppearance::Transparent
@@ -31,15 +25,6 @@ pub fn Header() -> impl IntoView {
                 <Tab value="game">
                     <Button appearance=ButtonAppearance::Transparent icon=icondata::LuGamepad />
                 </Tab>
-                <Tab value="chat">
-                    <Button
-                        appearance=ButtonAppearance::Transparent
-                        icon=icondata::BsChatLeftText
-                    />
-                </Tab>
-                <Tab value="debug">
-                    <Button appearance=ButtonAppearance::Transparent icon=icondata::AiBugOutlined />
-                </Tab>
             </TabList>
             <div class="mt-2">
                 <Auth />

client/src/lib.rs

@@ -1,3 +1,4 @@
+use crate::components::websocket::*;
 use leptos::prelude::*;
 use leptos_meta::*;
 use leptos_router::{
@@ -31,6 +32,7 @@ pub fn App() -> impl IntoView {
 
     provide_meta_context();
     view! {
+        <Websocket />
         <ConfigProvider theme>
             <main class="min-h-screen">
                 <Router>

client/src/pages/home.rs

@@ -1,25 +1,17 @@
+use crate::components::browser::create_game::*;
 use crate::components::browser::*;
-use crate::components::chat::*;
-use crate::components::debug::*;
 use crate::components::footer::*;
 use crate::components::game::*;
 use crate::components::header::*;
-use crate::components::websocket::*;
 use leptos::prelude::*;
 use thaw::*;
 
 /// Default Home Page
 #[component]
 pub fn Home() -> impl IntoView {
-    let modal = RwSignal::new(false);
     let selected_value = RwSignal::new("home".to_string());
     provide_context(selected_value);
 
-    // Suppress modal during development
-    if !cfg!(debug_assertions) {
-        modal.set(true);
-    };
-
     view! {
         <ErrorBoundary fallback=|errors| {
             view! {
@@ -39,11 +31,10 @@ pub fn Home() -> impl IntoView {
                 </ul>
             }
         }>
-            <Websocket />
 
-            <div class="container m-auto relative">
+            <div class="lg:container m-auto relative">
                 <div
-                    class="p-1 sm:p-5 sm:rounded-2xl sm:shadow-black sm:shadow-lg min-h-screen sm:min-h-0"
+                    class="p-1 lg:p-5 lg:rounded-2xl lg:shadow-black lg:shadow-lg min-h-screen lg:min-h-0"
                     style="background-color: var(--colorNeutralBackground4);"
                 >
                     <Header />
@@ -67,6 +58,15 @@ pub fn Home() -> impl IntoView {
                             >
                                 "Find a Game"
                             </Button>
+                            <Button
+                                class="drop-shadow-md"
+                                size=ButtonSize::Large
+                                appearance=ButtonAppearance::Primary
+                                icon=icondata::AiPlusOutlined
+                                on_click=move |_| selected_value.set("create".to_string())
+                            >
+                                "Create a Game"
+                            </Button>
                         </div>
                     </Show>
 
@@ -78,12 +78,8 @@ pub fn Home() -> impl IntoView {
                         <Game />
                     </Show>
 
-                    <Show when=move || selected_value() == "chat".to_string()>
+                    <Show when=move || selected_value() == "create".to_string()>
-                        <Chat />
+                        <CreateGame />
-                    </Show>
-
-                    <Show when=move || selected_value() == "debug".to_string()>
-                        <Debug />
                     </Show>
 
                     <Footer />