Move config registry/option to librecomp + added Color conf opt type

src/ui/elements/ElementConfigGroup.cpp

@@ -1,17 +1,12 @@
-
 #include "ElementConfigGroup.h"
 #include "ElementConfigOption.h"
-#include "../config_options/ConfigOption.h"
-#include "../config_options/ConfigRegistry.h"
-#include "ElementOptionTypeCheckbox.h"
-#include "librecomp/config_store.hpp"
+
 #include <string>
-#include "recomp_ui.h"
-#include <RmlUi/Core/ElementDocument.h>
-#include <RmlUi/Core/ElementText.h>
 #include <cassert>
 
 using json = nlohmann::json;
+using ConfigOptionType = recomp::config::ConfigOptionType;
+using ConfigOption = recomp::config::ConfigOption;
 
 namespace recompui {
 
@@ -62,7 +57,7 @@ void ElementConfigGroup::AddConfigOptionElement(const json& option_json) {
     ConfigOptionType el_option_type = ConfigOptionType::Label;
     from_json(option_json["type"], el_option_type);
 
-    const std::string key = get_string_in_json(option_json, ConfigOption::schema::key);
+    const std::string key = recomp::config::get_string_in_json(option_json, ConfigOption::schema::key);
 
     Rml::Element *option_container = GetChild(1);
     Rml::Element *child_opt = nullptr;
@@ -87,11 +82,11 @@ void ElementConfigGroup::AddConfigOptionElement(const json& option_json) {
 }
 
 static nlohmann::json get_options(std::string& config_key) {
-    if (config_key_is_base_group(config_key)) {
-        return get_group_json(config_key);
+    if (recomp::config::config_key_is_base_group(config_key)) {
+        return recomp::config::get_group_json(config_key);
     }
 
-    const json& group_json = get_json_from_key(config_key);
+    const json& group_json = recomp::config::get_json_from_key(config_key);
     return group_json["options"];
 }
 
@@ -103,7 +98,7 @@ void ElementConfigGroup::OnAttributeChange(const Rml::ElementAttributes& changed
     auto config_store_key_attr = changed_attributes.find("recomp-data");
     if (config_store_key_attr != changed_attributes.end() && config_store_key_attr->second.GetType() == Rml::Variant::STRING) {
         config_key = config_store_key_attr->second.Get<Rml::String>();
-        bool is_base_group = config_key_is_base_group(config_key);
+        bool is_base_group = recomp::config::config_key_is_base_group(config_key);
     
         option_type = ConfigOptionType::Label;
 
@@ -113,13 +108,13 @@ void ElementConfigGroup::OnAttributeChange(const Rml::ElementAttributes& changed
             ToggleTextLabelVisibility(false);
         } else {
             try {
-                auto value = recomp::get_config_store_value<std::string>("translations/" + config_key);
+                auto value = recomp::config::get_config_store_value<std::string>("translations/" + config_key);
                 SetTextLabel(value);
             } catch (const std::runtime_error& e) {
                 SetTextLabel(e.what());
             }
 
-            const json& group_json = get_json_from_key(config_key);
+            const json& group_json = recomp::config::get_json_from_key(config_key);
 
             from_json(group_json["type"], option_type);
             assert(

src/ui/elements/ElementConfigGroup.h

@@ -1,9 +1,7 @@
 #ifndef RECOMPUI_ELEMENTS_CONFIG_GROUP_H
 #define RECOMPUI_ELEMENTS_CONFIG_GROUP_H
 
-#include "RmlUi/Core/Element.h"
-#include "json/json.hpp"
-#include "../config_options/ConfigOption.h"
+#include "common.h"
 
 namespace recompui {
 
@@ -17,7 +15,7 @@ public:
 	ElementConfigGroup(const Rml::String& tag);
 	virtual ~ElementConfigGroup();
 
-    ConfigOptionType option_type;
+    recomp::config::ConfigOptionType option_type;
     std::string config_key;
 protected:
     void OnAttributeChange(const Rml::ElementAttributes& changed_attributes);

src/ui/elements/ElementConfigOption.cpp

@@ -1,17 +1,12 @@
 
 #include "ElementConfigOption.h"
-#include "../config_options/ConfigOption.h"
-#include "../config_options/ConfigRegistry.h"
-#include "ElementOptionTypeCheckbox.h"
-#include "ElementOptionTypeRadioTabs.h"
-#include "ElementOptionTypeRange.h"
-#include "librecomp/config_store.hpp"
+
+#include "../ui_elements.h"
 #include <string>
-#include "recomp_ui.h"
-#include <RmlUi/Core/ElementDocument.h>
-#include <RmlUi/Core/ElementText.h>
+
 
 using json = nlohmann::json;
+using ConfigOptionType = recomp::config::ConfigOptionType;
 
 namespace recompui {
 
@@ -50,9 +45,14 @@ ElementConfigOption::~ElementConfigOption()
     RemoveEventListener(Rml::EventId::Mouseover, this, true);
 }
 
+Rml::Element *ElementConfigOption::GetLabel() {
+    Rml::ElementText *text_label = (Rml::ElementText *)GetElementById("config-opt-label");
+    return text_label->GetParentNode();
+}
+
 void ElementConfigOption::SetTextLabel(const std::string& s) {
-    Rml::ElementText *label = (Rml::ElementText *)GetElementById("config-opt-label");
-    label->SetText(s);
+    Rml::ElementText *text_label = (Rml::ElementText *)GetElementById("config-opt-label");
+    text_label->SetText(s);
     DirtyLayout();
 }
 
@@ -68,8 +68,8 @@ static void add_option_el(Rml::ElementDocument *doc, Rml::Element *wrapper, cons
 
 void ElementConfigOption::AddOptionTypeElement() {
     ConfigOptionType el_option_type = ConfigOptionType::Label;
-    const json& option_json = get_json_from_key(config_key);
-    from_json(option_json["type"], el_option_type);
+    const json& option_json = recomp::config::get_json_from_key(config_key);
+    recomp::config::from_json(option_json["type"], el_option_type);
 
     Rml::Element *wrapper = GetOptionTypeWrapper();
     Rml::ElementDocument *doc = GetOwnerDocument();
@@ -82,6 +82,10 @@ void ElementConfigOption::AddOptionTypeElement() {
             add_option_el<ElementOptionTypeCheckbox>(doc, wrapper, "recomp-option-type-checkbox", config_key);
             break;
         }
+        case ConfigOptionType::Color: {
+            add_option_el<ElementOptionTypeColor>(doc, wrapper, "recomp-option-type-color", config_key);
+            break;
+        }
         case ConfigOptionType::RadioTabs: {
             add_option_el<ElementOptionTypeRadioTabs>(doc, wrapper, "recomp-option-type-radio-tabs", config_key);
             break;
@@ -107,8 +111,11 @@ void ElementConfigOption::OnAttributeChange(const Rml::ElementAttributes& change
             SetClass(config_option_base_class_hz, true);
         }
 
+        Rml::Element *label = GetLabel();
+        label->SetAttribute("for", "input__" + config_key);
+
         try {
-            auto value = recomp::get_config_store_value<std::string>("translations/" + config_key);
+            auto value = recomp::config::get_config_store_value<std::string>("translations/" + config_key);
             SetTextLabel(value);
             printf("found type and translation\n");
             AddOptionTypeElement();

src/ui/elements/ElementConfigOption.h

@@ -1,9 +1,7 @@
 #ifndef RECOMPUI_ELEMENTS_CONFIG_OPTION_H
 #define RECOMPUI_ELEMENTS_CONFIG_OPTION_H
 
-#include "RmlUi/Core/Element.h"
-#include "../config_options/ConfigOption.h"
-#include "RmlUi/Core/EventListener.h"
+#include "common.h"
 
 namespace recompui {
 
@@ -17,12 +15,13 @@ public:
 	ElementConfigOption(const Rml::String& tag);
 	virtual ~ElementConfigOption();
 
-    ConfigOptionType option_type;
+    recomp::config::ConfigOptionType option_type;
     std::string config_key;
     bool in_checkbox_group = false;
     
 protected:
     void OnAttributeChange(const Rml::ElementAttributes& changed_attributes);
+    Rml::Element *GetLabel(void);
     void SetTextLabel(const std::string& s);
     void AddOptionTypeElement();
     Rml::Element *GetOptionTypeWrapper();

src/ui/elements/ElementDescription.cpp

@@ -1,10 +1,6 @@
-
 #include "ElementDescription.h"
-#include "librecomp/config_store.hpp"
-#include "../config_options/ConfigRegistry.h"
+
 #include <string>
-#include <RmlUi/Core/ElementDocument.h>
-#include <RmlUi/Core/ElementText.h>
 
 using json = nlohmann::json;
 
@@ -50,7 +46,7 @@ void ElementDescription::OnAttributeChange(const Rml::ElementAttributes& changed
         config_key = config_store_key_attr->second.Get<Rml::String>();
 
         try {
-            auto value = recomp::get_config_store_value<std::string>("translations/" + config_key + ":description");
+            auto value = recomp::config::get_config_store_value<std::string>("translations/" + config_key + ":description");
             update_text(value);
         } catch (const std::runtime_error& e) {
             update_text(default_contents);

src/ui/elements/ElementDescription.h

@@ -1,8 +1,7 @@
 #ifndef RECOMPUI_ELEMENT_DESCRIPTION_H
 #define RECOMPUI_ELEMENT_DESCRIPTION_H
 
-#include "RmlUi/Core/Element.h"
-#include "../config_options/ConfigOption.h"
+#include "common.h"
 
 namespace recompui {
 

src/ui/elements/ElementOptionTypeCheckbox.cpp

@@ -1,10 +1,7 @@
-
 #include "ElementOptionTypeCheckbox.h"
-#include "librecomp/config_store.hpp"
-#include "../config_options/ConfigRegistry.h"
+
 #include <string>
-#include <RmlUi/Core/ElementDocument.h>
-#include <RmlUi/Core/ElementText.h>
+
 
 using json = nlohmann::json;
 
@@ -51,8 +48,8 @@ void ElementOptionTypeCheckbox::set_checked(bool checked) {
 
 void ElementOptionTypeCheckbox::init_option(std::string& _config_key) {
     config_key = _config_key;
-    const json& option_json = get_json_from_key(config_key);
-    int value = recomp::get_config_store_value<int>(config_key);
+    const json& option_json = recomp::config::get_json_from_key(config_key);
+    int value = recomp::config::get_config_store_value<int>(config_key);
     set_checked(value);
 }
 
@@ -63,8 +60,8 @@ void ElementOptionTypeCheckbox::ProcessEvent(Rml::Event& event)
 	{
 		if (event.GetPhase() == Rml::EventPhase::Capture || event.GetPhase() == Rml::EventPhase::Target)
 		{
-            bool new_value = !recomp::get_config_store_value<int>(config_key);
-            recomp::set_config_store_value(config_key, new_value);
+            bool new_value = !recomp::config::get_config_store_value<int>(config_key);
+            recomp::config::set_config_store_value(config_key, new_value);
             set_checked(new_value);
 		}
 	}

src/ui/elements/ElementOptionTypeCheckbox.h

@@ -1,10 +1,7 @@
 #ifndef RECOMPUI_ELEMENT_OPTION_TYPE_CHECKBOX_H
 #define RECOMPUI_ELEMENT_OPTION_TYPE_CHECKBOX_H
 
-#include "RmlUi/Core/Element.h"
-#include "RmlUi/Core/Elements/ElementFormControlInput.h"
-#include "RmlUi/Core/EventListener.h"
-#include "../config_options/ConfigOption.h"
+#include "common.h"
 
 namespace recompui {
 
@@ -17,7 +14,7 @@ public:
 
     std::string config_key;
 
-	const ConfigOptionType option_type = ConfigOptionType::Checkbox;
+	const recomp::config::ConfigOptionType option_type = recomp::config::ConfigOptionType::Checkbox;
 protected:
     Rml::ElementFormControlInput *get_input();
 

src/ui/elements/ElementOptionTypeColor.cpp

@@ -0,0 +1,185 @@
+#include "ElementOptionTypeColor.h"
+
+#include <string>
+#include <math.h>
+
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string range_input_id = "recomp-color-range:"; // + H/S/V 
+static const std::string range_label_id = "recomp-color-range-label:"; // + H/S/V 
+static const std::string hsv_label[] = {"H", "S", "V"};
+
+static const std::string preview_block_id   = "recomp-color-block"; 
+
+static const std::string cls_base = "config-option-color"; 
+static const std::string cls_color_preview_wrapper = cls_base + "__preview-wrapper"; 
+static const std::string cls_color_preview_block   = cls_base + "__preview-block"; 
+static const std::string cls_color_hsv_wrapper = cls_base + "__hsv-wrapper"; 
+
+// TODO: use these 3 directly from ElementOptionTypeRange
+static const std::string range_cls_base = "config-option-range"; 
+static const std::string range_cls_label = cls_base + "__label"; 
+static const std::string range_cls_range_input = cls_base + "__range-input"; 
+
+
+ElementOptionTypeColor::ElementOptionTypeColor(const Rml::String& tag) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    SetClass(cls_base, true);
+
+    hsv.h = 0;
+    hsv.s = 0;
+    hsv.v = 0;
+
+    Rml::ElementDocument *doc = GetOwnerDocument();
+
+    {
+        Rml::Element *preview_wrapper = AppendChild(doc->CreateElement("div"));
+        preview_wrapper->SetClass(cls_color_preview_wrapper, true);
+        {
+            Rml::Element *preview_block = preview_wrapper->AppendChild(doc->CreateElement("div"));
+            preview_block->SetClass(cls_color_preview_block, true);
+            preview_block->SetId(preview_block_id);
+
+            Rml::Element *hsv_wrapper = preview_wrapper->AppendChild(doc->CreateElement("div"));
+            hsv_wrapper->SetClass(cls_color_hsv_wrapper, true);
+            for (int i = 0; i < 3; i++) {
+                const auto &label = hsv_label[i];
+
+                Rml::Element *range_wrapper = hsv_wrapper->AppendChild(doc->CreateElement("div"));
+                range_wrapper->SetClass(range_cls_base, true);
+                {
+                    Rml::Element *label_el = range_wrapper->AppendChild(doc->CreateElement("label"));
+                    label_el->SetClass(range_cls_label, true);
+                    label_el->SetId(range_label_id);
+                    {
+                        Rml::Element *text_node = label_el->AppendChild(doc->CreateTextNode(""));
+                        text_node->SetId(range_label_id + label);
+                    }
+
+                    Rml::ElementFormControlInput *range_el = (Rml::ElementFormControlInput *)range_wrapper->AppendChild(doc->CreateElement("input"));
+                    range_el->SetClass(range_cls_range_input, true);
+                    range_el->SetId(range_input_id + label);
+                    range_el->SetAttribute("type", "range");
+                    range_el->SetAttribute("min",   0);
+                    range_el->SetAttribute("hsv-index", i);
+                    if (i == 0) {
+                        range_el->SetValue(std::to_string((int)round(hsv[i])));
+                        range_el->SetAttribute("max", 360);
+                    } else {
+                        range_el->SetValue(std::to_string((int)round(hsv[i] * 100.0f)));
+                        range_el->SetAttribute("max", 100);
+                    }
+                    range_el->AddEventListener(Rml::EventId::Change, this, false);
+                }
+            }
+
+        }
+
+        // TODO: RGB hex input
+    }
+
+}
+
+ElementOptionTypeColor::~ElementOptionTypeColor()
+{
+    Rml::ElementList elements;
+    GetElementsByTagName(elements, "input");
+    for (int i = 0; i < elements.size(); i++) {
+        Rml::Element *el = elements[i];
+        el->RemoveEventListener(Rml::EventId::Click, this, false);
+    }
+}
+
+void ElementOptionTypeColor::set_value_label(int hsvIndex) {
+    const auto value = hsv[hsvIndex];
+    const auto& which = hsv_label[hsvIndex];
+
+    Rml::ElementText *text_label = (Rml::ElementText *)GetElementById(range_label_id + which);
+    if (hsvIndex == 0) {
+        text_label->SetText(which + ": " + std::to_string((int)round(value)));
+    } else {
+        text_label->SetText(which + ": " + std::to_string((int)round(value * 100.0f)));
+    }
+    DirtyLayout();
+}
+
+void ElementOptionTypeColor::set_preview_block_rgb(RgbColor rgb) {
+    Rml::Element *color_block = GetElementById(preview_block_id);
+    char hex_buf[8]; // Enough to hold "#RRGGBB\0"
+    sprintf(hex_buf, "#%02x%02x%02x", rgb.r, rgb.g, rgb.b);
+    const std::string hex_val = std::string(hex_buf);
+
+    color_block->SetProperty("background-color", hex_val);
+}
+
+void ElementOptionTypeColor::set_config_store_rgb() {
+    RgbColor rgb;
+    HsvFToRgb(hsv, rgb);
+    recomp::config::set_config_store_value(config_key + ":r", rgb.r);
+    recomp::config::set_config_store_value(config_key + ":g", rgb.g);
+    recomp::config::set_config_store_value(config_key + ":b", rgb.b);
+    set_preview_block_rgb(rgb);
+}
+
+
+void ElementOptionTypeColor::init_option(std::string& _config_key) {
+    
+
+    config_key = _config_key;
+
+    const json& option_json = recomp::config::get_json_from_key(config_key);
+
+    RgbColor col;
+    HsvColor hsv_uc;
+    col.r = recomp::config::get_config_store_value<int>(config_key + ":r");
+    col.g = recomp::config::get_config_store_value<int>(config_key + ":g");
+    col.b = recomp::config::get_config_store_value<int>(config_key + ":b");
+
+    RgbToHsv(col, hsv_uc);
+    hsv.h = std::clamp(hsv_uc.h * 360.0f, 0.0f, 360.0f);
+    hsv.s = std::clamp((float)hsv_uc.s / 255.0f, 0.0f, 1.0f);
+    hsv.v = std::clamp((float)hsv_uc.v / 255.0f, 0.0f, 1.0f);
+
+    set_preview_block_rgb(col);
+
+    for (int i = 0; i < 3; i++) {
+        const auto &label = hsv_label[i];
+
+        Rml::ElementFormControlInput *range = (Rml::ElementFormControlInput *)GetElementById(range_input_id + label);
+        if (i == 0) {
+            range->SetValue(std::to_string((int)round(hsv[i])));
+        } else {
+            range->SetValue(std::to_string((int)round(hsv[i] * 100.0f)));
+        }
+        set_value_label(i);
+    }
+}
+
+void ElementOptionTypeColor::ProcessEvent(Rml::Event& event)
+{
+	if (event == Rml::EventId::Change)
+	{
+		if (event.GetPhase() == Rml::EventPhase::Bubble || event.GetPhase() == Rml::EventPhase::Target)
+		{
+            Rml::Element *target = event.GetTargetElement();
+            auto val_variant = target->GetAttribute("value");
+            int new_value = val_variant->Get<int>();
+
+            auto idx_variant = target->GetAttribute("hsv-index");
+            auto hsv_index = idx_variant->Get<int>();
+            if (hsv_index == 0) {
+                hsv[hsv_index] = (float)new_value;
+            } else {
+                hsv[hsv_index] = (float)new_value / 100.0f;
+            }
+            set_value_label(hsv_index);
+            set_config_store_rgb();
+		}
+	}
+}
+
+} // namespace Rml

src/ui/elements/ElementOptionTypeColor.h

@@ -0,0 +1,26 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_COLOR_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_COLOR_H
+
+#include "common.h"
+
+namespace recompui {
+
+class ElementOptionTypeColor : public Rml::Element, public Rml::EventListener {
+public:
+	ElementOptionTypeColor(const Rml::String& tag);
+	virtual ~ElementOptionTypeColor();
+
+    std::string config_key;
+	HsvColorF hsv;
+
+    void init_option(std::string& _config_key);
+protected:
+	void set_value_label(int hsvIndex);
+	void set_config_store_rgb();
+	void set_preview_block_rgb(RgbColor rgb);
+
+	void ProcessEvent(Rml::Event& event) override;
+};
+
+} // namespace recompui
+#endif

src/ui/elements/ElementOptionTypeRadioTabs.cpp

@@ -1,10 +1,7 @@
 
 #include "ElementOptionTypeRadioTabs.h"
-#include "librecomp/config_store.hpp"
-#include "../config_options/ConfigRegistry.h"
+
 #include <string>
-#include <RmlUi/Core/ElementDocument.h>
-#include <RmlUi/Core/ElementText.h>
 
 using json = nlohmann::json;
 
@@ -47,8 +44,8 @@ void ElementOptionTypeRadioTabs::set_cur_option(int opt) {
 
 void ElementOptionTypeRadioTabs::init_option(std::string& _config_key) {
     config_key = _config_key;
-    const json& option_json = get_json_from_key(config_key);
-    int opt = recomp::get_config_store_value<int>(config_key);
+    const json& option_json = recomp::config::get_json_from_key(config_key);
+    int opt = recomp::config::get_config_store_value<int>(config_key);
     const json& opt_array = option_json["values"];
 
     for (int i = 0; i < opt_array.size(); i++) {
@@ -57,7 +54,7 @@ void ElementOptionTypeRadioTabs::init_option(std::string& _config_key) {
         const std::string opt_id = radio_input_id + config_key + "--" + opt_val;
         
         const std::string translation_key = "translations/" + config_key + "/values/" + opt_val;
-        const std::string& opt_text = recomp::get_config_store_value<std::string>(translation_key);
+        const std::string& opt_text = recomp::config::get_config_store_value<std::string>(translation_key);
 
         Rml::Element *radio_el = AppendChild(GetOwnerDocument()->CreateElement("input"));
 
@@ -88,7 +85,7 @@ void ElementOptionTypeRadioTabs::ProcessEvent(Rml::Event& event)
             Rml::Element *target = event.GetTargetElement();
             auto val_variant = target->GetAttribute("value");
             int new_value = val_variant->Get<int>();
-            recomp::set_config_store_value(config_key, new_value);
+            recomp::config::set_config_store_value(config_key, new_value);
             set_cur_option(new_value);
 		}
 	}

src/ui/elements/ElementOptionTypeRadioTabs.h

@@ -1,9 +1,7 @@
 #ifndef RECOMPUI_ELEMENT_OPTION_TYPE_RADIO_TABS_H
 #define RECOMPUI_ELEMENT_OPTION_TYPE_RADIO_TABS_H
 
-#include "RmlUi/Core/Element.h"
-#include "RmlUi/Core/Elements/ElementFormControlInput.h"
-#include "RmlUi/Core/EventListener.h"
+#include "common.h"
 
 namespace recompui {
 

src/ui/elements/ElementOptionTypeRange.cpp

@@ -1,7 +1,6 @@
 
 #include "ElementOptionTypeRange.h"
-#include "librecomp/config_store.hpp"
-#include "../config_options/ConfigRegistry.h"
+
 #include <string>
 #include <RmlUi/Core/ElementDocument.h>
 #include <RmlUi/Core/ElementText.h>
@@ -58,13 +57,13 @@ void ElementOptionTypeRange::set_value_label(int value) {
 
 void ElementOptionTypeRange::init_option(std::string& _config_key) {
     config_key = _config_key;
-    const json& option_json = get_json_from_key(config_key);
+    const json& option_json = recomp::config::get_json_from_key(config_key);
 
-    const int value = recomp::get_config_store_value<int>(config_key);
-    suffix = get_string_in_json_with_default(option_json, "suffix", "");
-    const int min = get_value_in_json<int>(option_json, "min");
-    const int max = get_value_in_json<int>(option_json, "max");
-    const int step = get_value_in_json_with_default<int>(option_json, "step", 1);
+    const int value = recomp::config::get_config_store_value<int>(config_key);
+    suffix = recomp::config::get_string_in_json_with_default(option_json, "suffix", "");
+    const int min = recomp::config::get_value_in_json<int>(option_json, "min");
+    const int max = recomp::config::get_value_in_json<int>(option_json, "max");
+    const int step = recomp::config::get_value_in_json_with_default<int>(option_json, "step", 1);
 
     Rml::ElementFormControlInput *range = (Rml::ElementFormControlInput *)GetElementById(range_input_id);
     range->SetAttribute("min", min);
@@ -77,7 +76,6 @@ void ElementOptionTypeRange::init_option(std::string& _config_key) {
 
 void ElementOptionTypeRange::ProcessEvent(Rml::Event& event)
 {
-	// Forward clicks to the target.
 	if (event == Rml::EventId::Change)
 	{
 		if (event.GetPhase() == Rml::EventPhase::Bubble || event.GetPhase() == Rml::EventPhase::Target)
@@ -85,7 +83,7 @@ void ElementOptionTypeRange::ProcessEvent(Rml::Event& event)
             Rml::ElementFormControlInput *target = (Rml::ElementFormControlInput *)event.GetTargetElement();
             auto val_s = target->GetValue();
             int new_value = std::stoi(val_s);
-            recomp::set_config_store_value(config_key, new_value);
+            recomp::config::set_config_store_value(config_key, new_value);
             set_value_label(new_value);
 		}
 	}

src/ui/elements/ElementOptionTypeRange.h

@@ -1,9 +1,7 @@
 #ifndef RECOMPUI_ELEMENT_OPTION_TYPE_RANGE_H
 #define RECOMPUI_ELEMENT_OPTION_TYPE_RANGE_H
 
-#include "RmlUi/Core/Element.h"
-#include "RmlUi/Core/Elements/ElementFormControlInput.h"
-#include "RmlUi/Core/EventListener.h"
+#include "common.h"
 
 namespace recompui {
 

src/ui/elements/common.h

@@ -0,0 +1,10 @@
+#ifndef RECOMPUI_ELEMENTS_COMMON
+#define RECOMPUI_ELEMENTS_COMMON
+// Common includes for custom recomp elements 
+
+#include "recomp_ui.h"
+#include "librecomp/config.hpp"
+#include "json/json.hpp"
+#include "RmlUi/Core.h"
+
+#endif