From 031feeaa82baee52b82f0bc6ba8c6746afbc97ae Mon Sep 17 00:00:00 2001 From: Mashel Odera Date: Sun, 11 Jan 2026 19:45:13 +0300 Subject: [PATCH 1/2] feat: Mobile UX improvements and CI/CD updates --- .github/workflows/ci-cd.yml | 3 +- backend/snake.db | Bin 36864 -> 36864 bytes frontend/src/components/game/GameControls.tsx | 127 ++++++------------ frontend/src/components/game/GameOverlay.tsx | 48 +++++++ frontend/src/components/game/MenuModal.tsx | 92 +++++++++++++ frontend/src/pages/Index.tsx | 65 +++++---- 6 files changed, 219 insertions(+), 116 deletions(-) create mode 100644 frontend/src/components/game/GameOverlay.tsx create mode 100644 frontend/src/components/game/MenuModal.tsx diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml index 64e5d3c..f89d748 100644 --- a/.github/workflows/ci-cd.yml +++ b/.github/workflows/ci-cd.yml @@ -4,6 +4,7 @@ on: push: branches: - main + - staging jobs: test: @@ -80,7 +81,7 @@ jobs: name: Deploy to Render needs: [test, integration-test] runs-on: ubuntu-latest - if: success() && github.ref == 'refs/heads/main' + if: success() && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/staging') steps: - name: Trigger Render Deployment run: | diff --git a/backend/snake.db b/backend/snake.db index 3c4e06c71f93af0d944fe406547e0a7204af5333..853311d4109c2ee37d0463994cc6273588a9c3b0 100644 GIT binary patch delta 948 zcma)(Pe>GD7{+HD44qx)%W^}=AZP_WeB<|bzHgS4wm;Ot(!`MnqQ05=cKw5{wXG=_ z>t2Kog|X0~lZWmidy>u_yn9fP4qd#Jm!M;_WL(MxwPC1(#L=2FdcS0ltD=aF{HA1n19LgXZ7ft@`2PfrL9Uzz=W)juY+xbaq&o z6V9q1mwNir_Obz9fo|u$bET`%bv6Ad9i%>|iuN~qdAs(&u2#}#g23$0lQ5zzW*+2} z#*k?iL!~%}5fMrisPu&PT8VgkQI*T^`Si0=r8rH{pMVI;agk%fm4tg-E~OILw*Guo zcro)CDnOzOK4hG5=p!OwtR+@l3QloLy2iVI2sfLNImBElF~_oE|N1wg5hH|NLXe1) zhpB){@(3bM8S+BKLrm(m)olHsdSUo?!I-&>QR(wa=jj;~ONumyf)foHjeRIR6+^8M ziXzE4igELb8P{LG>~(mKlN^?==LzbIMzFeN^`)JR;p{jWkOJ$@7r?-lGvaJGMX(PZ oC6#{fst#Cz*-Ag@CfG`#sU~=uz<&d-ld0 zg%iK#>m&{6F|V07dTePYht4{2^aNgo7uPfxnYq zkZ%^BGVf+y8=j*)p+E(;Jexyn)-#K6@a<&a+sV((-^TZd-vnd>e=JaXA>ZbmeeR3^ DE(tK^ diff --git a/frontend/src/components/game/GameControls.tsx b/frontend/src/components/game/GameControls.tsx index 3580f79..888ab3a 100644 --- a/frontend/src/components/game/GameControls.tsx +++ b/frontend/src/components/game/GameControls.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { Button } from '@/components/ui/button'; import type { GameState, GameMode, Direction } from '@/types'; import { Play, Pause, RotateCcw, ArrowUp, ArrowDown, ArrowLeft, ArrowRight } from 'lucide-react'; -import { cn } from '@/lib/utils'; interface GameControlsProps { gameState: GameState; @@ -10,9 +9,7 @@ interface GameControlsProps { onPause: () => void; onResume: () => void; onReset: () => void; - onModeChange: (mode: GameMode) => void; onDirectionChange: (direction: Direction) => void; - finalScore: number; } export function GameControls({ @@ -21,71 +18,22 @@ export function GameControls({ onPause, onResume, onReset, - onModeChange, onDirectionChange, - finalScore, }: GameControlsProps) { - const { status, mode, score } = gameState; + const { status } = gameState; return (
- {/* Score Display */} -
-
-

Score

-

{String(score)}

- {mode === 'walls' && ( -

1.5x multiplier active

- )} -
-
- - {/* Mode Selection */} -
-

Game Mode

-
- - -
-

- {mode === 'pass-through' - ? 'Snake wraps around edges' - : 'Hit a wall = Game Over (1.5x score)'} -

