option to disable / enable sound

src/lib/components/SoundControl.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+ import { getItem, setItem } from '$lib/utils/storage';
+ import SpeakerWave from '$lib/components/icons/SpeakerWave.svelte';
+ import SpeakerMute from '$lib/components/icons/SpeakerMute.svelte';
+ import { browser } from '$app/environment';
+ import { SOUND_KEY } from '$lib/constants';
+ import { soundEnabled } from '$lib/store';
+
+ let resolvedSoundPreference: string;
+
+ if (browser) {
+ const userSoundPreference = getItem(SOUND_KEY);
+ if (userSoundPreference) {
+ resolvedSoundPreference = userSoundPreference;
+ } else {
+ resolvedSoundPreference = 'true';
+ }
+ updateStore();
+ }
+
+ function updateStore() {
+ const isSoundEnabled = resolvedSoundPreference === 'true' ? true : false;
+ soundEnabled.set(isSoundEnabled);
+ }
+
+ function toggleSound() {
+ resolvedSoundPreference = resolvedSoundPreference === 'true' ? 'false' : 'true';
+ try {
+ setItem(SOUND_KEY, resolvedSoundPreference);
+ updateStore();
+ } catch (e) {
+ // ignore
+ }
+ }
+</script>
+
+{#if resolvedSoundPreference !== undefined}
+ <button class="btn-toggle-sound" on:click={toggleSound} title="Toggle sound">
+ {#if resolvedSoundPreference === 'true'}
+ <SpeakerWave />
+ {:else}
+ <SpeakerMute />
+ {/if}
+ </button>
+{/if}
+
+<style>
+ .btn-toggle-sound {
+ background: none;
+ border: none;
+ width: 2rem;
+ padding: 0;
+ cursor: pointer;
+ margin-right: 1rem;
+ }
+ .btn-toggle-sound:active {
+ background-color: transparent;
+ }
+</style>

src/lib/components/icons/SpeakerMute.svelte

@@ -0,0 +1,14 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="var(--text-color)"
+ class="w-6 h-6"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.531V19.94a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.506-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.395C2.806 8.757 3.63 8.25 4.51 8.25H6.75z"
+ />
+</svg>

src/lib/components/icons/SpeakerWave.svelte

@@ -0,0 +1,14 @@
+<svg
+ xmlns="http://www.w3.org/2000/svg"
+ fill="none"
+ viewBox="0 0 24 24"
+ stroke-width="1.5"
+ stroke="var(--text-color)"
+ class="w-6 h-6"
+>
+ <path
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"
+ />
+</svg>

src/lib/constants.ts

@@ -1,3 +1,4 @@
 export const THEME_KEY = 'connect4:theme';
+export const SOUND_KEY = 'connect4:sound';
 export const BOARD_VALUE_FOR_PLAYER1 = 1;
 export const BOARD_VALUE_FOR_PLAYER2 = 2;

src/lib/store/index.ts

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const soundEnabled = writable(true);

src/lib/utils/sounds.ts

@@ -1,3 +1,6 @@
+import { soundEnabled } from '$lib/store';
+import { get } from 'svelte/store';
+
 let coinDropSounds: HTMLAudioElement[];
 let winningSound: HTMLAudioElement;
 
@@ -21,15 +24,17 @@ export function initSounds() {
 }
 
 export function playCoinDrop(rowNumber: number) {
- // https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio#determining_when_playback_can_begin
  const coinDropSound = coinDropSounds[rowNumber];
- if (coinDropSound.readyState >= 2) {
+ // https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement/Audio#determining_when_playback_can_begin
+ if (coinDropSound.readyState >= 2 && get(soundEnabled)) {
+ coinDropSound.volume = 0.75;
  coinDropSound.play();
  }
 }
 
 export function playWinningCelebration() {
- if (winningSound.readyState >= 2) {
+ if (winningSound.readyState >= 2 && get(soundEnabled)) {
+ winningSound.volume = 0.5;
  winningSound.play();
  }
 }

src/routes/+layout.svelte

@@ -6,6 +6,7 @@
  import Footer from '$lib/components/Footer.svelte';
  import GoogleAnalytics from '$lib/components/GoogleAnalytics.svelte';
  import MetaTags from '$lib/components/MetaTags.svelte';
+ import SoundControl from '$lib/components/SoundControl.svelte';
 </script>
 
 <InitialThemeSetter />
@@ -20,6 +21,7 @@
  <Logo />
  </div>
  <div class="theme-selector-container">
+ <SoundControl />
  <ThemeSelector />
  </div>
  </header>