Skip to content

Conversation

@97harsh
Copy link
Owner

@97harsh 97harsh commented Jan 5, 2026

Summary

  • Added visual tap highlight effect for mobile users when interacting with cards and buttons
  • Cards now glow with primary color on tap, providing clear feedback for touch interactions
  • Toggle behavior: tap to highlight, tap again to unhighlight

Changes

  • New CSS class .tap-highlight with glow effect using box-shadow and inset shadows
  • New hooks: useTapHighlight for press state, useTapToggle for toggle selection
  • Home page: App cards highlight on tap, only "Launch App" button navigates
  • PlayingScreen: SKIP and GOT IT buttons have tap feedback
  • CategorySelectionScreen: Subcategory items have tap feedback
  • GuesserSelectionScreen: Player selection buttons have tap feedback

Test plan

  • Test tap highlight on mobile device (iOS Safari, Android Chrome)
  • Verify cards toggle highlight state on tap
  • Verify "Launch App" button navigates without toggling card
  • Test game buttons show highlight effect during press
  • Verify highlight works in both light and dark mode

- Add tap-highlight CSS class with glow effect using primary color
- Create useTapHighlight hook for press state tracking
- Create useTapToggle hook for toggle selection behavior
- Apply tap highlight to app cards on home page with toggle behavior
- Apply tap highlight to game buttons (PlayingScreen, GuesserSelectionScreen)
- Apply tap highlight to category selection items
- Cards highlight on tap and stay highlighted until tapped again
- Launch App button navigates without toggling card state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@vercel
Copy link

vercel bot commented Jan 5, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
pictionary Ready Ready Preview, Comment Jan 5, 2026 5:32pm

- Add hover highlight for desktop using @media (hover: hover)
- Clear active selection on mouse enter to prevent multiple highlights
- Mobile tap toggle still works independently

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Removed justify-center from game page layouts which was preventing
scrolling when content exceeded viewport height. Added top padding
to compensate for content alignment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added onThemeChange listener pattern to ThemeProvider to notify
components when theme is switched. Home page now clears active
card highlight when user changes theme.
@97harsh 97harsh merged commit a55c258 into main Jan 5, 2026
3 checks passed
@97harsh 97harsh deleted the improve-mobile-experience branch January 5, 2026 17:49
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