Crafting Tabs and more item tags

CHANGELOG.md

@@ -17,11 +17,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Admin designated build areas
 - Indicator text to collectable terrain sprites
 - You can now autorequest exact change by ctrl-clicking in a trade, and can quick-add individual items with shift-click.
-<<<<<<< HEAD
 - Buy and sell prices in tooltips when trading with a merchant now have colors.
-=======
 - Attacks now emit sound effects from the target on hit.
->>>>>>> e2f8d1d27 (Changelog)
+- Crafting menu tabs
+
 
 ### Changed
 
@@ -31,16 +30,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Separated character randomization buttons into appearance and name.
 - Reworked mindflayer to have unique attacks
 - Glowing remains are now `Armor` instead of `Ingredients`.
-- Generated a net world map
+- Generated a new world map
 - Overhauled clouds for more verticality and performance
 - New tooltip for items with stats comparison
 - Improved bow feedback, added arrow particles
-<<<<<<< HEAD
 - Retiered most sceptres and staves
 - Loot tables can now recursively reference loot tables
-=======
 - "max_sfx_channels" default now set to 30
->>>>>>> e2f8d1d27 (Changelog)
 
 ### Removed
 

Cargo.lock

@@ -4802,6 +4802,24 @@ dependencies = [
  "syn 1.0.67",
 ]
 
+[[package]]
+name = "strum"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7318c509b5ba57f18533982607f24070a55d353e90d4cae30c467cdb2ad5ac5c"
+
+[[package]]
+name = "strum_macros"
+version = "0.20.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ee8bc6b87a5112aeeab1f4a9f7ab634fe6cbefc4850006df31267f4cfb9e3149"
+dependencies = [
+ "heck",
+ "proc-macro2 1.0.24",
+ "quote 1.0.9",
+ "syn 1.0.67",
+]
+
 [[package]]
 name = "sum_type"
 version = "0.2.0"
@@ -5645,6 +5663,8 @@ dependencies = [
  "serde",
  "specs",
  "specs-idvs",
+ "strum",
+ "strum_macros",
  "tokio",
  "tracing",
  "treeculler",

assets/common/items/armor/misc/back/backpack.ron

@@ -9,6 +9,6 @@ ItemDef(
         ),
     )),
     quality: High,
-    tags: [],
+    tags: [Bag],
     slots: 18,
 )

assets/common/items/armor/misc/bag/heavy_seabag.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Bag],
     slots: 14,
 )

assets/common/items/armor/misc/bag/knitted_red_pouch.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Bag],
     slots: 9,
 )

assets/common/items/armor/misc/bag/liana_kit.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Bag],
     slots: 12,
 )

assets/common/items/armor/misc/bag/mindflayer_spellbag.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Epic,
-    tags: [],
+    tags: [Bag],
     slots: 27,
 )

assets/common/items/armor/misc/bag/reliable_backpack.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: High,
-    tags: [],
+    tags: [Bag],
     slots: 16,
 )

assets/common/items/armor/misc/bag/soulkeeper_cursed.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Legendary,
-    tags: [],
+    tags: [Bag],
     slots: 36,
 )

assets/common/items/armor/misc/bag/soulkeeper_pure.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Legendary,
-    tags: [],
+    tags: [Bag],
     slots: 36,
 )

assets/common/items/armor/misc/bag/sturdy_red_backpack.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: High,
-    tags: [],
+    tags: [Bag],
     slots: 18,
 )

assets/common/items/armor/misc/bag/tiny_leather_pouch.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Common,
-    tags: [],
+    tags: [Bag],
     slots: 6,
 )

assets/common/items/armor/misc/bag/tiny_red_pouch.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Common,
-    tags: [],
+    tags: [Bag],
     slots: 3,
 )

assets/common/items/armor/misc/bag/troll_hide_pack.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: High,
-    tags: [],
+    tags: [Bag],
     slots: 18,
 )

