Enhance UI components and improve user notifications

- Updated App.vue to include a toast notification system for new messages, enhancing user engagement. - Modified SplashScreen.vue to streamline the intro text display with improved typing effects. - Added Montserrat font styles in style.css for better typography across the application. - Improved controller navigation in useControllerNav.ts to support enhanced focus management and sound feedback. - Updated routing logic in index.ts to redirect authenticated users from the login page to the home page. - Enhanced the Login.vue view with transition effects for a smoother user experience during login and setup processes.
2026-02-17 19:19:54 +00:00
parent 1073d9fd2c
commit 1b05b5b8f1
24 changed files with 2038 additions and 470 deletions
@@ -1,15 +1,16 @@
 /**
- * Controller / gamepad-style navigation for Archipelago.
- * Supports Rii X8 (keyboard/d-pad) and standard gamepads.
- * - Arrow keys / d-pad: navigate between focusable elements
- * - Enter / A button: activate
- * - Escape / B button: back
- * - Game-like navigation sounds and visual feedback
+ * Xbox-style controller / gamepad navigation for Archipelago.
+ * - Left: Go to side menu only when on leftmost main content
+ * - Right: Go to main content (from side menu)
+ * - Main: spatial/grid navigation (up/down/left/right like a game)
+ * - Enter enters container's inner actions; actions get celebratory sound
 */

 import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useControllerStore } from '@/stores/controller'
 import { useSpotlightStore } from '@/stores/spotlight'
+import { playNavSound } from '@/composables/useNavSounds'

 const FOCUSABLE_SELECTOR = [
  'a[href]',
@@ -19,6 +20,7 @@ const FOCUSABLE_SELECTOR = [
  'textarea:not([disabled])',
  '[tabindex]:not([tabindex="-1"])',
  '[data-controller-focus]',
+  '[data-controller-container]',
 ].join(', ')

 function getFocusableElements(container: Document | HTMLElement = document): HTMLElement[] {
@@ -27,24 +29,94 @@ function getFocusableElements(container: Document | HTMLElement = document): HTM
  )
 }

-function playNavSound(type: 'move' | 'select' | 'back' = 'move') {
-  try {
-    const ctx = new (window.AudioContext || (window as any).webkitAudioContext)()
-    const osc = ctx.createOscillator()
-    const gain = ctx.createGain()
-    osc.connect(gain)
-    gain.connect(ctx.destination)
-    gain.gain.value = 0.08
-    osc.frequency.value = type === 'select' ? 880 : type === 'back' ? 220 : 440
-    osc.type = 'sine'
-    osc.start()
-    osc.stop(ctx.currentTime + 0.05)
-  } catch {
-    // Audio not supported or blocked
-  }
+function getElementsInZone(zone: 'sidebar' | 'main'): HTMLElement[] {
+  const container = document.querySelector(`[data-controller-zone="${zone}"]`) as HTMLElement | null
+  if (!container) return []
+  return getFocusableElements(container)
+}
+
+function isInZone(el: HTMLElement | null, zone: 'sidebar' | 'main'): boolean {
+  if (!el) return false
+  return !!el.closest(`[data-controller-zone="${zone}"]`)
+}
+
+function getInnerFocusables(container: HTMLElement): HTMLElement[] {
+  return getFocusableElements(container).filter((el) => el !== container && !el.hasAttribute('data-controller-container'))
+}
+
+function isInsideContainer(el: HTMLElement | null): boolean {
+  if (!el) return false
+  const container = el.closest('[data-controller-container]')
+  return !!container && container !== el
+}
+
+/** Spatial navigation: find nearest focusable in direction (game-style grid) */
+function findNearestInDirection(
+  from: HTMLElement,
+  candidates: HTMLElement[],
+  direction: 'up' | 'down' | 'left' | 'right'
+): HTMLElement | null {
+  const fromRect = from.getBoundingClientRect()
+  const fromCenterX = fromRect.left + fromRect.width / 2
+  const fromCenterY = fromRect.top + fromRect.height / 2
+  const threshold = 50 // px overlap allowed
+
+  const filtered = candidates.filter((el) => {
+    if (el === from) return false
+    const r = el.getBoundingClientRect()
+
+    switch (direction) {
+      case 'left':
+        return r.right <= fromRect.left + threshold
+      case 'right':
+        return r.left >= fromRect.right - threshold
+      case 'up':
+        return r.bottom <= fromRect.top + threshold
+      case 'down':
+        return r.top >= fromRect.bottom - threshold
+      default:
+        return false
+    }
+  })
+
+  if (filtered.length === 0) return null
+
+  // Pick best: most overlap on perpendicular axis, then closest
+  const scored = filtered.map((el) => {
+    const r = el.getBoundingClientRect()
+    const centerX = r.left + r.width / 2
+    const centerY = r.top + r.height / 2
+
+    let overlap: number
+    let dist: number
+    switch (direction) {
+      case 'left':
+      case 'right':
+        overlap = Math.max(0, Math.min(fromRect.bottom, r.bottom) - Math.max(fromRect.top, r.top))
+        dist = Math.abs(centerX - fromCenterX)
+        break
+      case 'up':
+      case 'down':
+        overlap = Math.max(0, Math.min(fromRect.right, r.right) - Math.max(fromRect.left, r.left))
+        dist = Math.abs(centerY - fromCenterY)
+        break
+      default:
+        overlap = 0
+        dist = Infinity
+    }
+    return { el, overlap, dist }
+  })
+
+  scored.sort((a, b) => {
+    if (b.overlap !== a.overlap) return b.overlap - a.overlap
+    return a.dist - b.dist
+  })
+  return scored[0]?.el ?? null
 }

 export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
+  const route = useRoute()
+  const router = useRouter()
  const store = useControllerStore()
  const isControllerActive = ref(false)
  const gamepadCount = ref(0)
@@ -69,7 +141,6 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
    const navKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'Escape']
    if (!navKeys.includes(e.key)) return