-
- - {/* Game Controls */} + {/* Game Action Buttons */}
{status === 'idle' && ( )} @@ -93,50 +41,59 @@ export function GameControls({ )} {status === 'paused' && ( - +
+ + +
)} - {(status === 'game-over' || status === 'paused') && ( + {status === 'game-over' && ( )}
{/* Mobile D-Pad Controls */} -
-

Touch Controls

-
+
+
@@ -145,9 +102,9 @@ export function GameControls({ size="icon" onClick={() => onDirectionChange('LEFT')} disabled={status !== 'playing'} - className="aspect-square" + className="aspect-square h-14 w-14 rounded-full bg-background/50 border-primary/30 active:scale-95 transition-transform" > - +
@@ -166,20 +123,14 @@ export function GameControls({ size="icon" onClick={() => onDirectionChange('DOWN')} disabled={status !== 'playing'} - className="aspect-square" + className="aspect-square h-14 w-14 rounded-full bg-background/50 border-primary/30 active:scale-95 transition-transform" > - +
- - {/* Keyboard hints */} -
-

Controls:

-

Arrow Keys or WASD to move

-

Space to pause • R to restart

-
); } + diff --git a/frontend/src/components/game/GameOverlay.tsx b/frontend/src/components/game/GameOverlay.tsx new file mode 100644 index 0000000..6f2198c --- /dev/null +++ b/frontend/src/components/game/GameOverlay.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Badge } from '@/components/ui/badge'; +import { GameState, GameMode } from '@/types'; +import { cn } from '@/lib/utils'; +import { Settings2 } from 'lucide-react'; +import { Button } from '@/components/ui/button'; + +interface GameOverlayProps { + score: number; + mode: GameMode; + onOpenMenu: () => void; +} + +export function GameOverlay({ score, mode, onOpenMenu }: GameOverlayProps) { + return ( +
+
+
+ Score + + {score} + +
+
+ +
+ + {mode === 'pass-through' ? 'NO WALLS' : 'WALLS'} + + + +
+
+ ); +} diff --git a/frontend/src/components/game/MenuModal.tsx b/frontend/src/components/game/MenuModal.tsx new file mode 100644 index 0000000..610f5a9 --- /dev/null +++ b/frontend/src/components/game/MenuModal.tsx @@ -0,0 +1,92 @@ +import React from 'react'; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, +} from "@/components/ui/dialog"; +import { Button } from '@/components/ui/button'; +import { GameMode } from '@/types'; +import { cn } from '@/lib/utils'; +import { Keyboard, MousePointer2 } from 'lucide-react'; + +interface MenuModalProps { + open: boolean; + onOpenChange: (open: boolean) => void; + currentMode: GameMode; + onModeChange: (mode: GameMode) => void; + gameStatus: string; +} + +export function MenuModal({ + open, + onOpenChange, + currentMode, + onModeChange, + gameStatus +}: MenuModalProps) { + return ( + + + + Game Settings + + Configure your game experience + + + +
+
+

Game Mode

+
+ + +
+
+ +
+

+ Controls +

+
+
+ Move + WASD / Arrows +
+
+ Pause + Space +
+
+ Restart + R +
+
+ +
+ + Use on-screen controls or swipe +
+
+
+ + + ); +} diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx index b2a08ef..00c593a 100644 --- a/frontend/src/pages/Index.tsx +++ b/frontend/src/pages/Index.tsx @@ -5,61 +5,72 @@ import { GameBoard } from '@/components/game/GameBoard'; import { GameControls } from '@/components/game/GameControls'; import { Leaderboard } from '@/components/game/Leaderboard'; import { SpectatorView } from '@/components/game/SpectatorView'; +import { GameOverlay } from '@/components/game/GameOverlay'; +import { MenuModal } from '@/components/game/MenuModal'; import { useSnakeGame } from '@/hooks/useSnakeGame'; function GamePage() { const [activeTab, setActiveTab] = useState('play'); + const [menuOpen, setMenuOpen] = useState(false); const game = useSnakeGame('pass-through'); return ( -
+
-
+
{activeTab === 'play' && ( -
-
- {/* Game Board - Constrained height to prevent scrolling */} -
-
- -
-
+
- {/* Controls Sidebar */} -
- +
+ setMenuOpen(true)} /> +
+ + {/* Controls Area */} +
+ +
)} {activeTab === 'leaderboard' && ( -
+
)} {activeTab === 'spectate' && ( -
+
)}
- {/* Footer */} -
-

SNAKE GAME

-
+ { + game.setMode(mode); + setMenuOpen(false); + }} + gameStatus={game.gameState.status} + />
); } From dab6504dfedce15255c138428bf2c2b543db9177 Mon Sep 17 00:00:00 2001 From: Mashel Odera Date: Sun, 11 Jan 2026 21:36:55 +0300 Subject: [PATCH 2/2] feat: optimize mobile ux and fix bugs - Force 100dvh layout - Compact header - Larger D-Pad and reorganized controls - Fix score multiplier and input conflicts - Add regression tests --- backend/snake.db | Bin 36864 -> 36864 bytes frontend/src/__tests__/fixes.test.ts | 77 +++++++++ frontend/src/components/game/GameControls.tsx | 64 ++++--- frontend/src/components/game/MenuModal.tsx | 2 - frontend/src/components/layout/Header.tsx | 158 +++++++++--------- frontend/src/hooks/useSnakeGame.ts | 11 ++ frontend/src/pages/Index.tsx | 43 +++-- 7 files changed, 224 insertions(+), 131 deletions(-) create mode 100644 frontend/src/__tests__/fixes.test.ts diff --git a/backend/snake.db b/backend/snake.db index 853311d4109c2ee37d0463994cc6273588a9c3b0..7fb600a5aed7384a688f1b96d6d39ef898da660d 100644 GIT binary patch delta 813 zcma))KWGzC9LMk4RGKDtKT{j9R6%MA?eOCJbNBAOXp2#YVv#B|6@{Yra+eZqn}}^% z(xJ&x6htZkhfW=&qoo82&PAk)lS2pT;L<@+M@L^&6t@g-`|^3;@AvnuZFSVPIyMH( z{ugJin*F=?UtNettZf5|_6K{^+HNLJzO>freUa{5a-`m6WSIz9$Z3EA&INKp!H`f~ zA?1reVN4kf$@SuV@qvDqA20Y1!*sqhpQ0*7Xo^&q=BB5n!wEOd%j5IGVzqL6GQ?SN z=h2mXd1Ab`xCtxNH@@m%aEHrw;9XQju8 zK8YrF>z})CEy0Og&K$~8hB5Z3gG7KG`Xwp^qFUeWY;cp^z}9d>1R_VBN-$x%C&sGcL~%FD)b& z4y#zdK^#*z??|an!aU?Sf+OE!dJ_d7>sfG?=kgz@x8+EKaE6gIri2LDT&X_m8U$<8 zu-{nw)~20=7_8f$z=0j>i#=v<*t2j5GrHVGYpr#qb~=KVu$_>0OV~~b>(@YP)l_rz H`M&uRiyzq= delta 188 zcmZozz|^pSX@WGP=tLQ3M$wH4OZ2&z`D_{ZGx@IY*=`mT(C6E1Yj>QHiXfRZN}_}}rL^TGf5B}%;AAn*v z`6oZmmzCk+s$k&nnb(HrC{HN&J??a__gobl8zZ j6XoaTZ{vH!Z^FNRvrI!B@5Bj>5L+9nR5si89cBaoS)n+> diff --git a/frontend/src/__tests__/fixes.test.ts b/frontend/src/__tests__/fixes.test.ts new file mode 100644 index 0000000..52bd2e4 --- /dev/null +++ b/frontend/src/__tests__/fixes.test.ts @@ -0,0 +1,77 @@ +import { describe, it, expect, vi, beforeEach } from 'vitest'; +import { getScoreMultiplier, getFinalScore, createInitialState } from '@/lib/gameLogic'; +import type { GameState } from '@/types'; + +// Mocking browser event behavior for input test logic +describe('Bug Fix Verification', () => { + + describe('Score Multiplier Logic', () => { + it('applies 1.5x multiplier for walls mode', () => { + const mode = 'walls'; + const multiplier = getScoreMultiplier(mode); + expect(multiplier).toBe(1.5); + }); + + it('applies 1x multiplier for pass-through mode', () => { + const mode = 'pass-through'; + const multiplier = getScoreMultiplier(mode); + expect(multiplier).toBe(1); + }); + + it('calculates final score correctly with multiplier', () => { + const state: GameState = { + ...createInitialState('walls'), + score: 100, + mode: 'walls' + }; + const finalScore = getFinalScore(state); + expect(finalScore).toBe(150); // 100 * 1.5 + }); + }); + + describe('Input Event Suppression Logic', () => { + // Simulating the check logic used in useSnakeGame hook + const shouldSuppressInput = (target: any) => { + return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement; + }; + + it('suppresses game controls when input is focused', () => { + const inputElement = document.createElement('input'); + expect(shouldSuppressInput(inputElement)).toBe(true); + }); + + it('suppresses game controls when textarea is focused', () => { + const textareaElement = document.createElement('textarea'); + expect(shouldSuppressInput(textareaElement)).toBe(true); + }); + + it('does not suppress controls when body or div is focused', () => { + const divElement = document.createElement('div'); + const bodyElement = document.body; + + expect(shouldSuppressInput(divElement)).toBe(false); + expect(shouldSuppressInput(bodyElement)).toBe(false); + }); + }); + + describe('User Reset Logic', () => { + // Simulating the useEffect dependency logic + let gameState = createInitialState('pass-through'); + const resetGame = () => { + gameState = createInitialState('pass-through'); + }; + + it('resets game state when simulated user changes', () => { + // Simulate game progress + gameState.score = 50; + gameState.status = 'playing'; + + // Simulate user change trigger + resetGame(); + + expect(gameState.score).toBe(0); + expect(gameState.status).toBe('idle'); + expect(gameState.snake.length).toBe(3); + }); + }); +}); diff --git a/frontend/src/components/game/GameControls.tsx b/frontend/src/components/game/GameControls.tsx index 888ab3a..ae073fa 100644 --- a/frontend/src/components/game/GameControls.tsx +++ b/frontend/src/components/game/GameControls.tsx @@ -23,16 +23,16 @@ export function GameControls({ const { status } = gameState; return ( -
- {/* Game Action Buttons */} -
+
+ {/* Game Action Buttons - Compact Row */} +
{status === 'idle' && ( )} @@ -41,20 +41,20 @@ export function GameControls({ )} {status === 'paused' && ( -
+ <> -
+ )} {status === 'game-over' && ( )}
- {/* Mobile D-Pad Controls */} -
-
+ {/* Mobile D-Pad Controls - Larger & Centered */} +
+
@@ -102,32 +102,28 @@ export function GameControls({ size="icon" onClick={() => onDirectionChange('LEFT')} disabled={status !== 'playing'} - className="aspect-square h-14 w-14 rounded-full bg-background/50 border-primary/30 active:scale-95 transition-transform" + className="aspect-square h-16 w-16 rounded-2xl bg-background/50 border-primary/30 active:scale-95 transition-transform active:bg-primary/20" > - + -
- -
-
diff --git a/frontend/src/components/game/MenuModal.tsx b/frontend/src/components/game/MenuModal.tsx index 610f5a9..e48ca0a 100644 --- a/frontend/src/components/game/MenuModal.tsx +++ b/frontend/src/components/game/MenuModal.tsx @@ -43,7 +43,6 @@ export function MenuModal({ - - - + - {/* User Menu */} - {isAuthenticated && user ? ( - - - - - -
- Signed in as -
- {user.email} -
- - logout()}> - - Log out - - - - ) : ( - - )} -
+ {isAuthenticated && user ? ( + + + + + +
+ Signed in as +
+ {user.email} +
+ + logout()}> + + Log out + + + + ) : ( + + )}
- - - - +
+ ); } diff --git a/frontend/src/hooks/useSnakeGame.ts b/frontend/src/hooks/useSnakeGame.ts index bb764ae..61ddb78 100644 --- a/frontend/src/hooks/useSnakeGame.ts +++ b/frontend/src/hooks/useSnakeGame.ts @@ -107,9 +107,20 @@ export function useSnakeGame(initialMode: GameMode = 'pass-through'): UseSnakeGa }; }, [gameState.status, gameState.speed, processDirectionQueue]); + // Reset game when user changes (new login/logout) + useEffect(() => { + setGameState(createInitialState(initialMode)); + directionQueueRef.current = []; + }, [user?.username]); // Use username as trigger + // Keyboard controls useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { + // Prevent game controls when typing in inputs + if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { + return; + } + if (gameState.status !== 'playing') return; const keyToDirection: Record = { diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx index 00c593a..51fcb07 100644 --- a/frontend/src/pages/Index.tsx +++ b/frontend/src/pages/Index.tsx @@ -7,35 +7,52 @@ import { Leaderboard } from '@/components/game/Leaderboard'; import { SpectatorView } from '@/components/game/SpectatorView'; import { GameOverlay } from '@/components/game/GameOverlay'; import { MenuModal } from '@/components/game/MenuModal'; +import { AuthModal } from '@/components/auth/AuthModal'; import { useSnakeGame } from '@/hooks/useSnakeGame'; function GamePage() { const [activeTab, setActiveTab] = useState('play'); const [menuOpen, setMenuOpen] = useState(false); + const [authOpen, setAuthOpen] = useState(false); const game = useSnakeGame('pass-through'); + // Pause game when modals are open + React.useEffect(() => { + if (menuOpen || authOpen) { + game.pauseGame(); + } + }, [menuOpen, authOpen]); + return ( -
-
+
+
setAuthOpen(true)} + />
{activeTab === 'play' && ( -
+
+ + {/* Game Controls & Info Header */} +
+ setMenuOpen(true)} + /> +
- {/* Game Area Container */} -
-
- setMenuOpen(true)} - /> + {/* Game Area Container - Dynamic Fitting */} +
+
{/* Controls Area */} -
+
+ +
); }