assets/common/items/armor/misc/bag/woven_red_bag.ron

@@ -11,6 +11,6 @@ ItemDef(
         )
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Bag],
     slots: 15,
 )

assets/common/items/boss_drops/exp_flask.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "PotionExp",        
     ),
     quality: High,
-    tags: [],
+    tags: [Potion],
 )

assets/common/items/boss_drops/lantern.ron

@@ -10,5 +10,5 @@ ItemDef(
         ),
     ),
     quality: High,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/boss_drops/potions.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: High,
-    tags: [],
+    tags: [Potion],
 )

assets/common/items/boss_drops/xp_potion.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "Potion",        
     ),
     quality: High,
-    tags: [],
+    tags: [Potion],
 )

assets/common/items/consumable/potion_big.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Potion],
 )

assets/common/items/consumable/potion_med.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Potion],
 )

assets/common/items/consumable/potion_minor.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Potion],
 )

assets/common/items/crafting_ing/cloth_scraps.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "ClothScraps",
     ),
     quality: Common,
-    tags: [],
+    tags: [BaseMaterial],
 )

assets/common/items/crafting_ing/cloth_scraps_red.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "ClothScrapsRed",
     ),
     quality: Common,
-    tags: [],
+    tags: [BaseMaterial],
 )

assets/common/items/crafting_ing/leather_scraps.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "LeatherScraps",
     ),
     quality: Common,
-    tags: [],
+    tags: [BaseMaterial],
 )

assets/common/items/crafting_ing/leather_troll.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "TrollLeather",
     ),
     quality: High,
-    tags: [],
+    tags: [BaseMaterial],
 )

assets/common/items/crafting_tools/craftsman_hammer.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "CraftsmanHammer",
     ),
     quality: Moderate,
-    tags: [],
+    tags: [CraftingTool],
 )

assets/common/items/crafting_tools/mortar_pestle.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "MortarPestle",
     ),
     quality: Moderate,
-    tags: [],
+    tags: [CraftingTool],
 )

assets/common/items/crafting_tools/sewing_set.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: "SewingSet",
     ),
     quality: Moderate,
-    tags: [],
+    tags: [CraftingTool],
 )

assets/common/items/food/apple.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/apple_mushroom_curry.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/apple_stick.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/carrot.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/cheese.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/coconut.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/coltsfoot.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/dandelion.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/fish.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/garlic.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/lettuce.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/meat.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/mushroom.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/mushroom_stick.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/onion.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/plainsalad.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/sage.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/sunflower_icetea.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/tomato.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/food/tomatosalad.ron

@@ -18,5 +18,5 @@ ItemDef(
         ]
     ),
     quality: Common,
-    tags: [],
+    tags: [Food],
 )

assets/common/items/lantern/black_0.ron

@@ -10,5 +10,5 @@ ItemDef(
         ),
     ),
     quality: Common,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/lantern/blue_0.ron

@@ -10,5 +10,5 @@ ItemDef(
         ),
     ),
     quality: Common,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/lantern/geode_purp.ron

@@ -10,5 +10,5 @@ ItemDef(
         ),
     ),
     quality: High,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/lantern/green_0.ron

@@ -10,5 +10,5 @@ ItemDef(
         ),
     ),
     quality: Common,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/lantern/red_0.ron

@@ -10,5 +10,5 @@ ItemDef(
         ),
     ),
     quality: Common,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/tag_examples/placeholder.ron

@@ -0,0 +1,10 @@
+ItemDef(
+    name: "Placeholder",
+    description: "This is a placeholder because we intend to autogenerate these from the tags later",
+    kind: Ingredient(
+        kind: "Placeholder",
+    ),
+    quality: Common,
+    tags: [],
+)
+

assets/common/items/tool/pick.ron

@@ -14,5 +14,5 @@ ItemDef(
         )),
     )),
     quality: Low,
-    tags: [],
+    tags: [CraftingTool],
 )

