From bfa352db8f31a2d375096644b0f18181ae5816ba Mon Sep 17 00:00:00 2001 From: LOSSES Don <1384036+Losses@users.noreply.github.com> Date: Sun, 19 May 2024 09:02:43 +0800 Subject: [PATCH] feat: Disable multiple player mode if the second player has not connected --- index.html | 2 +- src/main.css | 14 +++++++++++ src/manager/JoyConManager.ts | 8 +++++++ src/manager/SettingsManager.ts | 44 ++++++++-------------------------- 4 files changed, 33 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index eefe06f..f6db8ae 100644 --- a/index.html +++ b/index.html @@ -29,7 +29,7 @@
- +
diff --git a/src/main.css b/src/main.css index 806651a..d1fcca8 100644 --- a/src/main.css +++ b/src/main.css @@ -58,6 +58,20 @@ body { backdrop-filter: blur(20px); } +.glass:disabled { + color: rgba(0, 0, 0, 0.6); + font-weight: 300; + background-color: rgba(0, 0, 0, 0.4); + border-image: linear-gradient(60deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)) 10%; +} + +.glass:disabled:hover { + color: rgba(0, 0, 0, 0.6); + font-weight: 300; + background-color: rgba(0, 0, 0, 0.4); + border-image: linear-gradient(60deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 1)) 10%; +} + .glass-slide, .glass-checkbox { width: 100%; diff --git a/src/manager/JoyConManager.ts b/src/manager/JoyConManager.ts index 86a003f..b8de3fb 100644 --- a/src/manager/JoyConManager.ts +++ b/src/manager/JoyConManager.ts @@ -155,6 +155,14 @@ export const JoyConManager = () => { $settingsP2.addEventListener('contextmenu', handleP2ConnectButtonContextMenu); $connectP2.addEventListener('contextmenu', handleP2ConnectButtonContextMenu); $connectP2.addEventListener('click', connectP2); + + const $multiplePlayer = forceSelect('.title_section .multiple'); + const updateMultiplePlayerButton = () => { + $multiplePlayer.disabled = !P2_BOT_MODE_ENABLED.value && !P2_JOYCON.value; + } + + P2_BOT_MODE_ENABLED.subscribe(updateMultiplePlayerButton, true); + P2_JOYCON.subscribe(updateMultiplePlayerButton, true); $changeController.addEventListener('click', () => { if (isP1()) connectP1(); diff --git a/src/manager/SettingsManager.ts b/src/manager/SettingsManager.ts index d44ee1d..d88c501 100644 --- a/src/manager/SettingsManager.ts +++ b/src/manager/SettingsManager.ts @@ -1,4 +1,4 @@ -import { QUERY_PARAMETER, ROUTER_ID } from '../stores/router'; +import { ROUTER_ID } from '../stores/router'; import { DIFFICULTY, RENDERING_DETAIL, @@ -9,15 +9,12 @@ import { P1_BOT_MODE_ENABLED, P2_BOT_MODE_ENABLED, } from '../stores/settings'; +import { forceSelect } from '../utils/forceSelect'; import { isP1 } from '../utils/isP1'; import { p1, p2 } from './JoyConManager'; export const SettingsManager = () => { - const $visualLoad = document.querySelector( - '.visual-load', - ) as HTMLInputElement | null; - - if (!$visualLoad) return; + const $visualLoad = forceSelect('.visual-load'); $visualLoad.value = VISUAL_LOAD.value.toString(); @@ -26,11 +23,7 @@ export const SettingsManager = () => { VISUAL_LOAD.value = value; }); - const $renderingDetail = document.querySelector( - '.rendering-detail', - ) as HTMLInputElement | null; - - if (!$renderingDetail) return; + const $renderingDetail = forceSelect('.rendering-detail'); $renderingDetail.value = RENDERING_DETAIL.value.toString(); @@ -39,11 +32,7 @@ export const SettingsManager = () => { RENDERING_DETAIL.value = value; }); - const $pixelated = document.querySelector( - '.rendering-pixelated', - ) as HTMLInputElement | null; - - if (!$pixelated) return; + const $pixelated = forceSelect('.rendering-pixelated'); $pixelated.checked = RENDERING_PIXELATED.value; @@ -60,13 +49,8 @@ export const SettingsManager = () => { } }, true); - const $joyConSensitivity = document.querySelector( - '.sensitivity', - ) as HTMLInputElement | null; - - if (!$joyConSensitivity) return; + const $joyConSensitivity = forceSelect('.sensitivity'); - $joyConSensitivity.addEventListener('change', (event: Event) => { const value = Number.parseFloat((event.target as HTMLInputElement).value); @@ -77,15 +61,11 @@ export const SettingsManager = () => { } }); - const $botModeEnabled = document.querySelector( - '.bot-mode', - ) as HTMLInputElement | null; - - if (!$botModeEnabled) return; + const $botModeEnabled = forceSelect('.bot-mode'); ROUTER_ID.subscribe((x) => { if (x !== '/settings/joycon') return; - + if (isP1()) { $joyConSensitivity.value = P1_SENSITIVITY.value.toString(); $botModeEnabled.checked = P1_BOT_MODE_ENABLED.value; @@ -93,7 +73,7 @@ export const SettingsManager = () => { $joyConSensitivity.value = P2_SENSITIVITY.value.toString(); $botModeEnabled.checked = P2_BOT_MODE_ENABLED.value; } - }) + }); $botModeEnabled.addEventListener('change', (event: Event) => { const value = $botModeEnabled.checked; @@ -123,11 +103,7 @@ export const SettingsManager = () => { } }); - const $difficulty = document.querySelector( - '.difficulty', - ) as HTMLInputElement | null; - - if (!$difficulty) return; + const $difficulty = forceSelect('.difficulty'); $difficulty.value = DIFFICULTY.value.toString();