hud aspect ratio in gfx config

assets/config_menu/graphics.rml

@@ -197,7 +197,7 @@
                                 data-checked="msaa_option"
                                 value="None"
                                 id="msaa_none"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #apply_button' : 'nav-up: #rr_original; nav-down: #apply_button'"
+                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_original' : 'nav-up: #rr_original; nav-down: #hr_original'"
                             />
                             <label class="config-option__tab-label" for="msaa_none">None</label>
                             <input type="radio"
@@ -208,7 +208,7 @@
                                 data-checked="msaa_option"
                                 value="MSAA2X"
                                 id="msaa_2x"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #apply_button' : 'nav-up: #rr_display; nav-down: #apply_button'"
+                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_16_9' : 'nav-up: #rr_display; nav-down: #hr_16_9'"
                             />
                             <label class="config-option__tab-label" for="msaa_2x">2x</label>
                             <input type="radio"
@@ -219,7 +219,7 @@
                                 data-checked="msaa_option"
                                 value="MSAA4X"
                                 id="msaa_4x"
-                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #apply_button' : 'nav-up: #rr_manual; nav-down: #apply_button'"
+                                data-attr-style="rr_option=='Manual' ? 'nav-up: #rr_manual_input; nav-down: #hr_full' : 'nav-up: #rr_manual; nav-down: #hr_full'"
                             />
                             <label class="config-option__tab-label" for="msaa_4x">4x</label>
                             <!-- <input type="radio" data-event-blur="set_current_gfx_description(-1)" name="antialiasing" data-checked="msaa_option" value="MSAA8X" id="msaa_8x" style="nav-right:none;nav-down:#apply_button"/>
@@ -228,6 +228,42 @@
                         </div>
                     </div>
 
+                    <div class="config-option" data-event-mouseover="set_current_gfx_description(6)">
+                        <label class="config-option__title">HUD Aspect Ratio</label>
+                        <div class="config-option__list">
+                            <input type="radio"
+                                data-event-blur="set_current_gfx_description(-1)"
+                                data-event-focus="set_current_gfx_description(6)"
+                                name="hr-option"
+                                data-checked="hr_option"
+                                value="Original"
+                                id="hr_original"
+                                style="nav-up: #msaa_none; nav-down: #apply_button"
+                            />
+                            <label class="config-option__tab-label" for="hr_original">None</label>
+                            <input type="radio"
+                                data-event-blur="set_current_gfx_description(-1)"
+                                data-event-focus="set_current_gfx_description(6)"
+                                name="hr-option"
+                                data-checked="hr_option"
+                                value="Clamp16x9"
+                                id="hr_16_9"
+                                style="nav-up: #msaa_2x; nav-down: #apply_button"
+                            />
+                            <label class="config-option__tab-label" for="hr_16_9">16:9</label>
+                            <input type="radio"
+                                data-event-blur="set_current_gfx_description(-1)"
+                                data-event-focus="set_current_gfx_description(6)"
+                                name="hr-option"
+                                data-checked="hr_option"
+                                value="Full"
+                                id="hr_full"
+                                style="nav-up: #msaa_4x; nav-down: #apply_button"
+                            />
+                            <label class="config-option__tab-label" for="hr_full">Full</label>
+                        </div>
+                    </div>
+
                 </div>
                 <div class="config__wrapper">
                     <p data-if="cur_gfx_description == 0">
@@ -257,6 +293,9 @@
                         <br />
                         Note: This option won't be available if your GPU does not support programmable MSAA sample positions, as it is currently required to avoid rendering glitches.
                     </p>
+                    <p data-if="cur_gfx_description == 6">
+                        Sets the position of the HUD from the left and right edges.
+                    </p>
                 </div>
             </div>
             <div class="config__footer">
@@ -269,7 +308,7 @@
                         data-attrif-disabled="!options_changed"
                         onclick="apply_options"
                         id="apply_button"
-                        style="nav-up:#msaa_none"
+                        style="nav-up:#hr_original"
                     >
                         <div class="button__label">Apply</div>
                     </button>

src/game/config.cpp

@@ -20,6 +20,7 @@ constexpr std::u8string_view sound_filename = u8"sound.json";
 
 constexpr auto res_default            = ultramodern::Resolution::Auto;
 constexpr auto wm_default             = ultramodern::WindowMode::Windowed;
