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.
This commit is contained in:
1 parent
7f39ba4257
commit
b59d6c21af
6 files changed
+374
-168
No files matched your search
@@ -383,6 +383,7 @@ export function ClientView({
|
||||
allow="autoplay; gamepad; fullscreen"
|
||||
referrerPolicy="no-referrer"
|
||||
loading="eager"
|
||||
fetchPriority={"high" as const}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -1,16 +1,48 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function ClientLoading() {
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-center min-h-screen"
|
||||
style={{ background: "var(--color-background)" }}
|
||||
className="relative flex items-center justify-center min-h-screen overflow-hidden"
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(ellipse at center, color-mix(in srgb, var(--color-surface) 80%, transparent) 0%, var(--color-background) 75%)",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="animate-spin w-10 h-10 border-4 rounded-full"
|
||||
className="absolute inset-0 animate-pulse-glow"
|
||||
style={{
|
||||
borderColor: "var(--color-primary)",
|
||||
borderTopColor: "transparent",
|
||||
background:
|
||||
"radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--color-primary) 12%, transparent) 0%, transparent 55%)",
|
||||
}}
|
||||
/>
|
||||
<div className="relative flex flex-col items-center gap-6">
|
||||
<div
|
||||
className="w-20 h-20 rounded-2xl flex items-center justify-center shadow-2xl"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, black) 100%)",
|
||||
boxShadow:
|
||||
"0 12px 40px color-mix(in srgb, var(--color-primary) 35%, transparent)",
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/assets/images/icons/lighthouse.png"
|
||||
alt=""
|
||||
width={44}
|
||||
height={44}
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="animate-spin w-9 h-9 border-[3px] rounded-full"
|
||||
style={{
|
||||
borderColor:
|
||||
"color-mix(in srgb, var(--color-text-muted) 18%, transparent)",
|
||||
borderTopColor: "var(--color-primary)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user