Harden gameplay timing and map loading

app/api/v1/[...path]/route.ts

@@ -6,6 +6,9 @@ async function route(
   request: NextRequest,
   { params }: { params: Promise<{ path: string[] }> },
 ) {
-  return handle(request, (await params).path);
+  const response = await handle(request, (await params).path);
+  // Includes private drafts, pairing credentials, token creation and errors.
+  response.headers.set("Cache-Control", "private, no-store");
+  return response;
 }
 export { route as GET, route as POST, route as PATCH, route as DELETE };

app/error.tsx

@@ -1,5 +1,5 @@
 "use client";
-export default function ErrorPage({ reset }: { reset: () => void }) {
+export default function ErrorPage({ retry }: { retry: () => void }) {
   return (
     <main className="section page-content">
       <h1>Lost connection.</h1>
@@ -7,7 +7,7 @@ export default function ErrorPage({ reset }: { reset: () => void }) {
         We couldn’t load this part of the world. Check your connection and try
         again.
       </p>
-      <button className="button primary" onClick={reset}>
+      <button className="button primary" onClick={retry}>
         Try again
       </button>
     </main>

app/map-theme.css

@@ -1,11 +1,24 @@
 /* The same parchment surrounds the editor preview and interactive player map. */
 .detail-map,
 .map-surface {
+  position: relative;
   border: 22px solid transparent;
   border-image: url("/images/map-parchment.svg") 12 fill / 22px / 0 stretch;
   background: #ddc79f;
   box-shadow: 4px 6px 0 #0005;
 }
+.map-load-error {
+  position: absolute;
+  inset: 0;
+  z-index: 1001;
+  display: grid;
+  place-content: center;
+  gap: 12px;
+  padding: 16px;
+  text-align: center;
+  background: #ddc79f;
+  color: #493a28;
+}
 .detail-map {
   margin-top: 12px;
 }

app/page.tsx

@@ -59,7 +59,7 @@ export default async function Home() {
                 alt="A Minecraft surface map framed in parchment"
                 width={1024}
                 height={1024}
-                priority
+                loading="eager"
                 unoptimized
               />
               <span className="square-pin pin-green" />

app/servers/[id]/page.tsx

@@ -10,12 +10,8 @@ export default async function ServerPage({
   params: Promise<{ id: string }>;
 }) {
   const { id } = await params;
-  let map;
-  try {
-    map = await getMap(id);
-  } catch {
-    notFound();
-  }
+  const map = await getMap(id);
+  if (!map) notFound();
   return (
     <>
       <Header />
@@ -34,7 +30,7 @@ export default async function ServerPage({
           <div>
             <div className="detail-map">
               <Image
-                src={map.mapImage || map.image || ""}
+                src={map.mapImage || map.image || "/images/example-map.webp"}
                 alt={`${map.name} surface map`}
                 width={1024}
                 height={1024}