Implement keyboard typing sound feedback and refactor login sound handling

- Added a keyboard typing sound effect that plays on character input in App.vue for enhanced user interaction.
- Refactored the playSciFiTypingTick function in useLoginSounds.ts, replacing it with playKeyboardTypingSound for a more cohesive audio experience.
- Removed unnecessary keydown event handlers from Login.vue to streamline the code and improve clarity.
- Updated CLI store to play navigation sounds when toggling the CLI visibility.
This commit is contained in:
Dorian
2026-02-18 10:37:26 +00:00
parent c9f6e6b8ae
commit 578551f617
4 changed files with 27 additions and 47 deletions
+1 -10
View File
@@ -41,7 +41,6 @@
type="password"
class="w-full px-4 py-3 bg-transparent border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/20 transition-colors"
placeholder="Enter a password (min 8 characters)"
@keydown="onPasswordKeydown"
@keyup.enter="handleSetupWithSound"
:disabled="loading"
/>
@@ -57,7 +56,6 @@
type="password"
class="w-full px-4 py-3 bg-transparent border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/20 transition-colors"
placeholder="Confirm your password"
@keydown="onPasswordKeydown"
@keyup.enter="handleSetupWithSound"
:disabled="loading"
/>
@@ -91,7 +89,6 @@
type="password"
class="w-full px-4 py-3 bg-transparent border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40 focus:ring-1 focus:ring-white/20 transition-colors"
placeholder="Enter your password"
@keydown="onPasswordKeydown"
@keyup.enter="handleLoginWithSound"
:disabled="loading"
/>
@@ -139,7 +136,7 @@ import AnimatedLogo from '@/components/AnimatedLogo.vue'
import { useAppStore } from '../stores/app'
import { useLoginTransitionStore } from '../stores/loginTransition'
import { rpcClient } from '../api/rpc-client'
import { startSynthwave, stopSynthwave, playLoginSuccessWhoosh, playPop, playSciFiTypingTick } from '@/composables/useLoginSounds'
import { startSynthwave, stopSynthwave, playLoginSuccessWhoosh, playPop } from '@/composables/useLoginSounds'
const router = useRouter()
const store = useAppStore()
@@ -220,12 +217,6 @@ async function handleSetup() {
}
}
function onPasswordKeydown(e: KeyboardEvent) {
if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
playSciFiTypingTick()
}
}
function handleLoginWithSound() {
if (!loading.value && password.value) {
playPop()