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:
parent
74edbb3e11
commit
e73dbbe186
@ -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" />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "amerc-site",
|
||||
"version": "0.64.0-resilience",
|
||||
"version": "0.65.0-instanthome",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user