mirror of
				https://github.com/Zelda64Recomp/Zelda64Recomp.git
				synced 2025-10-30 08:03:03 +00:00 
			
		
		
		
	Merge remote-tracking branch 'origin/ui' into dev
This commit is contained in:
		
						commit
						0cd022d144
					
				
					 7 changed files with 160 additions and 25 deletions
				
			
		| 
						 | 
				
			
			@ -3,25 +3,57 @@
 | 
			
		|||
    </head>
 | 
			
		||||
    <body>
 | 
			
		||||
        <form class="config__form">
 | 
			
		||||
            <div class="config__wrapper">
 | 
			
		||||
                <div class="config__row">
 | 
			
		||||
            <div class="config__hz-wrapper">
 | 
			
		||||
                <!-- Options -->
 | 
			
		||||
                <div class="config__wrapper">
 | 
			
		||||
                    <div class="config-option">
 | 
			
		||||
                        <label class="config-option__title">Targeting Mode</label>
 | 
			
		||||
                        <div class="config-option__list">
 | 
			
		||||
                            <input type="radio" name="targeting_mode" data-checked="targeting_mode" value="Switch" id="tm_switch"/>
 | 
			
		||||
                            <input
 | 
			
		||||
                                type="radio"
 | 
			
		||||
                                name="targeting_mode"
 | 
			
		||||
                                data-checked="targeting_mode"
 | 
			
		||||
                                value="Switch"
 | 
			
		||||
                                id="tm_switch"
 | 
			
		||||
                            />
 | 
			
		||||
                            <label class="config-option__tab-label" for="tm_switch">Switch</label>
 | 
			
		||||
                            <input type="radio" name="targeting_mode" data-checked="targeting_mode" value="Hold" id="tm_hold"/>
 | 
			
		||||
 | 
			
		||||
                            <input
 | 
			
		||||
                                type="radio"
 | 
			
		||||
                                name="targeting_mode"
 | 
			
		||||
                                data-checked="targeting_mode"
 | 
			
		||||
                                value="Hold"
 | 
			
		||||
                                id="tm_hold"
 | 
			
		||||
                            />
 | 
			
		||||
                            <label class="config-option__tab-label" for="tm_hold">Hold</label>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
                    <div class="config-option">
 | 
			
		||||
                        <label class="config-option__title">Rumble Strength</label>
 | 
			
		||||
                        <div class="config-option__range-wrapper config-option__list">
 | 
			
		||||
                            <label class="config-option__range-label">{{rumble_strength}}</label>
 | 
			
		||||
                            <input class="nav-vert" id="rumble_strength_input" type="range" min="0" max="100" style="flex: 1; margin: 0dp;" data-value="rumble_strength"/>
 | 
			
		||||
                            <input
 | 
			
		||||
                                class="nav-vert"
 | 
			
		||||
                                id="rumble_strength_input"
 | 
			
		||||
                                type="range"
 | 
			
		||||
                                min="0"
 | 
			
		||||
                                max="100"
 | 
			
		||||
                                style="flex: 1; margin: 0dp;"
 | 
			
		||||
                                data-value="rumble_strength"
 | 
			
		||||
                            />
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <!-- Descriptions -->
 | 
			
		||||
                <div class="config__wrapper">
 | 
			
		||||
                    <p data-if="0 == 0">
 | 
			
		||||
                        First.
 | 
			
		||||
                    </p>
 | 
			
		||||
                    <p data-if="1 == 1">
 | 
			
		||||
                        Second.
 | 
			
		||||
                    </p>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        </form>
 | 
			
		||||
    </body>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 Placement</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">Original</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">Expand</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">
 | 
			
		||||
                        Adjusts the placement of HUD elements to fit the selected aspect ratio. Expand will use the aspect ratio of the game's output window.
 | 
			
		||||
                    </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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -3,25 +3,57 @@
 | 
			
		|||
    </head>
 | 
			
		||||
    <body>
 | 
			
		||||
        <form class="config__form">
 | 
			
		||||
            <div class="config__wrapper">
 | 
			
		||||
                <div class="config__row">
 | 
			
		||||
                    <div class="config-option">
 | 
			
		||||
                        <label class="config-option__title">Background Music Volume</label>
 | 
			
		||||
                        <div class="config-option__range-wrapper config-option__list">
 | 
			
		||||
                            <label class="config-option__range-label">{{bgm_volume}}</label>
 | 
			
		||||
                            <input class="nav-vert" id="bgm_volume_input" type="range" min="0" max="100" style="flex: 1; margin: 0dp;" data-value="bgm_volume"/>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="config-option">
 | 
			
		||||
                        <label class="config-option__title">Low Health Beeps</label>
 | 
			
		||||
                        <div class="config-option__list">
 | 
			
		||||
                            <input type="radio" name="lhb" data-checked="low_health_beeps_enabled" value="1" id="lhb_on"/>
 | 
			
		||||
                            <label class="config-option__tab-label" for="lhb_on">On</label>
 | 
			
		||||
                            <input type="radio" name="lhb" data-checked="low_health_beeps_enabled" value="0" id="lhb_off"/>
 | 
			
		||||
                            <label class="config-option__tab-label" for="lhb_off">Off</label>
 | 
			
		||||
            <div class="config__hz-wrapper">
 | 
			
		||||
                <!-- Options -->
 | 
			
		||||
                <div class="config__wrapper">
 | 
			
		||||
                        <div class="config-option">
 | 
			
		||||
                            <label class="config-option__title">Background Music Volume</label>
 | 
			
		||||
                            <div class="config-option__range-wrapper config-option__list">
 | 
			
		||||
                                <label class="config-option__range-label">{{bgm_volume}}</label>
 | 
			
		||||
                                <input
 | 
			
		||||
                                    class="nav-vert"
 | 
			
		||||
                                    id="bgm_volume_input"
 | 
			
		||||
                                    type="range"
 | 
			
		||||
                                    min="0"
 | 
			
		||||
                                    max="100"
 | 
			
		||||
                                    style="flex: 1; margin: 0dp;"
 | 
			
		||||
                                    data-value="bgm_volume"
 | 
			
		||||
                                />
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
 | 
			
		||||
                        <div class="config-option">
 | 
			
		||||
                            <label class="config-option__title">Low Health Beeps</label>
 | 
			
		||||
                            <div class="config-option__list">
 | 
			
		||||
                                <input
 | 
			
		||||
                                    type="radio"
 | 
			
		||||
                                    name="lhb"
 | 
			
		||||
                                    data-checked="low_health_beeps_enabled"
 | 
			
		||||
                                    value="1"
 | 
			
		||||
                                    id="lhb_on"
 | 
			
		||||
                                />
 | 
			
		||||
                                <label class="config-option__tab-label" for="lhb_on">On</label>
 | 
			
		||||
 | 
			
		||||
                                <input
 | 
			
		||||
                                    type="radio"
 | 
			
		||||
                                    name="lhb"
 | 
			
		||||
                                    data-checked="low_health_beeps_enabled"
 | 
			
		||||
                                    value="0"
 | 
			
		||||
                                    id="lhb_off"
 | 
			
		||||
                                />
 | 
			
		||||
                                <label class="config-option__tab-label" for="lhb_off">Off</label>
 | 
			
		||||
                            </div>
 | 
			
		||||
                        </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <!-- Descriptions -->
 | 
			
		||||
                <div class="config__wrapper">
 | 
			
		||||
                    <p data-if="0 == 0">
 | 
			
		||||
                        First.
 | 
			
		||||
                    </p>
 | 
			
		||||
                    <p data-if="1 == 1">
 | 
			
		||||
                        Second.
 | 
			
		||||
                    </p>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
        </form>
 | 
			
		||||
    </body>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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::Clamp16x9;
 | 
			
		||||
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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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.extAspectRatio = RT64::UserConfiguration::AspectRatio::Original;
 | 
			
		||||
            break;
 | 
			
		||||
        case ultramodern::HUDRatioMode::Clamp16x9:
 | 
			
		||||
            application->userConfig.extAspectRatio = RT64::UserConfiguration::AspectRatio::Manual;
 | 
			
		||||
            application->userConfig.extAspectTarget = 16.0/9.0;
 | 
			
		||||
            break;
 | 
			
		||||
        case ultramodern::HUDRatioMode::Full:
 | 
			
		||||
            application->userConfig.extAspectRatio = RT64::UserConfiguration::AspectRatio::Expand;
 | 
			
		||||
            break;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    application->userConfig.aspectRatio = new_config.ar_option;
 | 
			
		||||
    application->userConfig.antialiasing = new_config.msaa_option;
 | 
			
		||||
    application->userConfig.refreshRate = new_config.rr_option;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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",
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue