Bag window expands with available space

voxygen/src/hud/bag.rs

@@ -3,13 +3,15 @@ use conrod_core::{
     color,
     position::Relative,
     widget::{self, Button, Image, Rectangle, Scrollbar},
-    widget_ids, Colorable, Labelable, Positionable, Sizeable, Widget, WidgetCommon,
+    widget_ids, Colorable, Color, Labelable, Positionable, Sizeable, Widget, WidgetCommon,
 };
 
 widget_ids! {
     struct Ids {
         bag_close,
-        bag_contents,
+        bag_top,
+        bag_mid,
+        bag_bot,
         inv_alignment,
         inv_grid_1,
         inv_grid_2,
@@ -34,7 +36,7 @@ pub struct Bag<'a> {
 impl<'a> Bag<'a> {
     pub fn new(inventory_space: usize, imgs: &'a Imgs, fonts: &'a Fonts) -> Self {
         Self {
-            inventory_space,
+            inventory_space,            
             imgs,
             _fonts,
             common: widget::CommonBuilder::default(),
@@ -46,6 +48,8 @@ pub struct State {
     ids: Ids,
 }
 
+const BAG_SCALE: f64 = 4.0;
+
 pub enum Event {
     Close,
 }
@@ -68,31 +72,43 @@ impl<'a> Widget for Bag<'a> {
     fn update(self, args: widget::UpdateArgs<Self>) -> Self::Event {
         let widget::UpdateArgs { state, ui, .. } = args;
 
-        // Contents
-        Image::new(self.imgs.bag_contents)
-            .w_h(68.0 * 4.0, 123.0 * 4.0)
+        // Bag parts
+        Image::new(self.imgs.bag_bot)
+            .w_h(61.0 * BAG_SCALE, 9.0 * BAG_SCALE)
             .bottom_right_with_margins_on(ui.window, 60.0, 5.0)
-            .set(state.ids.bag_contents, ui);
+            .set(state.ids.bag_bot, ui);
+        Image::new(self.imgs.bag_mid)
+            .w_h(61.0 * BAG_SCALE, ((self.inventory_space + 4) / 5) as f64 * 44.0)
+            .up_from(state.ids.bag_bot, 0.0)
+            .set(state.ids.bag_mid, ui);
+        Image::new(self.imgs.bag_top)
+            .w_h(61.0 * BAG_SCALE, 9.0 * BAG_SCALE)
+            .up_from(state.ids.bag_mid, 0.0)
+            .set(state.ids.bag_top, ui);    
 
         // Alignment for Grid
-        Rectangle::fill_with([58.0 * 4.0 - 5.0, 100.0 * 4.0], color::TRANSPARENT)
-            .top_left_with_margins_on(state.ids.bag_contents, 11.0 * 4.0, 5.0 * 4.0)
+        Rectangle::fill_with([54.0 * BAG_SCALE, ((self.inventory_space + 4) / 5) as f64 * 44.0], color::TRANSPARENT)
+            .top_left_with_margins_on(state.ids.bag_top, 9.0 * BAG_SCALE, 3.0 * BAG_SCALE)
             .scroll_kids()
             .scroll_kids_vertically()
             .set(state.ids.inv_alignment, ui);
+
+
         // Grid
-        Image::new(self.imgs.inv_grid)
-            .w_h(58.0 * 4.0, 111.0 * 4.0)
+        /*Image::new(self.imgs.inv_grid)
+            .w_h(61.0 * BAG_SCALE, 111.0 * BAG_SCALE)
+            .color(Some(Color::Rgba(1.0, 1.0, 1.0, 0.5)))
             .mid_top_with_margin_on(state.ids.inv_alignment, 0.0)
             .set(state.ids.inv_grid_1, ui);
         Image::new(self.imgs.inv_grid)
-            .w_h(58.0 * 4.0, 111.0 * 4.0)
-            .mid_top_with_margin_on(state.ids.inv_alignment, 110.0 * 4.0)
+            .w_h(61.0 * BAG_SCALE, 111.0 * BAG_SCALE)
+            .color(Some(Color::Rgba(1.0, 1.0, 1.0, 0.5)))
+            .mid_top_with_margin_on(state.ids.inv_alignment, 110.0 * BAG_SCALE)
             .set(state.ids.inv_grid_2, ui);
         Scrollbar::y_axis(state.ids.inv_alignment)
             .thickness(5.0)
             .rgba(0.33, 0.33, 0.33, 1.0)
-            .set(state.ids.inv_scrollbar, ui);
+            .set(state.ids.inv_scrollbar, ui);*/
         // Create available inventory slot widgets
         if state.ids.inv_slot.len() < self.inventory_space {
             state.update(|s| {
@@ -107,18 +123,18 @@ impl<'a> Widget for Bag<'a> {
             let y = i / 5;
             Button::image(self.imgs.inv_slot)
                 .top_left_with_margins_on(
-                    state.ids.inv_grid_1,
+                    state.ids.inv_alignment,
                     4.0 + y as f64 * (40.0 + 4.0),
                     4.0 + x as f64 * (40.0 + 4.0),
                 ) // conrod uses a (y,x) format for placing...
-                .parent(state.ids.inv_grid_2) // Avoids the background overlapping available slots
+                .parent(state.ids.bag_mid) // Avoids the background overlapping available slots
                 .w_h(40.0, 40.0)
                 .set(state.ids.inv_slot[i], ui);
         }
         // Test Item
         if self.inventory_space > 0 {
             Button::image(self.imgs.potion_red) // TODO: Insert variable image depending on the item displayed in that slot
-                .w_h(4.0 * 4.5, 7.0 * 4.5) // TODO: Fix height and scale width correctly to that to avoid a stretched item image
+                .w_h(4.0 * 4.4, 7.0 * 4.4) // TODO: Fix height and scale width correctly to that to avoid a stretched item image
                 .middle_of(state.ids.inv_slot[0]) // TODO: Items need to be assigned to a certain slot and then placed like in this example
                 .label("5x") // TODO: Quantity goes here...
                 .label_font_id(self.fonts.opensans)
@@ -133,7 +149,7 @@ impl<'a> Widget for Bag<'a> {
             .w_h(28.0, 28.0)
             .hover_image(self.imgs.close_button_hover)
             .press_image(self.imgs.close_button_press)
-            .top_right_with_margins_on(state.ids.bag_contents, 0.0, 0.0)
+            .top_right_with_margins_on(state.ids.bag_top, 0.0, 0.0)
             .set(state.ids.bag_close, ui)
             .was_clicked()
         {

voxygen/src/hud/img_ids.rs

@@ -9,6 +9,9 @@ image_ids! {
         inv_grid: "voxygen/element/frames/inv_grid.vox",
         inv_slot: "voxygen/element/buttons/inv_slot.vox",
         grid_inv: "voxygen/element/buttons/grid_inv.vox",
+        bag_top: "voxygen/element/bag/top.vox",
+        bag_mid: "voxygen/element/bag/mid.vox",
+        bag_bot: "voxygen/element/bag/bot.vox",
 
         // Window Parts
         window_3: "voxygen/element/frames/window_3.vox",

voxygen/src/hud/mod.rs

@@ -256,7 +256,7 @@ pub struct Hud {
     imgs: Imgs,
     fonts: Fonts,
     new_messages: VecDeque<String>,
-    inventory_space: usize,
+    inventory_space: usize,       
     show: Show,
     to_focus: Option<Option<widget::Id>>,
     force_ungrab: bool,
@@ -282,7 +282,7 @@ impl Hud {
             fonts,
             ids,
             new_messages: VecDeque::new(),
-            inventory_space: 0,
+            inventory_space: 8,
             show: Show {
                 help: false,
                 debug: true,
@@ -479,7 +479,7 @@ impl Hud {
             if Button::image(self.imgs.button)
                 .w_h(100.0, 100.0)
                 .middle_of(ui_widgets.window)
-                .label("Add 10 Spaces")
+                .label("Add 1 Space")
                 .label_font_size(20)
                 .label_color(TEXT_COLOR)
                 .hover_image(self.imgs.button_hover)
@@ -487,8 +487,8 @@ impl Hud {
                 .set(self.ids.bag_space_add, ui_widgets)
                 .was_clicked()
             {
-                if self.inventory_space < 91 {
-                    self.inventory_space += 10;
+                if self.inventory_space < 100 {
+                    self.inventory_space += 1;
                 } else {
                 }
             };