diff --git a/assets/voxygen/element/ui/bag/inv_bg_bag.png b/assets/voxygen/element/ui/bag/inv_bg_bag.png
index bf61ba8614..d176e19af5 100644
Binary files a/assets/voxygen/element/ui/bag/inv_bg_bag.png and b/assets/voxygen/element/ui/bag/inv_bg_bag.png differ
diff --git a/assets/voxygen/element/ui/bag/inv_frame_bag.png b/assets/voxygen/element/ui/bag/inv_frame_bag.png
index 4aad53c35c..01982a2f90 100644
Binary files a/assets/voxygen/element/ui/bag/inv_frame_bag.png and b/assets/voxygen/element/ui/bag/inv_frame_bag.png differ
diff --git a/assets/voxygen/element/ui/bag/inv_middle_bg_bag.png b/assets/voxygen/element/ui/bag/inv_middle_bg_bag.png
new file mode 100644
index 0000000000..0a45e8b648
Binary files /dev/null and b/assets/voxygen/element/ui/bag/inv_middle_bg_bag.png differ
diff --git a/assets/voxygen/element/ui/bag/inv_middle_frame.png b/assets/voxygen/element/ui/bag/inv_middle_frame.png
new file mode 100644
index 0000000000..772c3b56de
Binary files /dev/null and b/assets/voxygen/element/ui/bag/inv_middle_frame.png differ
diff --git a/assets/voxygen/element/ui/bag/player_inv_bg_bag.png b/assets/voxygen/element/ui/bag/player_inv_bg_bag.png
new file mode 100644
index 0000000000..bf61ba8614
Binary files /dev/null and b/assets/voxygen/element/ui/bag/player_inv_bg_bag.png differ
diff --git a/assets/voxygen/element/ui/bag/player_inv_frame_bag.png b/assets/voxygen/element/ui/bag/player_inv_frame_bag.png
new file mode 100644
index 0000000000..4aad53c35c
Binary files /dev/null and b/assets/voxygen/element/ui/bag/player_inv_frame_bag.png differ
diff --git a/assets/voxygen/element/ui/bag/second_phase_scrollbar_bg.png b/assets/voxygen/element/ui/bag/second_phase_scrollbar_bg.png
new file mode 100644
index 0000000000..466b13b451
Binary files /dev/null and b/assets/voxygen/element/ui/bag/second_phase_scrollbar_bg.png differ
diff --git a/assets/voxygen/i18n/en/hud/trade.ron b/assets/voxygen/i18n/en/hud/trade.ron
index 5a855ed754..8528c3a5ca 100644
--- a/assets/voxygen/i18n/en/hud/trade.ron
+++ b/assets/voxygen/i18n/en/hud/trade.ron
@@ -3,7 +3,7 @@
/// Localization for "global" English
(
string_map: {
- "hud.trade.trade_window": "Trade window",
+ "hud.trade.trade_window": "Trade",
"hud.trade.phase1_description": "Drag the items you want to trade\n into the corresponding area.",
"hud.trade.phase2_description": "The trade is now locked to give you\n time to review it.",
/// Phase3 should only be visible for a few milliseconds if everything is working properly, but is included for completeness
@@ -21,6 +21,8 @@
"hud.trade.coin": "coin(s)",
"hud.trade.tooltip_hint_1": "<Shift-Click to Add/Remove from trade.>",
"hud.trade.tooltip_hint_2": "<Ctrl-Click to Auto-Balance with this.>",
+ "hud.trade.your_offer": "Your offer",
+ "hud.trade.their_offer": "Their offer",
},
diff --git a/voxygen/src/hud/bag.rs b/voxygen/src/hud/bag.rs
index a3c676dc33..dcab283ce1 100644
--- a/voxygen/src/hud/bag.rs
+++ b/voxygen/src/hud/bag.rs
@@ -56,7 +56,9 @@ widget_ids! {
inventory_title,
inventory_title_bg,
scrollbar_bg,
+ second_phase_scrollbar_bg,
scrollbar_slots,
+ left_scrollbar_slots,
}
}
@@ -131,26 +133,55 @@ impl<'a> InventoryScroller<'a> {
}
fn background(&mut self, ui: &mut UiCell<'_>) {
+ let bg_id = if !self.on_right {
+ self.imgs.inv_bg_bag
+ } else {
+ self.imgs.player_inv_bg_bag
+ };
+
+ let img_id = if !self.on_right {
+ self.imgs.inv_frame_bag
+ } else {
+ self.imgs.player_inv_frame_bag
+ };
+
let mut bg = Image::new(if self.show_stats {
self.imgs.inv_bg_stats
} else if self.show_bag_inv {
- self.imgs.inv_bg_bag
+ bg_id
} else {
self.imgs.inv_bg_armor
})
- .w_h(424.0, 708.0);
+ .w_h(
+ 424.0,
+ if self.show_bag_inv && !self.on_right {
+ 548.0
+ } else {
+ 708.0
+ },
+ );
+
if self.on_right {
- bg = bg.bottom_right_with_margins_on(ui.window, 60.0, 5.0);
+ bg = bg.bottom_right_with_margins_on(ui.window, 70.0, 5.0);
} else {
- bg = bg.bottom_left_with_margins_on(ui.window, 60.0, 5.0);
+ bg = bg.bottom_left_with_margins_on(ui.window, 230.0, 5.0);
}
+
bg.color(Some(UI_MAIN)).set(self.bg_ids.bg, ui);
+
Image::new(if self.show_bag_inv {
- self.imgs.inv_frame_bag
+ img_id
} else {
self.imgs.inv_frame
})
- .w_h(424.0, 708.0)
+ .w_h(
+ 424.0,
+ if self.show_bag_inv && !self.on_right {
+ 548.0
+ } else {
+ 708.0
+ },
+ )
.middle_of(self.bg_ids.bg)
.color(Some(UI_HIGHLIGHT_0))
.set(self.bg_ids.bg_frame, ui);
@@ -187,6 +218,7 @@ impl<'a> InventoryScroller<'a> {
ui: &mut UiCell<'_>,
) {
let space_max = self.inventory.slots().count();
+
// Slots Scrollbar
if space_max > 45 && !self.show_bag_inv {
// Scrollbar-BG
@@ -202,7 +234,7 @@ impl<'a> InventoryScroller<'a> {
.color(UI_MAIN)
.middle_of(state.ids.scrollbar_bg)
.set(state.ids.scrollbar_slots, ui);
- } else if space_max > 135 {
+ } else if space_max > 135 && self.on_right {
// Scrollbar-BG
Image::new(self.imgs.scrollbar_bg_big)
.w_h(9.0, 592.0)
@@ -217,14 +249,45 @@ impl<'a> InventoryScroller<'a> {
.middle_of(state.ids.scrollbar_bg)
.set(state.ids.scrollbar_slots, ui);
};
+
+ // This is just for the offeror inventory scrollbar
+ if space_max >= 108 && !self.on_right && self.show_bag_inv {
+ // Left bag scrollbar background
+ Image::new(self.imgs.second_phase_scrollbar_bg)
+ .w_h(9.0, 434.0)
+ .bottom_right_with_margins_on(self.bg_ids.bg_frame, 42.0, 3.0)
+ .color(Some(UI_HIGHLIGHT_0))
+ .set(state.ids.second_phase_scrollbar_bg, ui);
+ // Left bag scrollbar
+ Scrollbar::y_axis(state.ids.inv_alignment)
+ .thickness(5.0)
+ .h(384.0)
+ .color(UI_MAIN)
+ .middle_of(state.ids.second_phase_scrollbar_bg)
+ .set(state.ids.left_scrollbar_slots, ui);
+ }
+
+ let grid_width = if self.show_bag_inv && !self.on_right {
+ 440.0 // This for the left bag
+ } else if self.show_bag_inv && self.on_right {
+ 600.0 // This for the expanded right bag
+ } else {
+ 200.0
+ };
+
// Alignment for Grid
- Rectangle::fill_with(
- [362.0, if self.show_bag_inv { 600.0 } else { 200.0 }],
- color::TRANSPARENT,
- )
- .bottom_left_with_margins_on(self.bg_ids.bg_frame, 29.0, 46.5)
- .scroll_kids_vertically()
- .set(state.ids.inv_alignment, ui);
+ Rectangle::fill_with([362.0, grid_width], color::TRANSPARENT)
+ .bottom_left_with_margins_on(
+ self.bg_ids.bg_frame,
+ 29.0,
+ if self.show_bag_inv && !self.on_right {
+ 28.0
+ } else {
+ 46.5
+ },
+ )
+ .scroll_kids_vertically()
+ .set(state.ids.inv_alignment, ui);
// Bag Slots
// Create available inventory slot widgets
diff --git a/voxygen/src/hud/img_ids.rs b/voxygen/src/hud/img_ids.rs
index 0db29cd2e8..a6c534c9de 100644
--- a/voxygen/src/hud/img_ids.rs
+++ b/voxygen/src/hud/img_ids.rs
@@ -442,6 +442,10 @@ image_ids! {
inv_frame: "voxygen.element.ui.bag.inv_frame",
inv_frame_bag: "voxygen.element.ui.bag.inv_frame_bag",
inv_bg_bag: "voxygen.element.ui.bag.inv_bg_bag",
+ player_inv_frame_bag: "voxygen.element.ui.bag.player_inv_frame_bag",
+ player_inv_bg_bag: "voxygen.element.ui.bag.player_inv_bg_bag",
+ inv_middle_bg_bag: "voxygen.element.ui.bag.inv_middle_bg_bag",
+ inv_middle_frame: "voxygen.element.ui.bag.inv_middle_frame",
char_art: "voxygen.element.ui.bag.icons.character",
inv_slot: "voxygen.element.ui.bag.buttons.inv_slot",
inv_slot_grey: "voxygen.element.ui.bag.buttons.inv_slot_grey",
@@ -454,6 +458,7 @@ image_ids! {
inv_slot_sel: "voxygen.element.ui.bag.buttons.inv_slot_sel",
scrollbar_bg: "voxygen.element.ui.generic.slider.scrollbar",
scrollbar_bg_big: "voxygen.element.ui.generic.slider.scrollbar_1",
+ second_phase_scrollbar_bg: "voxygen.element.ui.bag.second_phase_scrollbar_bg",
inv_tab_active: "voxygen.element.ui.bag.buttons.inv_tab_active",
inv_tab_inactive: "voxygen.element.ui.bag.buttons.inv_tab_inactive",
inv_tab_inactive_hover: "voxygen.element.ui.bag.buttons.inv_tab_inactive",
diff --git a/voxygen/src/hud/trade.rs b/voxygen/src/hud/trade.rs
index 83023f4e7d..922d032b83 100644
--- a/voxygen/src/hud/trade.rs
+++ b/voxygen/src/hud/trade.rs
@@ -1,17 +1,12 @@
-use super::{
- img_ids::{Imgs, ImgsRot},
- item_imgs::ItemImgs,
- slots::{SlotManager, TradeSlot},
- TEXT_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
-};
-use crate::{
- hud::bag::{BackgroundIds, InventoryScroller},
- ui::{
- fonts::Fonts,
- slot::{ContentSize, SlotMaker},
- ImageFrame, ItemTooltip, ItemTooltipManager, ItemTooltipable,
- },
+use conrod_core::{
+ color,
+ position::Relative,
+ widget::{self, Button, Image, Rectangle, State as ConrodState, Text},
+ widget_ids, Color, Colorable, Labelable, Positionable, Sizeable, UiCell, Widget, WidgetCommon,
};
+use specs::Entity as EcsEntity;
+use vek::*;
+
use client::Client;
use common::{
comp::{
@@ -21,15 +16,23 @@ use common::{
trade::{PendingTrade, SitePrices, TradeAction, TradePhase},
};
use common_net::sync::WorldSyncExt;
-use conrod_core::{
- color,
- position::Relative,
- widget::{self, Button, Image, Rectangle, State as ConrodState, Text},
- widget_ids, Color, Colorable, Labelable, Positionable, Sizeable, UiCell, Widget, WidgetCommon,
-};
use i18n::Localization;
-use specs::Entity as EcsEntity;
-use vek::*;
+
+use crate::{
+ hud::bag::{BackgroundIds, InventoryScroller},
+ ui::{
+ fonts::Fonts,
+ slot::{ContentSize, SlotMaker},
+ ImageFrame, ItemTooltip, ItemTooltipManager, ItemTooltipable,
+ },
+};
+
+use super::{
+ img_ids::{Imgs, ImgsRot},
+ item_imgs::ItemImgs,
+ slots::{SlotManager, TradeSlot},
+ TEXT_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
+};
pub struct State {
ids: Ids,
@@ -99,17 +102,18 @@ impl<'a> Trade<'a> {
}
}
}
+
const MAX_TRADE_SLOTS: usize = 16;
impl<'a> Trade<'a> {
fn background(&mut self, state: &mut ConrodState<'_, State>, ui: &mut UiCell<'_>) {
- Image::new(self.imgs.inv_bg_bag)
- .w_h(424.0, 708.0)
- .middle()
+ Image::new(self.imgs.inv_middle_bg_bag)
+ .w_h(424.0, 482.0)
.color(Some(UI_MAIN))
+ .mid_bottom_with_margin_on(ui.window, 295.0)
.set(state.ids.bg, ui);
- Image::new(self.imgs.inv_frame_bag)
- .w_h(424.0, 708.0)
+ Image::new(self.imgs.inv_middle_frame)
+ .w_h(424.0, 482.0)
.middle_of(state.ids.bg)
.color(Some(UI_HIGHLIGHT_0))
.set(state.ids.bg_frame, ui);
@@ -173,9 +177,9 @@ impl<'a> Trade<'a> {
let inventory = inventories.get(entity)?;
// Alignment for Grid
- let mut alignment = Rectangle::fill_with([200.0, 340.0], color::TRANSPARENT);
+ let mut alignment = Rectangle::fill_with([200.0, 180.0], color::TRANSPARENT);
if !ours {
- alignment = alignment.top_left_with_margins_on(state.ids.bg, 180.0, 46.5);
+ alignment = alignment.top_left_with_margins_on(state.ids.bg, 180.0, 32.5);
} else {
alignment = alignment.right_from(state.ids.inv_alignment[1 - who], 0.0);
}
@@ -198,9 +202,27 @@ impl<'a> Trade<'a> {
.unwrap_or_else(|| format!("Player {}", who));
let offer_header = self
- .localized_strings
- .get("hud.trade.persons_offer")
- .replace("{playername}", &name);
+ .client
+ .player_list()
+ .get(&uid)
+ .map(|_| {
+ self.localized_strings
+ .get("hud.trade.your_offer")
+ .to_owned()
+ })
+ .or_else(|| {
+ self.client
+ .state()
+ .read_storage::<Stats>()
+ .get(entity)
+ .map(|_| {
+ self.localized_strings
+ .get("hud.trade.their_offer")
+ .to_owned()
+ })
+ })
+ .unwrap_or_else(|| format!("Player {}", who));
+
Text::new(&offer_header)
.up_from(state.ids.inv_alignment[who], 20.0)
.font_id(self.fonts.cyri.conrod_id)
@@ -214,7 +236,7 @@ impl<'a> Trade<'a> {
.get("hud.trade.has_accepted")
.replace("{playername}", &name);
Text::new(&accept_indicator)
- .down_from(state.ids.inv_alignment[who], 20.0)
+ .down_from(state.ids.inv_alignment[who], 50.0)
.font_id(self.fonts.cyri.conrod_id)
.font_size(self.fonts.cyri.scale(20))
.color(Color::Rgba(
@@ -461,7 +483,7 @@ impl<'a> Trade<'a> {
.w_h(31.0 * 5.0, 12.0 * 2.0)
.hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press)
- .bottom_left_with_margins_on(state.ids.bg, 80.0, 60.0)
+ .bottom_left_with_margins_on(state.ids.bg, 90.0, 47.0)
.label(self.localized_strings.get("hud.trade.accept"))
.label_font_size(self.fonts.cyri.scale(14))
.label_color(TEXT_COLOR)