GUI: Added skin for the emote slots in the EmotePopup

Allows more flexible customization as needed by Jewelry theme.

6 files changed, 40 insertions, 29 deletions

diff --git a/data/graphics/gui/jewelry/theme.xml b/data/graphics/gui/jewelry/theme.xml
index 21d75058..aa965d07 100644
--- a/data/graphics/gui/jewelry/theme.xml
+++ b/data/graphics/gui/jewelry/theme.xml
@@ -520,6 +520,12 @@
     </state>
   </skin>
 
+  <skin type="EmoteSlot" width="34" height="34">
+    <state hovered="true">
+      <img src="window.png" x="331" y="0" width="32" height="32" offsetX="1" offsetY="2" />
+    </state>
+  </skin>
+
   <icon name="equip-box-ammo" src="equipmentbox.png" x="128" y="32" width="32" height="32" />
   <icon name="equip-box-chest" src="equipmentbox.png" x="0" y="0" width="32" height="32" />
   <icon name="equip-box-feet" src="equipmentbox.png" x="128" y="0" width="32" height="32" />
diff --git a/data/graphics/gui/theme.xml b/data/graphics/gui/theme.xml
index cd4cb1e5..3ed93c6e 100644
--- a/data/graphics/gui/theme.xml
+++ b/data/graphics/gui/theme.xml
@@ -315,6 +315,12 @@
     </state>
   </skin>
 
+  <skin type="EmoteSlot" width="34" height="34">
+    <state hovered="true">
+      <img src="selection.png" offsetX="1" offsetY="2" />
+    </state>
+  </skin>
+
   <icon name="equip-box-ammo" src="equip-box-ammo.png" />
   <icon name="equip-box-chest" src="equip-box-chest.png" />
   <icon name="equip-box-feet" src="equip-box-feet.png" />
diff --git a/src/gui/emotepopup.cpp b/src/gui/emotepopup.cpp
index e759ab25..4df6b995 100644
--- a/src/gui/emotepopup.cpp
+++ b/src/gui/emotepopup.cpp
@@ -22,11 +22,10 @@
 
 #include "gui/emotepopup.h"
 
-#include "configuration.h"
 #include "emoteshortcut.h"
 #include "graphics.h"
-#include "log.h"
 
+#include "gui/gui.h"
 #include "resources/emotedb.h"
 #include "resources/image.h"
 #include "resources/theme.h"
@@ -34,19 +33,10 @@
 #include <guichan/mouseinput.hpp>
 #include <guichan/selectionlistener.hpp>
 
-const int EmotePopup::gridWidth = 34;  // emote icon width + 4
-const int EmotePopup::gridHeight = 36; // emote icon height + 4
-
 static const int MAX_COLUMNS = 6;
 
 EmotePopup::EmotePopup()
 {
-    mSelectionImage = Theme::getImageFromTheme("selection.png");
-    if (!mSelectionImage)
-        logger->error("Unable to load selection.png");
-
-    mSelectionImage->setAlpha(config.guiAlpha);
-
     addMouseListener(this);
     recalculateSize();
     setVisible(true);
@@ -62,30 +52,41 @@ void EmotePopup::draw(gcn::Graphics *graphics)
 
     const int emoteCount = EmoteDB::getEmoteCount();
 
+    auto &slotSkin = gui->getTheme()->getSkin(SkinType::EmoteSlot);
+    WidgetState slotState;
+    slotState.width = slotSkin.width;
+    slotState.height = slotSkin.height;
+
     for (int i = 0; i < emoteCount ; i++)
     {
         int row = i / mColumnCount;
         int column = i % mColumnCount;
 
-        int emoteX = getPadding() + column * gridWidth;
-        int emoteY = getPadding() + row * gridHeight;
+        slotState.x = getPadding() + column * slotSkin.width;
+        slotState.y = getPadding() + row * slotSkin.height;
 
         // Center the last row when there are less emotes than columns
         if (row == mRowCount - 1)
         {
             const int emotesLeft = emoteCount % mColumnCount;
-            emoteX += (mColumnCount - emotesLeft) * gridWidth / 2;
+            slotState.x += (mColumnCount - emotesLeft) * slotSkin.width / 2;
         }
 
+        slotState.flags = 0;
+
         // Draw selection image below hovered item
         if (i == mHoveredEmoteIndex)
-            g->drawImage(mSelectionImage, emoteX, emoteY + 4);
+            slotState.flags |= STATE_HOVERED;
+
+        slotSkin.draw(g, slotState);
 
         // Draw emote icon
         if (auto image = EmoteDB::getByIndex(i).image)
         {
             image->setAlpha(1.0f);
-            g->drawImage(image, emoteX, emoteY);
+            g->drawImage(image,
+                         slotState.x + (slotSkin.width - image->getWidth()) / 2,
+                         slotState.y + (slotSkin.height - image->getHeight()) / 2);
         }
     }
 }
