diff --git a/src/assets/css/root.styl b/src/assets/css/root.styl index e2a42ec..75bfd2d 100644 --- a/src/assets/css/root.styl +++ b/src/assets/css/root.styl @@ -87,6 +87,10 @@ div[class^=HUDButton-module__hiddenContainer] ~ div:not([class^=HUDButton-module padding: 0 !important; } +.bx-prompt { + font-family: var(--bx-promptfont-font); +} + /* Hide UI elements */ #headerArea, #uhfSkipToMain, .uhf-footer { display: none; diff --git a/src/assets/css/stream-settings.styl b/src/assets/css/stream-settings.styl index 1970a85..96a8ad6 100644 --- a/src/assets/css/stream-settings.styl +++ b/src/assets/css/stream-settings.styl @@ -127,6 +127,28 @@ .bx-quick-settings-tab-contents { div[data-group="shortcuts"] { + > div { + &[data-has-gamepad=true] { + > div:first-of-type { + display: none; + } + + > div:last-of-type { + display: block; + } + } + + &[data-has-gamepad=false] { + > div:first-of-type { + display: block; + } + + > div:last-of-type { + display: none; + } + } + } + .bx-shortcut-profile { width: 100%; height: 36px; @@ -134,13 +156,16 @@ margin-bottom: 10px; } + .bx-shortcut-note { + font-size: 14px; + } + .bx-shortcut-row { display: flex; margin-bottom: 10px; label.bx-prompt { flex: 1; - font-family: var(--bx-promptfont-font); font-size: 26px; margin-bottom: 0; } diff --git a/src/modules/controller-shortcut.ts b/src/modules/controller-shortcut.ts index 8771d8c..b006ee7 100644 --- a/src/modules/controller-shortcut.ts +++ b/src/modules/controller-shortcut.ts @@ -37,7 +37,7 @@ export class ControllerShortcut { static #$selectProfile: HTMLSelectElement; static #$selectActions: Partial<{[key in GamepadKey]: HTMLSelectElement}> = {}; - static #$remap: HTMLElement; + static #$container: HTMLElement; static #ACTIONS: {[key: string]: (ShortcutAction | null)[]} = {}; @@ -144,7 +144,7 @@ export class ControllerShortcut { static #updateProfileList(e?: GamepadEvent) { const $select = ControllerShortcut.#$selectProfile; - const $remap = ControllerShortcut.#$remap; + const $container = ControllerShortcut.#$container; const $fragment = document.createDocumentFragment(); @@ -175,20 +175,11 @@ export class ControllerShortcut { if (hasGamepad) { $select.appendChild($fragment); - $remap.classList.remove('bx-gone'); - - $select.disabled = false; $select.selectedIndex = 0; $select.dispatchEvent(new Event('change')); - } else { - $remap.classList.add('bx-gone'); - - $select.disabled = true; - const $option = CE('option', {}, '---'); - $fragment.appendChild($option); - - $select.appendChild($fragment); } + + $container.dataset.hasGamepad = hasGamepad.toString(); } static #switchProfile(profile: string) { @@ -282,19 +273,31 @@ export class ControllerShortcut { $baseSelect.appendChild($optGroup); } - const $container = CE('div', {}); + let $remap: HTMLElement; + let $selectProfile: HTMLSelectElement; - const $profile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}); - $profile.addEventListener('change', e => { - ControllerShortcut.#switchProfile($profile.value); + const $container = CE('div', {'data-has-gamepad': 'false'}, + CE('div', {}, + CE('p', {'class': 'bx-shortcut-note'}, t('controller-shortcuts-connect-note')), + ), + + $remap = CE('div', {}, + $selectProfile = CE('select', {'class': 'bx-shortcut-profile', autocomplete: 'off'}), + CE('p', {'class': 'bx-shortcut-note'}, + CE('span', {'class': 'bx-prompt'}, PrompFont.HOME), + ': ' + t('controller-shortcuts-xbox-note'), + ), + ), + ); + + $selectProfile.addEventListener('change', e => { + ControllerShortcut.#switchProfile($selectProfile.value); }); - $container.appendChild($profile); - const onActionChanged = (e: Event) => { const $target = e.target as HTMLSelectElement; - const profile = $profile.value; + const profile = $selectProfile.value; const button: unknown = $target.dataset.button; const action = $target.value as ShortcutAction; @@ -310,7 +313,6 @@ export class ControllerShortcut { !(e as any).ignoreOnChange && ControllerShortcut.#updateAction(profile, button as GamepadKey, action); }; - const $remap = CE('div', {'class': 'bx-gone'}); let button: keyof typeof buttons; // @ts-ignore for (button in buttons) { @@ -342,8 +344,8 @@ export class ControllerShortcut { $container.appendChild($remap); - ControllerShortcut.#$selectProfile = $profile; - ControllerShortcut.#$remap = $remap; + ControllerShortcut.#$selectProfile = $selectProfile; + ControllerShortcut.#$container = $container; // Detect when gamepad connected/disconnect window.addEventListener('gamepadconnected', ControllerShortcut.#updateProfileList); diff --git a/src/utils/translation.ts b/src/utils/translation.ts index 487b492..e640475 100644 --- a/src/utils/translation.ts +++ b/src/utils/translation.ts @@ -60,7 +60,7 @@ const Texts = { "controller": "Controller", "controller-shortcuts": "Controller shortcuts", "controller-shortcuts-connect-note": "Connect a controller to use this feature", - "controller-shortcuts-xbox-note": "The Xbox button is the one that opens the Guide menu", + "controller-shortcuts-xbox-note": "Button to open the Guide menu", "controller-vibration": "Controller vibration", "copy": "Copy", "custom": "Custom",