feat: Disable multiple player mode if the second player has not conne…

…cted

index.html

@@ -29,7 +29,7 @@
       <div class="logo_container"><img class="logo" alt="Logo" src="src/assets/images/logo.svg" /></div>
       <button class="menu-button glass" data-to-router="/single" data-click-sound="glass-click.m4a">Single
         Player</button>
-      <button class="menu-button glass" data-to-router="/play?mode=multiple">Multiple Player</button>
+      <button class="menu-button multiple glass" data-to-router="/play?mode=multiple">Multiple Player</button>
       <button class="menu-button glass" data-to-router="/settings">Settings</button>
     </section>
     <div>

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%;

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<HTMLButtonElement>('.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();

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<HTMLInputElement>('.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<HTMLInputElement>('.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<HTMLInputElement>('.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<HTMLInputElement>('.sensitivity');
 
-
    $joyConSensitivity.addEventListener('change', (event: Event) => {
       const value = Number.parseFloat((event.target as HTMLInputElement).value);
 
@@ -77,23 +61,19 @@ export const SettingsManager = () => {
       }
    });
 
-   const $botModeEnabled = document.querySelector(
-      '.bot-mode',
-   ) as HTMLInputElement | null;
-
-   if (!$botModeEnabled) return;
+   const $botModeEnabled = forceSelect<HTMLInputElement>('.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;
       } else {
          $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<HTMLInputElement>('.difficulty');
 
    $difficulty.value = DIFFICULTY.value.toString();