Skill Tree Panel Added (#50)

* Added attribute/skill buttons to the HUD
* adjusted how movement works
* Skills Panel added

OpenDiablo2.Common/Interfaces/UI/IButton.cs

@@ -40,16 +40,6 @@ namespace OpenDiablo2.Common.Interfaces
         /// </summary>
         Point Location { get; set; }
 
-        /// <summary>
-        /// Area from upper left corner that reacts to clicking
-        /// </summary>
-        Size ClickableRect { get; set; }
-
-        /// <summary>
-        /// Indicates if button sprite should react to Toggle and Activate on hover
-        /// </summary>
-        bool AllowFrameChange { get; set; }
-
         /// <summary>
         /// Assigning a function to this property will cause that function to be called
         /// when the button is toggled on or off.

OpenDiablo2.Common/Interfaces/UI/ISkillsPanel.cs

@@ -0,0 +1,23 @@
+/*  OpenDiablo 2 - An open source re-implementation of Diablo 2 in C#
+ *  
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>. 
+ */
+
+namespace OpenDiablo2.Common.Interfaces.UI
+{
+    public interface ISkillsPanel : IPanel
+    {
+        int ActivePanelIndex { get; }
+    }
+}

OpenDiablo2.Common/Models/ButtonLayout.cs

@@ -1,45 +1,65 @@
-using System.Collections.Generic;
+/*  OpenDiablo 2 - An open source re-implementation of Diablo 2 in C#
+ *  
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>. 
+ */
+
+using OpenDiablo2.Common.Enums;
+using System.Collections.Generic;
 using System.Collections.Immutable;
 using System.Drawing;
-using OpenDiablo2.Common.Enums;
 
 namespace OpenDiablo2.Common.Models
 {
     public class ButtonLayout
     {
-        public int XSegments { get; internal set; }
-        public string ResourceName { get; internal set; }
-        public string PaletteName { get; internal set; }
-        public bool Toggleable { get; internal set; } = false;
-        public int BaseFrame { get; internal set; } = 0;
-        public int DisabledFrame { get; internal set; } = -1;
-        public string FontPath { get; internal set; } = ResourcePaths.FontExocet10;
+        public int XSegments { get; set; } = 1;
+        public int YSegments { get; set; } = 1;
+        public string ResourceName { get; set; }
+        public string PaletteName { get; set; }
+        public bool Toggleable { get; set; } = false;
+        public int BaseFrame { get; set; } = 0;
+        public int DisabledFrame { get; set; } = -1;
+        public string FontPath { get; set; } = ResourcePaths.FontExocet10;
+        public Rectangle ClickableRect { get; set; }
+        public bool AllowFrameChange { get; set; } = true;
 
         public bool IsDarkenedWhenDisabled => DisabledFrame == -1;
 
         public static ImmutableDictionary<eButtonType, ButtonLayout> Values { get; } = new Dictionary<eButtonType, ButtonLayout>
         {
             {eButtonType.Wide,  new ButtonLayout { XSegments = 2, ResourceName = ResourcePaths.WideButtonBlank, PaletteName = Palettes.Units } },
-            {eButtonType.Medium, new ButtonLayout{ XSegments = 1, ResourceName=ResourcePaths.MediumButtonBlank, PaletteName = Palettes.Units } },
-            {eButtonType.Narrow, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.NarrowButtonBlank,PaletteName = Palettes.Units } },
-            {eButtonType.Tall, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.TallButtonBlank, PaletteName = Palettes.Units } },
-            {eButtonType.Short, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.ShortButtonBlank, PaletteName = Palettes.Units, FontPath = ResourcePaths.FontExocet10 } },
-            {eButtonType.Cancel, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.CancelButton,PaletteName = Palettes.Units } },
+            {eButtonType.Medium, new ButtonLayout{ ResourceName = ResourcePaths.MediumButtonBlank, PaletteName = Palettes.Units } },
+            {eButtonType.Narrow, new ButtonLayout { ResourceName = ResourcePaths.NarrowButtonBlank, PaletteName = Palettes.Units } },
+            {eButtonType.Tall, new ButtonLayout { ResourceName = ResourcePaths.TallButtonBlank, PaletteName = Palettes.Units } },
+            {eButtonType.Short, new ButtonLayout { ResourceName = ResourcePaths.ShortButtonBlank, PaletteName = Palettes.Units, FontPath = ResourcePaths.FontExocet10 } },
+            {eButtonType.Cancel, new ButtonLayout { ResourceName = ResourcePaths.CancelButton, PaletteName = Palettes.Units } },
             // Minipanel
