even more mobile friendly
This commit is contained in:
parent
d693146942
commit
74f4ed302c
10 changed files with 115 additions and 110 deletions
24
Cargo.lock
generated
24
Cargo.lock
generated
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
"Sign In"
|
||||
<h2 class="text-xl">
|
||||
"Change Name"
|
||||
<Button
|
||||
icon=icondata::TbHelp
|
||||
appearance=ButtonAppearance::Transparent
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
chat_input.set(String::new());
|
||||
if chat_input() != "" {
|
||||
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">
|
||||
<h2 class="text-2xl">Chat: {move || chat_name()}</h2>
|
||||
<span class="flex justify-between">
|
||||
<div class="lg:flex lg:justify-between">
|
||||
<div class="w-full">
|
||||
<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">
|
||||
<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>
|
||||
<br />
|
||||
<form onsubmit="return false" on:submit=send_message autocomplete="off">
|
||||
<FieldContextProvider>
|
||||
<Field label="Message" name="message">
|
||||
<Input
|
||||
rules=vec![InputRule::required(true.into())]
|
||||
class="drop-shadow-md"
|
||||
value=chat_input
|
||||
placeholder="talk shit..."
|
||||
/>
|
||||
</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>
|
||||
<Input
|
||||
class="drop-shadow-md w-full"
|
||||
value=chat_input
|
||||
placeholder="talk shit..."
|
||||
/>
|
||||
<Button button_type=ButtonType::Submit class="drop-shadow-md">
|
||||
"Send"
|
||||
</Button>
|
||||
</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>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<Link class="p-2" href="https://git.doordesk.net/adam/cards/">
|
||||
"About"
|
||||
</Link>
|
||||
<Link class="p-2" href="mailto:adam@doordesk.net">
|
||||
"Contact"
|
||||
</Link>
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<Popover
|
||||
trigger_type=PopoverTriggerType::Click
|
||||
position=PopoverPosition::TopStart
|
||||
>
|
||||
<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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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| {
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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()>
|
||||
<Chat />
|
||||
</Show>
|
||||
|
||||
<Show when=move || selected_value() == "debug".to_string()>
|
||||
<Debug />
|
||||
<Show when=move || selected_value() == "create".to_string()>
|
||||
<CreateGame />
|
||||
</Show>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue