Added dropdown option type

CMakeLists.txt

@@ -162,11 +162,13 @@ set (SOURCES
     ${CMAKE_SOURCE_DIR}/src/ui/util/hsv.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementConfigGroup.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementConfigOption.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementDescription.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionType.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeCheckbox.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeColor.cpp
+    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeDropdown.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRadioTabs.cpp
     ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementOptionTypeRange.cpp
-    ${CMAKE_SOURCE_DIR}/src/ui/elements/ElementDescription.cpp
 
     ${CMAKE_SOURCE_DIR}/rsp/aspMain.cpp
     ${CMAKE_SOURCE_DIR}/rsp/njpgdspMain.cpp

assets/scss/styles/components/ConfigOption.scss

@@ -318,3 +318,77 @@
     color: $color-text;
     tab-index: none;
 }
+
+.config-option-dropdown {
+    display: flex;
+    position: relative;
+    flex: 1 1 100%;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: auto;
+    max-width: space(500);
+    height: auto;
+    padding: space(8) space(12);
+
+    &__select {
+        @extend %body;
+        @extend %nav-all;
+        @include trans-colors-border;
+        @include border($color-white-a50);
+        display: block;
+        position: relative;
+        box-sizing: border-box;
+        flex: 1 1 100%;
+
+        align-items: center;
+        justify-content: flex-start;
+        width: auto;
+        height: space(48);
+        padding: space(14);
+        border-radius: $border-radius-md;
+        background-color: $color-white-a5;
+        cursor: pointer;
+
+        &:hover, &:focus {
+            @include border($color-white-a80);
+            background-color: $color-white-a20;
+        }
+
+        selectvalue {
+            display: inline;
+            height: auto;
+            margin: auto 0;
+        }
+
+        selectbox {
+            @include border($color-border);
+            margin-top: space(2);
+            padding: space(4) 0;
+            border-radius: $border-radius-md;
+            background-color: $color-background-3;
+            
+            option {
+                @extend %nav-all;
+                @include trans-colors;
+                padding: space(8) space(12);
+                background-color: $color-transparent;
+                color: $color-text-dim;
+                font-weight: 400;
+
+                &:hover, &:focus {
+                    background-color: $color-white-a20;
+                }
+
+                &:hover:not(:checked) {
+                    cursor: pointer;
+                }
+
+                &:checked {
+                    background-color: $color-white-a5;
+                    color: $color-white;
+                }
+            }
+        }
+    }
+}

config_example.cheats.en_us.json

@@ -15,9 +15,15 @@
     "gameplay/movement/L_for_fast/values/x2": "X2",
     "gameplay/movement/L_for_fast/values/x4": "X4",
     "gameplay/movement/L_for_fast/values/x6": "X6",
+    "gameplay/movement/L_for_fast2": "Hold L to move fast the sequel",
+    "gameplay/movement/L_for_fast2/values/off": "Off",
+    "gameplay/movement/L_for_fast2/values/x2": "X2",
+    "gameplay/movement/L_for_fast2/values/x4": "X4",
+    "gameplay/movement/L_for_fast2/values/x6": "X6",
     "gameplay/movement/L_to_levitate": "Hold L to levitate",
     "gameplay/movement/always_quickspin": "Always quickspin",
     "gameplay/movement/always_quickspin:description": "Always <b>quickspin</b> whenever using your <i>sword</i> and in a <i>state</i> where <i>you</i> can <b>quickspin.</b><br /><br />yeah...",
+    "gameplay/movement/heart_color": "Hearts color",
     "gameplay/movement/link_size": "Link's Size",
 
     "gameplay/abilities": "Abilities",

config_example.cheats.json

