ux: keep the tavern mounted — instant returns, no reload flash (0.65.0)

- Home unmounted on every route change, so returning to the tavern reloaded
  the canvas (the 'loading tavern…' flash + image re-fetch each time)
- keep Home mounted in a persistent host, hidden (display:none) when off-route;
  non-home routes still render in the keyed transition wrapper
- the canvas IntersectionObserver pauses while Home is display:none, so a
  hidden tavern costs nothing — and resumes instantly (not reloaded) on return
- verified live: rAF 60→0 when hidden →60 on return, no loading flash, home
  renders + scrolls, inner routes + transitions intact
This commit is contained in:
artheru 2026-06-10 09:00:51 +08:00
parent 74edbb3e11
commit e73dbbe186
4 changed files with 11 additions and 4 deletions

View File

@ -4,7 +4,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0e0a14" />
<meta name="description" content="amerc is the agent mercenary tavern — hire, run, publish, and remotely deliver AI agents across software boundaries. No infrastructure, just skills." />
<meta name="version" content="0.64.0-resilience" />
<meta name="version" content="0.65.0-instanthome" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="/app-192.png" type="image/png" sizes="192x192" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

View File

@ -1,6 +1,6 @@
{
"name": "amerc-site",
"version": "0.64.0-resilience",
"version": "0.65.0-instanthome",
"private": true,
"type": "module",
"scripts": {

View File

@ -7,7 +7,7 @@ import Account from './Account.jsx';
import TavernGame from './TavernGame.jsx';
import { api } from './api.js';
const RELEASE = '0.64.0-resilience';
const RELEASE = '0.65.0-instanthome';
const NAV = [
{ id: 'home', label: 'Tavern' },
@ -441,11 +441,15 @@ function Scene({ route, setRoute, auth }) {
export default function Scene2DApp() {
const [route, setRoute] = useHashRoute();
const auth = useAuth();
const isHome = route === 'home';
return (
<main className="px-app td-app">
<h1 className="sr-only">amerc agent mercenary tavern</h1>
<PixelTopbar route={route} setRoute={setRoute} auth={auth} />
<div key={route} className="route-enter"><Scene route={route} setRoute={setRoute} auth={auth} /></div>
{/* Home stays mounted (hidden off-route) so returning to the tavern is instant
the canvas pauses while hidden, so it costs nothing. */}
<div className="route-host" style={{ display: isHome ? 'flex' : 'none' }}><Home setRoute={setRoute} auth={auth} /></div>
{!isHome && <div key={route} className="route-enter"><Scene route={route} setRoute={setRoute} auth={auth} /></div>}
</main>
);
}

View File

@ -1446,3 +1446,6 @@ button {
.eb-actions button { font-family: Georgia, serif; font-size: 14px; padding: 9px 22px; border-radius: 10px; border: none; cursor: pointer; background: linear-gradient(180deg, #f3d27a, #d9a948); color: #2a1303; font-weight: 600; }
.eb-actions a { font-family: Georgia, serif; font-size: 14px; color: #cfe6ff; text-decoration: none; }
.eb-actions a:hover { color: #7fe9ff; }
/* persistent home host (0.65) — keeps the tavern mounted, hidden off-route */
.route-host { flex: 1; min-height: 0; flex-direction: column; }