Add input fields to main menu attempt, fix a few bugs, add bullet point to the font (might have done this wrong). (just a few glitches left when text contains spaces)

voxygen/src/menu/main/ui.rs

@@ -193,6 +193,12 @@ struct IcedState {
     multiplayer_button: neat_button::State,
     #[cfg(feature = "singleplayer")]
     singleplayer_button: neat_button::State,
+    username_input: iced::text_input::State,
+    password_input: iced::text_input::State,
+    server_input: iced::text_input::State,
+    username_value: String,
+    password_value: String,
+    server_value: String,
     show_servers: bool,
 }
 
@@ -203,6 +209,10 @@ enum Message {
     #[cfg(feature = "singleplayer")]
     Singleplayer,
     Multiplayer,
+    Username(String),
+    Password(String),
+    Server(String),
+    FocusPassword,
 }
 
 impl IcedState {
@@ -215,6 +225,12 @@ impl IcedState {
             multiplayer_button: Default::default(),
             #[cfg(feature = "singleplayer")]
             singleplayer_button: Default::default(),
+            username_input: Default::default(),
+            password_input: Default::default(),
+            server_input: Default::default(),
+            username_value: String::new(),
+            password_value: String::new(),
+            server_value: String::new(),
             show_servers: false,
         }
     }
@@ -226,7 +242,7 @@ impl IcedState {
         const FILL_FRAC_ONE: f32 = 0.77;
         const FILL_FRAC_TWO: f32 = 0.53;
 
-        use iced::{Align, Column, Container, Length, Row, Space};
+        use iced::{Align, Column, Container, Length, Row, Space, TextInput};
         use ui::ice::{
             widget::{
                 compound_graphic::{CompoundGraphic, Graphic},
@@ -283,19 +299,45 @@ impl IcedState {
                 BackgroundContainer::new(
                     CompoundGraphic::padded_image(self.imgs.input_bg, [169, 25], [0, 0, 0, 1])
                         .fix_aspect_ratio(),
-                    Space::new(Length::Fill, Length::Fill),
+                    TextInput::new(
+                        &mut self.username_input,
+                        "Username",
+                        &self.username_value,
+                        Message::Username,
+                    )
+                    // TODO: wrap in fill text thing to auto adjust the size
+                    .size(22)
+                    .padding(25)
+                    .on_submit(Message::FocusPassword),
                 )
                 .into(),
                 BackgroundContainer::new(
                     CompoundGraphic::padded_image(self.imgs.input_bg, [169, 25], [0, 1, 0, 1])
                         .fix_aspect_ratio(),
-                    Space::new(Length::Fill, Length::Fill),
+                    TextInput::new(
+                        &mut self.password_input,
+                        "Password",
+                        &self.password_value,
+                        Message::Password,
+                    )
+                    .size(22)
+                    .padding(25)
+                    .password()
+                    .on_submit(Message::Multiplayer),
                 )
                 .into(),
                 BackgroundContainer::new(
                     CompoundGraphic::padded_image(self.imgs.input_bg, [169, 25], [0, 1, 0, 0])
                         .fix_aspect_ratio(),
-                    Space::new(Length::Fill, Length::Fill),
+                    TextInput::new(
+                        &mut self.server_input,
+                        "Server",
+                        &self.server_value,
+                        Message::Server,
+                    )
+                    .size(22)
+                    .padding(25)
+                    .on_submit(Message::Multiplayer),
                 )
                 .into(),
             ])
@@ -363,6 +405,13 @@ impl IcedState {
             #[cfg(feature = "singleplayer")]
             Message::Singleplayer => events.push(Event::StartSingleplayer),
             Message::Multiplayer => (), //TODO
+            Message::Username(new_value) => self.username_value = new_value,
+            Message::Password(new_value) => self.password_value = new_value,
+            Message::Server(new_value) => self.server_value = new_value,
+            Message::FocusPassword => {
+                self.password_input = iced::text_input::State::focused();
+                self.username_input = iced::text_input::State::new();
+            },
         }
     }
 }
