track and share focused/hovered input rows

This commit is contained in:
thecozies 2024-01-17 09:54:13 -06:00
parent d0e01cdec1
commit b3dbb9e9be
4 changed files with 101 additions and 7 deletions

View File

@ -124,15 +124,36 @@
<div class="tab__indicator"></div> <div class="tab__indicator"></div>
</tab> </tab>
<panel class="config" data-model="controls_model"> <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="config__wrapper input-config">
<div class="input-config__horizontal-split"> <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__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> </div>
</div> </div>
@ -140,6 +161,14 @@
<div class="input-config__visual-aspect"> <div class="input-config__visual-aspect">
<div class="input-config__visual"> <div class="input-config__visual">
<h3>Insert visual here:{{active_binding_input}}:{{active_binding_slot}}</h3> <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> </div>
</div> </div>

File diff suppressed because one or more lines are too long

View File

@ -64,9 +64,46 @@ $visual-max-width: math.div($base-height*16, 9) - $page-margin - $page-margin -
.input-config__visual { .input-config__visual {
display: flex; display: flex;
flex-direction: column;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 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;
}
}
}

View File

@ -56,6 +56,7 @@ void bind_option(Rml::DataModelConstructor& constructor, const std::string& name
static int scanned_binding_index = -1; static int scanned_binding_index = -1;
static int scanned_input_index = -1; static int scanned_input_index = -1;
static int focused_input_index = -1;
constexpr recomp::InputDevice cur_device = recomp::InputDevice::Controller; constexpr recomp::InputDevice cur_device = recomp::InputDevice::Controller;
@ -92,6 +93,9 @@ public:
recomp::register_event(listener, "clear_input_bindings", recomp::register_event(listener, "clear_input_bindings",
[](const std::string& param, Rml::Event& event) { [](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", recomp::register_event(listener, "add_input_binding",
[](const std::string& param, Rml::Event& event) { [](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>())}; 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", constructor.BindEventCallback("set_input_binding",
[](Rml::DataModelHandle model_handle, Rml::Event& event, const Rml::VariantList& inputs) { [](Rml::DataModelHandle model_handle, Rml::Event& event, const Rml::VariantList& inputs) {
scanned_input_index = inputs.at(0).Get<size_t>(); scanned_input_index = inputs.at(0).Get<size_t>();
@ -167,6 +175,17 @@ public:
model_handle.DirtyVariable("inputs"); 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. // Rml variable definition for an individual InputField.
struct InputFieldVariableDefinition : public Rml::VariableDefinition { struct InputFieldVariableDefinition : public Rml::VariableDefinition {
InputFieldVariableDefinition() : Rml::VariableDefinition(Rml::DataVariableType::Scalar) {} InputFieldVariableDefinition() : Rml::VariableDefinition(Rml::DataVariableType::Scalar) {}
@ -215,6 +234,15 @@ public:
static InputContainer dummy_container; static InputContainer dummy_container;
constructor.Bind("inputs", &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) { constructor.BindFunc("active_binding_input", [](Rml::Variant& out) {
if (scanned_input_index == -1) { if (scanned_input_index == -1) {
out = "NONE"; out = "NONE";