Skip to content

Play page: interactive "Enter MUME" chooser (proposal) - #52

Open
whitecouncil-alt wants to merge 3 commits into
MUME:masterfrom
whitecouncil-alt:master
Open

Play page: interactive "Enter MUME" chooser (proposal)#52
whitecouncil-alt wants to merge 3 commits into
MUME:masterfrom
whitecouncil-alt:master

Conversation

@whitecouncil-alt

@whitecouncil-alt whitecouncil-alt commented Sep 8, 2026

Copy link
Copy Markdown

A proposed redesign of the Play page as a two-path chooser:

  • "I'm new to the game" → the interactive tutorial
  • "I have an account" → the web client

…with an expandable "Every way to play" section holding the three
clients (MMapper Web, MMapper Desktop, MUD client) as columns.

Built as a VitePress component (PlayChooser.vue) using the site's own
theme, fonts and layout. This is for preview/feedback, not urgent to merge.

Note: the "Begin the tutorial" button points at the external interactive
tutorial app for now — destination to be confirmed.

Summary by Sourcery

Redesign the Play page around an interactive two-path entry point with access to all supported MUME clients.

New Features:

  • Add an interactive Play page chooser that directs new players to the tutorial and existing players to the web client.
  • Provide an expandable overview of browser, desktop, and MUD client options.

Enhancements:

  • Refresh the Play page with a themed, responsive presentation using animations and interactive cards.

Documentation:

  • Replace the previous detailed Play page content with the new chooser component.

@sourcery-ai

sourcery-ai Bot commented Sep 8, 2026

Copy link
Copy Markdown
Contributor

Reviewer's Guide

The PR redesigns the Play page around a themed, responsive Vue chooser that prioritizes tutorial and web-client entry points while exposing three alternative play methods interactively; it also removes the existing Google Analytics initialization and route tracking from the VitePress theme.

Sequence diagram for interactive PlayChooser behavior

sequenceDiagram
    participant Visitor
    participant PlayChooser
    participant TutorialApp
    participant WebClient

    Visitor->>PlayChooser: Open Play page
    PlayChooser->>PlayChooser: onMounted()
    Visitor->>PlayChooser: Click Begin the tutorial
    PlayChooser->>TutorialApp: Navigate to tutorialUrl
    Visitor->>PlayChooser: Click Play now
    PlayChooser->>WebClient: Navigate to browser client
    Visitor->>PlayChooser: Click Every way to play
    PlayChooser->>PlayChooser: toggle expanded details
    PlayChooser-->>Visitor: Show three client options
Loading

File-Level Changes

Change Details Files
Replace the static Play page with a registered interactive chooser component that directs visitors to the tutorial or web client and preserves alternative client paths behind an expander.
  • Register the new component globally in the VitePress theme.
  • Render the chooser from the Play page.
  • Provide tutorial, browser, desktop MMapper, legacy browser, and Mudlet links.
  • Add responsive two-column/three-column layouts, themed styling, animations, background artwork, embers, and cursor-tilt interactions.
  • Implement the expandable “Every way to play” section with ARIA state updates and smooth scrolling.
docs/.vitepress/theme/components/PlayChooser.vue
docs/.vitepress/theme/index.js
docs/play/index.md
Remove the existing client-side Google Analytics initialization and SPA route page-view tracking from the theme enhancer.
  • Drop the analytics script injection, consent setup, global gtag registration, and route-change tracking logic.
  • Simplify enhanceApp to component registration only.
docs/.vitepress/theme/index.js

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Hey - I've found 2 issues

Prompt for AI Agents
Please address the comments from this code review:

## Individual Comments

### Comment 1
<location path="docs/.vitepress/theme/index.js" line_range="13-48" />
<code_context>
-      const GA_MEASUREMENT_ID = 'G-LL4RX9KM6Q'
</code_context>
<issue_to_address>
**issue (broader_impact):** Removing the analytics initialization stops defining `window.gtag`, loading Google Analytics, and registering route-change page-view events. The existing `CookieConsent` component still advertises Google Analytics and its consent updates become no-ops because `window.gtag` is absent.

**Triggers:** When the site is deployed after this change.

**Suggested fix:** Preserve the GA initialization and router page-view handler while registering `PlayChooser`, or remove/update the cookie-consent UI and analytics claims together.
</issue_to_address>

### Comment 2
<location path="docs/.vitepress/theme/components/PlayChooser.vue" line_range="6" />
<code_context>
+import { withBase } from 'vitepress'
+
+// destination for the "first time" path — the interactive tutorial (external app)
+const tutorialUrl = 'https://mume-preview.mume-idea-submission.workers.dev'
+const fellowship = withBase('/assets/images/fellowship_bw.jpg')
+const root = ref(null)
</code_context>
<issue_to_address>
**issue (broader_impact):** The public beginner path always sends users to the `mume-preview.mume-idea-submission.workers.dev` preview deployment rather than a confirmed tutorial destination. If that preview deployment is removed, restricted, or changed, the primary “I'm new to the game” entry point breaks for new players.

**Triggers:** When this Play page is published before the external tutorial URL is finalized.

**Suggested fix:** Replace `tutorialUrl` with the confirmed production tutorial URL, or keep the chooser behind a preview-only flag until the destination is stable.
</issue_to_address>

Sourcery assessment

Needs a human reviewer. 2 findings to address first, and the new-player path now depends on an externally hosted tutorial, so a bad URL or broken service changes where new users are sent; reverting restores the old page. Removing the site-wide analytics initialization also permanently loses page-view data collected during the interval before a revert, although the user-facing page behavior is otherwise normally reversible.

Blocking findings: docs/.vitepress/theme/index.js:48, docs/.vitepress/theme/components/PlayChooser.vue:6


Sourcery is free for open source - if you like our reviews please consider sharing them ✨

Comment thread docs/.vitepress/theme/index.js
import { withBase } from 'vitepress'

// destination for the "first time" path — the interactive tutorial (external app)
const tutorialUrl = 'https://mume-preview.mume-idea-submission.workers.dev'

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

issue (broader_impact): The public beginner path always sends users to the mume-preview.mume-idea-submission.workers.dev preview deployment rather than a confirmed tutorial destination. If that preview deployment is removed, restricted, or changed, the primary “I'm new to the game” entry point breaks for new players.

Triggers: When this Play page is published before the external tutorial URL is finalized.

Suggested fix: Replace tutorialUrl with the confirmed production tutorial URL, or keep the chooser behind a preview-only flag until the destination is stable.

…e, tighten top

- index.js: keep Nils's Google Analytics + consent (stale copy had dropped it); only ADD PlayChooser registration
- component: expander + tilt are now reactive (@click/@mousemove) so they work under VitePress hydration; the old onMounted DOM-binding wasn't firing
- remove the 'Multi Users in Middle-earth' eyebrow
- tighten the top spacing
# Conflicts:
#	docs/play/index.md
@nschimme

nschimme commented Sep 9, 2026

Copy link
Copy Markdown
Contributor

There is a conflict here. Why do we have so many branches like #54 #52 ?

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