Skip to content

Make game cards entirely clickable#70

Merged
acrosman merged 4 commits intomainfrom
copilot/make-game-cards-clickable
Apr 16, 2026
Merged

Make game cards entirely clickable#70
acrosman merged 4 commits intomainfrom
copilot/make-game-cards-clickable

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 15, 2026

Each game card required clicking a small "Play" button; the rest of the card surface was inert. The entire card should act as the click target.

Changes

app/components/gameCard.js

  • Moved the game:select dispatch from button to the wrapping article element. Button clicks bubble naturally, so keyboard Enter/Space on the focused Play button continues to work without additional wiring.
// Before: only the button dispatched the event
button.addEventListener('click', () => { button.dispatchEvent(...) });

// After: any click anywhere on the card dispatches the event
article.addEventListener('click', () => { article.dispatchEvent(...) });

app/styles/game-card.css

  • Added cursor: pointer to .game-card so the pointer cursor covers the whole tile.
  • Added .game-card:focus-within outline — when the inner Play button is keyboard-focused, the ring wraps the entire card rather than just the button.

app/components/tests/gameCard.test.js

  • Added test covering a direct click on the article element (outside the button) to verify the game:select event fires with the correct gameId.

Copilot AI linked an issue Apr 15, 2026 that may be closed by this pull request
Move the game:select event handler from the inner Play button to the
article element so that clicking anywhere on a game card (thumbnail,
title, description, score line, or button) starts the game.

CSS changes:
- Add `cursor: pointer` to `.game-card` for clear affordance
- Add `.game-card:focus-within` outline so the whole card highlights
  when the Play button inside receives keyboard focus
- Restore `.game-card button:focus-visible` outline (WCAG AA safety net)

JS changes (gameCard.js):
- Replace `button.addEventListener('click', ...)` with
  `article.addEventListener('click', ...)` — button clicks bubble up
  naturally, so keyboard Enter/Space still works without extra wiring

Test changes (gameCard.test.js):
- Add "clicking the card body fires game:select" test

Agent-Logs-Url: https://github.com/acrosman/BrainSpeedExercises/sessions/3757ccae-218a-4cd5-91a7-b32923280193

Co-authored-by: acrosman <2972053+acrosman@users.noreply.github.com>
Copilot AI changed the title [WIP] Make game cards entirely clickable Make game cards entirely clickable Apr 15, 2026
Copilot AI requested a review from acrosman April 15, 2026 01:23
Copy link
Copy Markdown
Owner

@acrosman acrosman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very close, but clean up the noted comment please.

Comment thread app/components/gameCard.js Outdated
Copilot AI requested a review from acrosman April 15, 2026 01:38
@acrosman acrosman dismissed their stale review April 15, 2026 01:40

Resolved issues.

@acrosman acrosman marked this pull request as ready for review April 16, 2026 01:28
@acrosman acrosman merged commit ecce937 into main Apr 16, 2026
6 checks passed
@acrosman acrosman deleted the copilot/make-game-cards-clickable branch April 16, 2026 01:28
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.

Make game cards clickable

2 participants