Elijah
5bec95fb30
All checks were successful
Automated Container Build / build-and-push (push) Successful in 1m41s
38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import type { ReactNode } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
export function ArcadeGameShell({
|
|
title,
|
|
exitHref,
|
|
elapsedSeconds,
|
|
complete,
|
|
worldClassName = "connections-world connections-stage",
|
|
children,
|
|
}: {
|
|
title: string;
|
|
exitHref: string;
|
|
elapsedSeconds: number;
|
|
complete: boolean;
|
|
worldClassName?: string;
|
|
children: ReactNode;
|
|
}) {
|
|
const router = useRouter();
|
|
function exitGame() {
|
|
if (!complete && !window.confirm("Leave this round? Your progress will not be saved.")) return;
|
|
router.push(exitHref);
|
|
}
|
|
const minutes = Math.floor(elapsedSeconds / 60);
|
|
const seconds = String(elapsedSeconds % 60).padStart(2, "0");
|
|
return (
|
|
<div className={`${worldClassName} mx-auto w-full max-w-6xl p-1 pb-16 sm:p-3`}>
|
|
<header className="arcade-game-topbar connections-topbar mb-5 flex items-center justify-between gap-4 rounded-2xl border border-border-light bg-bg-surface/85 px-4 py-3 shadow-sm">
|
|
<button onClick={exitGame} className="min-h-10 rounded-xl px-3 text-sm font-bold text-text-muted hover:bg-bg-surface-alt hover:text-text-heading">← Exit</button>
|
|
<h1 className="truncate text-center text-lg font-extrabold text-text-heading">{title}</h1>
|
|
<div className="min-w-16 text-right font-mono text-sm font-bold text-text-muted" aria-label={`${elapsedSeconds} seconds elapsed`}>{minutes}:{seconds}</div>
|
|
</header>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|