-            {eButtonType.MinipanelCharacter, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 0 } },
-            {eButtonType.MinipanelInventory, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 2 } },
-            {eButtonType.MinipanelSkill, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 4 } },
-            {eButtonType.MinipanelAutomap, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 8 } },
-            {eButtonType.MinipanelMessage, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 10 } },
-            {eButtonType.MinipanelQuest, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 12 } },
-            {eButtonType.MinipanelMenu, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MinipanelButton,PaletteName = Palettes.Units, BaseFrame = 14 } },
+            {eButtonType.MinipanelCharacter, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 0 } },
+            {eButtonType.MinipanelInventory, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 2 } },
+            {eButtonType.MinipanelSkill, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 4 } },
+            {eButtonType.MinipanelAutomap, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 8 } },
+            {eButtonType.MinipanelMessage, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 10 } },
+            {eButtonType.MinipanelQuest, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 12 } },
+            {eButtonType.MinipanelMenu, new ButtonLayout { ResourceName = ResourcePaths.MinipanelButton, PaletteName = Palettes.Units, BaseFrame = 14 } },
             
-            {eButtonType.SecondaryInvHand, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.InventoryWeaponsTab, PaletteName = Palettes.Units } },
-            {eButtonType.Run, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.RunButton,PaletteName = Palettes.Units, Toggleable = true } },
-            {eButtonType.Menu, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.MenuButton,PaletteName = Palettes.Units, Toggleable = true } },
-            {eButtonType.GoldCoin, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.GoldCoinButton,PaletteName = Palettes.Units } },
-            {eButtonType.Close, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.SquareButton,PaletteName = Palettes.Units, BaseFrame = 10 } },
-            {eButtonType.Skill, new ButtonLayout {XSegments = 1, ResourceName = ResourcePaths.AddSkillButton, PaletteName = Palettes.Units, DisabledFrame = 2 } },
+            {eButtonType.SecondaryInvHand, new ButtonLayout { ResourceName = ResourcePaths.InventoryWeaponsTab, PaletteName = Palettes.Units,
+                ClickableRect = new Rectangle(0, 0, 0, 20), AllowFrameChange = false } },
+            {eButtonType.Run, new ButtonLayout { ResourceName = ResourcePaths.RunButton, PaletteName = Palettes.Units, Toggleable = true } },
+            {eButtonType.Menu, new ButtonLayout { ResourceName = ResourcePaths.MenuButton, PaletteName = Palettes.Units, Toggleable = true } },
+            {eButtonType.GoldCoin, new ButtonLayout { ResourceName = ResourcePaths.GoldCoinButton, PaletteName = Palettes.Units } },
+            {eButtonType.Close, new ButtonLayout { ResourceName = ResourcePaths.SquareButton, PaletteName = Palettes.Units, BaseFrame = 10 } },
+            {eButtonType.Skill, new ButtonLayout { ResourceName = ResourcePaths.AddSkillButton, PaletteName = Palettes.Units, DisabledFrame = 2 } },
         }.ToImmutableDictionary();
     }
 

OpenDiablo2.Common/OpenDiablo2.Common.csproj

@@ -103,6 +103,7 @@
     <Compile Include="Interfaces\Mobs\IEnemyTypeCombatConfig.cs" />
     <Compile Include="Interfaces\Mobs\IEnemyTypeConfig.cs" />
     <Compile Include="Interfaces\Mobs\IEnemyTypeDifficultyConfig.cs" />
