lfg2025/archy
1
0
Fork 0
Code Issues 25 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

Enhance user interaction and audio feedback in CLI and login components

Browse Source 
- Updated keydown event handling in App.vue to improve keyboard navigation.
- Enhanced AppSwitcher.vue with a status indicator for online presence.
- Integrated new sci-fi typing sound effect in useLoginSounds.ts for a more engaging user experience during login.
- Modified login handling functions in Login.vue to include sound feedback on setup and login actions.
- Added CLI store integration to play navigation sounds when opening and closing the CLI.
This commit is contained in:
Dorian
2026-02-18 10:35:04 +00:00
parent 59210a7927
commit c9f6e6b8ae
8 changed files with 101 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/Home.vue
+8 -24
View File
@@ -1,28 +1,14 @@
<template>
<div>
<div class="mb-8 flex items-start justify-between">
<div>
<div class="min-h-[4.5rem]">
<h1 class="text-3xl font-bold text-white mb-2 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">
{{ line1Text }}<span v-if="showCaretLine1" class="typing-caret"></span>
</h1>
<p class="text-white/80">
{{ line2Text }}<span v-if="showCaretLine2" class="typing-caret"></span>
</p>
</div>
<div class="mb-8">
<div class="min-h-[4.5rem]">
<h1 class="text-3xl font-bold text-white mb-2 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">
{{ line1Text }}<span v-if="showCaretLine1" class="typing-caret"></span>
</h1>
<p class="text-white/80">
{{ line2Text }}<span v-if="showCaretLine2" class="typing-caret"></span>
</p>
</div>
<!-- Compact Status Indicator - click to trigger screensaver (dev) -->
<button
type="button"
class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg cursor-pointer hover:bg-white/5 transition-colors"
@click="screensaverStore.activate()"
>
<div class="relative">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<div class="absolute inset-0 w-2 h-2 rounded-full bg-green-400 animate-ping opacity-75"></div>
</div>
<span class="text-sm font-medium text-white">Online</span>
</button>
</div>
<!-- Section Overviews - 2advanced staggered animation (hidden until typing starts, then animate with typing) -->
@@ -277,13 +263,11 @@
import { computed, ref, watch, onBeforeUnmount } from 'vue'
import { RouterLink } from 'vue-router'
import { useAppStore } from '../stores/app'
import { useScreensaverStore } from '../stores/screensaver'
import { useLoginTransitionStore } from '../stores/loginTransition'
import { PackageState } from '../types/api'
import { playTypingSound } from '@/composables/useLoginSounds'
const store = useAppStore()
const screensaverStore = useScreensaverStore()
const loginTransition = useLoginTransitionStore()
const LINE1 = "Welcome Noderunner"
neode-ui/src/views/Login.vue
+29 -6
View File
@@ -41,7 +41,8 @@
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)"
@keyup.enter="handleSetup"
@keydown="onPasswordKeydown"
@keyup.enter="handleSetupWithSound"
:disabled="loading"
/>
</div>
@@ -56,13 +57,14 @@
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"
@keyup.enter="handleSetup"
@keydown="onPasswordKeydown"
@keyup.enter="handleSetupWithSound"
:disabled="loading"
/>
</div>
<button
@click="handleSetup"
@click="handleSetupWithSound"
:disabled="loading || !password || password !== confirmPassword"
class="w-full glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 disabled:opacity-50 disabled:cursor-not-allowed"
>
@@ -89,13 +91,14 @@
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"
@keyup.enter="handleLogin"
@keydown="onPasswordKeydown"
@keyup.enter="handleLoginWithSound"
:disabled="loading"
/>
</div>
<button
@click="handleLogin"
@click="handleLoginWithSound"
:disabled="loading || !password"
class="w-full glass-button px-6 py-3 rounded-lg font-medium transition-all hover:bg-black/70 hover:border-white/30 disabled:opacity-50 disabled:cursor-not-allowed"
>
@@ -136,7 +139,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 } from '@/composables/useLoginSounds'
import { startSynthwave, stopSynthwave, playLoginSuccessWhoosh, playPop, playSciFiTypingTick } from '@/composables/useLoginSounds'
const router = useRouter()
const store = useAppStore()
@@ -174,6 +177,13 @@ onMounted(async () => {
})
function handleSetupWithSound() {
if (!loading.value && password.value && password.value === confirmPassword.value) {
playPop()
}
handleSetup()
}
async function handleSetup() {
if (!password.value || password.value.length < 8) {
error.value = 'Password must be at least 8 characters'
@@ -210,6 +220,19 @@ 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()
}
handleLogin()
}
async function handleLogin() {
if (!password.value) return