-    // Ignore when typing in inputs
    const target = e.target as HTMLElement
    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
      if (e.key !== 'Escape') return
@@ -78,7 +149,9 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
    const root = containerRef?.value ?? document
    const focusable = getFocusableElements(root)
    const currentIndex = focusable.indexOf(document.activeElement as HTMLElement)
+    const activeEl = document.activeElement as HTMLElement

+    // --- ESCAPE ---
    if (e.key === 'Escape') {
      if (useSpotlightStore().isOpen) {
        useSpotlightStore().close()
@@ -86,21 +159,67 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
        e.stopPropagation()
        return
      }
+
+      if (isInsideContainer(activeEl)) {
+        const container = activeEl.closest('[data-controller-container]') as HTMLElement | null
+        if (container && container.tabIndex >= 0) {
+          playNavSound('back')
+          container.focus()
+          container.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+          e.preventDefault()
+          return
+        }
+      }
+
+      const isDetailPage = /\/apps\/[^/]+$|\/marketplace\/[^/]+$|\/cloud\/[^/]+$/.test(route.path)
+      if (isDetailPage) {
+        playNavSound('back')
+        window.history.back()
+        e.preventDefault()
+        return
+      }
+
+      const sidebarEls = getElementsInZone('sidebar')
+      const firstSidebar = sidebarEls[0]
+      if (firstSidebar && isInZone(activeEl, 'main')) {
+        playNavSound('back')
+        firstSidebar.focus()
+        firstSidebar.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+        e.preventDefault()
+        return
+      }
+
      playNavSound('back')
      window.history.back()
      e.preventDefault()
      return
    }

+    // --- ENTER ---
    if (e.key === 'Enter') {
      if (currentIndex >= 0 && focusable[currentIndex]) {
-        playNavSound('select')
-        ;(focusable[currentIndex] as HTMLElement).click()
+        const el = focusable[currentIndex] as HTMLElement
+
+        if (el.hasAttribute('data-controller-container')) {
+          const inner = getInnerFocusables(el)
+          const firstInner = inner[0]
+          if (firstInner) {
+            playNavSound('action')
+            firstInner.focus()
+            firstInner.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+            e.preventDefault()
+            return
+          }
+        }
+
+        playNavSound('action')
+        el.click()
      }
      e.preventDefault()
      return
    }