@@ -43,7 +43,7 @@
                 "key": "movement",
                 "options": [
                     {
-                        "type": "RadioTabs",
+                        "type": "Dropdown",
                         "key": "L_for_fast",
                         "default": "x2",
                         "values": [
@@ -53,6 +53,17 @@
                             "x6"
                         ]
                     },
+                    {
+                        "type": "RadioTabs",
+                        "key": "L_for_fast2",
+                        "default": "x2",
+                        "values": [
+                            "off",
+                            "x2",
+                            "x4",
+                            "x6"
+                        ]
+                    },
                     {
                         "type": "Checkbox",
                         "key": "L_to_levitate",
@@ -63,6 +74,11 @@
                         "key": "always_quickspin",
                         "default": false
                     },
+                    {
+                        "type": "Color",
+                        "key": "heart_color",
+                        "default": [255, 50, 50]
+                    },
                     {
                         "type": "Range",
                         "key": "link_size",

src/ui/elements/ElementConfigOption.cpp

@@ -86,6 +86,10 @@ void ElementConfigOption::AddOptionTypeElement() {
             add_option_el<ElementOptionTypeColor>(doc, wrapper, "recomp-option-type-color", config_key);
             break;
         }
+        case ConfigOptionType::Dropdown: {
+            add_option_el<ElementOptionTypeDropdown>(doc, wrapper, "recomp-option-type-dropdown", config_key);
+            break;
+        }
         case ConfigOptionType::RadioTabs: {
             add_option_el<ElementOptionTypeRadioTabs>(doc, wrapper, "recomp-option-type-radio-tabs", config_key);
             break;

src/ui/elements/ElementOptionType.cpp

@@ -0,0 +1,16 @@
+#include "ElementOptionType.h"
+
+namespace recompui {
+
+ElementOptionType::ElementOptionType(const Rml::String& tag, const std::string& base_class) : Rml::Element(tag)
+{
+    SetAttribute("recomp-store-element", true);
+    SetClass(base_class, true);
+}
+
+ElementOptionType::~ElementOptionType()
+{
+
+}
+
+} // namespace Rml

src/ui/elements/ElementOptionType.h

@@ -0,0 +1,20 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_H
+
+#include "common.h"
+
+// base class for ElementOptionTypes. Already set up as an event listener,
+// and contains required data. Initialization sets an important flag.
+
+namespace recompui {
+
+class ElementOptionType : public Rml::Element, public Rml::EventListener {
+public:
+	ElementOptionType(const Rml::String& tag, const std::string& base_class);
+	virtual ~ElementOptionType();
+
+    std::string config_key;
+};
+
+} // namespace recompui
+#endif

src/ui/elements/ElementOptionTypeDropdown.cpp

@@ -0,0 +1,79 @@
+
+#include "ElementOptionTypeDropdown.h"
+
+#include <string>
+
+using json = nlohmann::json;
+
+namespace recompui {
+
+static const std::string select_id = "recomp-select"; 
+static const std::string select_option_id = "recomp-select-option__"; 
+
+static const std::string cls_base = "config-option-dropdown"; 
+static const std::string cls_select = cls_base + "__select"; 
+
+ElementOptionTypeDropdown::ElementOptionTypeDropdown(const Rml::String& tag) : ElementOptionType(tag, cls_base)
+{
+    Rml::ElementFormControlSelect *select_el = (Rml::ElementFormControlSelect *)AppendChild(GetOwnerDocument()->CreateElement("select"));
+    select_el->SetId(select_id);
+    select_el->SetValue("0");
+    select_el->AddEventListener(Rml::EventId::Change, this, false);
+    select_el->SetClass(cls_select, true);
+}
+
+ElementOptionTypeDropdown::~ElementOptionTypeDropdown()
+{
+    auto select_el = get_select();
+    RemoveEventListener(Rml::EventId::Change, this, false);
+}
+
+Rml::ElementFormControlSelect *ElementOptionTypeDropdown::get_select()
+{
+    return (Rml::ElementFormControlSelect *)GetElementById(select_id);
+}
+
+void ElementOptionTypeDropdown::set_cur_option(int opt) {
+    auto select_el = get_select();
+    select_el->SetValue(std::to_string(opt));
+    DirtyLayout();
+}
+
+void ElementOptionTypeDropdown::init_option(std::string& _config_key) {
+    config_key = _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"];
+
+    auto select_el = get_select();
+
+    for (int i = 0; i < opt_array.size(); i++) {
+        const auto &j_opt = opt_array[i];
+        const std::string opt_val = j_opt.get<std::string>();
+        const std::string opt_id = select_option_id + config_key + "--" + opt_val;
+        
+        const std::string translation_key = "translations/" + config_key + "/values/" + opt_val;
+        const std::string& opt_text = recomp::config::get_config_store_value<std::string>(translation_key);
+
+        select_el->Add(opt_text, std::to_string(i));
+    }
+
+    set_cur_option(opt);
+}
+
+void ElementOptionTypeDropdown::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>();
+            recomp::config::set_config_store_value(config_key, new_value);
+		}
+	}
+}
+
+} // namespace Rml

src/ui/elements/ElementOptionTypeDropdown.h

@@ -0,0 +1,24 @@
+#ifndef RECOMPUI_ELEMENT_OPTION_TYPE_DROPDOWN_H
+#define RECOMPUI_ELEMENT_OPTION_TYPE_DROPDOWN_H
+
+#include "common.h"
+#include "ElementOptionType.h"
+
+namespace recompui {
+
+class ElementOptionTypeDropdown : public ElementOptionType {
+public:
+	ElementOptionTypeDropdown(const Rml::String& tag);
+	virtual ~ElementOptionTypeDropdown();
+
+    void init_option(std::string& _config_key);
+protected:
+	void ProcessEvent(Rml::Event& event) override;
+
+private:
+	void set_cur_option(int opt);
+	Rml::ElementFormControlSelect *get_select();
+};
+
+} // namespace recompui
+#endif

src/ui/ui_elements.cpp

@@ -14,6 +14,7 @@ static RecompElementConfig custom_elements[] = {
     CUSTOM_ELEMENT("recomp-config-option", recompui::ElementConfigOption),
     CUSTOM_ELEMENT("recomp-option-type-checkbox", recompui::ElementOptionTypeCheckbox),
     CUSTOM_ELEMENT("recomp-option-type-color", recompui::ElementOptionTypeColor),
+    CUSTOM_ELEMENT("recomp-option-type-dropdown", recompui::ElementOptionTypeDropdown),
     CUSTOM_ELEMENT("recomp-option-type-radio-tabs", recompui::ElementOptionTypeRadioTabs),
     CUSTOM_ELEMENT("recomp-option-type-range", recompui::ElementOptionTypeRange),
 };

src/ui/ui_elements.h

@@ -8,6 +8,7 @@
 #include "elements/ElementConfigGroup.h"
 #include "elements/ElementOptionTypeCheckbox.h"
 #include "elements/ElementOptionTypeColor.h"
+#include "elements/ElementOptionTypeDropdown.h"
 #include "elements/ElementOptionTypeRadioTabs.h"
 #include "elements/ElementOptionTypeRange.h"
 #include "elements/ElementDescription.h"