From 2b5649ffa5f971744913bb9bd0635b4ba531d1c0 Mon Sep 17 00:00:00 2001 From: John Coffey Date: Tue, 8 Sep 2026 22:51:57 -0700 Subject: [PATCH] A way back out, and the tags a crawler reads Two things a game served from a subdirectory of somebody's site ought to have and this did not: a way back up to the site, and enough in its head for that relationship to be legible to something that is not a person. The way back sits leftmost in the footer, next to SOURCE, because that row is already where the chrome lives and leftmost is where a way back belongs. The arrow is a pseudo-element rather than part of the label so it can be the right arrow for the machine you are looking at: a chevron under the lamp, and the two ASCII characters a Teletype could actually strike on the paper skin. It is an absolute URL rather than "/". This game is served from a subdirectory in production and from the root in development, so the relative answer is right in one of those and points at the game itself in the other. The source link beside it has always worked this way for the same reason. The head gains the usual set -- canonical, Open Graph, Twitter, robots -- plus two pieces of structured data. VideoGame says what this is, that it is free, and that one to four people can play it. BreadcrumbList says the same three steps the footer link offers: this game sits under the games site, which sits under jcoffey.dev. Canonical earns its place rather than being boilerplate. The container serving this falls back to index.html for any path under /wumpus/, which is right for the app and wrong for a crawler -- without it, /wumpus/anything-at-all is a separate indexable page with identical content. The preview image is served by the site rather than carried here. There is no artwork file in this repository and there is not going to be one; a social card is not part of the game, and it sits with the deployment, which is where the canonical URL points anyway. A noscript block describes the game and offers the way onwards, so a reader without scripts and a crawler that does not run them get something better than an empty div. 38 tests. Build clean. --- index.html | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++-- src/App.css | 14 ++++++ src/App.tsx | 19 ++++++++ 3 files changed, 162 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 799720e..b714351 100644 --- a/index.html +++ b/index.html @@ -2,17 +2,142 @@ - - + Hunt the Wumpus — 1973 cave game, in your browser - Hunt the Wumpus + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + diff --git a/src/App.css b/src/App.css index fb9c7c7..4a5f478 100644 --- a/src/App.css +++ b/src/App.css @@ -635,6 +635,20 @@ html[data-skin='modern'] .btn:active:not(:disabled) { font-size: 12px; } +/* + * The way back. The arrow is a pseudo-element rather than part of the label so + * that it can be the right arrow for the machine you are looking at: a chevron + * under the lamp, and the two ASCII characters a Teletype could actually + * strike on the paper skin. + */ +.controls .back::before { + content: '\2039\00a0'; +} + +:root:not([data-skin='modern']) .controls .back::before { + content: '<-\00a0'; +} + .seed { margin-left: auto; opacity: 0.7; diff --git a/src/App.tsx b/src/App.tsx index 05161d0..c4058aa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -35,6 +35,17 @@ import './App.css' */ const SOURCE_URL = 'https://github.com/Coffey-Labs/wumpus' +/** + * The way back out. + * + * Absolute rather than `/`, because this game is served from a subdirectory in + * production and from the root in development -- so the relative answer is + * right in one of those and points at the game itself in the other. The + * destination is a particular site, and naming it is the honest way to say so. + * The source link next to it works the same way for the same reason. + */ +const GAMES_URL = 'https://games.jcoffey.dev/' + export default function App() { const [seed] = useState(randomSeed) const [state, dispatch] = useReducer(reducer, seed, initialState) @@ -224,6 +235,14 @@ export default function App() { + {/* Leftmost, because that is where a way back belongs. */} + + GAMES + {