From b59d6c21afe33ceced80a4dd0295a3876578c2d7 Mon Sep 17 00:00:00 2001 From: openhands Date: Sat, 29 Aug 2026 21:14:02 +0200 Subject: [PATCH] feat: prioritize game iframe, gated register terms and polished register page Fetch the Nitro client iframe with high priority so the browser starts the game document before competing resources, and replace the bare /client spinner with a branded boot screen. Preconnect and eager loading were already in place; typing support for the iframe fetchPriority prop is added in a React type augmentation. Rework the register terms block into a single clickable accept control with a custom check state, error shake and inline hint, and dim the submit button until the terms are accepted. The register page gets labeled sections (account details / credentials), a corrected banner overlay, translated show/hide toggles and a captcha slot that reserves height to avoid layout shifts. English is the source of truth; other locales fall back to it. --- src/app/client/client-view.tsx | 1 + src/app/client/loading.tsx | 42 ++- src/app/globals.css | 22 ++ src/components/auth/register-form.tsx | 457 +++++++++++++++++--------- src/messages/en.json | 7 +- src/types/react-dom.d.ts | 13 + 6 files changed, 374 insertions(+), 168 deletions(-) create mode 100644 src/types/react-dom.d.ts diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx index d84ffa09..656c020e 100644 --- a/src/app/client/client-view.tsx +++ b/src/app/client/client-view.tsx @@ -383,6 +383,7 @@ export function ClientView({ allow="autoplay; gamepad; fullscreen" referrerPolicy="no-referrer" loading="eager" + fetchPriority={"high" as const} /> diff --git a/src/app/client/loading.tsx b/src/app/client/loading.tsx index 5dfe6a42..1be8672d 100644 --- a/src/app/client/loading.tsx +++ b/src/app/client/loading.tsx @@ -1,16 +1,48 @@ +import Image from "next/image"; + export default function ClientLoading() { return (
+
+
+ +
+
+
); } diff --git a/src/app/globals.css b/src/app/globals.css index 4e896fa3..39463b0d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1701,6 +1701,28 @@ details[open] > summary .details-open\:rotate-180 { .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; } +.animate-shake { + animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; +} +@keyframes shake { + 10%, + 90% { + transform: translateX(-2px); + } + 20%, + 80% { + transform: translateX(4px); + } + 30%, + 50%, + 70% { + transform: translateX(-6px); + } + 40%, + 60% { + transform: translateX(6px); + } +} /* Glass morphism */ .glass { diff --git a/src/components/auth/register-form.tsx b/src/components/auth/register-form.tsx index 69be714f..67151cab 100644 --- a/src/components/auth/register-form.tsx +++ b/src/components/auth/register-form.tsx @@ -47,6 +47,8 @@ export function RegisterForm({ FormData >(register, { error: null, ok: false }); const [termsAccepted, setTermsAccepted] = useState(false); + const [termsError, setTermsError] = useState(false); + const termsRef = useRef(null); const [password, setPassword] = useState(""); const [showPassword, setShowPassword] = useState(false); const [showConfirm, setShowConfirm] = useState(false); @@ -115,11 +117,16 @@ export function RegisterForm({ className="relative overflow-hidden bg-center bg-cover rounded-t-xl" style={{ backgroundImage: "url(/assets/images/mybobba_banner.png)", - height: "180px", - maxHeight: "150px", + height: "160px", }} > -
+
-
- - +
+ + {t("accountDetails")} + +
-
- - +
+
+ + +
+
+ + +
{/* Password & Confirm */} -
-
-