From d606c6c1fa8db3aa7db3a582372b92cb0bd75f0a Mon Sep 17 00:00:00 2001 From: raymond-idahor Date: Wed, 29 Apr 2026 11:07:53 +0000 Subject: [PATCH] feat: implement responsive mobile board interface with orientation flip and touch optimizations --- frontend/app/play/[slug]/page.tsx | 20 +- .../components/chess/ChessboardComponent.tsx | 204 +- .../__tests__/ChessboardComponent.test.tsx | 40 + frontend/package-lock.json | 2614 ++++------------- frontend/vitest.config.ts | 8 + 5 files changed, 817 insertions(+), 2069 deletions(-) create mode 100644 frontend/components/chess/__tests__/ChessboardComponent.test.tsx diff --git a/frontend/app/play/[slug]/page.tsx b/frontend/app/play/[slug]/page.tsx index 1ca5bbd..00528c8 100644 --- a/frontend/app/play/[slug]/page.tsx +++ b/frontend/app/play/[slug]/page.tsx @@ -50,6 +50,9 @@ export default function PlayOnlinePage() { const [gameStatus, setGameStatus] = useState("playing"); const [isCheatPanelExpanded, setIsCheatPanelExpanded] = useState(false); const [isMoveHistoryOpen, setIsMoveHistoryOpen] = useState(false); + const [boardOrientation, setBoardOrientation] = useState<"white" | "black">( + "white", + ); const isMobile = useIsMobile(); const { @@ -258,6 +261,7 @@ export default function PlayOnlinePage() { @@ -290,11 +294,15 @@ export default function PlayOnlinePage() { {/* Mobile controls — visible only on mobile, directly below board */}