From e15dfc0438f18c261c393e24c0fe00b77c50ad2f Mon Sep 17 00:00:00 2001
From: "goose.art" <business@goose.art>
Date: Wed, 1 Apr 2026 11:23:42 -0700
Subject: [PATCH] settings modal with sound and pacifist mode toggles,
 persisted to localStorage, wavy toggle buttons

---
 src/lib/FlySpawner.svelte  | 13 +++--
 src/lib/FrogHeader.svelte  | 98 ++++++++++++++++++++++++++++++++++----
 src/lib/croak.ts           |  4 ++
 src/lib/settings.svelte.ts | 42 ++++++++++++++++
 4 files changed, 144 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/settings.svelte.ts

diff --git a/src/lib/FlySpawner.svelte b/src/lib/FlySpawner.svelte
index 792c71d..f6036d5 100644
--- a/src/lib/FlySpawner.svelte
+++ b/src/lib/FlySpawner.svelte
@@ -6,7 +6,9 @@
 -->
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { getSettings } from './settings.svelte';
 
+	const settings = getSettings();
 	const MAX_FLIES = 5;
 	const MIN_SPAWN_MS = 10000;
 	const MAX_SPAWN_MS = 120000;
@@ -53,7 +55,7 @@
 	}
 
 	function spawnFly() {
-		if (flies.length >= MAX_FLIES) {
+		if (settings.pacifistMode || flies.length >= MAX_FLIES) {
 			scheduleNextSpawn();
 			return;
 		}
@@ -81,10 +83,11 @@
 	}
 
 	function splatFly(id: number) {
-		// Play splat sound (clone so overlapping splats all play)
-		const sfx = splatAudio.cloneNode() as HTMLAudioElement;
-		sfx.volume = 0.5;
-		sfx.play().catch(() => {});
+		if (settings.soundEnabled) {
+			const sfx = splatAudio.cloneNode() as HTMLAudioElement;
+			sfx.volume = 0.5;
+			sfx.play().catch(() => {});
+		}
 		flies = flies.map(f => f.id === id && !f.splatted ? { ...f, splatted: true } : f);
 
 		setTimeout(() => {
diff --git a/src/lib/FrogHeader.svelte b/src/lib/FrogHeader.svelte
index 58626e1..43a097f 100644
--- a/src/lib/FrogHeader.svelte
+++ b/src/lib/FrogHeader.svelte
@@ -6,11 +6,15 @@
 -->
 <script lang="ts">
 	import LoginButton from './LoginButton.svelte';
+	import WavyButton from './WavyButton.svelte';
 	import { playCroak } from './croak';
+	import { getSettings, setSoundEnabled, setPacifistMode } from './settings.svelte';
 
 	let { onHomeClick }: { onHomeClick?: () => void } = $props();
+	const settings = getSettings();
 	let menuOpen = $state(false);
 	let showCreditsModal = $state(false);
+	let showSettingsModal = $state(false);
 
 	function handleClick(e: MouseEvent) {
 		if (onHomeClick) {
@@ -34,6 +38,7 @@
 	function openCredits() {
 		playCroak();
 		showCreditsModal = true;
+		showSettingsModal = false;
 		menuOpen = false;
 	}
 
@@ -41,12 +46,29 @@
 		showCreditsModal = false;
 	}
 
+	function openSettings() {
+		playCroak();
+		showSettingsModal = true;
+		showCreditsModal = false;
+		menuOpen = false;
+	}
+
+	function closeSettings() {
+		showSettingsModal = false;
+	}
+
 	function onBackdropClick(e: MouseEvent) {
-		if (e.target === e.currentTarget) closeCredits();
+		if (e.target === e.currentTarget) {
+			closeCredits();
+			closeSettings();
+		}
 	}
 
 	function onKeyDown(e: KeyboardEvent) {
-		if (e.key === 'Escape') closeCredits();
+		if (e.key === 'Escape') {
+			closeCredits();
+			closeSettings();
+		}
 	}
 </script>
 
@@ -71,7 +93,7 @@
 			/>
 			<!-- Mobile: menu drops down directly under the frog -->
 			<div class="lily-menu mobile-lily" class:open={menuOpen}>
-				<button class="lily-item" onclick={() => { playCroak(); }}>
+				<button class="lily-item" onclick={openSettings}>
 					<img src="/lilymenu.svg" alt="" class="lily-img" />
 					<span class="lily-label">settings</span>
 				</button>
@@ -91,7 +113,7 @@
 
 <!-- Desktop: lilypad menu fixed bottom-left -->
 <div class="lily-menu desktop-lily">
-	<button class="lily-item" onclick={() => { playCroak(); }}>
+	<button class="lily-item" onclick={openSettings}>
 		<img src="/lilymenu.svg" alt="" class="lily-img" />
 		<span class="lily-label">settings</span>
 	</button>
@@ -105,8 +127,8 @@
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="modal-backdrop" onclick={onBackdropClick}>
 		<div class="modal-content">
-			<div class="credits-body">
-				<h2 class="credits-title">credits</h2>
+			<div class="modal-body">
+				<h2 class="modal-title">credits</h2>
 				<div class="credit-item">
 					<p class="credit-label">Frog Croaking</p>
 					<p class="credit-author">by DrinkingWindGames</p>
@@ -121,6 +143,41 @@
 	</div>
 {/if}
 
+{#if showSettingsModal}
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div class="modal-backdrop" onclick={onBackdropClick}>
+		<div class="modal-content">
+			<div class="modal-body">
+				<h2 class="modal-title">settings</h2>
+
+				<div class="setting-row">
+					<span class="setting-label">sound</span>
+					<WavyButton
+						seed="toggle-sound"
+						fill={settings.soundEnabled ? '#39FF44' : '#0A182B'}
+						textColor={settings.soundEnabled ? '#0A182B' : '#FFDEED'}
+						onclick={() => setSoundEnabled(!settings.soundEnabled)}
+					>{settings.soundEnabled ? 'on' : 'off'}</WavyButton>
+				</div>
+
+				<div class="setting-row">
+					<span class="setting-label">pacifist mode</span>
+					<WavyButton
+						seed="toggle-pacifist"
+						fill={settings.pacifistMode ? '#39FF44' : '#0A182B'}
+						textColor={settings.pacifistMode ? '#0A182B' : '#FFDEED'}
+						onclick={() => setPacifistMode(!settings.pacifistMode)}
+					>{settings.pacifistMode ? 'on' : 'off'}</WavyButton>
+				</div>
+
+				<p class="setting-hint">pacifist mode disables the flies</p>
+
+				<button class="close-btn" onclick={closeSettings}>close</button>
+			</div>
+		</div>
+	</div>
+{/if}
+
 <style>
 	.frog-header {
 		padding: 30px 20px 50px;
@@ -246,7 +303,7 @@
 		padding: 32px 24px;
 	}
 
-	.credits-body {
+	.modal-body {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
@@ -254,13 +311,38 @@
 		gap: 12px;
 	}
 
-	.credits-title {
+	.modal-title {
 		font-family: 'PicNic', cursive, system-ui;
 		font-size: clamp(1.6rem, 3.5vw, 2.2rem);
 		color: #0A182B;
 		margin: 0;
 	}
 
+	/* Settings */
+	.setting-row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: min(280px, 70vw);
+		gap: 16px;
+	}
+
+	.setting-label {
+		font-family: 'PicNic', cursive, system-ui;
+		font-size: 1.1rem;
+		color: #0A182B;
+	}
+
+
+	.setting-hint {
+		font-family: 'Fang', system-ui, sans-serif;
+		font-size: 0.75rem;
+		color: #0A182B;
+		opacity: 0.5;
+		margin: 0;
+		font-style: italic;
+	}
+
 	.credit-item {
 		display: flex;
 		flex-direction: column;
diff --git a/src/lib/croak.ts b/src/lib/croak.ts
index e126402..81d7c5e 100644
--- a/src/lib/croak.ts
+++ b/src/lib/croak.ts
@@ -1,13 +1,17 @@
 /**
  * Croak SFX — plays a random frog croak when called.
  * Pre-loads all 11 croak mp3s and picks one at random each time.
+ * Respects the global sound setting.
  */
 
+import { getSettings } from './settings.svelte';
+
 const CROAK_COUNT = 11;
 const croakPaths = Array.from({ length: CROAK_COUNT }, (_, i) => `/sfx/croak${i + 1}.mp3`);
 
 /** Play a random croak sound effect. Volume is kept moderate so it's fun, not startling. */
 export function playCroak() {
+	if (!getSettings().soundEnabled) return;
 	const idx = Math.floor(Math.random() * CROAK_COUNT);
 	const audio = new Audio(croakPaths[idx]);
 	audio.volume = 0.4;
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
new file mode 100644
index 0000000..2eb7b48
--- /dev/null
+++ b/src/lib/settings.svelte.ts
@@ -0,0 +1,42 @@
+/**
+ * Global app settings, persisted to localStorage.
+ * - soundEnabled: controls all SFX (croaks, splats)
+ * - pacifistMode: disables fly spawning
+ */
+
+const STORAGE_KEY = 'vodfrog-settings';
+
+interface Settings {
+	soundEnabled: boolean;
+	pacifistMode: boolean;
+}
+
+function loadSettings(): Settings {
+	if (typeof localStorage === 'undefined') return { soundEnabled: true, pacifistMode: false };
+	try {
+		const raw = localStorage.getItem(STORAGE_KEY);
+		if (raw) return { ...{ soundEnabled: true, pacifistMode: false }, ...JSON.parse(raw) };
+	} catch { /* ignore */ }
+	return { soundEnabled: true, pacifistMode: false };
+}
+
+function saveSettings(s: Settings) {
+	if (typeof localStorage === 'undefined') return;
+	try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch { /* ignore */ }
+}
+
+let settings = $state<Settings>(loadSettings());
+
+export function getSettings() {
+	return settings;
+}
+
+export function setSoundEnabled(v: boolean) {
+	settings.soundEnabled = v;
+	saveSettings(settings);
+}
+
+export function setPacifistMode(v: boolean) {
+	settings.pacifistMode = v;
+	saveSettings(settings);
+}
-- 
2.51.2