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:
@@ -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()
|
||||
|
||||
Reference in New Issue
Block a user