wip frontend

This commit is contained in:
2023-06-11 07:47:01 +02:00
parent 6e845907d1
commit bfabcc0abc
15 changed files with 771 additions and 18 deletions

View File

@@ -5,3 +5,11 @@ authors.workspace = true
edition.workspace = true
[dependencies]
log = "0.4.19"
wasm-logger = "0.2.0"
yew = { version = "0.20", features = ["csr"] }
yew-router = "0.17.0"
common.workspace = true
futures = "0.3.28"
wasm-bindgen-futures = "0.4.36"
reqwasm = "0.5.0"

View File

@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Achievements</title>
</head>
</html>

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,9 @@
use crate::Route;
use yew::functional::*;
use yew::prelude::*;
use yew_router::prelude::*;
#[function_component(Admin)]
pub fn admin() -> Html {
html! {}
}

View File

@@ -0,0 +1,3 @@
pub mod achievement;
pub mod admin;
pub mod root;

View File

@@ -0,0 +1,26 @@
use crate::Route;
use yew::functional::*;
use yew::prelude::*;
use yew_router::prelude::*;
#[function_component(Root)]
pub fn root() -> Html {
let app_state = use_context::<crate::AppState>().expect("no context found");
let achievements = app_state
.state
.achievements
.iter()
.map(|a| {
html! {
<p>{format!("{}", a.goal)}</p>
}
})
.collect::<Html>();
html! {
<div>
{achievements}
</div>
}
}

View File

@@ -1 +1,64 @@
fn main() {}
use components::admin::Admin;
use components::root::Root;
use std::rc::Rc;
use yew::prelude::*;
use yew_router::BrowserRouter;
use yew_router::Routable;
use yew_router::Switch;
mod components;
mod services;
#[derive(Debug, Clone, Copy, PartialEq, Routable)]
enum Route {
#[at("/")]
Root,
#[at("/chat")]
Admin,
#[not_found]
#[at("/404")]
NotFound,
}
fn switch(selected_route: Route) -> Html {
match selected_route {
Route::Root => html! {<Root />},
Route::Admin => html! {<Admin/>},
Route::NotFound => html! {<h1>{"404 not found"}</h1>},
}
}
#[derive(Default, Clone, Debug, PartialEq, Eq)]
struct AppStateInner {
state: common::State,
}
type AppState = Rc<AppStateInner>;
#[function_component]
fn App() -> Html {
// let counter = use_state(|| 0);
// let onclick = {
// let counter = counter.clone();
// move |_| {
// let value = *counter + 1;
// counter.set(value);
// }
// };
let ctx = use_state(|| Rc::new(AppStateInner::default()));
html! {
<ContextProvider<AppState> context={(*ctx).clone()}>
<BrowserRouter>
<div class="flex w-screen h-screen">
<Switch<Route> render={switch}/>
</div>
</BrowserRouter>
</ContextProvider<AppState>>
}
}
fn main() {
wasm_logger::init(wasm_logger::Config::default());
yew::Renderer::<App>::new().render();
}

View File

@@ -0,0 +1 @@
pub mod websocket;

View File

@@ -0,0 +1,49 @@
use futures::channel::mpsc::Sender;
use futures::SinkExt;
use futures::StreamExt;
use reqwasm::websocket::futures::WebSocket;
use reqwasm::websocket::Message;
use wasm_bindgen_futures::spawn_local;
pub struct WebsocketService {
pub tx: Sender<String>,
}
impl WebsocketService {
pub fn new() -> Self {
let ws = WebSocket::open("ws://127.0.0.1:4000").unwrap();
let (mut write, mut read) = ws.split();
let (in_tx, mut in_rx) = futures::channel::mpsc::channel::<String>(1000);
spawn_local(async move {
while let Some(s) = in_rx.next().await {
log::debug!("got event from channel! {}", s);
write.send(Message::Text(s)).await.unwrap();
}
});
spawn_local(async move {
while let Some(msg) = read.next().await {
match msg {
Ok(Message::Text(data)) => {
log::debug!("from websocket: {}", data);
}
Ok(Message::Bytes(b)) => {
let decoded = std::str::from_utf8(&b);
if let Ok(val) = decoded {
log::debug!("from websocket: {}", val);
}
}
Err(e) => {
log::error!("ws: {:?}", e)
}
}
}
log::debug!("WebSocket Closed");
});
Self { tx: in_tx }
}
}