+    <Compile Include="Interfaces\UI\ISkillsPanel.cs" />
     <Compile Include="Models\Mobs\EnemyTypeAppearanceConfig.cs" />
     <Compile Include="Models\Mobs\EnemyTypeCombatConfig.cs" />
     <Compile Include="Models\Mobs\EnemyTypeConfig.cs" />

OpenDiablo2.Common/ResourcePaths.cs

@@ -15,6 +15,7 @@
  */
 
 using OpenDiablo2.Common.Enums;
+using System;
 
 namespace OpenDiablo2.Common
 {
@@ -131,6 +132,13 @@ namespace OpenDiablo2.Common
         public const string Frame = @"data\global\ui\PANEL\800borderframe.dc6";
         public const string InventoryCharacterPanel = @"data\global\ui\PANEL\invchar6.DC6";
         public const string InventoryWeaponsTab = @"data\global\ui\PANEL\invchar6Tab.DC6";
+        public const string SkillsPanelAmazon = @"data\global\ui\SPELLS\skltree_a_back.DC6";
+        public const string SkillsPanelBarbarian = @"data\global\ui\SPELLS\skltree_b_back.DC6";
+        public const string SkillsPanelDruid = @"data\global\ui\SPELLS\skltree_d_back.DC6";
+        public const string SkillsPanelAssassin = @"data\global\ui\SPELLS\skltree_i_back.DC6";
+        public const string SkillsPanelNecromancer = @"data\global\ui\SPELLS\skltree_n_back.DC6";
+        public const string SkillsPanelPaladin = @"data\global\ui\SPELLS\skltree_p_back.DC6";
+        public const string SkillsPanelSorcerer = @"data\global\ui\SPELLS\skltree_s_back.DC6";
 
         public const string RunButton = @"data\global\ui\PANEL\runbutton.dc6";
         public const string MenuButton = @"data\global\ui\PANEL\menubutton.DC6";
@@ -309,6 +317,29 @@ namespace OpenDiablo2.Common
                     return string.Empty;
             }
         }
+
+        public static string GetHeroSkillPanel(eHero hero)
+        {
+            switch (hero)
+            {
+                case eHero.Amazon:
+                    return SkillsPanelAmazon;
+                case eHero.Assassin:
+                    return SkillsPanelAssassin;
+                case eHero.Barbarian:
+                    return SkillsPanelBarbarian;
+                case eHero.Druid:
+                    return SkillsPanelDruid;
+                case eHero.Necromancer:
+                    return SkillsPanelNecromancer;
+                case eHero.Paladin:
+                    return SkillsPanelPaladin;
+                case eHero.Sorceress:
+                    return SkillsPanelSorcerer;
+                default:
+                    throw new ArgumentException($"Unknown hero type: {hero}");
+            }
+        }
     }
 }
 

OpenDiablo2.Core/AutofacModule.cs

@@ -43,6 +43,7 @@ namespace OpenDiablo2.Core
             builder.RegisterType<PanelFrame>().As<IPanelFrame>().InstancePerDependency();
             builder.RegisterType<CharacterPanel>().AsImplementedInterfaces().InstancePerDependency();
             builder.RegisterType<InventoryPanel>().AsImplementedInterfaces().InstancePerDependency();
+            builder.RegisterType<SkillsPanel>().AsImplementedInterfaces().InstancePerDependency();
             builder.RegisterType<ItemContainer>().As<IItemContainer>().InstancePerDependency();
             builder.RegisterType<MPQProvider>().As<IMPQProvider>().SingleInstance();
             builder.RegisterType<ResourceManager>().As<IResourceManager>().SingleInstance();

OpenDiablo2.Core/OpenDiablo2.Core.csproj

@@ -76,10 +76,11 @@
     <Compile Include="UI\GameHUD.cs" />
     <Compile Include="UI\ItemContainer.cs" />
     <Compile Include="UI\PanelFrame.cs" />