+constexpr auto hr_default             = ultramodern::HUDRatioMode::Full;
 constexpr auto ar_default             = RT64::UserConfiguration::AspectRatio::Expand;
 constexpr auto msaa_default           = RT64::UserConfiguration::Antialiasing::MSAA2X;
 constexpr auto rr_default             = RT64::UserConfiguration::RefreshRate::Display;
@@ -56,6 +57,7 @@ namespace ultramodern {
         j = json{
             {"res_option",      config.res_option},
             {"wm_option",       config.wm_option},
+            {"hr_option",       config.hr_option},
             {"ds_option",       config.ds_option},
             {"ar_option",       config.ar_option},
             {"msaa_option",     config.msaa_option},
@@ -68,6 +70,7 @@ namespace ultramodern {
     void from_json(const json& j, GraphicsConfig& config) {
         config.res_option       = from_or_default(j, "res_option",      res_default);
         config.wm_option        = from_or_default(j, "wm_option",       wm_default);
+        config.hr_option        = from_or_default(j, "hr_option",       hr_default);
         config.ds_option        = from_or_default(j, "ds_option",       ds_default);
         config.ar_option        = from_or_default(j, "ar_option",       ar_default);
         config.msaa_option      = from_or_default(j, "msaa_option",     msaa_default);
@@ -174,6 +177,7 @@ void reset_graphics_options() {
     ultramodern::GraphicsConfig new_config{};
     new_config.res_option = res_default;
     new_config.wm_option = wm_default;
+    new_config.hr_option = hr_default;
     new_config.ds_option = ds_default;
     new_config.ar_option = ar_default;
     new_config.msaa_option = msaa_default;

src/recomp/rt64_layer.cpp

@@ -257,6 +257,20 @@ void RT64UpdateConfig(RT64::Application* application, const ultramodern::Graphic
             break;
     }
 
+    switch (new_config.hr_option) {
+        default:
+        case ultramodern::HUDRatioMode::Original:
+            application->userConfig.extAspectPercentage = 0.0f;
+            break;
+        case ultramodern::HUDRatioMode::Clamp16x9:
+            // TODO: Not this lol!!!
+            application->userConfig.extAspectPercentage = 0.5f;
+            break;
+        case ultramodern::HUDRatioMode::Full:
+            application->userConfig.extAspectPercentage = 1.0f;
+            break;
+    }
+
     application->userConfig.aspectRatio = new_config.ar_option;
     application->userConfig.antialiasing = new_config.msaa_option;
     application->userConfig.refreshRate = new_config.rr_option;

src/ui/ui_config.cpp

@@ -315,6 +315,7 @@ public:
 		);
 		bind_option(constructor, "wm_option", &new_options.wm_option);
 		bind_option(constructor, "ar_option", &new_options.ar_option);
+		bind_option(constructor, "hr_option", &new_options.hr_option);
 		bind_option(constructor, "msaa_option", &new_options.msaa_option);
 		bind_option(constructor, "rr_option", &new_options.rr_option);
 		constructor.BindFunc("rr_manual_value",

ultramodern/config.hpp

@@ -15,10 +15,17 @@ namespace ultramodern {
 		Fullscreen,
 		OptionCount
 	};
+	enum class HUDRatioMode {
+		Original,
+		Clamp16x9,
+		Full,
+		OptionCount
+	};
 
 	struct GraphicsConfig {
 		Resolution res_option;
 		WindowMode wm_option;
+		HUDRatioMode hr_option;
 		RT64::UserConfiguration::AspectRatio ar_option;
 		RT64::UserConfiguration::Antialiasing msaa_option;
 		RT64::UserConfiguration::RefreshRate rr_option;
@@ -42,6 +49,12 @@ namespace ultramodern {
 		{ultramodern::WindowMode::Windowed, "Windowed"},
 		{ultramodern::WindowMode::Fullscreen, "Fullscreen"}
 	});
+
+	NLOHMANN_JSON_SERIALIZE_ENUM(ultramodern::HUDRatioMode, {
+		{ultramodern::HUDRatioMode::Original, "Original"},
+		{ultramodern::HUDRatioMode::Clamp16x9, "Clamp16x9"},
+		{ultramodern::HUDRatioMode::Full, "Full"},
+	});
 };
 
 #endif