From aecac4e697deebfb01d2adbd57416b8271460b5b Mon Sep 17 00:00:00 2001
From: Bobby <bobbyskhs@gmail.com>
Date: Wed, 22 Apr 2026 08:43:21 +0530
Subject: Add Settings screen with mute toggle and ambient volume slider

---
 lib/components/Slider.svelte       |  79 ++++++++++++++++++
 lib/components/ToggleSwitch.svelte |  60 ++++++++++++++
 lib/screens/SettingsScreen.svelte  | 166 +++++++++++++++++++++++++++++++++++++
 routes/+page.svelte                |   4 +-
 routes/settings/+page.svelte       |  11 +++
 5 files changed, 319 insertions(+), 1 deletion(-)
 create mode 100644 lib/components/Slider.svelte
 create mode 100644 lib/components/ToggleSwitch.svelte
 create mode 100644 lib/screens/SettingsScreen.svelte
 create mode 100644 routes/settings/+page.svelte

diff --git a/lib/components/Slider.svelte b/lib/components/Slider.svelte
new file mode 100644
index 0000000..da58413
--- /dev/null
+++ b/lib/components/Slider.svelte
@@ -0,0 +1,79 @@
+<script lang="ts">
+  interface Props {
+    value: number
+    min?: number
+    max?: number
+    step?: number
+    label: string
+    onChange: (value: number) => void
+  }
+
+  let {
+    value,
+    min = 0,
+    max = 1,
+    step = 0.01,
+    label,
+    onChange
+  }: Props = $props()
+
+  function handleInput(event: Event): void {
+    const target = event.currentTarget as HTMLInputElement
+    onChange(Number(target.value))
+  }
+</script>
+
+<input
+  type="range"
+  {min}
+  {max}
+  {step}
+  {value}
+  aria-label={label}
+  class="slider"
+  oninput={handleInput}
+/>
+
+<style>
+  .slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 200px;
+    height: 2px;
+    background: rgba(232, 226, 213, 0.12);
+    outline: none;
+    border-radius: 1px;
+  }
+
+  .slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    cursor: pointer;
+    border: none;
+    transition: transform var(--transition-fast);
+  }
+
+  .slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-accent);
+    cursor: pointer;
+    border: none;
+    transition: transform var(--transition-fast);
+  }
+
+  .slider:hover::-webkit-slider-thumb,
+  .slider:focus-visible::-webkit-slider-thumb {
+    transform: scale(1.15);
+  }
+
+  .slider:hover::-moz-range-thumb,
+  .slider:focus-visible::-moz-range-thumb {
+    transform: scale(1.15);
+  }
+</style>
diff --git a/lib/components/ToggleSwitch.svelte b/lib/components/ToggleSwitch.svelte
new file mode 100644
index 0000000..9536d6d
--- /dev/null
+++ b/lib/components/ToggleSwitch.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  interface Props {
+    value: boolean
+    label: string
+    onChange: (value: boolean) => void
+  }
+
+  let { value, label, onChange }: Props = $props()
+
+  function handleClick(): void {
+    onChange(!value)
+  }
+</script>
+
+<button
+  type="button"
+  role="switch"
+  aria-checked={value}
+  aria-label={label}
+  class="toggle"
+  class:on={value}
+  onclick={handleClick}
+>
+  <span class="thumb"></span>
+</button>
+
+<style>
+  .toggle {
+    position: relative;
+    width: 38px;
+    height: 20px;
+    border-radius: 999px;
+    background: rgba(232, 226, 213, 0.08);
+    border: 1px solid rgba(232, 226, 213, 0.12);
+    transition:
+      background var(--transition-fast),
+      border-color var(--transition-fast);
+  }
+
+  .toggle.on {
+    background: var(--color-accent);
+    border-color: var(--color-accent);
+  }
+
+  .thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--color-text);
+    transition: transform var(--transition-fast);
+  }
+
+  .toggle.on .thumb {
+    transform: translateX(18px);
+    background: var(--color-bg);
+  }
+</style>
diff --git a/lib/screens/SettingsScreen.svelte b/lib/screens/SettingsScreen.svelte
new file mode 100644
index 0000000..3d502f1
--- /dev/null
+++ b/lib/screens/SettingsScreen.svelte
@@ -0,0 +1,166 @@
+<script lang="ts">
+  import Slider from '@hollowdark/lib/components/Slider.svelte'
+  import ToggleSwitch from '@hollowdark/lib/components/ToggleSwitch.svelte'
+  import { ambientVolume, masterMuted } from '@hollowdark/lib/audio/state'
+
+  interface Props {
+    onBack: () => void
+  }
+
+  let { onBack }: Props = $props()
+
+  const volumePercent = $derived(Math.round($ambientVolume * 100))
+
+  function setMuted(next: boolean): void {
+    masterMuted.set(next)
+  }
+
+  function setVolume(next: number): void {
+    ambientVolume.set(next)
+  }
+</script>
+
+<section class="settings">
+  <header class="top">
+    <button class="back" onclick={onBack}>← Back</button>
+    <h1 class="heading">Settings</h1>
+  </header>
+
+  <div class="body">
+    <section class="group">
+      <h2 class="group-label">Audio</h2>
+
+      <div class="row">
+        <div class="row-label">
+          <p class="row-name">Mute everything</p>
+          <p class="row-hint">Silence all sound, regardless of volume.</p>
+        </div>
+        <ToggleSwitch value={$masterMuted} label="Mute everything" onChange={setMuted} />
+      </div>
+
+      <div class="row">
+        <div class="row-label">
+          <p class="row-name">Ambient volume</p>
+          <p class="row-hint">Title music and region beds.</p>
+        </div>
+        <div class="slider-cell">
+          <Slider
+            value={$ambientVolume}
+            min={0}
+            max={1}
+            step={0.01}
+            label="Ambient volume"
+            onChange={setVolume}
+          />
+          <span class="slider-value">{volumePercent}%</span>
+        </div>
+      </div>
+    </section>
+  </div>
+</section>
+
+<style>
+  .settings {
+    min-height: 100dvh;
+    padding: var(--space-8) var(--space-6) var(--space-12);
+    max-width: 640px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .top {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-6);
+    margin-bottom: var(--space-12);
+  }
+
+  .back {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    letter-spacing: 0.3px;
+    transition: color var(--transition-fast);
+  }
+
+  .back:hover {
+    color: var(--color-text);
+  }
+
+  .heading {
+    font-family: var(--font-body);
+    font-size: var(--text-xl);
+    font-style: italic;
+    font-weight: 400;
+    letter-spacing: 1px;
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-8);
+  }
+
+  .group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .group-label {
+    font-family: var(--font-ui);
+    font-size: var(--text-xs);
+    color: var(--color-accent);
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    margin: 0 0 var(--space-2);
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-6);
+    padding: var(--space-3) 0;
+    border-bottom: 1px solid rgba(232, 226, 213, 0.06);
+  }
+
+  .row-label {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    flex: 1;
+    min-width: 0;
+  }
+
+  .row-name {
+    font-family: var(--font-body);
+    font-size: var(--text-base);
+    color: var(--color-text);
+    margin: 0;
+  }
+
+  .row-hint {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-text-tertiary);
+    margin: 0;
+  }
+
+  .slider-cell {
+    display: flex;
+    align-items: center;
+    gap: var(--space-4);
+  }
+
+  .slider-value {
+    font-family: var(--font-ui);
+    font-size: var(--text-sm);
+    color: var(--color-text-secondary);
+    min-width: 3.5ch;
+    text-align: right;
+  }
+</style>
diff --git a/routes/+page.svelte b/routes/+page.svelte
index 37c1273..c807b41 100644
--- a/routes/+page.svelte
+++ b/routes/+page.svelte
@@ -20,7 +20,9 @@
 
   function handleBegin(): void {}
   function handleContinue(): void {}
-  function handleSettings(): void {}
+  function handleSettings(): void {
+    goto(resolve('/settings'))
+  }
   function handleCredits(): void {
     goto(resolve('/credits'))
   }
diff --git a/routes/settings/+page.svelte b/routes/settings/+page.svelte
new file mode 100644
index 0000000..4e5a080
--- /dev/null
+++ b/routes/settings/+page.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { goto } from '$app/navigation'
+  import { resolve } from '$app/paths'
+  import SettingsScreen from '@hollowdark/lib/screens/SettingsScreen.svelte'
+
+  function handleBack(): void {
+    goto(resolve('/'))
+  }
+</script>
+
+<SettingsScreen onBack={handleBack} />
-- 
cgit v1.2.3