Game-modal, ConNext Website

React / MDX usage

Mount in MDX as `<GameModal/>`

End-of-game dialog. Listens for connext:gameend CustomEvents on the window, opens with the supplied copy, tracks total games found in localStorage so the cross-site progress bar is consistent. Mount once per layout, not per page.

Import & example

import {GameModal} from '@conduction/docusaurus-preset/components';

{/* Mount once on the layout */}
<GameModal />

{/* Fired by HexRain, the canal-footer boats, future invaders */}
window.dispatchEvent(new CustomEvent('connext:gameend', {
  detail: {
    id: 'hexrain',
    won: true,
    score: 12,
    summary: '12 / 12 collected'
  }
}));

Event detail shape

id game identifier (matches the games table for progress)
won bool. Won games count toward the progress bar.
score number, displayed if present
summary string, shown in the score pill (overrides score alone)
title override the default "Nice run." / "That's all of them."
subtitle override the default "You've cleared a hidden ConNext mini-game."

Props

games array of {id, label} for the progress grid

The Play-again button fires connext:gamereplay on the window with {id} in the detail; the playing component subscribes and re-inits.