-    <Compile Include="UI\InventoryPanel.cs" />
+    <Compile Include="UI\Panels\InventoryPanel.cs" />
+    <Compile Include="UI\Panels\SkillsPanel.cs" />
     <Compile Include="UI\TextBox.cs" />
     <Compile Include="UI\MiniPanel.cs" />
-    <Compile Include="UI\CharacterPanel.cs" />
+    <Compile Include="UI\Panels\CharacterPanel.cs" />
   </ItemGroup>
   <ItemGroup>
     <None Include="app.config" />

OpenDiablo2.Core/UI/Button.cs

@@ -1,7 +1,6 @@
 using OpenDiablo2.Common;
 using OpenDiablo2.Common.Interfaces;
 using OpenDiablo2.Common.Models;
-using System;
 using System.Drawing;
 
 namespace OpenDiablo2.Core.UI
@@ -40,9 +39,6 @@ namespace OpenDiablo2.Core.UI
 
         private Point labelOffset = new Point();
 
-        public Size ClickableRect { get; set; }
-        public bool AllowFrameChange { get; set; } = true;
-
         private bool enabled = true;
         public bool Enabled
         {
@@ -88,14 +84,18 @@ namespace OpenDiablo2.Core.UI
 
             sprite = renderWindow.LoadSprite(buttonLayout.ResourceName, buttonLayout.PaletteName, true);
 
-            // TODO: Less stupid way of doing this would be nice
+            // TODO: Less stupid way of doing this would be super nice
             buttonWidth = 0;
             buttonHeight = 0;
             for (int i = 0; i < buttonLayout.XSegments; i++)
             {
                 sprite.Frame = i;
                 buttonWidth += sprite.LocalFrameSize.Width;
-                buttonHeight = Math.Max(buttonHeight, sprite.LocalFrameSize.Height);
+            }
+            for(int i = 0; i < buttonLayout.YSegments; i++)
+            {
+                sprite.Frame = i * buttonLayout.YSegments;
+                buttonHeight += sprite.LocalFrameSize.Height;
             }
 
             label.MaxWidth = buttonWidth - 8;
@@ -140,11 +140,13 @@ namespace OpenDiablo2.Core.UI
                 return;
             }
 
-            int clickWidth = ClickableRect.Width > 0 ? ClickableRect.Width : buttonWidth;
-            int clickHeight = ClickableRect.Height > 0 ? ClickableRect.Height : buttonHeight;
-            var hovered = mouseInfoProvider.MouseX >= location.X && mouseInfoProvider.MouseX < (location.X + clickWidth)
-                && mouseInfoProvider.MouseY >= location.Y && mouseInfoProvider.MouseY < (location.Y + clickHeight);
+            int clickWidth = buttonLayout.ClickableRect.Width > 0 ? buttonLayout.ClickableRect.Width : buttonWidth;
+            int clickHeight = buttonLayout.ClickableRect.Height > 0 ? buttonLayout.ClickableRect.Height : buttonHeight;
 
