Merge branch 'ui_improvements' into 'master'

Ui improvements

Closes #23

See merge request veloren/veloren!54

Former-commit-id: 227b25c971c2576e5121d884a5e102307dd471c3

voxygen/src/hud/chat.rs

@@ -83,34 +83,42 @@ impl Chat {
             self.new_messages = false;
         }
 
+        // Only show if it has the keyboard captured
         // Chat input with rectangle as background
-        let text_edit = TextEdit::new(&self.input)
+        let keyboard_captured = ui_widgets.global_input().current.widget_capturing_keyboard.map_or(false, |id| id == self.ids.input);
-            .w(460.0)
+        if keyboard_captured {
-            .restrict_to_height(false)
+            let text_edit = TextEdit::new(&self.input)
-            .line_spacing(2.0)
+                .w(460.0)
-            .font_size(15)
+                .restrict_to_height(false)
-            .font_id(font);
+                .line_spacing(2.0)
-        let y = match text_edit.get_y_dimension(ui_widgets) {
+                .font_size(15)
-            Dimension::Absolute(y) => y + 6.0,
+                .font_id(font);
-            _ => 0.0,
+            let y = match text_edit.get_y_dimension(ui_widgets) {
-        };
+                Dimension::Absolute(y) => y + 6.0,
-        Rectangle::fill([470.0, y])
+                _ => 0.0,
-            .rgba(0.0, 0.0, 0.0, 0.8)
+            };
-            .bottom_left_with_margins_on(ui_widgets.window, 10.0, 10.0)
+            Rectangle::fill([470.0, y])
-            .w(470.0)
+                .rgba(0.0, 0.0, 0.0, 0.8)
-            .set(self.ids.input_bg, ui_widgets);
+                .bottom_left_with_margins_on(ui_widgets.window, 10.0, 10.0)
-        if let Some(str) = text_edit
+                .w(470.0)
-            .top_left_with_margins_on(self.ids.input_bg, 1.0, 1.0)
+                .set(self.ids.input_bg, ui_widgets);
-            .set(self.ids.input, ui_widgets)
+            if let Some(str) = text_edit
-        {
+                .top_left_with_margins_on(self.ids.input_bg, 1.0, 1.0)
-            self.input = str.to_string();
+                .set(self.ids.input, ui_widgets)
-            self.input.retain(|c| c != '\n');
+            {
+                self.input = str.to_string();
+                self.input.retain(|c| c != '\n');
+            }
         }
 
         // Message box
         Rectangle::fill([470.0, 174.0])
             .rgba(0.0, 0.0, 0.0, 0.4)
-            .up_from(self.ids.input_bg, 0.0)
+            .and(|r| if keyboard_captured {
+                r.up_from(self.ids.input_bg, 0.0)
+            } else {
+                r.bottom_left_with_margins_on(ui_widgets.window, 10.0, 10.0)
+            })
             .set(self.ids.message_box_bg, ui_widgets);
         let (mut items, _) = List::flow_down(self.messages.len() + 1)
             .top_left_of(self.ids.message_box_bg)
@@ -154,13 +162,13 @@ impl Chat {
             }
         }
 
