Enable accounts menu

Half-Shot · Jan 8, 2025 · a4609aa · a4609aa
1 parent 1d2cdee
commit a4609aa
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 42 deletions.
diff --git a/src/frontend/components/menu.tsx b/src/frontend/components/menu.tsx
@@ -50,10 +50,14 @@ function mainMenu(
           </button>
         </li>
         <li>
-          <button onClick={() => setCurrentMenu(GameMenu.Settings)}>Settings</button>
+          <button onClick={() => setCurrentMenu(GameMenu.Settings)}>
+            Settings
+          </button>
         </li>
         <li>
-          <button disabled>Online Play</button>
+          <button onClick={() => setCurrentMenu(GameMenu.AccountMenu)}>
+            Online Play
+          </button>
         </li>
         <li>
           <button>Developer Tools</button>
@@ -93,7 +97,7 @@ export function Menu({ onNewGame, client, reloadClient }: Props) {
       <AccountMenu
         client={client}
         reloadClient={reloadClient}
-        setCurrentMenu={setCurrentMenu}
+        onGoBack={() => setCurrentMenu(GameMenu.MainMenu)}
       />
     );
   } else if (currentMenu === GameMenu.TeamEditor) {
@@ -104,11 +108,7 @@ export function Menu({ onNewGame, client, reloadClient }: Props) {
       />
     );
   } else if (currentMenu === GameMenu.Settings) {
-    return (
-      <SettingsMenu
-        onGoBack={() => setCurrentMenu(GameMenu.MainMenu)}
-      />
-    );
+    return <SettingsMenu onGoBack={() => setCurrentMenu(GameMenu.MainMenu)} />;
   } else if (currentMenu === GameMenu.OverlayTest) {
     return <OverlayTest />;
   }

diff --git a/src/frontend/components/menus/account.tsx b/src/frontend/components/menus/account.tsx
@@ -1,12 +1,12 @@
 import { useState, useCallback, useEffect } from "preact/hooks";
 import { NetClientConfig, NetGameClient } from "../../../net/client";
-import { GameMenu } from "./types";
+import menuStyles from "../menu.module.css";
 import config from "../config";
 import styles from "./account.module.css";
 
 interface Props {
   client: NetGameClient | undefined;
-  setCurrentMenu: (menu: GameMenu) => void;
+  onGoBack: () => void;
   reloadClient: () => void;
 }
 
@@ -63,11 +63,7 @@ function LoggedInView({ client }: { client: NetGameClient }) {
   );
 }
 
-export default function AccountMenu({
-  client,
-  setCurrentMenu,
-  reloadClient,
-}: Props) {
+export default function AccountMenu({ client, onGoBack, reloadClient }: Props) {
   const [loginInProgress, setLoginInProgress] = useState(false);
   const [error, setError] = useState<string>();
   const onSubmit = useCallback(
@@ -139,9 +135,9 @@ export default function AccountMenu({
   }
 
   return (
-    <main className="menu">
+    <main className={menuStyles.menu}>
       <h1>Wormgine Account</h1>
-      <button onClick={() => setCurrentMenu(GameMenu.MainMenu)}>Go Back</button>
+      <button onClick={() => onGoBack()}>Go Back</button>
       {content}
     </main>
   );

diff --git a/src/frontend/components/menus/settings.tsx b/src/frontend/components/menus/settings.tsx
@@ -2,7 +2,11 @@ import useLocalStorageState from "use-local-storage-state";
 import menuStyles from "../menu.module.css";
 import { useCallback } from "preact/hooks";
 import { JSX } from "preact/jsx-runtime";
-import { GameSettings, getGameSettings, WORMGINE_STORAGE_KEY_SETTINGS } from "../../../settings";
+import {
+  GameSettings,
+  getGameSettings,
+  WORMGINE_STORAGE_KEY_SETTINGS,
+} from "../../../settings";
 
 interface Props {
   onGoBack: () => void;
@@ -16,24 +20,33 @@ export default function SettingsMenu({ onGoBack }: Props) {
     },
   );
 
-  const onVolumeSet: JSX.MouseEventHandler<HTMLMeterElement> = useCallback((evt) => {
-    const element = (evt.target as HTMLMeterElement);
-    const rect = element.getClientRects()[0];
-    const value = Math.round(((evt.clientX - rect.x) / rect.width) * 10) / 10;
-    setSettings((s: GameSettings) => ({...s, soundEffectVolume: value}))
-  }, []);
+  const onVolumeSet: JSX.GenericEventHandler<HTMLInputElement> = useCallback(
+    (evt) => {
+      const element = evt.target as HTMLInputElement;
+      setSettings((s: GameSettings) => ({
+        ...s,
+        soundEffectVolume: element.valueAsNumber / 100,
+      }));
+    },
+    [],
+  );
 
   return (
     <main className={menuStyles.menu}>
       <h1>Settings</h1>
       <section>
-        <h2>
-            General
-        </h2>
-        <label for="sound-effect-meter">
-            Sound Effect Volume: 
-        </label>
-        <meter title={`${settings.soundEffectVolume * 100}%`} id="sound-effect-meter" role="slider" onClick={onVolumeSet} style={{width: "200px"}} min="0" max="1" value={settings.soundEffectVolume}>75%</meter>
+        <h2>General</h2>
+        <label for="sound-effect-meter">Sound Effect Volume:</label>
+        <input
+          id="sound-effect-meter"
+          type="range"
+          style={{ width: "200px" }}
+          onChange={onVolumeSet}
+          value={settings.soundEffectVolume * 100}
+          step={5}
+          min={0}
+          max={100}
+        />
       </section>
       <button onClick={onGoBack}>Back</button>
     </main>

diff --git a/src/settings.ts b/src/settings.ts
@@ -9,23 +9,23 @@ export interface StoredTeam {
 }
 
 export interface GameSettings {
-    soundEffectVolume: number;
+  soundEffectVolume: number;
 }
 
 const DEFAULT_SETTINGS: GameSettings = {
-    soundEffectVolume: 0.1,
+  soundEffectVolume: 0.1,
 };
 
 export function getGameSettings(): GameSettings {
-    const item = localStorage.getItem(WORMGINE_STORAGE_KEY_SETTINGS);
-    if (!item) {
-      return DEFAULT_SETTINGS;
-    }
-    // TODO: Sanitize.
-    return {
-        ...DEFAULT_SETTINGS,
-        ...JSON.parse(item),
-    };
+  const item = localStorage.getItem(WORMGINE_STORAGE_KEY_SETTINGS);
+  if (!item) {
+    return DEFAULT_SETTINGS;
+  }
+  // TODO: Sanitize.
+  return {
+    ...DEFAULT_SETTINGS,
+    ...JSON.parse(item),
+  };
 }
 
 export function getLocalTeams(): StoredTeam[] {