+            var hovered = mouseInfoProvider.MouseX >= location.X + buttonLayout.ClickableRect.X 
+                && mouseInfoProvider.MouseY >= location.Y + buttonLayout.ClickableRect.Y
+                && mouseInfoProvider.MouseX < location.X + clickWidth + buttonLayout.ClickableRect.X
+                && mouseInfoProvider.MouseY < location.Y + clickHeight + buttonLayout.ClickableRect.Y;
 
             if (!activeLock && hovered && mouseInfoProvider.LeftMouseDown && !mouseInfoProvider.ReserveMouse)
             {
@@ -185,7 +187,7 @@ namespace OpenDiablo2.Core.UI
         {
             var frame = buttonLayout.BaseFrame;
 
-            if (AllowFrameChange)
+            if (buttonLayout.AllowFrameChange)
             {
                 if(!Enabled && buttonLayout.DisabledFrame >= 0)
                 {
@@ -205,7 +207,7 @@ namespace OpenDiablo2.Core.UI
                 }
             }
 
-            renderWindow.Draw(sprite, buttonLayout.XSegments, 1, frame);
+            renderWindow.Draw(sprite, buttonLayout.XSegments, buttonLayout.YSegments, frame);
             var offset = pressed ? -2 : 0;
 
             label.Location = new Point(location.X + offset + labelOffset.X, location.Y - offset + labelOffset.Y);

OpenDiablo2.Core/UI/GameHUD.cs

@@ -38,7 +38,7 @@ namespace OpenDiablo2.Core.UI
 
         // Test fields
         private bool addNewAttribute = true;
-        private bool addNewSkill = false;
+        private bool addNewSkill = true;
 
         public GameHUD(
             IRenderWindow renderWindow,
@@ -74,6 +74,7 @@ namespace OpenDiablo2.Core.UI
             addSkillButton = createButton(eButtonType.Skill);
             addSkillButton.Location = new Point(564, 562);
             addSkillButton.Enabled = addNewSkill;
+            addSkillButton.OnActivate = () => TogglePanel(ePanelType.Skill);
 
             panelSprite = renderWindow.LoadSprite(ResourcePaths.GamePanels, Palettes.Act1, true);
             healthManaSprite = renderWindow.LoadSprite(ResourcePaths.HealthMana, Palettes.Act1, true);

OpenDiablo2.Core/UI/Panels/InventoryPanel.cs

@@ -55,14 +55,10 @@ namespace OpenDiablo2.Core.UI
             secondaryLeftButton = createButton(eButtonType.SecondaryInvHand);
             secondaryLeftButton.Location = panelSprite.Location + new Size(15, 22);
             secondaryLeftButton.OnActivate = ToggleWeaponsSlot;
-            secondaryLeftButton.ClickableRect = new Size(0, 20);
-            secondaryLeftButton.AllowFrameChange = false;
 
             secondaryRightButton = createButton(eButtonType.SecondaryInvHand);
             secondaryRightButton.Location = panelSprite.Location + new Size(246, 22);
             secondaryRightButton.OnActivate = ToggleWeaponsSlot;
-            secondaryRightButton.ClickableRect = new Size(0, 20);
-            secondaryRightButton.AllowFrameChange = false;
 
             goldButton = createButton(eButtonType.GoldCoin);
             goldButton.Location = panelSprite.Location + new Size(84, 391);

OpenDiablo2.Core/UI/Panels/SkillsPanel.cs

@@ -0,0 +1,83 @@
+/*  OpenDiablo 2 - An open source re-implementation of Diablo 2 in C#
+ *  
+ *   This program is free software: you can redistribute it and/or modify
+ *   it under the terms of the GNU General Public License as published by
+ *   the Free Software Foundation, either version 3 of the License, or
+ *   (at your option) any later version.
+ *
+ *   This program is distributed in the hope that it will be useful,
+ *   but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *   GNU General Public License for more details.
+ *
+ *   You should have received a copy of the GNU General Public License
+ *   along with this program.  If not, see <https://www.gnu.org/licenses/>. 
+ */
+
+using OpenDiablo2.Common;
+using OpenDiablo2.Common.Enums;
+using OpenDiablo2.Common.Extensions;
+using OpenDiablo2.Common.Interfaces;
+using OpenDiablo2.Common.Interfaces.UI;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace OpenDiablo2.Core.UI
+{
+    public class SkillsPanel : ISkillsPanel
+    {
+        private readonly IRenderWindow renderWindow;
+        private readonly ISprite panelSprite;
+
+        private readonly IButton[] treeButtons;
+
+        public event OnPanelClosedEvent OnPanelClosed;
+
+        // Test fields
+        private readonly eHero hero = eHero.Barbarian;
+
+        public SkillsPanel(
+            IRenderWindow renderWindow,
+            Func<eHero, int, IButton> createTreeButton,
+            Func<eButtonType, IButton> createButton)
+        {
+            this.renderWindow = renderWindow;
+
+            panelSprite = renderWindow.LoadSprite(ResourcePaths.GetHeroSkillPanel(hero), Palettes.Act1, FrameType.GetOffset(), true);
+
+            treeButtons = Enumerable.Range(0, 3).Select(o =>
+            {
+                var btn = createTreeButton(hero, o);
+                btn.Location = FrameType.GetOffset();
+                btn.OnActivate = () => { ActivePanelIndex = o; };
+                return btn;
+            }).ToArray();
+        }
+
+        public ePanelType PanelType => ePanelType.Skill;
+        public ePanelFrameType FrameType => ePanelFrameType.Right;
+
+        public int ActivePanelIndex { get; private set; }
+
+        public void Update()
+        {
+            foreach (var button in treeButtons)
+                button.Update();
+        }
+
+        public void Render()
+        {
+            renderWindow.Draw(panelSprite, 2, 2, 0);
+
+            treeButtons[ActivePanelIndex].Render();
+        }
+
+        public void Dispose()
+        {
+            panelSprite.Dispose();
+        }
+    }
+}

OpenDiablo2.Scenes/Game.cs

@@ -34,6 +34,7 @@ namespace OpenDiablo2.Scenes
 
         private eMovementType lastMovementType = eMovementType.Stopped;
         private byte lastDirection = 255;
+        private bool clickedOnHud = false;
 
         const double Rad2Deg = 180.0 / Math.PI;
 
@@ -79,8 +80,12 @@ namespace OpenDiablo2.Scenes
         
         private void HandleMovement()
         {
-            // todo; if clicked on hud, then we don't move. But when clicked on map and move cursor over hud, then it's fine
-            if (gameHUD.IsMouseOver())
+            if(gameHUD.IsMouseOver() && lastMovementType == eMovementType.Stopped)
+                clickedOnHud = true;
+            else if (!mouseInfoProvider.LeftMouseDown)
+                clickedOnHud = false;
+
+            if (clickedOnHud)
                 return;
 
             var mx = mouseInfoProvider.MouseX - 400 - gameState.CameraOffset;

OpenDiablo2/OpenDiablo2.csproj

@@ -71,6 +71,7 @@
       <HintPath>..\packages\System.Console.4.3.1\lib\net46\System.Console.dll</HintPath>
     </Reference>
     <Reference Include="System.Core" />
+    <Reference Include="System.Drawing" />
     <Reference Include="System.Reflection.TypeExtensions, Version=4.1.3.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a, processorArchitecture=MSIL">
       <HintPath>..\packages\System.Reflection.TypeExtensions.4.5.1\lib\net461\System.Reflection.TypeExtensions.dll</HintPath>
     </Reference>

OpenDiablo2/Program.cs

@@ -15,11 +15,13 @@
  */
 
 using System;
+using System.Drawing;
 using System.IO;
 using System.Linq;
 using System.Reflection;
 using Autofac;
 using CommandLine;
+using OpenDiablo2.Common;
 using OpenDiablo2.Common.Enums;
 using OpenDiablo2.Common.Interfaces;
 using OpenDiablo2.Common.Models;
@@ -106,6 +108,21 @@ namespace OpenDiablo2
                 return (buttonType) => componentContext.Resolve<IButton>(new NamedParameter("buttonLayout", ButtonLayout.Values[buttonType]));
             });
 
+            containerBuilder.Register<Func<eHero, int, IButton>>(c =>
+            {
+                var componentContext = c.Resolve<IComponentContext>();
+                return (hero, tabIndex) => componentContext.Resolve<IButton>(new NamedParameter("buttonLayout", new ButtonLayout()
+                {
+                    XSegments = 2,
+                    YSegments = 2,
+                    BaseFrame = 3 - tabIndex,   // tabs are ordered from the bottom in the files
+                    PaletteName = Palettes.Units,
+                    ResourceName = ResourcePaths.GetHeroSkillPanel(hero),
+                    ClickableRect = new Rectangle(227, (tabIndex + 1) * 107, 95, 108),   // todo; verify clickable rectangle
+                    AllowFrameChange = false
+                }));
+            });
+
             containerBuilder.Register<Func<ePanelFrameType, IPanelFrame>>(c =>
             {
                 var componentContext = c.Resolve<IComponentContext>();