assets/common/items/utility/bomb.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Bomb,
     ),
     quality: Common,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/bomb_pile.ron

@@ -6,5 +6,5 @@ ItemDef(
 		amount: 10,
     ),
     quality: Common,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/collar.ron

@@ -6,5 +6,5 @@ ItemDef(
     ),
     amount: 1,
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/firework_blue.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Firework(Blue),
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/firework_green.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Firework(Green),
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/firework_purple.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Firework(Purple),
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/firework_red.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Firework(Red),
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/firework_white.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Firework(White),
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/firework_yellow.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: Firework(Yellow),
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/common/items/utility/training_dummy.ron

@@ -5,5 +5,5 @@ ItemDef(
         kind: TrainingDummy,
     ),
     quality: Moderate,
-    tags: [],
+    tags: [Utility],
 )

assets/voxygen/item_image_manifest.ron

@@ -4,6 +4,10 @@
 ({
     // Weapons
     // Diary Example Images
+    Tool("example_utility"): VoxTrans(
+        "voxel.weapon.projectile.fireworks_green-0",
+        (0.0, 0.5, 0.0), (-50.0, 40.0, 20.0), 0.8,
+    ),
     Tool("example_sword"): VoxTrans(
         "voxel.weapon.sword.greatsword_2h_dullahan",
         (0.0, 0.0, 0.0), (90.0, 80.0, 0.0), 1.0,

common/src/comp/inventory/item/mod.rs

@@ -96,6 +96,12 @@ pub enum ItemTag {
     ModularComponent(ModularComponentTag),
     MetalIngot,
     Cultist,
+    Potion,
+    Food,
+    BaseMaterial, // Cloth-scraps, Leather...
+    CraftingTool, // Pickaxe, Craftsman-Hammer, Sewing-Set
+    Utility,
+    Bag,
 }
 
 impl TagExampleInfo for ItemTag {
@@ -106,9 +112,16 @@ impl TagExampleInfo for ItemTag {
             ItemTag::ModularComponent(kind) => kind.name(),
             ItemTag::MetalIngot => "metal ingot",
             ItemTag::Cultist => "cultist",
+            ItemTag::Potion => "potion",
+            ItemTag::Food => "food",
+            ItemTag::BaseMaterial => "basemat",
+            ItemTag::CraftingTool => "tool",
+            ItemTag::Utility => "utility",
+            ItemTag::Bag => "bag",
         }
     }
 
+    // TODO: Autogenerate these?
     fn exemplar_identifier(&self) -> &'static str {
         match self {
             ItemTag::ClothItem => "common.items.tag_examples.cloth_item",
@@ -116,6 +129,12 @@ impl TagExampleInfo for ItemTag {
             ItemTag::ModularComponent(tag) => tag.exemplar_identifier(),
             ItemTag::MetalIngot => "common.items.tag_examples.metal_ingot",
             ItemTag::Cultist => "common.items.tag_examples.cultist",
+            ItemTag::Potion => "common.items.tag_examples.placeholder",
+            ItemTag::Food => "common.items.tag_examples.placeholder",
+            ItemTag::BaseMaterial => "common.items.tag_examples.placeholder",
+            ItemTag::CraftingTool => "common.items.tag_examples.placeholder",
+            ItemTag::Utility => "common.items.tag_examples.placeholder",
+            ItemTag::Bag => "common.items.tag_examples.placeholder",
         }
     }
 }

voxygen/Cargo.toml

@@ -71,6 +71,8 @@ deunicode = "1.0"
 directories-next = "2.0"
 dot_vox = "4.0"
 enum-iterator = "0.6"
+strum = "0.20"
+strum_macros = "0.20"
 glsl-include = "0.3.1"
 guillotiere = "0.6"
 hashbrown = {version = "0.9", features = ["rayon", "serde", "nightly"]}

voxygen/src/hud/crafting.rs

@@ -1,17 +1,22 @@
 use super::{
     img_ids::{Imgs, ImgsRot},
     item_imgs::{animate_by_pulse, ItemImgs},
-    TEXT_COLOR, TEXT_DULL_RED_COLOR, TEXT_GRAY_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
+    Show, TEXT_COLOR, TEXT_DULL_RED_COLOR, TEXT_GRAY_COLOR, UI_HIGHLIGHT_0, UI_MAIN,
 };
 use crate::{
     i18n::Localization,
-    ui::{fonts::Fonts, ImageFrame, ItemTooltip, ItemTooltipManager, ItemTooltipable},
+    ui::{
+        fonts::Fonts, ImageFrame, ItemTooltip, ItemTooltipManager, ItemTooltipable, Tooltip,
+        TooltipManager, Tooltipable,
+    },
 };
 use client::{self, Client};
 use common::{
     assets::AssetExt,
     comp::{
-        item::{ItemDef, ItemDesc, MaterialStatManifest, Quality, TagExampleInfo},
+        item::{
+            ItemDef, ItemDesc, ItemKind, ItemTag, MaterialStatManifest, Quality, TagExampleInfo,
+        },
         Inventory,
     },
     recipe::RecipeInput,
@@ -23,6 +28,9 @@ use conrod_core::{
 };
 use std::sync::Arc;
 
+use strum::IntoEnumIterator;
+use strum_macros::EnumIter;
+
 widget_ids! {
     pub struct Ids {
         window,
@@ -48,11 +56,15 @@ widget_ids! {
         output_img_frame,
         output_img,
         output_amount,
+        category_bgs[],
+        category_tabs[],
+        category_imgs[],
     }
 }
 
 pub enum Event {
     CraftRecipe(String),
+    ChangeCraftingTab(SelectedCraftingTab),
     Close,
 }
 
@@ -70,6 +82,8 @@ pub struct Crafting<'a> {
     msm: &'a MaterialStatManifest,
     #[conrod(common_builder)]
     common: widget::CommonBuilder,
+    tooltip_manager: &'a mut TooltipManager,
+    show: &'a mut Show,
 }
 #[allow(clippy::too_many_arguments)]
 impl<'a> Crafting<'a> {
@@ -84,6 +98,8 @@ impl<'a> Crafting<'a> {
         item_imgs: &'a ItemImgs,
         inventory: &'a Inventory,
         msm: &'a MaterialStatManifest,
+        tooltip_manager: &'a mut TooltipManager,
+        show: &'a mut Show,
     ) -> Self {
         Self {
             client,
@@ -93,14 +109,29 @@ impl<'a> Crafting<'a> {
             pulse,
             rot_imgs,
             item_tooltip_manager,
+            tooltip_manager,
             item_imgs,
             inventory,
             msm,
+            show,
             common: widget::CommonBuilder::default(),
         }
     }
 }
 
+#[derive(Debug, EnumIter, PartialEq)]
+pub enum SelectedCraftingTab {
+    Armor,
+    Weapon,
+    Food,
+    Dismantle,
+    Potion,
+    Bag,
+    Tool,
+    Utility,
+    Glider,
+}
+
 pub struct State {
     ids: Ids,
     selected_recipe: Option<String>,
@@ -132,7 +163,6 @@ impl<'a> Widget for Crafting<'a> {
                 )
             });
         }
-        let ids = &state.ids;
 
         let mut events = Vec::new();
 
@@ -162,17 +192,35 @@ impl<'a> Widget for Crafting<'a> {
         .desc_font_size(self.fonts.cyri.scale(12))
         .font_id(self.fonts.cyri.conrod_id)
         .desc_text_color(TEXT_COLOR);
+        // Tab tooltips
+        let tabs_tooltip = Tooltip::new({
+            // Edge images [t, b, r, l]
+            // Corner images [tr, tl, br, bl]
+            let edge = &self.rot_imgs.tt_side;
+            let corner = &self.rot_imgs.tt_corner;
+            ImageFrame::new(
+                [edge.cw180, edge.none, edge.cw270, edge.cw90],
+                [corner.none, corner.cw270, corner.cw90, corner.cw180],
+                Color::Rgba(0.08, 0.07, 0.04, 1.0),
+                5.0,
+            )
+        })
+        .title_font_size(self.fonts.cyri.scale(15))
+        .parent(ui.window)
+        .desc_font_size(self.fonts.cyri.scale(12))
+        .font_id(self.fonts.cyri.conrod_id)
+        .desc_text_color(TEXT_COLOR);
 
         Image::new(self.imgs.crafting_window)
             .bottom_right_with_margins_on(ui.window, 308.0, 450.0)
             .color(Some(UI_MAIN))
             .w_h(422.0, 460.0)
-            .set(ids.window, ui);
+            .set(state.ids.window, ui);
         Image::new(self.imgs.crafting_frame)
-            .middle_of(ids.window)
+            .middle_of(state.ids.window)
             .color(Some(UI_HIGHLIGHT_0))
             .w_h(422.0, 460.0)
-            .set(ids.window_frame, ui);
+            .set(state.ids.window_frame, ui);
         Image::new(self.imgs.crafting_icon_bordered)
             .w_h(38.0, 38.0)
             .top_left_with_margins_on(state.ids.window_frame, 4.0, 4.0)
@@ -182,8 +230,8 @@ impl<'a> Widget for Crafting<'a> {
             .w_h(24.0, 25.0)
             .hover_image(self.imgs.close_button_hover)
             .press_image(self.imgs.close_button_press)
-            .top_right_with_margins_on(ids.window, 0.0, 0.0)
+            .top_right_with_margins_on(state.ids.window, 0.0, 0.0)
-            .set(ids.close, ui)
+            .set(state.ids.close, ui)
             .was_clicked()
         {
             events.push(Event::Close);
@@ -191,21 +239,119 @@ impl<'a> Widget for Crafting<'a> {
 
         // Title
         Text::new(&self.localized_strings.get("hud.crafting"))
-            .mid_top_with_margin_on(ids.window_frame, 9.0)
+            .mid_top_with_margin_on(state.ids.window_frame, 9.0)
             .font_id(self.fonts.cyri.conrod_id)
             .font_size(self.fonts.cyri.scale(20))
             .color(TEXT_COLOR)
-            .set(ids.title_main, ui);
+            .set(state.ids.title_main, ui);
 
         // Alignment
         Rectangle::fill_with([136.0, 378.0], color::TRANSPARENT)
-            .top_left_with_margins_on(ids.window_frame, 74.0, 5.0)
+            .top_left_with_margins_on(state.ids.window_frame, 74.0, 5.0)
             .scroll_kids_vertically()
-            .set(ids.align_rec, ui);
+            .set(state.ids.align_rec, ui);
         Rectangle::fill_with([274.0, 340.0], color::TRANSPARENT)
-            .top_right_with_margins_on(ids.window, 74.0, 5.0)
+            .top_right_with_margins_on(state.ids.window, 74.0, 5.0)
             .scroll_kids_vertically()
-            .set(ids.align_ing, ui);
+            .set(state.ids.align_ing, ui);
+        // Category Tabs
+        if state.ids.category_bgs.len() < SelectedCraftingTab::iter().enumerate().len() {
+            state.update(|s| {
+                s.ids.category_bgs.resize(
+                    SelectedCraftingTab::iter().enumerate().len(),
+                    &mut ui.widget_id_generator(),
+                )
+            })
+        };
+        if state.ids.category_tabs.len() < SelectedCraftingTab::iter().enumerate().len() {
+            state.update(|s| {
+                s.ids.category_tabs.resize(
+                    SelectedCraftingTab::iter().enumerate().len(),
+                    &mut ui.widget_id_generator(),
+                )
+            })
+        };
+        if state.ids.category_imgs.len() < SelectedCraftingTab::iter().enumerate().len() {
+            state.update(|s| {
+                s.ids.category_imgs.resize(
+                    SelectedCraftingTab::iter().enumerate().len(),
+                    &mut ui.widget_id_generator(),
+                )
+            })
+        };
+        let sel_crafting_tab = &self.show.crafting_tab;
+        for i in SelectedCraftingTab::iter().enumerate() {
+            // TODO: i18n!
+            let tab_name = match i.1 {
+                SelectedCraftingTab::Armor => "Armor",
+                SelectedCraftingTab::Dismantle => "Dismantle",
+                SelectedCraftingTab::Food => "Food",
+                SelectedCraftingTab::Glider => "Gliders",
+                SelectedCraftingTab::Potion => "Potions",
+                SelectedCraftingTab::Tool => "Tools",
+                SelectedCraftingTab::Utility => "Utility",
+                SelectedCraftingTab::Weapon => "Weapons",
+                SelectedCraftingTab::Bag => "Weapons",
+            };
+            let tab_img = match i.1 {
+                SelectedCraftingTab::Armor => self.imgs.icon_armor,
+                SelectedCraftingTab::Dismantle => self.imgs.icon_dismantle,
+                SelectedCraftingTab::Food => self.imgs.icon_food,
+                SelectedCraftingTab::Glider => self.imgs.icon_glider,
+                SelectedCraftingTab::Potion => self.imgs.icon_potion,
+                SelectedCraftingTab::Tool => self.imgs.icon_tools,
+                SelectedCraftingTab::Utility => self.imgs.icon_utility,
+                SelectedCraftingTab::Weapon => self.imgs.icon_weapon,
+                SelectedCraftingTab::Bag => self.imgs.icon_bag,
+            };
+            // Button Background
+            let mut bg = Image::new(self.imgs.pixel)
+                .w_h(40.0, 30.0)
+                .color(Some(UI_MAIN));
+            if i.0 == 0 {
+                bg = bg.top_left_with_margins_on(state.ids.window_frame, 50.0, -40.0)
+            } else {
+                bg = bg.down_from(state.ids.category_bgs[i.0 - 1], 0.0)
+            };
+            bg.set(state.ids.category_bgs[i.0], ui);
+            // Category Button
+            if Button::image(if i.1 == *sel_crafting_tab {
+                self.imgs.wpn_icon_border_pressed
+            } else {
+                self.imgs.wpn_icon_border
+            })
+            .wh_of(state.ids.category_bgs[i.0])
+            .middle_of(state.ids.category_bgs[i.0])
+            .hover_image(if i.1 == *sel_crafting_tab {
+                self.imgs.wpn_icon_border_pressed
+            } else {
+                self.imgs.wpn_icon_border_mo
+            })
+            .press_image(if i.1 == *sel_crafting_tab {
+                self.imgs.wpn_icon_border_pressed
+            } else {
+                self.imgs.wpn_icon_border_press
+            })
+            .with_tooltip(
+                self.tooltip_manager,
+                tab_name,
+                "",
+                &tabs_tooltip,
+                TEXT_COLOR,
+            )
+            .set(state.ids.category_tabs[i.0], ui)
+            .was_clicked()
+            {
+                events.push(Event::ChangeCraftingTab(i.1))
+            };
+            // Tab images
+            Image::new(tab_img)
+                .middle_of(state.ids.category_tabs[i.0])
+                .w_h(20.0, 20.0)
+                .graphics_for(state.ids.category_tabs[i.0])
+                .set(state.ids.category_imgs[i.0], ui);
+        }
+
         let client = &self.client;
         // First available recipes, then unavailable ones, each alphabetically
         // In the triples, "name" is the recipe book key, and "recipe.output.0.name()"
@@ -270,9 +416,9 @@ impl<'a> Widget for Crafting<'a> {
                     .label_font_size(self.fonts.cyri.scale(12))
                     .label_font_id(self.fonts.cyri.conrod_id)
                     .image_color(can_perform.then_some(TEXT_COLOR).unwrap_or(TEXT_GRAY_COLOR))
-                    .mid_bottom_with_margin_on(ids.align_ing, -31.0)
+                    .mid_bottom_with_margin_on(state.ids.align_ing, -31.0)
-                    .parent(ids.window_frame)
+                    .parent(state.ids.window_frame)
-                    .set(ids.btn_craft, ui)
+                    .set(state.ids.btn_craft, ui)
                     .was_clicked()
                 {
                     events.push(Event::CraftRecipe(recipe.clone()));
@@ -299,8 +445,8 @@ impl<'a> Widget for Crafting<'a> {
                 Image::new(quality_col_img)
                     .w_h(60.0, 60.0)
                     .top_right_with_margins_on(state.ids.align_ing, 15.0, 10.0)
-                    .parent(ids.align_ing)
+                    .parent(state.ids.align_ing)
-                    .set(ids.output_img_frame, ui);
+                    .set(state.ids.output_img_frame, ui);
 
                 if let Some(recipe) = state
                     .selected_recipe
@@ -335,7 +481,36 @@ impl<'a> Widget for Crafting<'a> {
         }
 
         // Recipe list
-        for (i, (name, recipe, quantity)) in ordered_recipes.into_iter().enumerate() {
+        for (i, (name, recipe, quantity)) in ordered_recipes
+            .into_iter()
+            .filter(|(_name, recipe, _quantity)| match &self.show.crafting_tab {
+                SelectedCraftingTab::Food => recipe.output.0.tags().contains(&ItemTag::Food),
+                SelectedCraftingTab::Armor => match recipe.output.0.kind() {
+                    ItemKind::Armor(_) => !recipe.output.0.tags().contains(&ItemTag::Bag),
+                    _ => false,
+                },
+                SelectedCraftingTab::Glider => {
+                    matches!(recipe.output.0.kind(), ItemKind::Glider(_))
+                },
+                SelectedCraftingTab::Potion => recipe.output.0.tags().contains(&ItemTag::Potion),
+                SelectedCraftingTab::Bag => recipe.output.0.tags().contains(&ItemTag::Bag),
+                SelectedCraftingTab::Tool => {
+                    recipe.output.0.tags().contains(&ItemTag::CraftingTool)
+                },
+                SelectedCraftingTab::Utility => recipe.output.0.tags().contains(&ItemTag::Utility),
+                SelectedCraftingTab::Weapon => match recipe.output.0.kind() {
+                    ItemKind::Tool(_) => !recipe.output.0.tags().contains(&ItemTag::CraftingTool),
+                    _ => false,
+                },
+                SelectedCraftingTab::Dismantle => match recipe.output.0.kind() {
+                    ItemKind::Ingredient { .. } => {
+                        !recipe.output.0.tags().contains(&ItemTag::CraftingTool)
+                    },
+                    _ => false,
+                },
+            })
+            .enumerate()
+        {
             let button = Button::image(
                 if state
                     .selected_recipe
@@ -550,26 +725,24 @@ impl<'a> Widget for Crafting<'a> {
                 }
             }
         }
-
-        let ids = &state.ids;
         // Scrollbars
-        Scrollbar::y_axis(ids.align_rec)
+        Scrollbar::y_axis(state.ids.align_rec)
             .thickness(5.0)
             .rgba(0.33, 0.33, 0.33, 1.0)
-            .set(ids.scrollbar_rec, ui);
+            .set(state.ids.scrollbar_rec, ui);
-        Scrollbar::y_axis(ids.align_ing)
+        Scrollbar::y_axis(state.ids.align_ing)
             .thickness(5.0)
             .rgba(0.33, 0.33, 0.33, 1.0)
-            .set(ids.scrollbar_ing, ui);
+            .set(state.ids.scrollbar_ing, ui);
 
         // Title Recipes and Ingredients
         Text::new(&self.localized_strings.get("hud.crafting.recipes"))
-            .mid_top_with_margin_on(ids.align_rec, -22.0)
+            .mid_top_with_margin_on(state.ids.align_rec, -22.0)
             .font_id(self.fonts.cyri.conrod_id)
             .font_size(self.fonts.cyri.scale(14))
             .color(TEXT_COLOR)
-            .parent(ids.window)
+            .parent(state.ids.window)
-            .set(ids.title_rec, ui);
+            .set(state.ids.title_rec, ui);
 
         events
     }

voxygen/src/hud/img_ids.rs

@@ -67,6 +67,7 @@ image_ids! {
         diary_frame: "voxygen.element.misc_bg.diary_frame",
         diary_exp_bg: "voxygen.element.misc_bg.diary_exp_bg",
         diary_exp_frame: "voxygen.element.misc_bg.diary_exp_frame",
+        pixel: "voxygen.element.misc_bg.pixel",
 
         // Skill Trees
         slot_skills: "voxygen.element.buttons.slot_skilltree",
@@ -104,6 +105,15 @@ image_ids! {
         crafting_icon: "voxygen.element.buttons.anvil",
         crafting_icon_hover: "voxygen.element.buttons.anvil_hover",
         crafting_icon_press: "voxygen.element.buttons.anvil_press",
+        icon_armor: "voxygen.element.icons.armors",
+        icon_tools: "voxygen.element.icons.crafting_tools",
+        icon_dismantle: "voxygen.element.icons.dismantle",
+        icon_food: "voxygen.element.icons.foods",
+        icon_glider: "voxygen.element.icons.gliders",
+        icon_potion: "voxygen.element.icons.potions",
+        icon_utility: "voxygen.element.icons.utilities",
+        icon_weapon: "voxygen.element.icons.weapons",
+        icon_bag: "voxygen.element.icons.item_bag_leather_large",
 
         // Group Window
         member_frame: "voxygen.element.frames.group_member_frame",

voxygen/src/hud/mod.rs

@@ -31,7 +31,7 @@ use buffs::BuffsBar;
 use buttons::Buttons;
 use chat::Chat;
 use chrono::NaiveTime;
-use crafting::Crafting;
+use crafting::{Crafting, SelectedCraftingTab};
 use diary::{Diary, SelectedSkillTree};
 use esc_menu::EscMenu;
 use group::Group;
@@ -544,6 +544,7 @@ pub struct Show {
     ingame: bool,
     settings_tab: SettingsTab,
     skilltreetab: SelectedSkillTree,
+    crafting_tab: SelectedCraftingTab,
     social_tab: SocialTab,
     want_grab: bool,
     stats: bool,
@@ -726,6 +727,10 @@ impl Show {
         self.skilltreetab = tree_sel;
         self.social = false;
     }
+
+    fn selected_crafting_tab(&mut self, sel_cat: SelectedCraftingTab) {
+        self.crafting_tab = sel_cat;
+    }
 }
 
 pub struct PromptDialogSettings {
@@ -865,6 +870,7 @@ impl Hud {
                 group_menu: false,
                 settings_tab: SettingsTab::Interface,
                 skilltreetab: SelectedSkillTree::General,
+                crafting_tab: SelectedCraftingTab::Armor,
                 social_tab: SocialTab::Online,
                 want_grab: true,
                 ingame: true,
@@ -2431,6 +2437,8 @@ impl Hud {
                     &self.item_imgs,
                     &inventory,
                     &msm,
+                    tooltip_manager,
+                    &mut self.show,
                 )
                 .set(self.ids.crafting_window, ui_widgets)
                 {
@@ -2449,6 +2457,9 @@ impl Hud {
                                 self.force_ungrab = true
                             };
                         },
+                        crafting::Event::ChangeCraftingTab(sel_cat) => {
+                            self.show.selected_crafting_tab(sel_cat);
+                        },
                     }
                 }
             }