convo/src/App.svelte

<script lang="ts">
  import Router, { location, pop } from 'svelte-spa-router'

  import SoftKey from './components/SoftKey.svelte'

  import Home from './routes/Home.svelte'
  import Login from './routes/Login.svelte'
  import Redirect from './routes/Redirect.svelte'

  import { titleStore, softkeysStore } from './stores.ts'

  let title
  titleStore.subscribe(value => title = value)

  let softkeys
  softkeysStore.subscribe(value => softkeys = value)

  // Navigation
  const routes = {
    '/': Home,
    '/login': Login,
    '*': Redirect,
  }

  // Go back
  function goBack() {
    // exit if we're on the main screen
    if ($location === '/') {
      window.close()
    }
    // otherwise, go back
    pop()
  }

  // Account creation (or not)
  function createAccount() {
    alert('Unfortunately, you cannot create an account yet :(')
  }

  // For D-pad navigation
  function nav(move) {
    let currentIndex = document.activeElement.tabIndex
    let next = currentIndex + move
    let items = document.querySelectorAll('.focusable')

    // Loop around if at end
    if (next < 0) next = items.length - 1
    if (next > items.length - 1) next = 0
    let targetElement = items[next]
    targetElement.focus()
  }

  // Key-down handler
  function handleKeydown(e) {
    switch(e.key) {
      case 'ArrowUp':
        nav(-1)
        break
      case 'ArrowDown':
        nav(1)
        break
      case 'SoftLeft':
      case '[':
        softkeys.left.callback()
        break
      case 'Enter':
        softkeys.center.callback()
        break
      case 'SoftRight':
      case ']':
        softkeys.right.callback()
        break
      case 'Backspace':
        goBack()
        e.preventDefault()
        break
    }
  }

  // Listen for keys
    document
      .activeElement
      .addEventListener('keydown', handleKeydown)
</script>

<main id="app">
  <div id="header">
    <div name="header">{title}</div>
  </div>
  <div id="content">
    <Router {routes}/>
  </div>
  <div class="softkeys">
    {#if softkeys.left && softkeys.left.label}
    <SoftKey side="left">{softkeys.left.label}</SoftKey>
    {/if}
    {#if softkeys.center && softkeys.center.label}
    <SoftKey side="center">{softkeys.center.label}</SoftKey>
    {/if}
    {#if softkeys.right && softkeys.right.label}
    <SoftKey side="right">{softkeys.right.label}</SoftKey>
    {/if}
  </div>
</main>