diff --git a/assets/voxygen/element/ui/bag/inv_bg_bag.png b/assets/voxygen/element/ui/bag/inv_bg_bag.png index 8e76c879e1..dd6187da10 100644 --- a/assets/voxygen/element/ui/bag/inv_bg_bag.png +++ b/assets/voxygen/element/ui/bag/inv_bg_bag.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1d70b26aad275d29436a70e3685e29ab3cf2022ed6718f389053b7557a82f810 -size 66660 +oid sha256:8248da20b7e27e85748b65560c1a1f473549642f5f54d364c30429d0803a8c35 +size 93343 diff --git a/assets/voxygen/element/ui/bag/inv_frame_bag.png b/assets/voxygen/element/ui/bag/inv_frame_bag.png index cefd5e2c46..63b9f051e1 100644 --- a/assets/voxygen/element/ui/bag/inv_frame_bag.png +++ b/assets/voxygen/element/ui/bag/inv_frame_bag.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:63cf18de0cbe0c6273e5a56841ee390465aec38592678dad08fb5c4ae6fe773c -size 5045 +oid sha256:2deacf661a411b7618576b9c17ae9372ec85be88cb456cc2baa07b7e091504c7 +size 12547 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..024c171fbf --- /dev/null +++ b/assets/voxygen/element/ui/bag/inv_middle_bg_bag.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e09eaf4b52f0dc94735ce86d2d73ccfd7597d1d0987b26a2c223af0949640f14 +size 72972 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..d03587893a --- /dev/null +++ b/assets/voxygen/element/ui/bag/inv_middle_frame.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9eb0ca5f1a442676e17987466b6de80d35c843f3b57c815395b1dcb07e37ca12 +size 12070 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..8e76c879e1 --- /dev/null +++ b/assets/voxygen/element/ui/bag/player_inv_bg_bag.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1d70b26aad275d29436a70e3685e29ab3cf2022ed6718f389053b7557a82f810 +size 66660 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..cefd5e2c46 --- /dev/null +++ b/assets/voxygen/element/ui/bag/player_inv_frame_bag.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:63cf18de0cbe0c6273e5a56841ee390465aec38592678dad08fb5c4ae6fe773c +size 5045 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..4a6277fe21 --- /dev/null +++ b/assets/voxygen/element/ui/bag/second_phase_scrollbar_bg.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a729f672e0b7d1fbe2138fe6d144d92a58b04ec82a7f947bb13b7c78f4d720fd +size 5778 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": "", "hud.trade.tooltip_hint_2": "", + "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::() + .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)