feat(settings): add type effect sounds

src/lib/components/editor/Editor.svelte

@@ -94,7 +94,7 @@
   const updateCaretPosAndEditorData = async () => {
     updateEditorData();
     await tick();
-    fakeCaret.updateCaretPosition();
+    fakeCaret?.updateCaretPosition();
   };
 
   onMount(async () => {
@@ -110,15 +110,15 @@
     quill.on('editor-change', updateCaretPosAndEditorData);
     // Marks editor as not saved when text content changes.
     quill.on('text-change', (delta) => {
-      let pressedKey: undefined | string;
+      let insertedText: undefined | string;
 
       delta.ops.forEach((op) => {
         if (op.insert && typeof op.insert === 'string' && op.insert.length == 1) {
-          pressedKey = op.insert;
+          insertedText = op.insert;
         }
       });
-      Notpad.typeEffectPlayer.play(pressedKey);
 
+      Notpad.typeEffectPlayer.play(insertedText);
       Notpad.editors.setIsSaved(editor.id, false);
     });
   });

src/lib/components/editor/FakeCaret.svelte

@@ -5,7 +5,7 @@
   import { settings } from '@/store/store';
   import type Quill from 'quill';
   import { cn } from '@/utils';
-  import { CaretAnimation, CaretStyle } from '@/types/SettingsType';
+  import { CaretAnimation } from '@/types/SettingsType';
 
   interface Props {
     quill: Quill;
@@ -15,6 +15,7 @@
   let { quill, editorContainer }: Props = $props();
   let caret = $state({ top: 10, left: 8, height: 24 });
   let fakeCaretElement: HTMLSpanElement = $state(null!);
+  const caretStyle = $derived($settings.caret.style);
 
   const resumeFakeCaretBlink = debounce(function () {
     if (fakeCaretElement) fakeCaretElement.classList.add('animate-caret-blink');
@@ -54,15 +55,13 @@
       'fake-caret absolute z-0 w-0.5 animate-caret-blink rounded-[.06em]',
       '[transition:left_var(--caret-animation-duration),top_var(--caret-animation-duration)]',
       {
-        'bg-primary': $settings.caret.style != CaretStyle.HollowBlock,
-        'border border-primary': $settings.caret.style == CaretStyle.HollowBlock
+        'bg-primary': caretStyle != 'HollowBlock',
+        'border border-primary': caretStyle == 'HollowBlock'
       }
     )}
-    style:width="calc({$settings.caret.style == CaretStyle.VerticalBar ? '2px' : '1ch'} * var(--editor-zoom))"
-    style:height={$settings.caret.style == CaretStyle.Underline ? '2px' : `${caret.height}px`}
-    style:margin-top={$settings.caret.style == CaretStyle.Underline
-      ? `${caret.height + 2}px`
-      : undefined}
+    style:width="calc({caretStyle == 'VerticalBar' ? '2px' : '1ch'} * var(--editor-zoom))"
+    style:height={caretStyle == 'Underline' ? '2px' : `${caret.height}px`}
+    style:margin-top={caretStyle == 'Underline' ? `${caret.height + 2}px` : undefined}
     style:top="{caret.top}px"
     style:left="{caret.left}px"
     style:--caret-animation-duration={CaretAnimation[$settings.caret.animation]}

src/lib/components/menubar/SettingsMenu.svelte

@@ -49,7 +49,7 @@
         <Menubar.Sub>
           <Menubar.SubTrigger class="gap-2">Sound</Menubar.SubTrigger>
           <Menubar.SubContent>
-            {#each Object.values(TypeEffectSound) as key}
+            {#each Object.keys(TypeEffectSound) as key}
               <Menubar.CheckboxItem
                 checked={$settings.typeEffect.sound == key}
                 onclick={() => {
@@ -66,7 +66,6 @@
           <Menubar.SubTrigger class="gap-2">Volume</Menubar.SubTrigger>
           <Menubar.SubContent>
             {#each Object.keys(TypeEffectVolume) as key}
-              {console.log($settings.typeEffect.volume, key)}
               <Menubar.CheckboxItem
                 checked={$settings.typeEffect.volume == key}
                 onclick={() => {
@@ -81,23 +80,25 @@
           </Menubar.SubContent>
         </Menubar.Sub>
 
-        <Menubar.Sub>
-          <Menubar.SubTrigger class="gap-2">Vibration</Menubar.SubTrigger>
-          <Menubar.SubContent>
-            {#each Object.keys(TypeEffectVibration) as key}
-              <Menubar.CheckboxItem
-                checked={$settings.typeEffect.vibration == key}
-                onclick={() => {
-                  Notpad.settings.updateTypeEffect({
-                    vibration: key as keyof typeof TypeEffectVibration
-                  });
-                }}
-              >
-                {key}
-              </Menubar.CheckboxItem>
-            {/each}
-          </Menubar.SubContent>
-        </Menubar.Sub>
+        {#if 'vibrate' in navigator}
+          <Menubar.Sub>
+            <Menubar.SubTrigger class="gap-2">Vibration</Menubar.SubTrigger>
+            <Menubar.SubContent>
+              {#each Object.keys(TypeEffectVibration) as key}
+                <Menubar.CheckboxItem
+                  checked={$settings.typeEffect.vibration == key}
+                  onclick={() => {
+                    Notpad.settings.updateTypeEffect({
+                      vibration: key as keyof typeof TypeEffectVibration
+                    });
+                  }}
+                >
+                  {key}
+                </Menubar.CheckboxItem>
+              {/each}
+            </Menubar.SubContent>
+          </Menubar.Sub>
+        {/if}
       </Menubar.SubContent>
     </Menubar.Sub>
 
@@ -108,7 +109,7 @@
           <Menubar.Sub>
             <Menubar.SubTrigger class="gap-2">Style</Menubar.SubTrigger>
             <Menubar.SubContent>
-              {#each Object.values(CaretStyle) as key}
+              {#each Object.keys(CaretStyle) as key}
                 <Menubar.CheckboxItem
                   checked={$settings.caret.style == key}
                   onclick={() => {
@@ -124,7 +125,7 @@
           <Menubar.Sub>
             <Menubar.SubTrigger class="gap-2">Animation</Menubar.SubTrigger>
             <Menubar.SubContent>
-              {#each Object.values(CaretAnimation) as key}
+              {#each Object.keys(CaretAnimation) as key}
                 <Menubar.CheckboxItem
                   checked={$settings.caret.animation == key}
                   onclick={() => {

src/lib/helpers/settings.ts

@@ -15,9 +15,9 @@ export class Settings {
       enable: true
     },
     typeEffect: {
-      sound: 'Click',
+      sound: 'Nk Creams',
       vibration: 'Medium',
-      volume: 'ThreeQuarter'
+      volume: 'Full'
     }
   };
 

src/lib/helpers/type-effect-player.ts

@@ -57,22 +57,22 @@ export class TypeEffectPlayer {
     key = key.toLowerCase(); // Normalize key to lowercase for comparison
 
     if (farLeftKeys.includes(key)) {
-      return -1; // Far-left
+      return -0.5; // Far-left
     } else if (leftKeys.includes(key)) {
-      return -0.5; // Left
+      return -0.3; // Left
     } else if (centerKeys.includes(key)) {
       return 0; // Center
     } else if (rightKeys.includes(key)) {
-      return 0.5; // Right
+      return 0.3; // Right
     } else if (farRightKeys.includes(key)) {
-      return 1; // Far-right
+      return 0.5; // Far-right
     } else {
       return 0; // Default to center if key is not found in any section
     }
   }
 
   private triggerVibration(strength: number): void {
-    if (navigator.vibrate) {
+    if ('vibrate' in navigator) {
       const duration = Math.max(1, Math.min(100, Math.round(strength * 100)));
       navigator.vibrate(duration);
     } else {
@@ -103,9 +103,7 @@ export class TypeEffectPlayer {
     source.start(0);
 
     const vibration = TypeEffectVibration[this.settings.vibration];
-    if (vibration > 0) {
-      this.triggerVibration(vibration);
-    }
+    if (vibration > 0) this.triggerVibration(vibration);
   }
 
   public resumeAudioContext(): void {

src/lib/types/SettingsType.ts

@@ -1,4 +1,16 @@
 import clickSound from '@/src/assets/sounds/click.wav';
+import beepSound from '@/src/assets/sounds/beep.wav';
+import damageSound from '@/src/assets/sounds/damage.wav';
+import fistFightSound from '@/src/assets/sounds/fist-fight.wav';
+import hitmarkerSound from '@/src/assets/sounds/hitmarker.wav';
+import missedPunchSound from '@/src/assets/sounds/missed-punch.wav';
+import nkCreamsSound from '@/src/assets/sounds/nk-creams.wav';
+import osuSound from '@/src/assets/sounds/osu.wav';
+import popSound from '@/src/assets/sounds/pop.wav';
+import rubberKeysSound from '@/src/assets/sounds/rubber-keys.wav';
+import squareSound from '@/src/assets/sounds/square.wav';
+import triangleSound from '@/src/assets/sounds/triangle.wav';
+import typewriterSound from '@/src/assets/sounds/typewriter.wav';
 
 /**
  * Available font families for the editor.
@@ -50,7 +62,18 @@ export const CaretStyle = {
 
 export const TypeEffectSound = {
   Click: clickSound,
-  Pop: clickSound,
+  Beep: beepSound,
+  Damage: damageSound,
+  'Fist Fight': fistFightSound,
+  Hitmarker: hitmarkerSound,
+  'Missed Punch': missedPunchSound,
+  'Nk Creams': nkCreamsSound,
+  Osu: osuSound,
+  Pop: popSound,
+  'Rubber Keys': rubberKeysSound,
+  Square: squareSound,
+  Triangle: triangleSound,
+  Typewriter: typewriterSound,
   None: null
 };