flex wrap and context root being assets

assets/icons/Keyboard.svg

@@ -1,16 +1,3 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="3" y="9" width="26" height="14" rx="2" stroke="white" stroke-width="4" stroke-miterlimit="2.85545" stroke-linejoin="round"/>
-<line x1="5" y1="14" x2="27" y2="14" stroke="white" stroke-width="2"/>
-<line x1="5" y1="18" x2="27" y2="18" stroke="white" stroke-width="2"/>
-<line x1="14" y1="15" x2="14" y2="19" stroke="white" stroke-width="2"/>
-<line x1="24" y1="11" x2="24" y2="13" stroke="white" stroke-width="2"/>
-<line x1="20" y1="11" x2="20" y2="13" stroke="white" stroke-width="2"/>
-<line x1="16" y1="11" x2="16" y2="13" stroke="white" stroke-width="2"/>
-<line x1="18" y1="15" x2="18" y2="19" stroke="white" stroke-width="2"/>
-<line x1="24" y1="19" x2="24" y2="21" stroke="white" stroke-width="2"/>
-<line x1="22" y1="15" x2="22" y2="17" stroke="white" stroke-width="2"/>
-<line x1="8" y1="11" x2="8" y2="13" stroke="white" stroke-width="2"/>
-<line x1="12" y1="11" x2="12" y2="13" stroke="white" stroke-width="2"/>
-<line x1="10" y1="15" x2="10" y2="17" stroke="white" stroke-width="2"/>
-<line x1="8" y1="19" x2="8" y2="21" stroke="white" stroke-width="2"/>
+<path d="M27 7C29.2091 7 31 8.79086 31 11V21C31 23.2091 29.2091 25 27 25H5C2.79086 25 1 23.2091 1 21V11C1 8.79086 2.79086 7 5 7H27ZM5 19V21H7V19H5ZM9 19V21H23V19H9ZM25 19V21H27V19H25ZM5 15V17H9V15H5ZM11 15V17H13V15H11ZM15 15V17H17V15H15ZM19 15V17H21V15H19ZM23 15V17H27V15H23ZM5 11V13H7V11H5ZM9 11V13H11V11H9ZM13 11V13H15V11H13ZM17 11V13H19V11H17ZM21 11V13H23V11H21ZM25 11V13H27V11H25Z" fill="white"/>
 </svg>

src/ui/core/ui_context.cpp

@@ -5,6 +5,7 @@
 
 #include "slot_map.h"
 #include "RmlUi/Core/StreamMemory.h"
+#include "RmlUi/../../Source/Core/DocumentHeader.h"
 
 #include "ultramodern/error_handling.hpp"
 #include "recomp_ui.h"
