Reworked trade into its own generic window chunks

This commit is contained in:
Ceikry 2021-04-12 23:08:37 -05:00
parent 831cd9c5db
commit 0d7420b4d2
6 changed files with 38 additions and 13 deletions

BIN
assets/voxygen/element/ui/generic/frames/window_1_bg.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
assets/voxygen/element/ui/generic/frames/window_1_bottom.png (Stored with Git LFS) Normal file

Binary file not shown.

BIN
assets/voxygen/element/ui/generic/frames/window_1_top.png (Stored with Git LFS) Normal file

Binary file not shown.

View File

@ -3,7 +3,7 @@
/// Localization for "global" English /// Localization for "global" English
( (
string_map: { 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.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.", "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 /// Phase3 should only be visible for a few milliseconds if everything is working properly, but is included for completeness

View File

@ -414,6 +414,9 @@ image_ids! {
inv_frame: "voxygen.element.ui.bag.inv_frame", inv_frame: "voxygen.element.ui.bag.inv_frame",
inv_frame_bag: "voxygen.element.ui.bag.inv_frame_bag", inv_frame_bag: "voxygen.element.ui.bag.inv_frame_bag",
inv_bg_bag: "voxygen.element.ui.bag.inv_bg_bag", inv_bg_bag: "voxygen.element.ui.bag.inv_bg_bag",
window_1_top: "voxygen.element.ui.generic.frames.window_1_top",
window_1_bg: "voxygen.element.ui.generic.frames.window_1_bg",
window_1_bottom: "voxygen.element.ui.generic.frames.window_1_bottom",
char_art: "voxygen.element.ui.bag.icons.character", char_art: "voxygen.element.ui.bag.icons.character",
inv_slot: "voxygen.element.ui.bag.buttons.inv_slot", inv_slot: "voxygen.element.ui.bag.buttons.inv_slot",
inv_slot_grey: "voxygen.element.ui.bag.buttons.inv_slot_grey", inv_slot_grey: "voxygen.element.ui.bag.buttons.inv_slot_grey",

View File

@ -41,6 +41,9 @@ widget_ids! {
trade_close, trade_close,
bg, bg,
bg_frame, bg_frame,
window_1_top,
window_1_bg,
window_1_bottom,
trade_title_bg, trade_title_bg,
trade_title, trade_title,
inv_alignment[], inv_alignment[],
@ -103,21 +106,31 @@ const MAX_TRADE_SLOTS: usize = 16;
impl<'a> Trade<'a> { impl<'a> Trade<'a> {
fn background(&mut self, state: &mut ConrodState<'_, State>, ui: &mut UiCell<'_>) { fn background(&mut self, state: &mut ConrodState<'_, State>, ui: &mut UiCell<'_>) {
Image::new(self.imgs.inv_bg_bag) Image::new(self.imgs.pixel)
.w_h(424.0, 708.0) .w_h(385.0,498.0)
.middle() .middle()
.color(Some(UI_MAIN)) .color(Some(UI_MAIN))
.set(state.ids.bg, ui); .set(state.ids.bg,ui);
Image::new(self.imgs.inv_frame_bag) Image::new(self.imgs.window_1_top)
.w_h(424.0, 708.0) .w_h(385.0, 73.0)
.middle_of(state.ids.bg) .up_from(state.ids.bg,-73.0)
.color(Some(UI_HIGHLIGHT_0)) .color(Some(UI_HIGHLIGHT_0))
.set(state.ids.bg_frame, ui); .set(state.ids.window_1_top,ui);
Image::new(self.imgs.window_1_bg)
.w_h(385.0, 400.0)
.down_from(state.ids.window_1_top,-1.0)
.color(Some(UI_HIGHLIGHT_0))
.set(state.ids.window_1_bg, ui);
Image::new(self.imgs.window_1_bottom)
.w_h(385.0, 25.0)
.down_from(state.ids.window_1_bg,-1.0)
.color(Some(UI_HIGHLIGHT_0))
.set(state.ids.window_1_bottom, ui);
} }
fn title(&mut self, state: &mut ConrodState<'_, State>, ui: &mut UiCell<'_>) { fn title(&mut self, state: &mut ConrodState<'_, State>, ui: &mut UiCell<'_>) {
Text::new(&self.localized_strings.get("hud.trade.trade_window")) Text::new(&self.localized_strings.get("hud.trade.trade_window"))
.mid_top_with_margin_on(state.ids.bg_frame, 9.0) .mid_top_with_margin_on(state.ids.window_1_top, 9.0)
.font_id(self.fonts.cyri.conrod_id) .font_id(self.fonts.cyri.conrod_id)
.font_size(self.fonts.cyri.scale(20)) .font_size(self.fonts.cyri.scale(20))
.color(Color::Rgba(0.0, 0.0, 0.0, 1.0)) .color(Color::Rgba(0.0, 0.0, 0.0, 1.0))
@ -143,7 +156,7 @@ impl<'a> Trade<'a> {
}; };
Text::new(&phase_text) Text::new(&phase_text)
.mid_top_with_margin_on(state.ids.bg, 70.0) .mid_top_with_margin_on(state.ids.window_1_bg,10.0)
.font_id(self.fonts.cyri.conrod_id) .font_id(self.fonts.cyri.conrod_id)
.font_size(self.fonts.cyri.scale(20)) .font_size(self.fonts.cyri.scale(20))
.color(Color::Rgba(1.0, 1.0, 1.0, 1.0)) .color(Color::Rgba(1.0, 1.0, 1.0, 1.0))
@ -175,7 +188,7 @@ impl<'a> Trade<'a> {
// Alignment for Grid // Alignment for Grid
let mut alignment = Rectangle::fill_with([200.0, 340.0], color::TRANSPARENT); let mut alignment = Rectangle::fill_with([200.0, 340.0], color::TRANSPARENT);
if !ours { 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.window_1_bg, 110.0, 11.5);
} else { } else {
alignment = alignment.right_from(state.ids.inv_alignment[1 - who], 0.0); alignment = alignment.right_from(state.ids.inv_alignment[1 - who], 0.0);
} }
@ -439,7 +452,7 @@ impl<'a> Trade<'a> {
.w_h(31.0 * 5.0, 12.0 * 2.0) .w_h(31.0 * 5.0, 12.0 * 2.0)
.hover_image(self.imgs.button_hover) .hover_image(self.imgs.button_hover)
.press_image(self.imgs.button_press) .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.window_1_bg, 20.0, 25.0)
.label(&self.localized_strings.get("hud.trade.accept")) .label(&self.localized_strings.get("hud.trade.accept"))
.label_font_size(self.fonts.cyri.scale(14)) .label_font_size(self.fonts.cyri.scale(14))
.label_color(TEXT_COLOR) .label_color(TEXT_COLOR)
@ -478,7 +491,7 @@ impl<'a> Trade<'a> {
.w_h(24.0, 25.0) .w_h(24.0, 25.0)
.hover_image(self.imgs.close_btn_hover) .hover_image(self.imgs.close_btn_hover)
.press_image(self.imgs.close_btn_press) .press_image(self.imgs.close_btn_press)
.top_right_with_margins_on(state.ids.bg, 0.0, 0.0) .top_right_with_margins_on(state.ids.window_1_top, 0.0, 0.0)
.set(state.ids.trade_close, ui) .set(state.ids.trade_close, ui)
.was_clicked() .was_clicked()
{ {