start new client
This commit is contained in:
Adam
parent
1bd3bc9388
commit
6a93ed8c54
9 changed files with 294 additions and 34 deletions
169
client/Cargo.lock
generated
169
client/Cargo.lock
generated
|
|
@ -28,6 +28,17 @@ dependencies = [
|
|||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "async-trait"
|
||||
version = "0.1.76"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "531b97fb4cd3dfdce92c35dedbfdc1f0b9d8091c8ca943d6dae340ef5012d514"
|
||||
dependencies = [
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "attribute-derive"
|
||||
version = "0.9.2"
|
||||
|
|
@ -134,6 +145,7 @@ dependencies = [
|
|||
"console_error_panic_hook",
|
||||
"console_log",
|
||||
"leptos",
|
||||
"leptos-use",
|
||||
"leptos_meta",
|
||||
"leptos_router",
|
||||
"log",
|
||||
|
|
@ -211,6 +223,52 @@ dependencies = [
|
|||
"unicode-segmentation",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "cookie"
|
||||
version = "0.18.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
|
||||
dependencies = [
|
||||
"percent-encoding",
|
||||
"time",
|
||||
"version_check",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "darling"
|
||||
version = "0.20.10"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "6f63b86c8a8826a49b8c21f08a2d07338eec8d900540f8630dc76284be802989"
|
||||
dependencies = [
|
||||
"darling_core",
|
||||
"darling_macro",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "darling_core"
|
||||
version = "0.20.10"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "95133861a8032aaea082871032f5815eb9e98cef03fa916ab4500513994df9e5"
|
||||
dependencies = [
|
||||
"fnv",
|
||||
"ident_case",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"strsim",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "darling_macro"
|
||||
version = "0.20.10"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "d336a2a514f6ccccaa3e09b02d41d35330c07ddf03a62165fcec10bb561c7806"
|
||||
dependencies = [
|
||||
"darling_core",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "dashmap"
|
||||
version = "5.5.3"
|
||||
|
|
@ -224,6 +282,27 @@ dependencies = [
|
|||
"parking_lot_core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "default-struct-builder"
|
||||
version = "0.5.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "f8fa90da96b8fd491f5754d1f7a731f73921e3b7aa0ce333c821a0e43666ac14"
|
||||
dependencies = [
|
||||
"darling",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "deranged"
|
||||
version = "0.3.11"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b42b6fa04a440b495c8b04d0e71b707c585f83cb9cb28cf8cd0d976c315e31b4"
|
||||
dependencies = [
|
||||
"powerfmt",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "derive-where"
|
||||
version = "1.2.7"
|
||||
|
|
@ -391,6 +470,18 @@ dependencies = [
|
|||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-timers"
|
||||
version = "0.3.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
|
||||
dependencies = [
|
||||
"futures-channel",
|
||||
"futures-core",
|
||||
"js-sys",
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "gloo-utils"
|
||||
version = "0.2.0"
|
||||
|
|
@ -447,6 +538,12 @@ dependencies = [
|
|||
"itoa",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "ident_case"
|
||||
version = "1.0.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
|
||||
|
||||
[[package]]
|
||||
name = "idna"
|
||||
version = "0.5.0"
|
||||
|
|
@ -529,6 +626,29 @@ dependencies = [
|
|||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos-use"
|
||||
version = "0.10.10"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3272d90b77cdbb99e9060f90eb6f5738e56128b2f912db57a50efb006a26e262"
|
||||
dependencies = [
|
||||
"async-trait",
|
||||
"cfg-if",
|
||||
"cookie",
|
||||
"default-struct-builder",
|
||||
"futures-util",
|
||||
"gloo-timers",
|
||||
"gloo-utils",
|
||||
"js-sys",
|
||||
"lazy_static",
|
||||
"leptos",
|
||||
"paste",
|
||||
"thiserror",
|
||||
"wasm-bindgen",
|
||||
"wasm-bindgen-futures",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "leptos_config"
|
||||
version = "0.6.12"
|
||||
|
|
@ -773,6 +893,12 @@ dependencies = [
|
|||
"minimal-lexical",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "num-conv"
|
||||
version = "0.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "51d515d32fb182ee37cda2ccdcb92950d6a3c2893aa280e540671c2cd0f3b1d9"
|
||||
|
||||
[[package]]
|
||||
name = "oco_ref"
|
||||
version = "0.1.1"
|
||||
|
|
@ -868,6 +994,12 @@ version = "0.1.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8b870d8c151b6f2fb93e84a13146138f05d02ed11c7e7c54f8826aaaf7c9f184"
|
||||
|
||||
[[package]]
|
||||
name = "powerfmt"
|
||||
version = "0.2.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
|
||||
|
||||
[[package]]
|
||||
name = "prettyplease"
|
||||
version = "0.2.15"
|
||||
|
|
@ -1226,6 +1358,12 @@ version = "1.11.2"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4dccd0940a2dcdf68d092b8cbab7dc0ad8fa938bf95787e1b916b0e3d0e8e970"
|
||||
|
||||
[[package]]
|
||||
name = "strsim"
|
||||
version = "0.11.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
|
||||
|
||||
[[package]]
|
||||
name = "syn"
|
||||
version = "2.0.41"
|
||||
|
|
@ -1269,6 +1407,37 @@ dependencies = [
|
|||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "time"
|
||||
version = "0.3.36"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5dfd88e563464686c916c7e46e623e520ddc6d79fa6641390f2e3fa86e83e885"
|
||||
dependencies = [
|
||||
"deranged",
|
||||
"itoa",
|
||||
"num-conv",
|
||||
"powerfmt",
|
||||
"serde",
|
||||
"time-core",
|
||||
"time-macros",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "time-core"
|
||||
version = "0.1.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "ef927ca75afb808a4d64dd374f00a2adf8d0fcff8e7b184af886c3c87ec4a3f3"
|
||||
|
||||
[[package]]
|
||||
name = "time-macros"
|
||||
version = "0.2.18"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "3f252a68540fde3a3877aeea552b832b40ab9a69e318efd078774a01ddee1ccf"
|
||||
dependencies = [
|
||||
"num-conv",
|
||||
"time-core",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tinyvec"
|
||||
version = "1.6.0"
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ leptos_router = { version = "0.6", features = ["csr", "nightly"] }
|
|||
console_log = "1"
|
||||
log = "0.4"
|
||||
console_error_panic_hook = "0.1"
|
||||
leptos-use = "0.10.10"
|
||||
|
||||
# utils
|
||||
# strum = { version = "0.25", features = ["derive", "strum_macros"] }
|
||||
|
|
|
|||
|
|
@ -11,5 +11,5 @@
|
|||
<!-- include support for `wasm-bindgen --weak-refs` - see: https://rustwasm.github.io/docs/wasm-bindgen/reference/weak-references.html -->
|
||||
<link data-trunk rel="rust" data-target-path="client" data-wasm-opt="z" data-weak-refs />
|
||||
</head>
|
||||
<body class="bg-black"></body>
|
||||
<body></body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,21 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* html, body { */
|
||||
/* @apply bg-slate-900; */
|
||||
/* } */
|
||||
button {
|
||||
@apply
|
||||
bg-slate-600
|
||||
border-b-4
|
||||
border-slate-800
|
||||
font-bold
|
||||
hover:bg-slate-700
|
||||
hover:border-slate-500
|
||||
px-4
|
||||
py-2
|
||||
rounded
|
||||
text-white
|
||||
;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
use leptos::*;
|
||||
|
||||
/// A parameterized incrementing button
|
||||
#[component]
|
||||
pub fn Button(#[prop(default = 1)] increment: i32) -> impl IntoView {
|
||||
let (count, set_count) = create_signal(0);
|
||||
view! {
|
||||
<button on:click=move |_| {
|
||||
set_count(count() + increment)
|
||||
}>
|
||||
|
||||
"Ligma: " {count}
|
||||
</button>
|
||||
}
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
pub mod counter_btn;
|
||||
pub mod websocket;
|
||||
|
|
|
|||
99
client/src/components/websocket.rs
Normal file
99
client/src/components/websocket.rs
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
use html::Textarea;
|
||||
use leptos::*;
|
||||
use leptos_use::{core::ConnectionReadyState, use_websocket, UseWebsocketReturn};
|
||||
|
||||
#[component]
|
||||
pub fn Websocket() -> impl IntoView {
|
||||
let UseWebsocketReturn {
|
||||
ready_state,
|
||||
message,
|
||||
send,
|
||||
open,
|
||||
close,
|
||||
..
|
||||
} = use_websocket("ws://0.0.0.0:3030/websocket");
|
||||
|
||||
let send_message = move |_| {
|
||||
send("Hello, world!");
|
||||
};
|
||||
|
||||
let status = move || ready_state.get().to_string();
|
||||
|
||||
let connected = move || ready_state.get() == ConnectionReadyState::Open;
|
||||
|
||||
let open_connection = move |_| {
|
||||
open();
|
||||
};
|
||||
|
||||
let close_connection = move |_| {
|
||||
close();
|
||||
};
|
||||
|
||||
let chat_history_ref = create_node_ref::<Textarea>();
|
||||
|
||||
let (chat_history, set_chat_history) = create_signal(vec![]);
|
||||
|
||||
fn update_chat_history(&history: &WriteSignal<Vec<String>>, message: String) {
|
||||
let _ = &history.update(|history: &mut Vec<_>| history.push(message));
|
||||
}
|
||||
|
||||
// handle incoming messages
|
||||
create_effect(move |_| {
|
||||
message.with(move |message| {
|
||||
// Send all messages as strings into chat box
|
||||
if let Some(m) = message {
|
||||
update_chat_history(&set_chat_history, format!("{}\n", m));
|
||||
|
||||
// Scroll chat textarea to bottom
|
||||
if let Some(hist) = chat_history_ref.get() {
|
||||
hist.set_scroll_top(hist.scroll_height());
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
view! {
|
||||
<div class="bg-slate-500 w-auto">
|
||||
<hr/>
|
||||
<p class="p-1">"status: " {status}</p>
|
||||
<hr/>
|
||||
<div class="p-1">
|
||||
<button on:click=open_connection disabled=connected>
|
||||
"Open"
|
||||
</button>
|
||||
<button on:click=close_connection disabled=move || !connected()>
|
||||
"Close"
|
||||
</button>
|
||||
</div>
|
||||
<hr/>
|
||||
<div class="p-1">
|
||||
<input
|
||||
class="w-96 bg-slate-900 text-slate-200 font-mono rounded-sm"
|
||||
placeholder="who are you?"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<div class="p-1">
|
||||
<p>Chat:</p>
|
||||
<textarea
|
||||
node_ref=chat_history_ref
|
||||
class="w-96 h-60 bg-slate-900 text-slate-200 font-mono resize-none rounded-sm"
|
||||
readonly=true
|
||||
wrap="soft"
|
||||
>
|
||||
{move || chat_history.get()}
|
||||
</textarea>
|
||||
<br/>
|
||||
<input
|
||||
class="w-96 bg-slate-900 text-slate-200 font-mono rounded-sm"
|
||||
placeholder="talk shit..."
|
||||
/>
|
||||
<br/>
|
||||
<button on:click=send_message disabled=move || !connected()>
|
||||
"Send"
|
||||
</button>
|
||||
</div>
|
||||
<hr/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ pub fn App() -> impl IntoView {
|
|||
provide_meta_context();
|
||||
|
||||
view! {
|
||||
<Html lang="en" dir="ltr" attr:data-theme="dark"/>
|
||||
<Html class="bg-slate-900" lang="en" dir="ltr" attr:data-theme="dark"/>
|
||||
|
||||
// sets the document title
|
||||
<Title text="Cards for Humanity"/>
|
||||
|
|
@ -26,13 +26,11 @@ pub fn App() -> impl IntoView {
|
|||
<Meta charset="UTF-8"/>
|
||||
<Meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
|
||||
<body class="bg-black">
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path="/" view=Home/>
|
||||
<Route path="/*" view=NotFound/>
|
||||
</Routes>
|
||||
</Router>
|
||||
</body>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
use crate::components::counter_btn::Button;
|
||||
use crate::components::websocket::Websocket;
|
||||
use leptos::*;
|
||||
|
||||
/// Default Home Page
|
||||
|
|
@ -24,19 +24,9 @@ pub fn Home() -> impl IntoView {
|
|||
}
|
||||
}>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1>"Cards For Humanity"</h1>
|
||||
<hr/>
|
||||
<p>Hello, [Name]</p>
|
||||
<hr/>
|
||||
<p>Connection status: Disconnected.</p>
|
||||
|
||||
<div class="buttons">
|
||||
<Button/>
|
||||
<Button increment=5/>
|
||||
</div>
|
||||
|
||||
<div class="container m-auto">
|
||||
<h1 class="text-6xl text-slate-300">"Cards For Humanity"</h1>
|
||||
<Websocket/>
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue