Landscape: whole-app landscape-first + Home 2-column landscape layout
CI/CD / CI - API (dotnet build + engine sim) (push) Successful in 47s
CI/CD / CI - Web (tsc + next build) (push) Successful in 1m7s
CI/CD / Deploy - local stack (db + server + web) (push) Successful in 1m0s

- Move orientation lock + RotatePrompt to app root → whole app is landscape-
  first now (UNO-style), not just the game. Generalized rotate copy.
- Home: portrait unchanged; in landscape it becomes a 2-column app layout
  (col A = branding + play actions, col B = tiles + footer) that fits the
  short height with no scroll (landscape: Tailwind variants, overflow-hidden).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-11 00:33:21 +03:30
parent e8b3172197
commit 3e37085d18
4 changed files with 35 additions and 28 deletions
+10
View File
@@ -22,6 +22,7 @@ import { ResumeGameBar } from "@/components/online/ResumeGameBar";
import { CelebrationOverlay } from "@/components/online/CelebrationOverlay";
import { ErrorBoundary } from "@/components/ErrorBoundary";
import { PublicProfileModal } from "@/components/online/PublicProfileModal";
import { RotatePrompt } from "@/components/online/RotatePrompt";
import { CapacitorBack } from "@/components/CapacitorBack";
import { useSessionStore } from "@/lib/session-store";
import { useGameStore } from "@/lib/game-store";
@@ -191,6 +192,14 @@ export default function Page() {
};
}, [init]);
// Landscape-first app (UNO-style): best-effort lock the whole app to landscape
// on Android / installed PWA. iOS & desktop reject it harmlessly; the
// RotatePrompt covers the portrait case there.
useEffect(() => {
const o = (screen as unknown as { orientation?: { lock?: (m: string) => Promise<void> } }).orientation;
o?.lock?.("landscape").catch(() => {});
}, []);
return (
// reducedMotion="user" makes every Framer Motion animation honor the OS
// "reduce motion" accessibility setting (coin rain, confetti, count-ups…).
@@ -202,6 +211,7 @@ export default function Page() {
<ResumeGameBar />
<CelebrationOverlay />
<PublicProfileModal />
<RotatePrompt />
</ErrorBoundary>
<CapacitorBack />
{loading && null}