Skip to content

feat: mobile optimization, lobby share button, and mobile e2e tests#23

Open
adamweeks wants to merge 1 commit intomainfrom
claude/mobile-optimization-tests-LASSn
Open

feat: mobile optimization, lobby share button, and mobile e2e tests#23
adamweeks wants to merge 1 commit intomainfrom
claude/mobile-optimization-tests-LASSn

Conversation

@adamweeks
Copy link
Copy Markdown
Contributor

  • GameBoard: 2-column responsive grid on mobile (xs=6/sm=3), shorter
    cards (56px mobile / 80px desktop), touch-action manipulation, smaller
    font, full-width submit button on mobile, wrapping keyword/legend areas
  • HackerPrompt: stack keyword input, card-count select, and send button
    vertically on mobile (xs=column / sm=row); disable autocorrect on keyword input
  • GameContent: responsive padding (2 mobile / 4 desktop) and heading font size
  • GameStatusIndicator: teams stack full-width (xs=12/sm=5) on mobile with
    inline "Active" chip; hide arrow indicator below sm breakpoint
  • LobbyDetails: new "Share Lobby" button using Web Share API on mobile,
    clipboard copy fallback on desktop with Snackbar confirmation; uses
    data-testid="share-lobby-button" for test targeting
  • playwright.config.js: add mobile-chrome (Pixel 5) and mobile-safari
    (iPhone 12) Playwright projects scoped to mobile-game.spec.js
  • e2e/mobile-game.spec.js: three new mobile test suites —
    (1) share button renders and copies to clipboard,
    (2) board renders in 2-column layout on mobile viewport,
    (3) full 4-player game completed with tap() interactions on mobile

https://claude.ai/code/session_01LXbcxBMq954kuGguFgnUzX

- GameBoard: 2-column responsive grid on mobile (xs=6/sm=3), shorter
  cards (56px mobile / 80px desktop), touch-action manipulation, smaller
  font, full-width submit button on mobile, wrapping keyword/legend areas
- HackerPrompt: stack keyword input, card-count select, and send button
  vertically on mobile (xs=column / sm=row); disable autocorrect on keyword input
- GameContent: responsive padding (2 mobile / 4 desktop) and heading font size
- GameStatusIndicator: teams stack full-width (xs=12/sm=5) on mobile with
  inline "Active" chip; hide arrow indicator below sm breakpoint
- LobbyDetails: new "Share Lobby" button using Web Share API on mobile,
  clipboard copy fallback on desktop with Snackbar confirmation; uses
  data-testid="share-lobby-button" for test targeting
- playwright.config.js: add mobile-chrome (Pixel 5) and mobile-safari
  (iPhone 12) Playwright projects scoped to mobile-game.spec.js
- e2e/mobile-game.spec.js: three new mobile test suites —
  (1) share button renders and copies to clipboard,
  (2) board renders in 2-column layout on mobile viewport,
  (3) full 4-player game completed with tap() interactions on mobile

https://claude.ai/code/session_01LXbcxBMq954kuGguFgnUzX
@aws-amplify-us-east-1
Copy link
Copy Markdown

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-23.d16sx389cvyqhv.amplifyapp.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants