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();