[feat] Add settings menu and ability to adjust sound.

src/frontend/components/menu.tsx

@@ -7,6 +7,7 @@ import AccountMenu from "./menus/account";
 import { OverlayTest } from "./menus/overlaytest";
 import type { AssetData } from "../../assets/manifest";
 import TeamEditorMenu from "./menus/team-editor";
+import SettingsMenu from "./menus/settings";
 
 interface Props {
   onNewGame: (scenario: string, level?: keyof AssetData) => void;
@@ -49,7 +50,7 @@ function mainMenu(
           </button>
         </li>
         <li>
-          <button disabled>Settings</button>
+          <button onClick={() => setCurrentMenu(GameMenu.Settings)}>Settings</button>
         </li>
         <li>
           <button disabled>Online Play</button>
@@ -102,6 +103,12 @@ export function Menu({ onNewGame, client, reloadClient }: Props) {
         onGoBack={() => setCurrentMenu(GameMenu.MainMenu)}
       />
     );
+  } else if (currentMenu === GameMenu.Settings) {
+    return (
+      <SettingsMenu
+        onGoBack={() => setCurrentMenu(GameMenu.MainMenu)}
+      />
+    );
   } else if (currentMenu === GameMenu.OverlayTest) {
     return <OverlayTest />;
   }

src/frontend/components/menus/settings.tsx

@@ -0,0 +1,41 @@
+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";
+
+interface Props {
+  onGoBack: () => void;
+}
+
+export default function SettingsMenu({ onGoBack }: Props) {
+  const [settings, setSettings] = useLocalStorageState<GameSettings>(
+    WORMGINE_STORAGE_KEY_SETTINGS,
+    {
+      defaultValue: getGameSettings(),
+    },
+  );
+
+  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}))
+  }, []);
+
+  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>
+      </section>
+      <button onClick={onGoBack}>Back</button>
+    </main>
+  );
+}

src/frontend/components/menus/team-editor.tsx

@@ -198,7 +198,6 @@ export default function TeamEditorMenu({ onGoBack }: Props) {
           existing[selectedTeam] = t;
           return existing;
         });
-        console.log("Updated team", t);
       },
       [selectedTeam],
     );
@@ -222,7 +221,6 @@ export default function TeamEditorMenu({ onGoBack }: Props) {
           Create Team
         </button>
         <button onClick={onDeleteTeam}>Delete Team</button>
-        <button onClick={onGoBack}>Back</button>
       </>
     );
   } else {
@@ -237,6 +235,7 @@ export default function TeamEditorMenu({ onGoBack }: Props) {
     <main className={menuStyles.menu}>
       <h1>Team Editor</h1>
       {content}
+      <button onClick={onGoBack}>Back</button>
     </main>
   );
 }

src/frontend/components/menus/types.ts

@@ -3,4 +3,5 @@ export enum GameMenu {
   AccountMenu,
   TeamEditor,
   OverlayTest,
+  Settings,
 }

src/game.ts

@@ -14,12 +14,11 @@ import staticController from "./input";
 import { sound } from "@pixi/sound";
 import Logger from "./log";
 import { CriticalGameError } from "./errors";
+import { getGameSettings } from "./settings";
 
 const worldWidth = 1920;
 const worldHeight = 1080;
 
-sound.volumeAll = 0.1;
-
 const logger = new Logger("Game");
 
 export class Game {
@@ -75,6 +74,7 @@ export class Game {
     this.pixiApp.stage.addChild(this.viewport);
     this.viewport.decelerate().drag();
     this.viewport.zoom(8);
+    sound.volumeAll = getGameSettings().soundEffectVolume;
 
     // TODO: Bit of a hack?
     staticController.bindInput();

src/settings.ts

@@ -1,6 +1,5 @@
-export const SOUND_EFFECT_VOLUME = 0.5;
-
 export const WORMGINE_STORAGE_KEY_TEAMS = "wormgine.teams";
+export const WORMGINE_STORAGE_KEY_SETTINGS = "wormgine.settings";
 
 export interface StoredTeam {
   name: string;
@@ -9,6 +8,26 @@ export interface StoredTeam {
   synced: boolean | null;
 }
 
+export interface GameSettings {
+    soundEffectVolume: number;
+}
+
+const DEFAULT_SETTINGS: GameSettings = {
+    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),
+    };
+}
+
 export function getLocalTeams(): StoredTeam[] {
   const item = localStorage.getItem(WORMGINE_STORAGE_KEY_TEAMS);
   if (!item) {