fix: handle preview mode in matching game

[pganesh-apphelix]

Description

This PR adds support for a preview mode in the matching game, allowing the game to run without backend calls by initializing and completing the game entirely on the client side when preview=1 is present in the URL.
It also removes the focus-visible outline styling from matching boxes.

Jira

• https://2u-internal.atlassian.net/browse/TNL2-550

Version

• 1.0.17

[Copilot]

Pull request overview

Adds a client-side “preview mode” to the matching game (triggered by ?preview=1) so the game can be refreshed and completed without backend handler calls, and updates matching box focus styling.

Changes:

• Add preview=1 URL flag handling to refresh and complete the matching game fully client-side.
• Update matching end-screen behavior in preview mode (client-side completion flow).
• Remove :focus-visible outline styling from matching boxes; bump package version to 1.0.17.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
setup.py	Bumps package version to 1.0.17.
games/static/js/src/matching.js	Adds preview-mode branching for refresh and completion to avoid backend calls.
games/static/css/matching.css	Changes focus-visible styling on matching boxes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Removing the :focus-visible outline from .matching-box leaves keyboard users without a visible focus indicator (and the JS explicitly calls .focus() on these elements). Please keep a clear non-color-dependent focus style (e.g., outline/box-shadow) that meets WCAG focus appearance requirements instead of outline: none.

Suggested change

	outline: none;
	outline: 3px solid var(--primary-500, #00262B);
	outline-offset: 2px;

[Copilot]

In preview mode, using jQuery .show() on .matching-grid / .matching-footer will set an inline display: block, which overrides the CSS that expects .matching-grid.active { display: grid } and .matching-footer.active { display: flex }. This can break layout after completing once (because hide() sets inline styles too). Prefer toggling the active class (and removing any inline style from prior hide()), instead of show()/hide() here.

Suggested change

	$('.matching-grid', element).show().addClass('active');
	$('.matching-footer', element).show().addClass('active');
	$('.matching-grid', element).removeAttr('style').addClass('active');
	$('.matching-footer', element).removeAttr('style').addClass('active');

[Copilot]

Preview-mode completion always activates .matching-new-best, which renders the copy “A new personal best!” even though preview mode has no persisted best-time data. Consider showing a neutral results state for preview (e.g., reuse .matching-prev-best with adjusted copy, or add a dedicated preview block) so the end screen doesn’t present incorrect information.

Suggested change

	$('.matching-new-best', element).addClass('active');
	$('.matching-grid', element).hide();
	$('.matching-footer', element).hide();
	$('#matching-current-result', element).text(formatTime(timeSeconds));
	$('.matching-new-best', element).removeClass('active');
	$('.matching-prev-best', element).removeClass('active');
	$('.matching-grid', element).hide();
	$('.matching-footer', element).hide();