track and share focused/hovered input rows

assets/config_menu.rml

@@ -124,15 +124,36 @@
 						<div class="tab__indicator"></div>
 					</tab>
 					<panel class="config" data-model="controls_model">
-						<form class="config__form">
+						<form class="config__form" data-attr-cur-input="cur_input_row">
 							<div class="config__wrapper input-config">
 								<div class="input-config__horizontal-split">
-									<div class="input-config__mappings">
+									<div class="input-config__mappings" data-event-mouseout="set_input_row_focus(-1)">
 										<div class="input-config__mappings-scroll">
-											<div class="input-config__map-row" id="input_row" data-for="input_bindings, i : inputs">
+											<div
-												<label class="config-option__title" style="display:inline-block;width:250dp">{{get_input_name(i)}}</label>
+												class="input-config__map-row"
-												<button data-for="cur_binding, j : input_bindings" data-event-click="set_input_binding(i,j)" class="button button--secondary label-md" style="font-family:promptfont;font-size:40dp;display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center">{{cur_binding}}</button>
+												id="input_row"
-												<button data-event-click="clear_input_bindings(i)" class="button button--secondary label-md" style="display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center">Delete</button>
+												data-for="input_bindings, i : inputs"
+												data-event-mouseover="set_input_row_focus(i)"
+											>
+												<label
+													class="config-option__title"
+													style="display:inline-block;width:250dp"
+													>{{get_input_name(i)}}</label>
+												<button
+													data-event-blur="set_input_row_focus(-1)"
+													data-event-focus="set_input_row_focus(i)"
+													data-for="cur_binding, j : input_bindings"
+													data-event-click="set_input_binding(i,j)"
+													class="button button--secondary label-md"
+													style="font-family:promptfont;font-size:40dp;display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center"
+													>{{cur_binding}}</button>
+												<button
+													data-event-blur="set_input_row_focus(-1)"
+													data-event-focus="set_input_row_focus(i)"
+													data-event-click="clear_input_bindings(i)"
+													class="button button--secondary label-md"
+													style="display:inline-block;height:50dp;width:150dp;padding:0dp;text-align:center"
+													>Delete</button>
 											</div>
 										</div>
 									</div>
@@ -140,6 +161,14 @@
 										<div class="input-config__visual-aspect">
 											<div class="input-config__visual">
 												<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3>
+												<h3>Current focused row: {{cur_input_row}}</h3>
+												<div
+													class="input-config__visual-input"
+													data-for="input_bindings, i : inputs"
+													data-attr-visual-input="get_input_enum_name(i)"
+												>
+													{{get_input_name(i)}}
+												</div>
 											</div>
 										</div>
 									</div>

assets/scss/styles/components/InputConfig.scss

@@ -64,9 +64,46 @@ $visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin -
 
 .input-config__visual {
     display: flex;
+    flex-direction: column;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
 }
+
+
+$all-inputs:
+    A,
+    B,
+    Z,
+    START,
+    DPAD_UP,
+    DPAD_DOWN,
+    DPAD_LEFT,
+    DPAD_RIGHT,
+    L,
+    R,
+    C_UP,
+    C_DOWN,
+    C_LEFT,
+    C_RIGHT,
+    X_AXIS_NEG,
+    X_AXIS_POS,
+    Y_AXIS_NEG,
+    Y_AXIS_POS;
+
+// Show default state while no inputs are active
+[cur-input="NONE"] .input-config__visual-input[visual-input] {
+    opacity: 1;
+}
+
+@each $inp in $all-inputs {
+    .input-config__visual-input[visual-input="#{$inp}"] {
+        opacity: 0.5;
+
+        [cur-input="#{$inp}"] & {
+            opacity: 1.0;
+        }
+    }
+}

src/ui/ui_config.cpp

@@ -56,6 +56,7 @@ void bind_option(Rml::DataModelConstructor& constructor, const std::string& name
 
 static int scanned_binding_index = -1;
 static int scanned_input_index = -1;
+static int focused_input_index = -1;
 
 constexpr recomp::InputDevice cur_device = recomp::InputDevice::Controller;
 
@@ -92,6 +93,9 @@ public:
 		recomp::register_event(listener, "clear_input_bindings",
 			[](const std::string& param, Rml::Event& event) {
 			});
+		recomp::register_event(listener, "set_input_row_focus",
+			[](const std::string& param, Rml::Event& event) {
+			});
 		recomp::register_event(listener, "add_input_binding",
 			[](const std::string& param, Rml::Event& event) {
 			});
@@ -149,6 +153,10 @@ public:
 			return Rml::Variant{recomp::get_input_name(inputs.at(0).Get<size_t>())};
 		});
 
+		constructor.RegisterTransformFunc("get_input_enum_name", [](const Rml::VariantList& inputs) {
+			return Rml::Variant{recomp::get_input_enum_name(inputs.at(0).Get<size_t>())};
+		});
+
 		constructor.BindEventCallback("set_input_binding",
 			[](Rml::DataModelHandle model_handle, Rml::Event& event, const Rml::VariantList& inputs) {
 				scanned_input_index = inputs.at(0).Get<size_t>();
@@ -167,6 +175,17 @@ public:
 				model_handle.DirtyVariable("inputs");
 			});
 
+		constructor.BindEventCallback("set_input_row_focus",
+			[](Rml::DataModelHandle model_handle, Rml::Event& event, const Rml::VariantList& inputs) {
+				int input_index = inputs.at(0).Get<size_t>();
+				// watch for mouseout being overzealous during event bubbling, only clear if the event's attached element matches the current
+				if (input_index == -1 && event.GetType() == "mouseout" && event.GetCurrentElement() != event.GetTargetElement()) {
+					return;
+				}
+				focused_input_index = input_index;
+				model_handle.DirtyVariable("cur_input_row");
+			});
+
 		// Rml variable definition for an individual InputField.
 		struct InputFieldVariableDefinition : public Rml::VariableDefinition {
 			InputFieldVariableDefinition() : Rml::VariableDefinition(Rml::DataVariableType::Scalar) {}
@@ -215,6 +234,15 @@ public:
 		static InputContainer dummy_container;
 		constructor.Bind("inputs", &dummy_container);
 
+		constructor.BindFunc("cur_input_row", [](Rml::Variant& out) {
+			if (focused_input_index == -1) {
+				out = "NONE";
+			}
+			else {
+				out = recomp::get_input_enum_name(focused_input_index);
+			}
+		});
+
 		constructor.BindFunc("active_binding_input", [](Rml::Variant& out) {
 			if (scanned_input_index == -1) {
 				out = "NONE";