@@ -1125,7 +1174,11 @@ impl<'a> MainMenuUi {
         self.connect = false;
     }
 
-    pub fn handle_event(&mut self, event: ui::Event) { self.ui.handle_event(event); }
+    pub fn handle_event(&mut self, event: ui::Event) {
+        if !self.show_iced {
+            self.ui.handle_event(event);
+        }
+    }
 
     pub fn handle_iced_event(&mut self, event: ui::ice::Event) { self.ice_ui.handle_event(event); }
 

voxygen/src/ui/ice/renderer/mod.rs

@@ -142,6 +142,7 @@ impl IcedRenderer {
 
     pub fn resize(&mut self, scaled_dims: Vec2<f32>, renderer: &mut Renderer) {
         self.win_dims = scaled_dims;
+        self.window_scissor = default_scissor(renderer);
 
         self.update_resolution_dependents(renderer.get_resolution());
 
@@ -467,15 +468,17 @@ impl IcedRenderer {
                     vec![(); glyph_count],
                     // Since we already passed in `bounds` to position the glyphs some of this
                     // seems redundant...
+                    // Note: we can't actually use this because dropping glyphs messeses up the
+                    // counting and there is not a convenient method provided to drop out of bounds
+                    // glyphs while positioning them
                     glyph_brush::ab_glyph::Rect {
                         min: glyph_brush::ab_glyph::point(
-                             bounds.x * self.p_scale,
-                             //(self.win_dims.y - bounds.y) * self.p_scale,
-                             bounds.y * self.p_scale,
+                            -10000.0, //bounds.x * self.p_scale,
+                            -10000.0, //bounds.y * self.p_scale,
                         ),
                         max: glyph_brush::ab_glyph::point(
-                            (bounds.x + bounds.width) * self.p_scale,
-                            (bounds.y + bounds.height) * self.p_scale,
+                            10000.0, //(bounds.x + bounds.width) * self.p_scale,
+                            10000.0, //(bounds.y + bounds.height) * self.p_scale,
                         ),
                     },
                 );
@@ -501,21 +504,17 @@ impl IcedRenderer {
                 }
             },
             Primitive::Clip { bounds, content } => {
-                // Check for a change in the scissor.
                 let new_scissor = {
-                    // Calculate minimum x and y coordinates while
-                    // flipping y axis (from +down to +uo) and
-                    // moving origin from top-left corner to bottom-left
                     let min_x = bounds.x;
-                    let min_y = self.win_dims.y - bounds.y;
+                    let min_y = bounds.y;
                     let intersection = Aabr {
                         min: Vec2 {
-                            x: (min_x * self.p_scale) as u16,
-                            y: (min_y * self.p_scale) as u16,
+                            x: (bounds.x * self.p_scale) as u16,
+                            y: (bounds.y * self.p_scale) as u16,
                         },
                         max: Vec2 {
-                            x: ((min_x + bounds.width) * self.p_scale) as u16,
-                            y: ((min_y + bounds.height) * self.p_scale) as u16,
+                            x: ((bounds.x + bounds.width) * self.p_scale) as u16,
+                            y: ((bounds.y + bounds.height) * self.p_scale) as u16,
                         },
                     }
                     .intersection(self.window_scissor);

voxygen/src/ui/ice/renderer/widget/compound_graphic.rs

@@ -27,7 +27,7 @@ impl compound_graphic::Renderer for IcedRenderer {
                         },
                         GraphicKind::Color(color) => Primitive::Rectangle {
                             bounds,
-                            linear_color: srgba_to_linear(color.map(|e| e as f32 * 255.0)),
+                            linear_color: srgba_to_linear(color.map(|e| e as f32 / 255.0)),
                         },
                     })
                     .collect(),

voxygen/src/ui/ice/renderer/widget/text_input.rs

@@ -6,9 +6,9 @@ use iced::{
     Color, Point, Rectangle,
 };
 
-const CURSOR_WIDTH: f32 = 1.0;
+const CURSOR_WIDTH: f32 = 2.0;
 // Extra scroll offset past the cursor
-const EXTRA_OFFSET: f32 = 5.0;
+const EXTRA_OFFSET: f32 = 10.0;
 
 impl text_input::Renderer for IcedRenderer {
     type Font = FontId;
@@ -116,7 +116,7 @@ impl text_input::Renderer for IcedRenderer {
 
         // Allocation :(
         let text = value.to_string();
-        let text = if text.is_empty() { Some(&*text) } else { None };
+        let text = if !text.is_empty() { Some(&*text) } else { None };
 
         // TODO: background from style, image?
 
@@ -124,7 +124,7 @@ impl text_input::Renderer for IcedRenderer {
         let color = if text.is_some() {
             Color::WHITE
         } else {
-            Color::from_rgba(1.0, 1.0, 1.0, 0.4)
+            Color::from_rgba(1.0, 1.0, 1.0, 0.3)
         };
         let linear_color = color.into_linear().into();
 
@@ -141,7 +141,7 @@ impl text_input::Renderer for IcedRenderer {
                     (
                         Primitive::Rectangle {
                             bounds: Rectangle {
-                                x: text_bounds.x + position,
+                                x: text_bounds.x + position - offset,
                                 y: text_bounds.y,
                                 width: CURSOR_WIDTH / p_scale,
                                 height: text_bounds.height,
@@ -158,12 +158,17 @@ impl text_input::Renderer for IcedRenderer {
                     let (left_position, left_offset) = cursor_and_scroll_offset(left);
                     let (right_position, right_offset) = cursor_and_scroll_offset(right);
 
+                    let offset = if end == right {
+                        right_offset
+                    } else {
+                        left_offset
+                    };
                     let width = right_position - left_position;
 
                     (
                         Primitive::Rectangle {
                             bounds: Rectangle {
-                                x: text_bounds.x + left_position,
+                                x: text_bounds.x + left_position - left_offset,
                                 y: text_bounds.y,
                                 width,
                                 height: text_bounds.height,
@@ -171,11 +176,7 @@ impl text_input::Renderer for IcedRenderer {
                             // TODO: selection color from stlye
                             linear_color: Color::from_rgba(1.0, 0.0, 1.0, 0.2).into_linear().into(),
                         },
-                        if end == right {
-                            right_offset
-                        } else {
-                            left_offset
-                        },
+                        offset,
                     )
                 },
             };
@@ -185,9 +186,10 @@ impl text_input::Renderer for IcedRenderer {
             (None, 0.0)
         };
 
+        let display_text = text.unwrap_or(if state.is_focused() { "" } else { placeholder });
         let section = glyph_brush::Section {
             screen_position: (
-                text_bounds.x * p_scale + scroll_offset,
+                text_bounds.x * p_scale - scroll_offset,
                 text_bounds.center_y() * p_scale,
             ),
             bounds: (text_bounds.width * p_scale, text_bounds.height * p_scale),
@@ -197,7 +199,7 @@ impl text_input::Renderer for IcedRenderer {
                 v_align: glyph_brush::VerticalAlign::Center,
             },
             text: vec![glyph_brush::Text {
-                text: text.unwrap_or(placeholder),
+                text: display_text,
                 scale: (size as f32 * p_scale).into(),
                 font_id: font.0,
                 extra: (),
@@ -229,7 +231,7 @@ impl text_input::Renderer for IcedRenderer {
         };
 
         // Probably already computed this somewhere
-        let text_width = self.measure_value(text.unwrap_or(placeholder), size, font);
+        let text_width = self.measure_value(display_text, size, font);
 
         let primitive = if text_width > text_bounds.width {
             Primitive::Clip {