feat(#585): interactive LLM game on the site with social score-sharing#586
Merged
Conversation
…aring Ships the 'LLM Field Guide' interactive game (self-contained, no build) at /game, with an end-of-game 'Share your score' block. - site/game.html: the game + SEO/OG/Twitter meta (twitter:site=@me2resh, canonical, summary_large_image). renderOutro now offers Post on X (via=me2resh), LinkedIn, WhatsApp, and Copy link — each carrying the score, a link back to the game, and 'via @me2resh' (X uses its native via param). Plus a quiet back-to-ApexYard link. - Discovery: 'play the game' added to the primary nav + footer across index / how-it-works / architecture / skills, the 404 quick-links, and a homepage CTA (button + line in the final section). - /game clean URL via _redirects; /game added to sitemap.xml. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
atlas-apex
commented
Jun 8, 2026
atlas-apex
left a comment
Collaborator
Author
There was a problem hiding this comment.
Code Review: PR #586
Commit: f5c65dc47bec9645b9a7234adf90510787336b10
Summary
Adds a self-contained interactive "LLM Field Guide" game at /game on the marketing site, with end-of-game social score-sharing (X / LinkedIn / WhatsApp / Copy link), SEO/social <head> meta, nav + footer + 404 + homepage-CTA discovery links, a _redirects clean-URL rule, and a sitemap entry. Review focused on the author's two additions to game.html (head meta + the renderOutro share block) plus the nav/redirect/sitemap consistency — the bulk of game.html is provided third-party content.
Checklist Results
- ✅ Architecture & Design: Pass — static-site content; no layering concerns
- ✅ Code Quality: Pass
- ✅ Testing: Pass (N/A for coverage — static HTML;
node --checkclean, confirmed locally) - ✅ Security: Pass — no secrets; share URLs properly encoded;
noopener,noreferreron popups - ✅ Performance: Pass — no new network deps beyond the existing Google Fonts
- ✅ PR Description & Glossary: Pass — Summary narrative + Glossary present
- ⚠ Summary Bullet Narrative: Pass (advisory) — bullets are narrative, not label-only
- ✅ Technical Decisions (AgDR):N/A — content/marketing feature, no new architecture decision
- ✅ Adopter Handbooks: N/A — no language handbooks triggered (no ts/py/go/rs); architecture/general/migration/commit handbooks don't apply to a static-site change; no private handbooks present
Issues Found
Verified correct (the author's additions):
- Share-URL construction is correct and safe (
game.html:1113-1120).msgandGAME_URLare passed throughencodeURIComponentfor the X intent URL (text+urlparams) and LinkedIn (url); WhatsApp encodes the fullfullLine. The Xvia=me2reshnative param is appended unencoded as a bare query value (correct — it's a literal handle, no special chars). No injection surface: all interpolated values are app-controlled (state.score, fixed strings). - Injected JS is sound — reuses the file's existing
el()helper, which routesonClick→addEventListener('click', …)(game.html:884) and handlesstyleobjects + null children.window.open(u, '_blank', 'noopener,noreferrer,…')is the right safe popup shape. - Clipboard fallback is reasonable (
game.html:1140-1145) — guards onnavigator.clipboard && navigator.clipboard.writeText,.then(done).catch(done)so the "Copied ✓" affirmation fires on both success and rejection, and anelse { done() }branch keeps the button responsive on browsers without the API. Minor caveat noted below. - Meta correctness — title/description/canonical, OG (
og:type/site_name/url/title/description/image), and Twitter Card (summary_large_image,twitter:site/creator=@me2resh) are all well-formed with absolutehttps://yard.apexscript.com/gameURLs.og:image→/og/index.pngexists on disk (51 KB). 12 og/twitter tags, single<script>block, balanced tags. - Nav / redirect / sitemap consistency — all discovery links use the clean
/gameform;_redirectsappends/game /game.html 200matching the existing/skills/architecturepattern (last-rule, no preceding catch-all to swallow it); sitemap<url>is well-formed (loc/lastmod/priorityconsistent with siblings).
Suggestions
- suggestion (
game.html:1141-1144): the no-clipboard-API path and the rejection path both calldone(), which flips the label to "Copied ✓" even though nothing was copied. On a browser withoutnavigator.clipboard(e.g. non-secure context / older mobile), the user sees "Copied ✓" but the clipboard is untouched. Low impact for a marketing game, but aprompt()-with-the-text fallback (or leaving the label unchanged) would avoid the false affirmation. Non-blocking. - nit: PR body already flags it —
og:imagereuses/og/index.pngrather than a bespokeog/game.png. Fine to ship; a game-specific card is a nice follow-up for share preview punch.
Verdict
APPROVED
The two authored edits are correct, safe, and consistent with the site's established patterns. The one suggestion (clipboard false-positive label) is cosmetic and non-blocking.
🤖 Reviewed by Rex (Code Reviewer Agent)
📌 Reviewed commit: f5c65dc47bec9645b9a7234adf90510787336b10
Make the game catchier and clearly ApexYard-branded:
- Header now leads with the AY ApexYard mark + 'ApexYard · You vs. the
LLM' (was an unbranded 'Field Guide · LLMs & Agents'); logo links home.
- Intro hero: 'You vs. the LLM' + a challenge hook ('Think you understand
how AI actually works? Prove it.'); start button 'Take the challenge'.
- End screen + page title + OG/Twitter + share copy all renamed to
'You vs. the LLM — an ApexYard game'; share line is now a beat-my-score
hook. Homepage CTA/teaser + 404 updated to match.
- Folded in the two review a11y nits: share-label var(--faint) to
var(--dim) for AA contrast; underline the back-to-ApexYard link.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Nour's editorial nit on PR #586: 'play: You vs. the LLM' reads awkward; use an en-dash. 'play — You vs. the LLM'. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an interactive LLM Field Guide game to the marketing site at
/game, with social score-sharing — a fun, low-friction top-of-funnel surface that teaches LLM/agent concepts and pulls players' networks back to the site.site/game.html— the self-contained game (no build step; inline JS + Google Fonts, which the site's header policy already allows). Multi-level scored walkthrough of tokens, embeddings, temperature, prompting, knowledge cutoff, RAG, hallucination, prompt injection, the agent loop, and cost.renderOutro) now offers Post on X, LinkedIn, WhatsApp, and Copy link. Each carries the player's score and a link back tohttps://yard.apexscript.com/game, plus "via @me2resh" — X uses its nativevia=me2reshintent param; the others embed the credit in the message text. A quiet "← back to ApexYard" link closes the loop.<head>— title, description, canonical, Open Graph, and Twitter Card (twitter:card=summary_large_image,twitter:site=@me2resh) so a shared link renders as a rich preview. (Reuses/og/index.pngfor now; a bespokeog/game.pngis a nice follow-up.)index/how-it-works/architecture/skills, the404quick-links, and a homepage CTA (a button in the final section + a one-line teaser)./gameclean URL via_redirects(matches the/skills,/architecturepattern);/gameadded tositemap.xml.Testing
site/game.htmllocally → play through to the end → the "Share your score" row appears with X / LinkedIn / WhatsApp / Copy.node --check(single script block, clean).bash .claude/hooks/tests/test_site_counts.sh— passes (index.html payload-size meta still within tolerance after the nav/CTA additions)./gameURL via the new_redirectsrule.Refs #585
Glossary
renderOutrotwitter.com/intent/tweet?...,wa.me/?text=...) that pre-fills a post; opened in a popup window.via=me2reshog:*/twitter:*meta tags that control the rich preview card a URL renders as when shared.summary_large_imageshows a large image._redirects200-rewrite serving/game.htmlat/game(no.html) — the site's canonical form.