login screen

src/client/ui.rs

@@ -0,0 +1,131 @@
+use iris::prelude::*;
+use len_fns::*;
+
+use crate::{
+    client::{Client, app::AppHandle},
+    net::client::connect,
+};
+
+#[derive(Eq, PartialEq, Hash, Clone)]
+pub struct Submit;
+
+impl DefaultEvent for Submit {
+    type Data = ();
+}
+
+pub struct UiData {
+    pub main_view: WidgetId<AnyWidget>,
+}
+
+pub fn ui(handle: AppHandle) -> (Ui, UiData) {
+    let mut ui = Ui::new();
+
+    let msg_panel = msg_panel(&mut ui);
+    let side_bar = rect(Color::BLACK.brighter(0.05)).width(80);
+    let main_view = (side_bar, msg_panel).span(Dir::RIGHT).add(&mut ui).any();
+
+    let field = |name| text(name).editable().size(20);
+    let ip = field("ip");
+    // let username = field("username");
+    // let password = field("password");
+
+    let mut fbx = |field: TextBuilder<TextEditOutput>| {
+        let field = field.add(&mut ui);
+        field
+            .clone()
+            .pad(10)
+            .background(rect(Color::BLACK.brighter(0.1)).radius(15))
+            .on(CursorSense::click(), focus(field))
+    };
+
+    let color = Color::GREEN;
+    let submit = rect(color)
+        .radius(15)
+        .id_on(CursorSense::click(), move |id, client: &mut Client, _| {
+            client.ui[id].color = color.darker(0.3);
+            connect(handle.clone());
+        })
+        .height(40);
+    let login = (
+        text("login").size(30),
+        fbx(ip),
+        // fbx(username),
+        // fbx(password),
+        submit,
+    )
+        .span(Dir::DOWN)
+        .gap(10)
+        .pad(15)
+        .background(rect(Color::BLACK.brighter(0.2)).radius(15))
+        .width(400)
+        .align(Align::Center);
+    login.set_root(&mut ui);
+
+    let data = UiData { main_view };
+    (ui, data)
+}
+
+pub fn msg_widget(content: String) -> impl WidgetLike<FnTag> {
+    let content = text(content)
+        .editable()
+        .size(20)
+        .text_align(Align::Left)
+        .wrap(true)
+        .id_on(CursorSense::click(), |id, client: &mut Client, ctx| {
+            client.ui.text(id).select(ctx.cursor, ctx.size);
+            client.focus = Some(id.clone());
+        });
+    let header = text("some user").size(20);
+    (
+        image(include_bytes!("./assets/sungals.png"))
+            .sized((70, 70))
+            .align(Align::TopLeft),
+        (header.align(Align::TopLeft), content.align(Align::TopLeft))
+            .span(Dir::DOWN)
+            .gap(10),
+    )
+        .span(Dir::RIGHT)
+        .gap(10)
+}
+
+pub fn focus(id: WidgetId<TextEdit>) -> impl Fn(&mut Client, CursorData) {
+    move |client: &mut Client, data: CursorData| {
+        client.ui.text(&id).select(data.cursor, data.size);
+        client.focus = Some(id.clone());
+    }
+}
+
+pub fn msg_panel(ui: &mut Ui) -> impl WidgetFn<Stack> + use<> {
+    let msg_area = Span::empty(Dir::DOWN).gap(15).add(ui);
+
+    let send_text = text("some stuff idk")
+        .editable()
+        .size(20)
+        .text_align(Align::Left)
+        .add(ui);
+
+    (
+        msg_area
+            .clone()
+            .align(Align::BotLeft)
+            .scroll()
+            .pad(Padding::x(15))
+            .height(rest(1)),
+        send_text
+            .clone()
+            .id_on(Submit, move |id, client: &mut Client, _| {
+                let content = client.ui.text(id).take();
+                let msg = msg_widget(content).add(&mut client.ui);
+                client.ui[&msg_area].children.push(msg.any());
+            })
+            .pad(15)
+            .on(CursorSense::click(), focus(send_text))
+            .background(rect(Color::BLACK.brighter(0.05)).radius(15))
+            .pad(15)
+            .height(80)
+            .z_offset(1),
+    )
+        .span(Dir::DOWN)
+        .width(rest(1))
+        .background(rect(Color::BLACK.brighter(0.1)))
+}