outfit window working, still needs radio group and remove test button

modules/core_styles/styles/checkboxes.otui

@@ -46,3 +46,32 @@ ColorBox < UICheckBox
     image:
       source: /core_styles/images/colorbox.png
       coords: 0 0 16 16
+      
+ButtonBox < UICheckBox
+  font: verdana-11px-antialised
+  background-color: white
+  color: #f0ad4dff
+  size: 106 24
+  box-size: 106 24
+  text-offset: 0 0
+  text-align: center
+
+  border-image:
+    source: /core_styles/images/button.png
+    border: 5
+
+  $hover:
+    border-image:
+      source: /core_styles/images/button_hover.png
+      border: 5
+
+  $checked:
+    text-offset: 1 1
+    border-image:
+      source: /core_styles/images/button_down.png
+      border: 5
+
+  $disabled:
+    color: #f0ad4d88
+    background-color: #ffffff88
+    

modules/outfit/outfit.lua

@@ -7,6 +7,7 @@ local m_outfit = nil
 local m_outfits = nil
 local m_currentOutfit = 1
 local m_currentColor = nil
+local m_currentClothe = nil
 
 -- private functions
 local function onAddonCheckChange(addon, value)
@@ -18,6 +19,60 @@ local function onAddonCheckChange(addon, value)
   m_creature:setOutfit(m_outfit)
 end
 
+local function onColorCheckChange(color)
+  if color == m_currentColor then
+    color.onCheckChange = nil
+    color:setChecked(true)
+    color.onCheckChange = function() onColorCheckChange(color) end
+  else
+    m_currentColor.onCheckChange = nil
+    m_currentColor:setChecked(false)
+    local color2 = m_currentColor
+    m_currentColor.onCheckChange = function() onColorCheckChange(color2) end
+
+    m_currentColor = color
+
+    if m_currentClothe:getId() == 'head' then
+      m_outfit.head = m_currentColor.colorId
+    elseif m_currentClothe:getId() == 'primary' then
+      m_outfit.body = m_currentColor.colorId
+    elseif m_currentClothe:getId() == 'secondary' then
+      m_outfit.legs = m_currentColor.colorId
+    elseif m_currentClothe:getId() == 'detail' then
+      m_outfit.feet = m_currentColor.colorId
+    end
+      
+    m_creature:setOutfit(m_outfit)
+  end
+end
+
+local function onClotheCheckChange(clothe)
+  if clothe == m_currentClothe then
+    clothe.onCheckChange = nil
+    clothe:setChecked(true)
+    clothe.onCheckChange = function() onClotheCheckChange(clothe) end
+  else
+    m_currentClothe.onCheckChange = nil
+    m_currentClothe:setChecked(false)
+    local clothe2 = m_currentClothe
+    m_currentClothe.onCheckChange = function() onClotheCheckChange(clothe2) end
+
+    m_currentClothe = clothe
+    
+    local color = 0
+    if m_currentClothe:getId() == 'head' then
+      color = m_outfit.head
+    elseif m_currentClothe:getId() == 'primary' then
+      color = m_outfit.body
+    elseif m_currentClothe:getId() == 'secondary' then
+      color = m_outfit.legs
+    elseif m_currentClothe:getId() == 'detail' then
+      color = m_outfit.feet
+    end
+    window:getChildById('color' .. color):setChecked(true)
+  end
+end
+
 local function update()
   local nameWidget = window:getChildById('name')
   nameWidget:setText(m_outfits[currentOutfit][2])
@@ -64,24 +119,6 @@ local function update()
 
 end
 
-local function onColorCheckChange(color)
-  if color == m_currentColor then
-    color.onCheckChange = nil
-    color:setChecked(true)
-    color.onCheckChange = function() onColorCheckChange(color) end
-  else
-    m_currentColor.onCheckChange = nil
-    m_currentColor:setChecked(false)
-    local color2 = m_currentColor
-    m_currentColor.onCheckChange = function() onColorCheckChange(color2) end
-
-    m_currentColor = color
-
-    m_outfit.head = m_currentColor.colorId
-    m_creature:setOutfit(m_outfit)
-  end
-end
-
 -- public functions
 function Outfit.test()
   local button = UIButton.create()
@@ -101,6 +138,16 @@ function Outfit.create(creature, outfitList)
 
   m_outfit = creature:getOutfit()
   
+  m_currentClothe = window:getChildById('head')
+  local head = window:getChildById('head')
+  local primary = window:getChildById('primary')
+  local secondary = window:getChildById('secondary')
+  local detail = window:getChildById('detail')
+  head.onCheckChange = function() onClotheCheckChange(head) end
+  primary.onCheckChange = function() onClotheCheckChange(primary) end
+  secondary.onCheckChange = function() onClotheCheckChange(secondary) end
+  detail.onCheckChange = function() onClotheCheckChange(detail) end
+
   local creatureWidget = window:getChildById('creature')
   creatureWidget:setCreature(creature)
 
@@ -110,6 +157,7 @@ function Outfit.create(creature, outfitList)
       window:addChild(color)
 
       local outfitColor = getOufitColor(j*19 + i)
+      color:setId('color' .. j*19+i)
       color.colorId = j*19 + i
       color:setStyle('Color')
       color:setBackgroundColor(outfitColor)

modules/outfit/outfit.otui

@@ -27,26 +27,27 @@ Window
     anchors.left: name.left
     margin-top: 5
 
-  Button
+  ButtonBox
     id: head
     text: Head
     anchors.top: creature.top
     anchors.left: creature.right
     margin-left: 10
+    checked: true
 
-  Button
+  ButtonBox
     id: primary
     text: Primary
     anchors.top: prev.bottom
     anchors.left: prev.left
 
-  Button
+  ButtonBox
     id: secondary
     text: Secondary
     anchors.top: prev.bottom
     anchors.left: prev.left
 
-  Button
+  ButtonBox
     id: detail
     text: Detail
     anchors.top: prev.bottom

src/framework/ui/uicheckbox.cpp

@@ -21,6 +21,7 @@
  */
 
 #include "uicheckbox.h"
+#include "uitranslator.h"
 #include <framework/otml/otmlnode.h>
 #include <framework/graphics/image.h>
 #include <framework/graphics/font.h>
@@ -30,6 +31,7 @@
 UICheckBox::UICheckBox()
 {
     m_focusable = false;
+    m_textAlign = Fw::AlignLeft;
 }
 
 void UICheckBox::render()
@@ -46,7 +48,7 @@ void UICheckBox::render()
     if(m_text.length()) {
         Rect textRect(m_rect);
         textRect.setTopLeft(textRect.topLeft() + m_textOffset);
-        m_font->renderText(m_text, textRect, Fw::AlignLeft, m_foregroundColor);
+        m_font->renderText(m_text, textRect, m_textAlign, m_foregroundColor);
     }
 }
 
@@ -67,6 +69,8 @@ void UICheckBox::onStyleApply(const OTMLNodePtr& styleNode)
             m_text = node->value();
         else if(node->tag() == "box-size")
             m_boxSize = node->value<Size>();
+        else if(node->tag() == "text-align")
+            m_textAlign = Fw::translateAlignment(node->value());
         else if(node->tag() == "checked") {
             // must be scheduled because setChecked can change the style again
             g_dispatcher.addEvent(std::bind(&UICheckBox::setChecked, asUICheckBox(), node->value<bool>()));

src/framework/ui/uicheckbox.h

@@ -46,6 +46,7 @@ protected:
     std::string m_text;
     Size m_boxSize;
     Point m_textOffset;
+    Fw::AlignmentFlag m_textAlign;
 };
 
 #endif