@@ -139,22 +140,24 @@ int EmotePopup::getIndexAt(int x, int y) const
         return -1;
 
     // Take into account the border
-    x -= 2;
-    y -= 4;
+    x -= getPadding();
+    y -= getPadding();
+
+    auto &slotSkin = gui->getTheme()->getSkin(SkinType::EmoteSlot);
 
-    const int row = y / gridHeight;
+    const int row = y / slotSkin.height;
 
     // Take into account that the last row is centered
     if (row == mRowCount - 1)
     {
         const int emotesLeft = EmoteDB::getEmoteCount() % mColumnCount;
         const int emotesMissing = mColumnCount - emotesLeft;
-        x -= emotesMissing * gridWidth / 2;
+        x -= emotesMissing * slotSkin.width / 2;
         if (x < 0)
             return -1;
     }
 
-    const int column = std::min(x / gridWidth, mColumnCount - 1);
+    const int column = std::min(x / slotSkin.width, mColumnCount - 1);
     const int index = column + (row * mColumnCount);
 
     if (index >= 0 && index < EmoteDB::getEmoteCount())
@@ -178,7 +181,8 @@ void EmotePopup::recalculateSize()
         mColumnCount = 0;
     }
 
-    setContentSize(mColumnCount * gridWidth, mRowCount * gridHeight);
+    auto &slotSkin = gui->getTheme()->getSkin(SkinType::EmoteSlot);
+    setContentSize(mColumnCount * slotSkin.width, mRowCount * slotSkin.height);
 }
 
 void EmotePopup::distributeValueChangedEvent()
@@ -186,7 +190,5 @@ void EmotePopup::distributeValueChangedEvent()
     const gcn::SelectionEvent event(this);
 
     for (auto &listener : mListeners)
-    {
         listener->valueChanged(event);
-    }
 }
diff --git a/src/gui/emotepopup.h b/src/gui/emotepopup.h
index c95c5723..664eef27 100644
--- a/src/gui/emotepopup.h
+++ b/src/gui/emotepopup.h
@@ -23,7 +23,6 @@
 #pragma once
 
 #include "gui/widgets/popup.h"
-#include "resources/resource.h"
 
 #include <guichan/mouselistener.hpp>
 
@@ -104,7 +103,6 @@ class EmotePopup : public Popup
          */
         void distributeValueChangedEvent();
 
-        ResourceRef<Image> mSelectionImage;
         int mSelectedEmoteId = -1;
         int mHoveredEmoteIndex = -1;
 
@@ -112,7 +110,4 @@ class EmotePopup : public Popup
         int mColumnCount = 1;
 
         std::list<gcn::SelectionListener *> mListeners;
-
-        static const int gridWidth;
-        static const int gridHeight;
 };
diff --git a/src/resources/theme.cpp b/src/resources/theme.cpp
index 53017193..4f4586a4 100644
--- a/src/resources/theme.cpp
+++ b/src/resources/theme.cpp
@@ -549,6 +549,7 @@ static std::optional<SkinType> readSkinType(std::string_view type)
     if (type == "ShortcutBox")          return SkinType::ShortcutBox;
     if (type == "EquipmentBox")         return SkinType::EquipmentBox;
     if (type == "ItemSlot")             return SkinType::ItemSlot;
+    if (type == "EmoteSlot")            return SkinType::EmoteSlot;
     return {};
 }
 
diff --git a/src/resources/theme.h b/src/resources/theme.h
index 5cfe105a..bfd3b33a 100644
--- a/src/resources/theme.h
+++ b/src/resources/theme.h
@@ -95,6 +95,7 @@ enum class SkinType
     ShortcutBox,
     EquipmentBox,
     ItemSlot,
+    EmoteSlot,
 };
 
 enum StateFlags : uint8_t