Catches runtime errors in child components, displays user-friendly error message with reload button. Wired into App.vue wrapping router-view. Tests verify error capture and button rendering. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
31 lines
1010 B
Vue
31 lines
1010 B
Vue
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { RouterView } from 'vue-router'
|
|
import NavBar from './components/NavBar.vue'
|
|
import ErrorBoundary from './components/ErrorBoundary.vue'
|
|
import { ensureAudioContext } from './game/audio'
|
|
|
|
// Unlock AudioContext + SpeechSynthesis on first user interaction (mobile requires gesture)
|
|
onMounted(() => {
|
|
const unlock = () => {
|
|
ensureAudioContext()
|
|
document.removeEventListener('touchstart', unlock)
|
|
document.removeEventListener('click', unlock)
|
|
}
|
|
document.addEventListener('touchstart', unlock, { once: true, passive: true })
|
|
document.addEventListener('click', unlock, { once: true })
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-[100dvh] bg-surface synthwave-grid flex flex-col relative">
|
|
<div class="fixed inset-0 crt-overlay z-40" />
|
|
<NavBar />
|
|
<main class="flex-1 min-h-0 relative z-10 overflow-y-auto pb-14 md:pb-0">
|
|
<ErrorBoundary>
|
|
<RouterView />
|
|
</ErrorBoundary>
|
|
</main>
|
|
</div>
|
|
</template>
|