-        // If enter is pressed send the current message
+        // If enter is pressed and the input box is not empty send the current message
         if ui_widgets
             .widget_input(self.ids.input)
             .presses()
             .key()
             .any(|key_press| match key_press.key {
-                Key::Return => true,
+                Key::Return if !self.input.is_empty() => true,
                 _ => false,
             })
         {

voxygen/src/hud/mod.rs

@@ -4,6 +4,7 @@ use crate::{
     render::Renderer,
     ui::{self, ScaleMode, ToggleButton, Ui},
     window::{Event as WinEvent, Key, Window},
+    GlobalState,
 };
 use common::assets;
 use conrod_core::{
@@ -249,7 +250,7 @@ pub(self) struct Imgs {
 }
 impl Imgs {
     fn new(ui: &mut Ui, renderer: &mut Renderer) -> Imgs {
-        let mut load = |filename, ui: &mut Ui| {
+        let load = |filename, ui: &mut Ui| {
             let fullpath: String = ["/voxygen/", filename].concat();
             let image = image::load_from_memory(
                 assets::load(fullpath.as_str())
@@ -406,7 +407,6 @@ pub struct Hud {
     ids: Ids,
     imgs: Imgs,
     chat: chat::Chat,
-    cursor_grabbed: bool,
     font_metamorph: FontId,
     font_opensans: FontId,
     show_help: bool,
@@ -438,28 +438,23 @@ impl Hud {
         // Load images
         let imgs = Imgs::new(&mut ui, window.renderer_mut());
         // Load fonts
-        let font_opensans = ui.new_font(
+        let load_font = |filename, ui: &mut Ui| {
-            conrod_core::text::font::from_file(concat!(
+            let fullpath: String = ["/voxygen/font", filename].concat();
-                env!("CARGO_MANIFEST_DIR"),
+             ui.new_font(conrod_core::text::Font::from_bytes(
-                "/../assets/voxygen/font/OpenSans-Regular.ttf"
+                 assets::load(fullpath.as_str())
-            ))
+                .expect("Error loading file")
-            .unwrap(),
+            ).unwrap())
-        );
+        };
-        let font_metamorph = ui.new_font(
+        let font_opensans = load_font("/OpenSans-Regular.ttf", &mut ui);
-            conrod_core::text::font::from_file(concat!(
+        let font_metamorph = load_font("/Metamorphous-Regular.ttf", &mut ui);
-                env!("CARGO_MANIFEST_DIR"),
-                "/../assets/voxygen/font/Metamorphous-Regular.ttf"
-            ))
-            .unwrap(),
-        );
         // Chat box
         let chat = chat::Chat::new(&mut ui);
+
         Self {
             ui,
             imgs,
             ids,
             chat,
-            cursor_grabbed: true,
             settings_tab: SettingsTab::Interface,
             show_help: true,
             bag_open: false,
@@ -487,378 +482,382 @@ impl Hud {
         const MANA_COLOR: Color = Color::Rgba(0.42, 0.41, 0.66, 1.0);
         const XP_COLOR: Color = Color::Rgba(0.59, 0.41, 0.67, 1.0);
 
-        if self.show_ui {
+        // Don't show anything if the ui is toggled off
-            // Add Bag-Space Button
+        if !self.show_ui {
-            if self.inventorytest_button {
+            return events;
-                if Button::image(self.imgs.mmap_button)
+        }
-                    .w_h(100.0, 100.0)
+    
-                    .middle_of(ui_widgets.window)
+        // Add Bag-Space Button
-                    .label("1 Up!")
+        if self.inventorytest_button {
-                    .label_font_size(20)
-                    .hover_image(self.imgs.mmap_button_hover)
-                    .press_image(self.imgs.mmap_button_press)
-                    .set(self.ids.bag_space_add, ui_widgets)
-                    .was_clicked()
-                {
-                    self.inventory_space = self.inventory_space + 1;
-                };
-            }
-            // Chat box
-            if let Some(msg) = self
-                .chat
-                .update_layout(ui_widgets, self.font_opensans, &self.imgs)
-            {
-                events.push(Event::SendMessage(msg));
-            }
-            // Alpha Version
-            Text::new(version)
-                .top_left_with_margins_on(ui_widgets.window, 5.0, 5.0)
-                .font_size(14)
-                .color(TEXT_COLOR)
-                .set(self.ids.v_logo, ui_widgets);
-            // Help Text
-            if self.show_help {
-                Image::new(self.imgs.window_frame_2)
-                    .top_left_with_margins_on(ui_widgets.window, 3.0, 3.0)
-                    .w_h(300.0, 350.0)
-                    .set(self.ids.help_bg, ui_widgets);
-
-                Text::new(
-                    "Tab = Free Cursor       \n\
-                     Esc = Open/Close Menus  \n\
-                     \n\
-                     F1 = Toggle this Window \n\
-                     F2 = Toggle Interface   \n\
-                     \n\
-                     Enter = Open Chat       \n\
-                     Mouse Wheel = Scroll Chat\n\
-                     \n\
-                     M = Map                 \n\
-                     B = Bag                 \n\
-                     L = Quest-Log           \n\
-                     C = Character Window    \n\
-                     O = Social              \n\
-                     P = Spellbook           \n\
-                     N = Settings",
-                )
-                .color(TEXT_COLOR)
-                .top_left_with_margins_on(self.ids.help_bg, 20.0, 20.0)
-                .font_id(self.font_opensans)
-                .font_size(18)
-                .set(self.ids.help, ui_widgets);
-                // X-button
-                if Button::image(self.imgs.close_button)
-                    .w_h(244.0 * 0.22 / 3.0, 244.0 * 0.22 / 3.0)
-                    .hover_image(self.imgs.close_button_hover)
-                    .press_image(self.imgs.close_button_press)
-                    .top_right_with_margins_on(self.ids.help_bg, 8.0, 3.0)
-                    .set(self.ids.button_help2, ui_widgets)
-                    .was_clicked()
-                {
-                    self.show_help = false;
-                };
-            }
-
-            // Minimap frame and bg
-            Image::new(self.imgs.mmap_frame_bg)
-                .w_h(1750.0 / 8.0, 1650.0 / 8.0)
-                .top_right_with_margins_on(ui_widgets.window, 5.0, 30.0)
-                .set(self.ids.mmap_frame_bg, ui_widgets);
-
-            Image::new(self.imgs.mmap_frame)
-                .w_h(1750.0 / 8.0, 1650.0 / 8.0)
-                .top_right_with_margins_on(ui_widgets.window, 5.0, 30.0)
-                .set(self.ids.mmap_frame, ui_widgets);
-
-            Image::new(self.imgs.mmap_icons)
-                .w_h(448.0 / 14.93, 2688.0 / 14.93)
-                .right_from(self.ids.mmap_frame, 0.0)
-                .align_bottom_of(self.ids.mmap_frame)
-                .set(self.ids.mmap_icons, ui_widgets);
-            // Title
-            // Make it display the actual location
-            Text::new("Uncanny Valley")
-                .mid_top_with_margin_on(self.ids.mmap_frame, 5.0)
-                .font_size(14)
-                .color(TEXT_COLOR)
-                .set(self.ids.mmap_location, ui_widgets);
-
-            // Minimap Buttons
-
-            //0 Settings
             if Button::image(self.imgs.mmap_button)
-                .w_h(448.0 / 15.0, 448.0 / 15.0)
+                .w_h(100.0, 100.0)
-                .top_right_with_margins_on(self.ids.mmap_icons, 0.0, 0.0)
+                .middle_of(ui_widgets.window)
+                .label("1 Up!")
+                .label_font_size(20)
                 .hover_image(self.imgs.mmap_button_hover)
                 .press_image(self.imgs.mmap_button_press)
-                .set(self.ids.mmap_button_0, ui_widgets)
+                .set(self.ids.bag_space_add, ui_widgets)
+                .was_clicked()
+            {
+                self.inventory_space = self.inventory_space + 1;
+            };
+        }
+        // Chat box
+        if let Some(msg) = self
+            .chat
+            .update_layout(ui_widgets, self.font_opensans, &self.imgs)
+        {
+            events.push(Event::SendMessage(msg));
+        }
+        // Alpha Version
+        Text::new(version)
+            .top_left_with_margins_on(ui_widgets.window, 5.0, 5.0)
+            .font_size(14)
+            .color(TEXT_COLOR)
+            .set(self.ids.v_logo, ui_widgets);
+        // Help Text
+        if self.show_help {
+            Image::new(self.imgs.window_frame_2)
+                .top_left_with_margins_on(ui_widgets.window, 3.0, 3.0)
+                .w_h(300.0, 350.0)
+                .set(self.ids.help_bg, ui_widgets);
+
+            Text::new(
+                "Tab = Free Cursor       \n\
+                    Esc = Open/Close Menus  \n\
+                    \n\
+                    F1 = Toggle this Window \n\
+                    F2 = Toggle Interface   \n\
+                    \n\
+                    Enter = Open Chat       \n\
+                    Mouse Wheel = Scroll Chat\n\
+                    \n\
+                    M = Map                 \n\
+                    B = Bag                 \n\
+                    L = Quest-Log           \n\
+                    C = Character Window    \n\
+                    O = Social              \n\
+                    P = Spellbook           \n\
+                    N = Settings",
+            )
+            .color(TEXT_COLOR)
+            .top_left_with_margins_on(self.ids.help_bg, 20.0, 20.0)
+            .font_id(self.font_opensans)
+            .font_size(18)
+            .set(self.ids.help, ui_widgets);
+            // X-button
+            if Button::image(self.imgs.close_button)
+                .w_h(244.0 * 0.22 / 3.0, 244.0 * 0.22 / 3.0)
+                .hover_image(self.imgs.close_button_hover)
+                .press_image(self.imgs.close_button_press)
+                .top_right_with_margins_on(self.ids.help_bg, 8.0, 3.0)
+                .set(self.ids.button_help2, ui_widgets)
+                .was_clicked()
+            {
+                self.show_help = false;
+            };
+        }
+
+        // Minimap frame and bg
+        Image::new(self.imgs.mmap_frame_bg)
+            .w_h(1750.0 / 8.0, 1650.0 / 8.0)
+            .top_right_with_margins_on(ui_widgets.window, 5.0, 30.0)
+            .set(self.ids.mmap_frame_bg, ui_widgets);
+
+        Image::new(self.imgs.mmap_frame)
+            .w_h(1750.0 / 8.0, 1650.0 / 8.0)
+            .top_right_with_margins_on(ui_widgets.window, 5.0, 30.0)
+            .set(self.ids.mmap_frame, ui_widgets);
+
+        Image::new(self.imgs.mmap_icons)
+            .w_h(448.0 / 14.93, 2688.0 / 14.93)
+            .right_from(self.ids.mmap_frame, 0.0)
+            .align_bottom_of(self.ids.mmap_frame)
+            .set(self.ids.mmap_icons, ui_widgets);
+        // Title
+        // Make it display the actual location
+        Text::new("Uncanny Valley")
+            .mid_top_with_margin_on(self.ids.mmap_frame, 5.0)
+            .font_size(14)
+            .color(TEXT_COLOR)
+            .set(self.ids.mmap_location, ui_widgets);
+
+        // Minimap Buttons
+
+        //0 Settings
+        if Button::image(self.imgs.mmap_button)
+            .w_h(448.0 / 15.0, 448.0 / 15.0)
+            .top_right_with_margins_on(self.ids.mmap_icons, 0.0, 0.0)
+            .hover_image(self.imgs.mmap_button_hover)
+            .press_image(self.imgs.mmap_button_press)
+            .set(self.ids.mmap_button_0, ui_widgets)
+            .was_clicked()
+        {
+            self.open_windows = match self.open_windows {
+                Windows::Settings => Windows::None,
+                _ => Windows::Settings,
+            };
+            self.bag_open = false;
+        };
+        // 2 Map
+        if Button::image(self.imgs.mmap_button)
+            .w_h(448.0 / 15.0, 448.0 / 15.0)
+            .down_from(self.ids.mmap_button_1, 0.0)
+            .hover_image(self.imgs.mmap_button_hover)
+            .press_image(self.imgs.mmap_button_press)
+            .set(self.ids.mmap_button_2, ui_widgets)
+            .was_clicked()
+        {
+            self.map_open = !self.map_open;
+            self.bag_open = false;
+        };
+
+        // Other Windows can only be accessed, when Settings are closed. Opening Settings will close all other Windows including the Bag.
+        // Opening the Map won't close the windows displayed before.
+
+        if match self.open_windows {
+            Windows::Settings => false,
+            _ => true,
+        } && self.map_open == false
+        {
+            //1 Social
+            if Button::image(self.imgs.mmap_button)
+                .w_h(448.0 / 15.0, 448.0 / 15.0)
+                .down_from(self.ids.mmap_button_0, 0.0)
+                .hover_image(self.imgs.mmap_button_hover)
+                .press_image(self.imgs.mmap_button_press)
+                .set(self.ids.mmap_button_1, ui_widgets)
                 .was_clicked()
             {
                 self.open_windows = match self.open_windows {
-                    Windows::Settings => Windows::None,
+                    Windows::Small(Small::Social) => Windows::None,
-                    _ => Windows::Settings,
+                    Windows::None | Windows::Small(_) => Windows::Small(Small::Social),
+                    Windows::CharacterAnd(small) => match small {
+                        Some(Small::Social) => Windows::CharacterAnd(None),
+                        _ => Windows::CharacterAnd(Some(Small::Social)),
+                    },
+                    Windows::Settings => Windows::Settings,
                 };
-                self.bag_open = false;
+            }
-            };
+
-            // 2 Map
+            //3 Spellbook
             if Button::image(self.imgs.mmap_button)
                 .w_h(448.0 / 15.0, 448.0 / 15.0)
-                .down_from(self.ids.mmap_button_1, 0.0)
+                .down_from(self.ids.mmap_button_2, 0.0)
                 .hover_image(self.imgs.mmap_button_hover)
                 .press_image(self.imgs.mmap_button_press)
-                .set(self.ids.mmap_button_2, ui_widgets)
+                .set(self.ids.mmap_button_3, ui_widgets)
                 .was_clicked()
             {
-                self.map_open = !self.map_open;
+                self.open_windows = match self.open_windows {
-                self.bag_open = false;
+                    Windows::Small(Small::Spellbook) => Windows::None,
-            };
+                    Windows::None | Windows::Small(_) => Windows::Small(Small::Spellbook),
-
+                    Windows::CharacterAnd(small) => match small {
-            // Other Windows can only be accessed, when Settings are closed. Opening Settings will close all other Windows including the Bag.
+                        Some(Small::Spellbook) => Windows::CharacterAnd(None),
-            // Opening the Map won't close the windows displayed before.
+                        _ => Windows::CharacterAnd(Some(Small::Spellbook)),
-
+                    },
-            if match self.open_windows {
+                    Windows::Settings => Windows::Settings,
-                Windows::Settings => false,
+                };
-                _ => true,
+            }
-            } && self.map_open == false
+            //4 Char-Window
+            if Button::image(self.imgs.mmap_button)
+                .w_h(448.0 / 15.0, 448.0 / 15.0)
+                .down_from(self.ids.mmap_button_3, 0.0)
+                .hover_image(self.imgs.mmap_button_hover)
+                .press_image(self.imgs.mmap_button_press)
+                .set(self.ids.mmap_button_4, ui_widgets)
+                .was_clicked()
             {
-                //1 Social
+                self.open_windows = match self.open_windows {
-                if Button::image(self.imgs.mmap_button)
+                    Windows::CharacterAnd(small) => match small {
-                    .w_h(448.0 / 15.0, 448.0 / 15.0)
+                        Some(small) => Windows::Small(small),
-                    .down_from(self.ids.mmap_button_0, 0.0)
+                        None => Windows::None,
-                    .hover_image(self.imgs.mmap_button_hover)
+                    },
-                    .press_image(self.imgs.mmap_button_press)
+                    Windows::Small(small) => Windows::CharacterAnd(Some(small)),
-                    .set(self.ids.mmap_button_1, ui_widgets)
+                    Windows::None => Windows::CharacterAnd(None),
-                    .was_clicked()
+                    Windows::Settings => Windows::Settings,
-                {
-                    self.open_windows = match self.open_windows {
-                        Windows::Small(Small::Social) => Windows::None,
-                        Windows::None | Windows::Small(_) => Windows::Small(Small::Social),
-                        Windows::CharacterAnd(small) => match small {
-                            Some(Small::Social) => Windows::CharacterAnd(None),
-                            _ => Windows::CharacterAnd(Some(Small::Social)),
-                        },
-                        Windows::Settings => Windows::Settings,
-                    };
-                }
-
-                //3 Spellbook
-                if Button::image(self.imgs.mmap_button)
-                    .w_h(448.0 / 15.0, 448.0 / 15.0)
-                    .down_from(self.ids.mmap_button_2, 0.0)
-                    .hover_image(self.imgs.mmap_button_hover)
-                    .press_image(self.imgs.mmap_button_press)
-                    .set(self.ids.mmap_button_3, ui_widgets)
-                    .was_clicked()
-                {
-                    self.open_windows = match self.open_windows {
-                        Windows::Small(Small::Spellbook) => Windows::None,
-                        Windows::None | Windows::Small(_) => Windows::Small(Small::Spellbook),
-                        Windows::CharacterAnd(small) => match small {
-                            Some(Small::Spellbook) => Windows::CharacterAnd(None),
-                            _ => Windows::CharacterAnd(Some(Small::Spellbook)),
-                        },
-                        Windows::Settings => Windows::Settings,
-                    };
-                }
-                //4 Char-Window
-                if Button::image(self.imgs.mmap_button)
-                    .w_h(448.0 / 15.0, 448.0 / 15.0)
-                    .down_from(self.ids.mmap_button_3, 0.0)
-                    .hover_image(self.imgs.mmap_button_hover)
-                    .press_image(self.imgs.mmap_button_press)
-                    .set(self.ids.mmap_button_4, ui_widgets)
-                    .was_clicked()
-                {
-                    self.open_windows = match self.open_windows {
-                        Windows::CharacterAnd(small) => match small {
-                            Some(small) => Windows::Small(small),
-                            None => Windows::None,
-                        },
-                        Windows::Small(small) => Windows::CharacterAnd(Some(small)),
-                        Windows::None => Windows::CharacterAnd(None),
-                        Windows::Settings => Windows::Settings,
-                    }
-                }
-                //5 Quest-Log
-                if Button::image(self.imgs.mmap_button)
-                    .w_h(448.0 / 15.0, 448.0 / 15.0)
-                    .down_from(self.ids.mmap_button_4, 0.0)
-                    .hover_image(self.imgs.mmap_button_hover)
-                    .press_image(self.imgs.mmap_button_press)
-                    .set(self.ids.mmap_button_5, ui_widgets)
-                    .was_clicked()
-                {
-                    self.open_windows = match self.open_windows {
-                        Windows::Small(Small::Questlog) => Windows::None,
-                        Windows::None | Windows::Small(_) => Windows::Small(Small::Questlog),
-                        Windows::CharacterAnd(small) => match small {
-                            Some(Small::Questlog) => Windows::CharacterAnd(None),
-                            _ => Windows::CharacterAnd(Some(Small::Questlog)),
-                        },
-                        Windows::Settings => Windows::Settings,
-                    };
                 }
             }
-
+            //5 Quest-Log
-            // Skillbar Module
+            if Button::image(self.imgs.mmap_button)
-
+                .w_h(448.0 / 15.0, 448.0 / 15.0)
-            // Experience-Bar
+                .down_from(self.ids.mmap_button_4, 0.0)
-            Image::new(self.imgs.xp_bar)
+                .hover_image(self.imgs.mmap_button_hover)
-                .w_h(2688.0 / 6.0, 116.0 / 6.0)
+                .press_image(self.imgs.mmap_button_press)
-                .mid_bottom_of(ui_widgets.window)
+                .set(self.ids.mmap_button_5, ui_widgets)
-                .set(self.ids.xp_bar, ui_widgets);
+                .was_clicked()
-
+            {
-            Rectangle::fill_with([406.0 * (self.xp_percentage), 5.0], XP_COLOR) // "W=406*[Exp. %]"
+                self.open_windows = match self.open_windows {
-                .top_left_with_margins_on(self.ids.xp_bar, 5.0, 21.0)
+                    Windows::Small(Small::Questlog) => Windows::None,
-                .set(self.ids.xp_bar_progress, ui_widgets);
+                    Windows::None | Windows::Small(_) => Windows::Small(Small::Questlog),
-
+                    Windows::CharacterAnd(small) => match small {
-            // Left Grid
+                        Some(Small::Questlog) => Windows::CharacterAnd(None),
-            Image::new(self.imgs.sb_grid)
+                        _ => Windows::CharacterAnd(Some(Small::Questlog)),
-                .w_h(2240.0 / 12.0, 448.0 / 12.0)
+                    },
-                .up_from(self.ids.xp_bar, 0.0)
+                    Windows::Settings => Windows::Settings,
-                .align_left_of(self.ids.xp_bar)
+                };
-                .set(self.ids.sb_grid_l, ui_widgets);
-
-            Image::new(self.imgs.sb_grid_bg)
-                .w_h(2240.0 / 12.0, 448.0 / 12.0)
-                .middle_of(self.ids.sb_grid_l)
-                .set(self.ids.sb_grid_bg_l, ui_widgets);
-
-            // Right Grid
-            Image::new(self.imgs.sb_grid)
-                .w_h(2240.0 / 12.0, 448.0 / 12.0)
-                .up_from(self.ids.xp_bar, 0.0)
-                .align_right_of(self.ids.xp_bar)
-                .set(self.ids.sb_grid_r, ui_widgets);
-
-            Image::new(self.imgs.sb_grid_bg)
-                .w_h(2240.0 / 12.0, 448.0 / 12.0)
-                .middle_of(self.ids.sb_grid_r)
-                .set(self.ids.sb_grid_bg_r, ui_widgets);
-
-            // Right and Left Click
-            Image::new(self.imgs.l_click)
-                .w_h(224.0 / 6.0, 320.0 / 6.0)
-                .right_from(self.ids.sb_grid_bg_l, 0.0)
-                .align_bottom_of(self.ids.sb_grid_bg_l)
-                .set(self.ids.l_click, ui_widgets);
-
-            Image::new(self.imgs.r_click)
-                .w_h(224.0 / 6.0, 320.0 / 6.0)
-                .left_from(self.ids.sb_grid_bg_r, 0.0)
-                .align_bottom_of(self.ids.sb_grid_bg_r)
-                .set(self.ids.r_click, ui_widgets);
-
-            // Health Bar
-            Image::new(self.imgs.health_bar)
-                .w_h(1120.0 / 6.0, 96.0 / 6.0)
-                .left_from(self.ids.l_click, 0.0)
-                .align_top_of(self.ids.l_click)
-                .set(self.ids.health_bar, ui_widgets);
-
-            // Filling
-            Rectangle::fill_with([182.0 * (self.hp_percentage), 6.0], HP_COLOR) // "W=182.0 * [Health. %]"
-                .top_right_with_margins_on(self.ids.health_bar, 5.0, 0.0)
-                .set(self.ids.health_bar_color, ui_widgets);
-
-            // Mana Bar
-            Image::new(self.imgs.mana_bar)
-                .w_h(1120.0 / 6.0, 96.0 / 6.0)
-                .right_from(self.ids.r_click, 0.0)
-                .align_top_of(self.ids.r_click)
-                .set(self.ids.mana_bar, ui_widgets);
-
-            // Filling
-            Rectangle::fill_with([182.0 * (self.mana_percentage), 6.0], MANA_COLOR) // "W=182.0 * [Mana. %]"
-                .top_left_with_margins_on(self.ids.mana_bar, 5.0, 0.0)
-                .set(self.ids.mana_bar_color, ui_widgets);
-
-            // Buffs/Debuffs
-
-            // Buffs
-
-            // Debuffs
-
-            // Level Display
-
-            // Insert actual Level here
-            Text::new("1")
-                .left_from(self.ids.xp_bar, -15.0)
-                .font_size(10)
-                .color(TEXT_COLOR)
-                .set(self.ids.level_text, ui_widgets);
-
-            // Insert next Level here
-            Text::new("2")
-                .right_from(self.ids.xp_bar, -15.0)
-                .font_size(10)
-                .color(TEXT_COLOR)
-                .set(self.ids.next_level_text, ui_widgets);
-
-            // Bag contents
-            if self.bag_open {
-                // Contents
-                Image::new(self.imgs.bag_contents)
-                    .w_h(307.0, 545.0)
-                    .bottom_right_with_margins_on(ui_widgets.window, 90.0, 5.0)
-                    .set(self.ids.bag_contents, ui_widgets);
-
-                // Alignment for Grid
-                Rectangle::fill_with([246.0, 465.0], color::TRANSPARENT)
-                    .top_left_with_margins_on(self.ids.bag_contents, 27.0, 23.0)
-                    .scroll_kids()
-                    .scroll_kids_vertically()
-                    .set(self.ids.inv_alignment, ui_widgets);
-                // Grid
-                Image::new(self.imgs.inv_grid)
-                    .w_h(232.0, 1104.0)
-                    .mid_top_with_margin_on(self.ids.inv_alignment, 0.0)
-                    .set(self.ids.inv_grid, ui_widgets);
-                Scrollbar::y_axis(self.ids.inv_alignment)
-                    .thickness(5.0)
-                    .rgba(0.86, 0.86, 0.86, 0.1)
-                    .set(self.ids.inv_scrollbar, ui_widgets);
-
-                // X-button
-                if Button::image(self.imgs.close_button)
-                    .w_h(244.0 * 0.22 / 3.0, 244.0 * 0.22 / 3.0)
-                    .hover_image(self.imgs.close_button_hover)
-                    .press_image(self.imgs.close_button_press)
-                    .top_right_with_margins_on(self.ids.bag_contents, 5.0, 17.0)
-                    .set(self.ids.bag_close, ui_widgets)
-                    .was_clicked()
-                {
-                    self.bag_open = false;
-                }
-
-                if self.inventory_space > 0 {
-                    // First Slot
-                    Button::image(self.imgs.inv_slot)
-                        .top_left_with_margins_on(self.ids.inv_grid, 5.0, 5.0)
-                        .w_h(40.0, 40.0)
-                        .set(self.ids.inv_slot_0, ui_widgets);
-                }
-                // if self.ids.inv_slot.len() < self.inventory_space {
-                //    self.ids.inv_slot.resize(self.inventory_space, &mut ui_widgets.widget_id_generator());
-                //}
-
-                //let num = self.ids.inv_slot.len();
-                //println!("self.ids.inv_slot.len(): {:?}", num);
-                //if num > 0 {
-                //Button::image(self.imgs.inv_slot)
-                //.top_left_with_margins_on(self.ids.inv_grid, 5.0, 5.0)
-                //.w_h(40.0, 40.0)
-                //.set(self.ids.inv_slot[0], ui_widgets);
-                //}
-                //for i in 1..5 {
-                //Button::image(self.imgs.inv_slot)
-                //.right(10.0)
-                //.label(&format!("{}", i + 1))
-                //.label_color(TEXT_COLOR)
-                //.label_font_size(5)
-                //.set(self.ids.inv_slot[i], ui_widgets);}
             }
         }
+
+        // Skillbar Module
+
+        // Experience-Bar
+        Image::new(self.imgs.xp_bar)
+            .w_h(2688.0 / 6.0, 116.0 / 6.0)
+            .mid_bottom_of(ui_widgets.window)
+            .set(self.ids.xp_bar, ui_widgets);
+
+        Rectangle::fill_with([406.0 * (self.xp_percentage), 5.0], XP_COLOR) // "W=406*[Exp. %]"
+            .top_left_with_margins_on(self.ids.xp_bar, 5.0, 21.0)
+            .set(self.ids.xp_bar_progress, ui_widgets);
+
+        // Left Grid
+        Image::new(self.imgs.sb_grid)
+            .w_h(2240.0 / 12.0, 448.0 / 12.0)
+            .up_from(self.ids.xp_bar, 0.0)
+            .align_left_of(self.ids.xp_bar)
+            .set(self.ids.sb_grid_l, ui_widgets);
+
+        Image::new(self.imgs.sb_grid_bg)
+            .w_h(2240.0 / 12.0, 448.0 / 12.0)
+            .middle_of(self.ids.sb_grid_l)
+            .set(self.ids.sb_grid_bg_l, ui_widgets);
+
+        // Right Grid
+        Image::new(self.imgs.sb_grid)
+            .w_h(2240.0 / 12.0, 448.0 / 12.0)
+            .up_from(self.ids.xp_bar, 0.0)
+            .align_right_of(self.ids.xp_bar)
+            .set(self.ids.sb_grid_r, ui_widgets);
+
+        Image::new(self.imgs.sb_grid_bg)
+            .w_h(2240.0 / 12.0, 448.0 / 12.0)
+            .middle_of(self.ids.sb_grid_r)
+            .set(self.ids.sb_grid_bg_r, ui_widgets);
+
+        // Right and Left Click
+        Image::new(self.imgs.l_click)
+            .w_h(224.0 / 6.0, 320.0 / 6.0)
+            .right_from(self.ids.sb_grid_bg_l, 0.0)
+            .align_bottom_of(self.ids.sb_grid_bg_l)
+            .set(self.ids.l_click, ui_widgets);
+
+        Image::new(self.imgs.r_click)
+            .w_h(224.0 / 6.0, 320.0 / 6.0)
+            .left_from(self.ids.sb_grid_bg_r, 0.0)
+            .align_bottom_of(self.ids.sb_grid_bg_r)
+            .set(self.ids.r_click, ui_widgets);
+
+        // Health Bar
+        Image::new(self.imgs.health_bar)
+            .w_h(1120.0 / 6.0, 96.0 / 6.0)
+            .left_from(self.ids.l_click, 0.0)
+            .align_top_of(self.ids.l_click)
+            .set(self.ids.health_bar, ui_widgets);
+
+        // Filling
+        Rectangle::fill_with([182.0 * (self.hp_percentage), 6.0], HP_COLOR) // "W=182.0 * [Health. %]"
+            .top_right_with_margins_on(self.ids.health_bar, 5.0, 0.0)
+            .set(self.ids.health_bar_color, ui_widgets);
+
+        // Mana Bar
+        Image::new(self.imgs.mana_bar)
+            .w_h(1120.0 / 6.0, 96.0 / 6.0)
+            .right_from(self.ids.r_click, 0.0)
+            .align_top_of(self.ids.r_click)
+            .set(self.ids.mana_bar, ui_widgets);
+
+        // Filling
+        Rectangle::fill_with([182.0 * (self.mana_percentage), 6.0], MANA_COLOR) // "W=182.0 * [Mana. %]"
+            .top_left_with_margins_on(self.ids.mana_bar, 5.0, 0.0)
+            .set(self.ids.mana_bar_color, ui_widgets);
+
+        // Buffs/Debuffs
+
+        // Buffs
+
+        // Debuffs
+
+        // Level Display
+
+        // Insert actual Level here
+        Text::new("1")
+            .left_from(self.ids.xp_bar, -15.0)
+            .font_size(10)
+            .color(TEXT_COLOR)
+            .set(self.ids.level_text, ui_widgets);
+
+        // Insert next Level here
+        Text::new("2")
+            .right_from(self.ids.xp_bar, -15.0)
+            .font_size(10)
+            .color(TEXT_COLOR)
+            .set(self.ids.next_level_text, ui_widgets);
+
+        // Bag contents
+        if self.bag_open {
+            // Contents
+            Image::new(self.imgs.bag_contents)
+                .w_h(307.0, 545.0)
+                .bottom_right_with_margins_on(ui_widgets.window, 90.0, 5.0)
+                .set(self.ids.bag_contents, ui_widgets);
+
+            // Alignment for Grid
+            Rectangle::fill_with([246.0, 465.0], color::TRANSPARENT)
+                .top_left_with_margins_on(self.ids.bag_contents, 27.0, 23.0)
+                .scroll_kids()
+                .scroll_kids_vertically()
+                .set(self.ids.inv_alignment, ui_widgets);
+            // Grid
+            Image::new(self.imgs.inv_grid)
+                .w_h(232.0, 1104.0)
+                .mid_top_with_margin_on(self.ids.inv_alignment, 0.0)
+                .set(self.ids.inv_grid, ui_widgets);
+            Scrollbar::y_axis(self.ids.inv_alignment)
+                .thickness(5.0)
+                .rgba(0.86, 0.86, 0.86, 0.1)
+                .set(self.ids.inv_scrollbar, ui_widgets);
+
+            // X-button
+            if Button::image(self.imgs.close_button)
+                .w_h(244.0 * 0.22 / 3.0, 244.0 * 0.22 / 3.0)
+                .hover_image(self.imgs.close_button_hover)
+                .press_image(self.imgs.close_button_press)
+                .top_right_with_margins_on(self.ids.bag_contents, 5.0, 17.0)
+                .set(self.ids.bag_close, ui_widgets)
+                .was_clicked()
+            {
+                self.bag_open = false;
+            }
+
+            if self.inventory_space > 0 {
+                // First Slot
+                Button::image(self.imgs.inv_slot)
+                    .top_left_with_margins_on(self.ids.inv_grid, 5.0, 5.0)
+                    .w_h(40.0, 40.0)
+                    .set(self.ids.inv_slot_0, ui_widgets);
+            }
+            // if self.ids.inv_slot.len() < self.inventory_space {
+            //    self.ids.inv_slot.resize(self.inventory_space, &mut ui_widgets.widget_id_generator());
+            //}
+
+            //let num = self.ids.inv_slot.len();
+            //println!("self.ids.inv_slot.len(): {:?}", num);
+            //if num > 0 {
+            //Button::image(self.imgs.inv_slot)
+            //.top_left_with_margins_on(self.ids.inv_grid, 5.0, 5.0)
+            //.w_h(40.0, 40.0)
+            //.set(self.ids.inv_slot[0], ui_widgets);
+            //}
+            //for i in 1..5 {
+            //Button::image(self.imgs.inv_slot)
+            //.right(10.0)
+            //.label(&format!("{}", i + 1))
+            //.label_color(TEXT_COLOR)
+            //.label_font_size(5)
+            //.set(self.ids.inv_slot[i], ui_widgets);}
+        }
+
         // Bag
         if !self.map_open {
             self.bag_open = ToggleButton::new(self.bag_open, self.imgs.bag, self.imgs.bag_open)
@@ -1456,13 +1455,17 @@ impl Hud {
         self.chat.new_message(msg);
     }
 
-    pub fn toggle_menu(&mut self) {
+    fn toggle_menu(&mut self) {
         self.menu_open = !self.menu_open;
     }
-    pub fn toggle_bag(&mut self) {
+    fn toggle_bag(&mut self) {
         self.bag_open = !self.bag_open
     }
-    pub fn toggle_questlog(&mut self) {
+    fn toggle_map(&mut self) {
+        self.map_open = !self.map_open;
+        self.bag_open = false;
+    }
+    fn toggle_questlog(&mut self) {
         self.open_windows = match self.open_windows {
             Windows::Small(Small::Questlog) => Windows::None,
             Windows::None | Windows::Small(_) => Windows::Small(Small::Questlog),
@@ -1473,11 +1476,7 @@ impl Hud {
             Windows::Settings => Windows::Settings,
         };
     }
-    pub fn toggle_map(&mut self) {
+    fn toggle_charwindow(&mut self) {
-        self.map_open = !self.map_open;
-        self.bag_open = false;
-    }
-    pub fn toggle_charwindow(&mut self) {
         self.open_windows = match self.open_windows {
             Windows::CharacterAnd(small) => match small {
                 Some(small) => Windows::Small(small),
@@ -1488,7 +1487,7 @@ impl Hud {
             Windows::Settings => Windows::Settings,
         }
     }
-    pub fn toggle_social(&mut self) {
+    fn toggle_social(&mut self) {
         self.open_windows = match self.open_windows {
             Windows::Small(Small::Social) => Windows::None,
             Windows::None | Windows::Small(_) => Windows::Small(Small::Social),
@@ -1499,7 +1498,7 @@ impl Hud {
             Windows::Settings => Windows::Settings,
         };
     }
-    pub fn toggle_spellbook(&mut self) {
+    fn toggle_spellbook(&mut self) {
         self.open_windows = match self.open_windows {
             Windows::Small(Small::Spellbook) => Windows::None,
             Windows::None | Windows::Small(_) => Windows::Small(Small::Spellbook),
@@ -1510,22 +1509,36 @@ impl Hud {
             Windows::Settings => Windows::Settings,
         };
     }
-    pub fn toggle_settings(&mut self) {
+    fn toggle_settings(&mut self) {
         self.open_windows = match self.open_windows {
             Windows::Settings => Windows::None,
             _ => Windows::Settings,
         };
         self.bag_open = false;
     }
-    pub fn toggle_help(&mut self) {
+    fn toggle_help(&mut self) {
         self.show_help = !self.show_help
     }
-    pub fn toggle_ui(&mut self) {
+    fn toggle_ui(&mut self) {
         self.show_ui = !self.show_ui;
     }
 
-    pub fn update_grab(&mut self, cursor_grabbed: bool) {
+    fn toggle_windows(&mut self) {
-        self.cursor_grabbed = cursor_grabbed;
+        if self.bag_open
+            || self.menu_open
+            || self.map_open
+            || match self.open_windows {
+                Windows::None => false,
+                _ => true,
+            }
+        {
+            self.bag_open = false;
+            self.menu_open = false;
+            self.map_open = false;
+            self.open_windows = Windows::None;
+        } else {
+            self.menu_open = true;
+        }
     }
 
     fn typing(&self) -> bool {
@@ -1535,17 +1548,23 @@ impl Hud {
         }
     }
 
-    pub fn handle_event(&mut self, event: WinEvent) -> bool {
+    pub fn handle_event(&mut self, event: WinEvent, global_state: &mut GlobalState) -> bool {
+        let cursor_grabbed = global_state.window.is_cursor_grabbed();
         match event {
             WinEvent::Ui(event) => {
-                if (self.typing() && event.is_keyboard())
+                if (self.typing() && event.is_keyboard() && self.show_ui)
-                    || !(self.cursor_grabbed && event.is_keyboard_or_mouse())
+                    || !(cursor_grabbed && event.is_keyboard_or_mouse())
                 {
                     self.ui.handle_event(event);
                 }
                 true
             }
-            WinEvent::Zoom(_) => !self.cursor_grabbed && !self.ui.no_widget_capturing_mouse(),
+            WinEvent::KeyDown(Key::ToggleInterface) => {
+                self.toggle_ui();
+                true
+            }
+            _ if !self.show_ui => false,
+            WinEvent::Zoom(_) => !cursor_grabbed && !self.ui.no_widget_capturing_mouse(),
             WinEvent::KeyDown(Key::Enter) => {
                 self.ui.focus_widget(if self.typing() {
                     None
@@ -1596,10 +1615,6 @@ impl Hud {
                     self.toggle_help();
                     true
                 }
-                Key::Interface => {
-                    self.toggle_ui();
-                    true
-                }
                 _ => false,
             },
             WinEvent::KeyDown(key) | WinEvent::KeyUp(key) => match key {
@@ -1620,21 +1635,4 @@ impl Hud {
     pub fn render(&self, renderer: &mut Renderer) {
         self.ui.render(renderer);
     }
-    pub fn toggle_windows(&mut self) {
-        if self.bag_open
-            || self.menu_open
-            || self.map_open
-            || match self.open_windows {
-                Windows::None => false,
-                _ => true,
-            }
-        {
-            self.bag_open = false;
-            self.menu_open = false;
-            self.map_open = false;
-            self.open_windows = Windows::None;
-        } else {
-            self.menu_open = true;
-        }
-    }
 }

voxygen/src/menu/char_selection/mod.rs

@@ -67,7 +67,7 @@ impl PlayState for CharSelectionState {
                         global_state.singleplayer = None;
                         return PlayStateResult::Pop;
                     },
-                    ui::Event::Play => return PlayStateResult::Push(
+                    ui::Event::Play => return PlayStateResult::Switch(
                         Box::new(SessionState::new(&mut global_state.window, self.client.clone()))
                     ),
                 }

voxygen/src/menu/char_selection/ui.rs

@@ -377,20 +377,16 @@ impl CharSelectionUi {
         // Load images
         let imgs = Imgs::new(&mut ui, window.renderer_mut());
         // Load fonts
-        let font_opensans = ui.new_font(
+        let load_font = |filename, ui: &mut Ui| {
-            conrod_core::text::font::from_file(concat!(
+            let fullpath: String = ["/voxygen/font", filename].concat();
-                env!("CARGO_MANIFEST_DIR"),
+             ui.new_font(conrod_core::text::Font::from_bytes(
-                "/../assets/voxygen/font/OpenSans-Regular.ttf"
+                 assets::load(fullpath.as_str())
-            ))
+                .expect("Error loading file")
-            .unwrap(),
+            ).unwrap())
-        );
+        };
-        let font_metamorph = ui.new_font(
+        let font_opensans = load_font("/OpenSans-Regular.ttf", &mut ui);
-            conrod_core::text::font::from_file(concat!(
+        let font_metamorph = load_font("/Metamorphous-Regular.ttf", &mut ui);
-                env!("CARGO_MANIFEST_DIR"),
+        
-                "/../assets/voxygen/font/Metamorphous-Regular.ttf"
-            ))
-            .unwrap(),
-        );
         Self {
             ui,
             imgs,

voxygen/src/menu/main/ui.rs

@@ -68,7 +68,7 @@ struct Imgs {
 }
 impl Imgs {
     fn new(ui: &mut Ui, renderer: &mut Renderer) -> Imgs {
-        let mut load_img = |filename, ui: &mut Ui| {
+        let load_img = |filename, ui: &mut Ui| {
             let fullpath: String = ["/voxygen/", filename].concat();
             let image = image::load_from_memory(
                 assets::load(fullpath.as_str())
@@ -78,7 +78,7 @@ impl Imgs {
             .unwrap();
             ui.new_graphic(ui::Graphic::Image(image))
         };
-        let mut load_vox = |filename, ui: &mut Ui| {
+        let load_vox = |filename, ui: &mut Ui| {
             let fullpath: String = ["/voxygen/", filename].concat();
             let dot_vox = dot_vox::load_bytes(
                 assets::load(fullpath.as_str())
@@ -146,20 +146,16 @@ impl MainMenuUi {
         // Load images
         let imgs = Imgs::new(&mut ui, window.renderer_mut());
         // Load fonts
-        let font_opensans = ui.new_font(
+        let load_font = |filename, ui: &mut Ui| {
-            conrod_core::text::font::from_file(concat!(
+            let fullpath: String = ["/voxygen/font", filename].concat();
-                env!("CARGO_MANIFEST_DIR"),
+             ui.new_font(conrod_core::text::Font::from_bytes(
-                "/../assets/voxygen/font/OpenSans-Regular.ttf"
+                 assets::load(fullpath.as_str())
-            ))
+                .expect("Error loading file")
-            .unwrap(),
+            ).unwrap())
-        );
+        };
-        let font_metamorph = ui.new_font(
+        let font_opensans = load_font("/OpenSans-Regular.ttf", &mut ui);
-            conrod_core::text::font::from_file(concat!(
+        let font_metamorph = load_font("/Metamorphous-Regular.ttf", &mut ui);
-                env!("CARGO_MANIFEST_DIR"),
+
-                "/../assets/voxygen/font/Metamorphous-Regular.ttf"
-            ))
-            .unwrap(),
-        );
         Self {
             ui,
             imgs,

voxygen/src/scene/figure.rs

@@ -8,7 +8,8 @@ use client::Client;
 use common::{
     comp,
     figure::Segment,
-    msg
+    msg,
+    assets,
 };
 use crate::{
     Error,
@@ -43,7 +44,12 @@ impl Figures {
     pub fn new(renderer: &mut Renderer) -> Self {
         // TODO: Make a proper asset loading system
         fn load_segment(filename: &'static str) -> Segment {
-            Segment::from(dot_vox::load(&(concat!(env!("CARGO_MANIFEST_DIR"), "/../assets/voxygen/voxel/").to_string() + filename)).unwrap())
+            let fullpath: String = ["/voxygen/voxel/", filename].concat();
+            Segment::from(dot_vox::load_bytes(
+                assets::load(fullpath.as_str())
+                    .expect("Error loading file")
+                    .as_slice(),
+            ).unwrap())
         }
 
         let bone_meshes = [

voxygen/src/session.rs

@@ -120,8 +120,8 @@ impl PlayState for SessionState {
             // Handle window events
             for event in global_state.window.fetch_events() {
 
-                // Pass all  events to the ui first
+                // Pass all events to the ui first
-                if self.hud.handle_event(event.clone()) {
+                if self.hud.handle_event(event.clone(), global_state) {
                     continue;
                 }
                 let _handled = match event {
@@ -134,8 +134,6 @@ impl PlayState for SessionState {
                         global_state
                             .window
                             .grab_cursor(!global_state.window.is_cursor_grabbed());
-                        self.hud
-                            .update_grab(global_state.window.is_cursor_grabbed());
                     }
                     // Movement Key Pressed
                     Event::KeyDown(Key::MoveForward) => self.key_state.up = true,

voxygen/src/settings.rs

@@ -34,7 +34,7 @@ pub struct ControlSettings {
     pub spellbook: VirtualKeyCode,
     pub settings: VirtualKeyCode,
     pub help: VirtualKeyCode,
-    pub interface: VirtualKeyCode,
+    pub toggle_interface: VirtualKeyCode,
 }
 
 impl Default for Settings {
@@ -56,7 +56,7 @@ impl Default for Settings {
                 spellbook: VirtualKeyCode::P,
                 settings: VirtualKeyCode::N,
                 help: VirtualKeyCode::F1,
-                interface: VirtualKeyCode::F2,
+                toggle_interface: VirtualKeyCode::F2,
             },
         }
     }

voxygen/src/window.rs

@@ -51,7 +51,7 @@ impl Window {
         key_map.insert(settings.controls.spellbook, Key::Spellbook);
         key_map.insert(settings.controls.settings, Key::Settings);
         key_map.insert(settings.controls.help, Key::Help);
-        key_map.insert(settings.controls.interface, Key::Interface);
+        key_map.insert(settings.controls.toggle_interface, Key::ToggleInterface);
 
         let tmp = Ok(Self {
             events_loop,
@@ -180,7 +180,7 @@ pub enum Key {
     Social,
     Spellbook,
     Settings,
-    Interface,
+    ToggleInterface,
     Help,
 }