@@ -238,9 +239,16 @@ recompui::ContextId recompui::create_context() {
     root->shim = false;
 
     ret.open();
+
+    // TODO: Utilize existing headers (for full continuity between documents) or get absolute path of assets.
+    Rml::DocumentHeader header = Rml::DocumentHeader();
+    header.source = "assets/";
+    doc->ProcessHeader(&header);
+
     root->set_width(100.0f, Unit::Percent);
     root->set_height(100.0f, Unit::Percent);
     root->set_display(Display::Flex);
+
     ret.close();
 
     doc->Hide();

src/ui/elements/ui_select.cpp

@@ -163,7 +163,7 @@ namespace recompui {
         ContextId context = get_current_context();
         Svg *arrow = context.create_element<Svg>(
             &selectarrow_element,
-            "assets/icons/Arrow.svg"
+            "icons/Arrow.svg"
         );
 
         arrow->set_width(24.0f);

src/ui/elements/ui_style.cpp

@@ -546,6 +546,23 @@ namespace recompui {
         }
     }
 
+    void Style::set_flex_wrap(FlexWrap flex_wrap) {
+        switch (flex_wrap) {
+        case FlexWrap::NoWrap:
+            set_property(Rml::PropertyId::FlexWrap, Rml::Style::FlexWrap::Nowrap);
+            break;
+        case FlexWrap::Wrap:
+            set_property(Rml::PropertyId::FlexWrap, Rml::Style::FlexWrap::Wrap);
+            break;
+        case FlexWrap::WrapReverse:
+            set_property(Rml::PropertyId::FlexWrap, Rml::Style::FlexWrap::WrapReverse);
+            break;
+        default:
+            assert(false && "Unknown flex wrap.");
+            break;
+        }
+    }
+
     void Style::set_align_items(AlignItems align_items) {
         set_property(Rml::PropertyId::AlignItems, to_rml(align_items));
     }

src/ui/elements/ui_style.h

@@ -91,6 +91,7 @@ namespace recompui {
         void set_flex(float grow, float shrink);
         void set_flex(float grow, float shrink, float basis, Unit basis_unit = Unit::Percent);
         void set_flex_direction(FlexDirection flex_direction);
+        void set_flex_wrap(FlexWrap flex_wrap);
         void set_align_items(AlignItems align_items);
         void set_overflow(Overflow overflow);
         void set_overflow_x(Overflow overflow);

src/ui/elements/ui_types.h

@@ -222,6 +222,12 @@ namespace recompui {
         ColumnReverse
     };
 
+    enum class FlexWrap {
+        NoWrap,
+        Wrap,
+        WrapReverse
+    };
+
     enum class AlignItems {
         FlexStart,
         FlexEnd,

src/ui/ui_player_card.cpp

@@ -1,4 +1,5 @@
 #include "ui_player_card.h"
+#include "elements/ui_label.h"
 
 namespace recompui {
 
@@ -19,26 +20,68 @@ PlayerCard::PlayerCard(
     const float size = is_assignment_card ? assign_player_card_size : static_player_card_size;
     const float icon_size = is_assignment_card ? assign_player_card_icon_size : static_player_card_icon_size;
 
+    recompui::ContextId context = get_current_context();
+
     set_display(Display::Flex);
     set_flex_direction(FlexDirection::Column);
-    set_align_items(AlignItems::Center);
-    set_justify_content(JustifyContent::Center);
+    set_align_items(AlignItems::FlexStart);
+    set_justify_content(JustifyContent::FlexStart);
     set_width(size);
-    set_height(size);
-    set_border_color(theme::color::BorderSoft);
-    set_border_width(theme::border::width, Unit::Dp);
-    set_border_radius(theme::border::radius_sm, Unit::Dp);
-    set_background_color(theme::color::Transparent);
+    set_height_auto();
+    set_gap(8.0f);
 
-    recompui::ContextId context = get_current_context();
-    icon = context.create_element<Svg>(this, "assets/icons/RecordBorder.svg");
+    if (!is_assignment_card) {
+        auto player_label = context.create_element<Label>(this, "Player " + std::to_string(player_index + 1), LabelStyle::Small);
+    }
+
+    card = context.create_element<Element>(this, 0, "div", false);
+    card->set_display(Display::Flex);
+    card->set_flex_direction(FlexDirection::Column);
+    card->set_align_items(AlignItems::Center);
+    card->set_justify_content(JustifyContent::Center);
+    card->set_width(size);
+    card->set_height(size);
+    card->set_border_color(theme::color::BorderSoft);
+    card->set_border_width(theme::border::width, Unit::Dp);
+    card->set_border_radius(theme::border::radius_sm, Unit::Dp);
+    card->set_background_color(theme::color::Transparent);
+
+    icon = context.create_element<Svg>(card, "icons/RecordBorder.svg");
     icon->set_width(icon_size, Unit::Dp);
     icon->set_height(icon_size, Unit::Dp);
     icon->set_color(theme::color::TextDim);
     icon->set_display(Display::None);
 
     if (!is_assignment_card) {
+        recompinput::AssignedPlayer& assigned_player = recompinput::get_assigned_player(player_index, is_assignment_card);
         update_player_card_icon();
+
+        auto profile_label = context.create_element<Label>(this, "Profile", LabelStyle::Small);
+
+        profile_label->set_margin_top(8.0f);
+
+        std::vector<SelectOption> options;
+        options.emplace_back("Controller", "cont");
+        options.emplace_back("customprofile", "unassigned");
+
+        auto select = context.create_element<Select>(
+            this,
+            options,
+            "Player",
+            "Select Player"
+        );
+        select->add_change_callback([this, player_index](SelectOption& option, int option_index) {
+            printf("Selected option: %s at index %d for player %d\n", option.text.c_str(), option_index, player_index);
+        });
+        select->set_width(100.0f, Unit::Percent);
+        select->set_enabled(assigned_player.is_assigned);
+        
+        auto edit_profile_button = context.create_element<Button>(this, "Edit Profile", ButtonStyle::Secondary);
+        edit_profile_button->add_pressed_callback([this, player_index]() {
+            printf("Edit Profile button pressed for player %d\n", player_index);
+        });
+        edit_profile_button->set_width(100.0f, Unit::Percent);
+        edit_profile_button->set_enabled(assigned_player.is_assigned);
     }
 }
 
@@ -50,15 +93,15 @@ void PlayerCard::update_player_card_icon() {
     if (assigned_player.is_assigned) {
         if (assigned_player.controller != nullptr) {
             icon->set_display(Display::Block);
-            icon->set_src("assets/icons/Cont.svg");
+            icon->set_src("icons/Cont.svg");
         } else {
             icon->set_display(Display::Block);
-            icon->set_src("assets/icons/Keyboard.svg");
+            icon->set_src("icons/Keyboard.svg");
         }
     } else {
         if (is_assignment_card) {
             icon->set_display(Display::Block);
-            icon->set_src("assets/icons/RecordBorder.svg");
+            icon->set_src("icons/RecordBorder.svg");
         } else {
             icon->set_display(Display::None);
         }
@@ -72,14 +115,14 @@ void PlayerCard::update_assignment_player_card() {
 
     if (!recompinput::get_player_is_assigned(player_index)) {
         icon->set_scale_2D(1.0f, 1.0f);
-        set_background_color(theme::color::Transparent);
+        card->set_background_color(theme::color::Transparent);
         icon->set_color(theme::color::TextDim);
         return;
     }
 
-    set_background_color(theme::color::PrimaryA20);
+    card->set_background_color(theme::color::PrimaryA20);
 
-    bool has_controller =recompinput::does_player_have_controller(player_index);
+    bool has_controller = recompinput::does_player_have_controller(player_index);
 
     std::chrono::steady_clock::duration time_since_last_button_press = recompinput::get_player_time_since_last_button_press(player_index);
     auto millis = static_cast<float>(std::chrono::duration_cast<std::chrono::milliseconds>(time_since_last_button_press).count());

src/ui/ui_player_card.h

@@ -4,13 +4,16 @@
 #include "elements/ui_element.h"
 #include "elements/ui_svg.h"
 #include "elements/ui_button.h"
+#include "elements/ui_select.h"
 
 namespace recompui {
 
 class PlayerCard : public Element {
 protected:
     bool is_open = false;
+    Element *card = nullptr;
     Svg* icon = nullptr;
+    Select *profile_select = nullptr;
     int player_index = -1;
     bool is_assignment_card = false;