Flappy Bird

[air4den]

Description

Resolves #232

What does this PR change and why?

Implements frontend flappy bird game with score. Adds highScore to backend GameStats

Checklist

• Title is same as the ticket title
• The ticket is mentioned above
• The changes fulfill the success criteria of the ticket
• Relevant developers have been assigned
• Relevant reviewers (EM, etc.) have been requested to review

Critical Changes

N/A

Testing

Tested gameplay functionality locally. Ensured score increments correctly and resets on new game/game start, game ends when bird hits top/bottom of pipe, side of pipe, and ground.

[netlify]

✅ Deploy Preview for bog-ican ready!

Name	Link
🔨 Latest commit	0e3b12d
🔍 Latest deploy log	https://app.netlify.com/projects/bog-ican/deploys/69d0284e1d10a300083c87b5
😎 Deploy Preview	https://deploy-preview-246--bog-ican.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Summary

This PR implements a Flappy Bird game in the frontend and extends the backend GameStats model with an optional highScore field. The backend pipeline — route handler, service, DAO, validation schema, and types — is cleanly implemented and correctly uses a MongoDB $max aggregation to persist high scores atomically. The game's core physics loop was refactored to use refs as the authoritative state for the game loop, avoiding stale-closure issues.

Key areas needing attention before merge:

• Score never reaches the backend (P1, flagged in prior review): The entire backend highScore pipeline is unreachable because BirdGame never calls useRecordGameResult, and both gameStatisticsHTTPClient.ts and useGameStatistics.ts lack a score parameter. All three layers need updating to wire score through to the API.
• Hardcoded hex color in shadow (P2, flagged in prior review): shadow-[0_4px_0_0_#7D83B2] in BirdGame.tsx should use a Tailwind config color variable.
• px units in Tailwind arbitrary values (P2): Several values in FlowermanKeyboard.tsx (w-[870px]) and FlowermanGame.tsx (top-[100px], left-[90px], top-[95px], right-[5px]) should use rem per the project's 1rem = 10px convention.
• Margin instead of gap/padding (P2): mt-8 in FlowermanGame.tsx should prefer padding or flex gap per project conventions.

PR Checklist areas needing improvement:

• ❌ No hardcoded colors/sizes: #7D83B2 hardcoded in shadow; px values in Tailwind arbitrary properties.
• ❌ Uses flex gaps and paddings instead of margins: mt-8 in FlowermanGame.tsx.
• ❌ Handles error responses from API calls to backend: BirdGame makes no API call at all for game result/score.

Score: 52 / 100 — The backend implementation is solid, but the score integration remains completely disconnected from the frontend, which is the primary feature of this PR.

Confidence Score: 4/5

Not safe to merge until the score-to-backend integration is wired up — the entire high-score feature is a no-op as shipped.

A P1 issue from a prior review thread remains unresolved: BirdGame never calls useRecordGameResult, gameStatisticsHTTPClient.recordGameResult does not include score in the request body, and useRecordGameResult's mutation function has no score parameter. The backend highScore logic added in this PR is therefore completely unreachable. Remaining findings are P2 style/convention issues (rem units, margin vs gap) that do not block functionality but should be cleaned up.

src/components/games/bird/BirdGame.tsx, src/http/gameStatisticsHTTPClient.ts, and src/components/hooks/useGameStatistics.ts all need changes to connect the score to the backend.

Important Files Changed

Filename	Overview
src/components/games/bird/BirdGame.tsx	Core game logic is well-structured with physics in refs, but score is tracked locally and never sent to the backend; the HTTP client and hook also lack score support (noted in prior threads).
src/app/api/v1/users/[userId]/game-statistics/record/route.ts	Correctly extracts and forwards the optional score field from the request body to the service layer.
src/db/actions/gameStatistics.ts	Correctly uses MongoDB $max aggregation to update highScore only when score is provided and exceeds the existing value.
src/services/gameStatistics.ts	Cleanly passes the optional score through to the DAO layer.
src/utils/serviceUtils/gameStatisticsUtil.ts	Validation schema correctly marks score as an optional non-negative integer, keeping it backward-compatible with existing games.
src/types/games.ts	Adds FLAPPY_BIRD to the GameName enum and an optional highScore field to GameStats; cleanly backwards-compatible.
src/components/games/flowerman/FlowermanKeyboard.tsx	Contains w-[870px] which should use rem units per project conventions (w-[87rem]).
src/components/games/flowerman/FlowermanGame.tsx	Fixed-position coordinates use px arbitrary values (e.g., top-[100px], left-[90px]) rather than rem, and mt-8 uses a margin where padding/gap is preferred per project conventions.

Sequence Diagram

sequenceDiagram
    participant BirdGame
    participant useRecordGameResult
    participant HTTPClient as gameStatisticsHTTPClient
    participant API as POST /game-statistics/record
    participant Service as GameStatisticsService
    participant DAO as GameStatisticsDAO
    participant DB as MongoDB

    Note over BirdGame,useRecordGameResult: ❌ This call is NEVER made (score lost)
    BirdGame--xuseRecordGameResult: mutate({ userId, gameName: FLAPPY_BIRD, result: LOSS, score })
    Note over useRecordGameResult,HTTPClient: ❌ score param missing from mutationFn
    useRecordGameResult--xHTTPClient: recordGameResult(userId, gameName, result)
    Note over HTTPClient,API: ❌ score not in request body
    HTTPClient--xAPI: POST { gameName, result }

    Note over API,DB: ✅ Backend correctly handles score when provided
    API->>Service: recordGameResult(userId, gameName, result, score?)
    Service->>DAO: recordGameResult(userId, gameName, result, score?)
    DAO->>DB: updateOne with $max highScore (if score provided)
    DB-->>DAO: updated
    DAO-->>Service: void
    Service-->>API: { coinsEarnedToday }
    API-->>HTTPClient: 201 { coinsEarnedToday }

Loading

_{Reviews (2): Last reviewed commit: "fix: greptile suggestion of no duplicate..." | Re-trigger Greptile}

[greptile-apps]

Hardcoded color value in Tailwind arbitrary value

shadow-[0_4px_0_0_#7D83B2] hardcodes the hex color #7D83B2. Per the project's conventions, color variables from the Tailwind config/global stylesheet should be used instead of raw hex values.

Rule Used: Use color variables from the global stylesheet (`s... (source)

Learnt From
GTBitsOfGood/design-system#61

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

[air4den]

@greptileai