+    // --- ARROWS ---
    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
      isControllerActive.value = true
      if (keyNavTimeout) clearTimeout(keyNavTimeout)
@@ -108,9 +227,87 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
        isControllerActive.value = gamepadCount.value > 0
      }, 3000)

+      const sidebarEls = getElementsInZone('sidebar')
+      const mainEls = getElementsInZone('main')
+      const hasZones = sidebarEls.length > 0 && mainEls.length > 0
+
+      // Right: from sidebar → main
+      const firstMain = mainEls[0]
+      if (e.key === 'ArrowRight' && hasZones && isInZone(activeEl, 'sidebar') && firstMain) {
+        playNavSound('move')
+        firstMain.focus()
+        firstMain.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+        e.preventDefault()
+        return
+      }
+
+      // Main zone: spatial navigation (game-style grid)
+      if (hasZones && isInZone(activeEl, 'main')) {
+        const dir = e.key === 'ArrowLeft' ? 'left' : e.key === 'ArrowRight' ? 'right' : e.key === 'ArrowUp' ? 'up' : 'down'
+        const next = findNearestInDirection(activeEl, mainEls, dir)
+
+        if (next) {
+          playNavSound('move')
+          next.focus()
+          next.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+          e.preventDefault()
+          return
+        }
+
+        // No element in that direction: Left from leftmost → sidebar
+        if (e.key === 'ArrowLeft' && dir === 'left') {
+          const lastSidebar = sidebarEls[sidebarEls.length - 1]
+          if (lastSidebar) {
+            playNavSound('move')
+            lastSidebar.focus()
+            lastSidebar.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+            e.preventDefault()
+            return
+          }
+        }
+      }
+
+      // Inside container: spatial nav among inner elements
+      if (isInsideContainer(activeEl)) {
+        const container = activeEl.closest('[data-controller-container]') as HTMLElement
+        if (container) {
+          const inner = getInnerFocusables(container)
+          const dir = e.key === 'ArrowLeft' ? 'left' : e.key === 'ArrowRight' ? 'right' : e.key === 'ArrowUp' ? 'up' : 'down'
+          const next = findNearestInDirection(activeEl, inner, dir)
+          if (next) {
+            playNavSound('move')
+            next.focus()
+            next.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+            e.preventDefault()
+            return
+          }
+        }
+      }
+
+      // Sidebar: linear up/down
+      if (isInZone(activeEl, 'sidebar')) {
+        const idx = sidebarEls.indexOf(activeEl)
+        if (idx >= 0) {
+          const isDown = e.key === 'ArrowDown'
+          const nextIdx = isDown ? Math.min(idx + 1, sidebarEls.length - 1) : Math.max(idx - 1, 0)
+          const next = sidebarEls[nextIdx]
+          if (next && next !== activeEl) {
+            playNavSound('move')
+            next.focus()
+            next.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+            if (next.tagName === 'A') {
+              const href = (next as HTMLAnchorElement).getAttribute?.('href')
+              if (href && href.startsWith('/')) router.push(href).catch(() => {})
+            }
+            e.preventDefault()
+            return
+          }
+        }
+      }
+
+      // Fallback: linear navigation
      let nextIndex = currentIndex
      const isForward = e.key === 'ArrowDown' || e.key === 'ArrowRight'
-
      if (focusable.length === 0) return

      if (currentIndex < 0) {
@@ -126,6 +323,12 @@ export function useControllerNav(containerRef?: { value: HTMLElement | null }) {
        playNavSound('move')
        next.focus()
        next.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+        if (isInZone(next, 'sidebar') && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+          const href = (next as HTMLAnchorElement).getAttribute?.('href')
+          if (href && href.startsWith('/') && next.tagName === 'A') {
+            router.push(href).catch(() => {})
+          }
+        }
        e.preventDefault()
      }
    }