feat: share one small close X across menus, make PLAY its icon alone, and add a CODE card

Owner feedback after the home redesign: the close buttons were too big,
PLAY did not need its word, and the MORE hand should link to the game's
public source.

Every menu dialog now closes with one shared button, closeButtonView in
src/dialogs.ts: the red pixel X on a small face (30 px on a phone, up to
40 px on a big screen) centered in a see-through 48 px button, so taps
still land. The shop, the kitchen's offer, the Profile, What's New, the
Munchopedia, How to play, the difficulty picker, the co-op screens, and
the MORE hand use it. The hand's X stands in the middle of the MORE deck's spot, and the
deck hides while the hand is out, so a second tap there still puts the
hand away. The old shop CLOSE_ART is gone.

The overlaps found: at 390x844 the Settings X covered the FULL tile, so
panel titles now keep a row as tall as the button and stop short of it;
and with six cards the fanned hand's Character card reached into the
hand's old deck-sized close, so that button is now 48 px.

PLAY shows only a bigger, near equilateral pixel triangle (teal in
endless) with aria-label "Play" and the Enter key.

The CODE card comes last in the hand: GitHub's own mark, white and
unchanged, in a slate frame, as a plain link to
github.com/Tanner-Scadden/munch-manor in a new tab, like the tip jar.

tools/audit/closes.ts checks each close on l844, p390, p375, d1280, and
d1920: its size, that its face and hit area edges and corners hit it,
that it crosses no other control, title, wallet, or bubble, and that a
tap or click on the face center and two hit area corners, and Escape,
each send exactly one RequestedClose and close the dialog. The heavy
guard runs it as a shared job, and shots34's MORE selector is fixed for
the deck's label.

Author: Tanner-Scadden

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 One entry per day, newest first. Only things a player would notice, a handful of bullets at most, written for players and not for us.
 
+## October 30, 2026: Tap and go
+
+- ▶️ PLAY is one big arrow now, every menu's close X slimmed down (still easy to tap), and a CODE card in the MORE hand shows off the game's source.
+
 ## October 29, 2026: How tough are you?
 
 - 💀 Pick how many skulls right by PLAY, and beat Hard to unlock Nightmare. Waves are tighter, planks cost more, and nothing climbs through a boarded door.

GAME_DESIGN.md

@@ -201,11 +201,11 @@ Added on 2026-10-29. Three layers, cheapest first. The commands are in `AGENTS.m
 
 Proposed numbers. The table is in `src/traps.ts`, the chewing rates in `src/zombies.ts`.
 
-| Trap      | Name           | Price  | Health | Most at once | What it does                                                                                           |
-| --------- | -------------- | ------ | ------ | ------------ | ------------------------------------------------------------------------------------------------------ |
-| Barricade | Plank Pile     | $40    | 30     | 2            | Boards up one doorway. Blocks zombies and the player; shots and peas fly through the gaps              |
-| Turret    | Grumpy Gnome   | $75    | 10     | 2            | Shoots a pea (1 damage, 1200 ms apart) at the nearest walking zombie it can see within 84 px           |
-| Repair    | Glue and Nails | Varies | -      | -            | Restores one placed trap for half its price, scaled by the share of health it is missing               |
+| Trap      | Name           | Price  | Health | Most at once | What it does                                                                                 |
+| --------- | -------------- | ------ | ------ | ------------ | -------------------------------------------------------------------------------------------- |
+| Barricade | Plank Pile     | $40    | 30     | 2            | Boards up one doorway. Blocks zombies and the player; shots and peas fly through the gaps    |
+| Turret    | Grumpy Gnome   | $75    | 10     | 2            | Shoots a pea (1 damage, 1200 ms apart) at the nearest walking zombie it can see within 84 px |
+| Repair    | Glue and Nails | Varies | -      | -            | Restores one placed trap for half its price, scaled by the share of health it is missing     |
 
 - **Placing.** Traps are bought into a pack shown in the HUD. In Preparation, T (or the place icon) puts the selected one down and G (or the next icon) switches kinds. A Plank Pile goes in the doorway the player stands in or beside; a gnome on the free tile in front of the player. A green or red ghost shows where it would go.
 - **Chewing.** A walking zombie that touches a trap chews it: a Groaner 3 health a second, a Hotfoot 2, a Big Lug 12. A Kaboomer that touches one fuses. A Plank Pile cracks at two thirds and one third and breaks with a crash.
@@ -402,19 +402,19 @@ Built on 2026-10-29, owner-approved: "so phone players do not have to turn the p
 
 ### The home menu, the loading splash, and taps
 
-From owner feedback on 2026-10-28: a home base, a loading page, and taps that land. The views are `src/homeView.ts` and `src/menu.css`, the rules `src/home.ts`, checked with `tools/audit/shots33.ts`, `tools/audit/taps.ts`, and `tools/audit/splash.ts`.
+From owner feedback on 2026-10-28: a home base, a loading page, and taps that land. The views are `src/homeView.ts` and `src/menu.css`, the rules `src/home.ts`, checked with `tools/audit/shots33.ts`, `tools/audit/taps.ts`, `tools/audit/closes.ts`, and `tools/audit/splash.ts`.
 
 - **The home layout.** Decided on 2026-10-29, owner-approved, and reworked the same day from owner feedback ("Settings becomes a small gear", the pages as "a card like menu that pops out, kinda like an option wheel but gamified", and the difficulty "next to the play area"). The same slots on a phone and a computer, placed in arena pixels. A new feature is a new card in the MORE hand, never a new slot, so PLAY never moves.
   - **Top left, bests.** A rank badge in the chosen level's color: its skull, then a trophy and the best endless wave, a clock and the fastest win, and a skull and the zombies splatted, as icons and big numbers. Nothing at all until the player has a best.
   - **Top right, the corner.** The gear (the Profile on Settings) in the corner itself, full screen just inside it where the browser can do it, then the "New version ready" chip. The iPhone Home Screen tip hangs under the gear.
   - **Center stage.** The logo and the player in their look; no tagline, since the logo and the room speak for themselves. Tapping the player opens the Profile on Look. A NEW ENTRY pop appears when a run unlocked a Munchopedia entry.
-  - **Bottom right, play.** PLAY is the one focal point: a chunky green game button (teal in endless) with a pixel play triangle and the word, a pixel bevel its face sinks into when pressed, a slow breath, and a shine that sweeps across now and then. Beside it, with no labels: the mode as two icon tiles, the manor door in purple for the campaign and the loop in teal for endless, the chosen one raised and glowing; and the difficulty as a skull meter, as many skulls lit as the level, each level its own color and face (a sleepy green Easy, a yellow Normal, an angry orange Hard, a red Nightmare in flames), the fourth a padlock while Nightmare is locked. It opens the picker hanging from the cluster: chunky tiles of skulls and one word, the locked Nightmare showing a trophy and Hard's skull for what unlocks it. Switching the mode never moves PLAY's box.
-  - **Bottom left, the MORE deck.** One chunky button, a fanned hand of three little cards and the word MORE, the cards peeking up now and then. It deals a hand of cards, fanned in with a quick deal: Character, Munchopedia, What's New, How to play, and the TIP JAR while a support link is set. A card is its picture and its name; the Munchopedia's found tally sits in a ring that fills as zombies are found. The closed deck wears a pip per card with news (the card's icon and a red dot, What's New's bouncing), and the card a NEW tag. CLOSE sits where the deck was, Esc and a tap outside also put it away, and the arrow keys walk the cards. Why a hand and not a rail or an icon wheel: one obvious place for everything that is not PLAY, room for the cosmetic shop and the co-op lobby as more cards, and the dialog it is built on (`src/dialogs.ts`) gives focus, Esc, and the backdrop for free. The home menu's own buttons pop softly when tapped, and the gear ticks round slowly.
+  - **Bottom right, play.** PLAY is the one focal point: a chunky green game button (teal in endless) with a big pixel play triangle and no word (owner feedback, 2026-10-29: "The PLAY button needs no text"), a pixel bevel its face sinks into when pressed, a slow breath, and a shine that sweeps across now and then. Beside it, with no labels: the mode as two icon tiles, the manor door in purple for the campaign and the loop in teal for endless, the chosen one raised and glowing; and the difficulty as a skull meter, as many skulls lit as the level, each level its own color and face (a sleepy green Easy, a yellow Normal, an angry orange Hard, a red Nightmare in flames), the fourth a padlock while Nightmare is locked. It opens the picker hanging from the cluster: chunky tiles of skulls and one word, the locked Nightmare showing a trophy and Hard's skull for what unlocks it. Switching the mode never moves PLAY's box.
+  - **Bottom left, the MORE deck.** One chunky button, a fanned hand of three little cards and the word MORE, the cards peeking up now and then. It deals a hand of cards, fanned in with a quick deal: Character, Munchopedia, What's New, How to play, the TIP JAR while a support link is set, and last CODE, a link to the game's public source on GitHub (owner request, 2026-10-29) wearing GitHub's own mark, white and unchanged per GitHub's logo rules, in a slate frame. A card is its picture and its name; the Munchopedia's found tally sits in a ring that fills as zombies are found. The closed deck wears a pip per card with news (the card's icon and a red dot, What's New's bouncing), and the card a NEW tag. While the hand is out the deck leaves the stage and the shared close X stands in the middle of the deck's spot, so a second tap there puts the hand away; Esc and a tap outside also do, and the arrow keys walk the cards. Why a hand and not a rail or an icon wheel: one obvious place for everything that is not PLAY, room for the cosmetic shop and the co-op lobby as more cards, and the dialog it is built on (`src/dialogs.ts`) gives focus, Esc, and the backdrop for free. The home menu's own buttons pop softly when tapped, and the gear ticks round slowly.
   - **Keys.** One per action, used nowhere else: Enter PLAY, E mode, X difficulty, V the hand, O the Profile on Settings, and the cards' own keys work without opening the hand: C the Profile on Look, Z Munchopedia, L What's New, I How to play. The arrow keys walk PLAY, MODE, DIFFICULTY, MANOR, and the gear.
   - **Menu styles.** One calm visual language in the `--menu-*` tokens at the top of `src/menu.css` (colors, radii, spacing, type sizes, icon sizes, the keycap), shared by every panel, the pause controls, and the shop.
 - **What's New.** The newest day of `CHANGELOG.md`, paged with OLDER and NEWER. `src/changelog.ts` decodes the file at build time; it is the only source.
 - **The Munchopedia.** A field guide to every zombie (`src/munchopedia.ts`, `src/guideView.ts`). Unfound kinds are silhouettes. An entry shows the zombie walking through its wear, a one-line bio, how it plays and how to beat it, the player's kills of it, and badges at 10, 100, and 1,000.
-- **HOW TO PLAY.** Eight control cards for the last device used, each the tutorial's own moving picture (`src/hintIcons.ts`) and a word or two: MOVE, AIM + SHOOT, RELOAD, SWAP, SHOP, PLANKS, GOODIES, PAUSE. The input is spoken to a screen reader, not written. On a keyboard, one line of the other keys and one of the menu keys. Every panel closes with the shop's red pixel X in its corner, and Esc.
+- **HOW TO PLAY.** Eight control cards for the last device used, each the tutorial's own moving picture (`src/hintIcons.ts`) and a word or two: MOVE, AIM + SHOOT, RELOAD, SWAP, SHOP, PLANKS, GOODIES, PAUSE. The input is spoken to a screen reader, not written. On a keyboard, one line of the other keys and one of the menu keys. Every menu dialog (the shop, the kitchen's offer, the panels, the Profile, the hand) closes with one shared close button, `closeButtonView` in `src/dialogs.ts`, and Esc. Its red pixel X sits on a small face (about 30 px on a phone, up to 40 on a big screen) inside a see-through 48 px button, and each dialog reserves room for it in its header row so it never covers a title, a tab, the wallet, or Rattles' bubble. `tools/audit/closes.ts` checks the size, the overlaps, every edge of the tap area, and Esc.
 - **The Profile.** Decided with the owner on 2026-10-29 ("keep it fun. We're building a game, make it intuitive"): the Character card, a tap on the player, and C open it on Look; the gear and O open it on Settings. One panel like a game's character sheet, not a settings form (`src/profileView.ts`, `src/profile.css`, the rules in `src/profile.ts` and `src/update/profile.ts`). Chunky colored tabs down the left side, a row across the top in portrait: pink LOOK, yellow NAME, teal ACCOUNT, grey SETTINGS, one word and one icon each. The chosen tab pops out, a switch plays a page flip and the page flips in, the arrow keys walk the tabs, and the red pixel X or Esc closes it. The tabs are data (`PROFILE_TABS`), so Cosmetics or Stats is one more tab. All motion is CSS, and nothing runs on the game canvas.
   - **Look.** The character picker: the character walks in a spotlight with an idle bounce, a new part puffs a poof with a pop, and the dice rolls a random look with a slot-machine spin, drawn from the Model's seeded generator.
   - **Name.** The display name for co-op, carved live on a tombstone as it is typed, with pips for the letters left. 1 to 12 characters, not unique, cleaned (control characters out, spaces collapsed and trimmed); empty shows SURVIVOR as the placeholder. The dice suggests one of our own goofy names. It is kept on Enter, on leaving the field, on another tab, and on closing, then saved (save version 9) and synced across linked devices, the last one set winning.

src/character.scene.test.ts

@@ -31,7 +31,7 @@ const characterCard = role('button', {
   name: 'Character: change how you look',
 })
 const pickerDialog = role('dialog', { name: 'Profile' })
-const doneButton = role('button', { name: 'Done' })
+const closeButton = role('button', { name: 'Close' })
 const randomizeButton = role('button', { name: 'Roll a random look' })
 
 const group = (name: string) => role('radiogroup', { name })
@@ -82,7 +82,7 @@ describe('Character picker', () => {
       expect(pickerDialog).toBeAbsent(),
       ...pickCardInScene('Character: change how you look'),
       expect(pickerDialog).toExist(),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
     )
   })
@@ -110,7 +110,7 @@ describe('Character picker', () => {
       expect(optionIn('Shirt', 'Blue')).toHaveAttr('aria-checked', 'true'),
       expect(preview(DEFAULT_LOOK)).toExist(),
       expect(randomizeButton).toExist(),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
     )
   })
@@ -131,7 +131,7 @@ describe('Character picker', () => {
       expect(
         preview('Female body, ponytail ginger hair, deep skin, teal shirt'),
       ).toExist(),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
       expect(pickerDialog).toBeAbsent(),
     )
@@ -146,7 +146,7 @@ describe('Character picker', () => {
       ...showPicker(),
       ...pick('Skin', 'Brown'),
       ...pick('Shirt', 'Pink'),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
     )
   })
@@ -171,7 +171,7 @@ describe('Character picker', () => {
       expect(
         preview('Female body, curls brown hair, light skin, red shirt'),
       ).toExist(),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
     )
   })
@@ -188,7 +188,7 @@ describe('Character picker', () => {
       ...showPicker(),
       ...pick('Hair', 'Long'),
       ...pick('Hair color', 'Pink'),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
       expect(pickerDialog).toBeAbsent(),
     )
@@ -203,7 +203,7 @@ describe('Character picker', () => {
       ...showPicker(),
       click(randomizeButton),
       expect(preview(DEFAULT_LOOK)).toBeAbsent(),
-      click(doneButton),
+      click(closeButton),
       ...closePicker(),
     )
   })

src/coop/view.ts

@@ -9,7 +9,8 @@ import {
   type RoomScore,
 } from '@munch/netcode'
 
-import { CLOCK_ICON, CLOSE_ICON, SHARE_ICON, TROPHY_ICON } from '../icons'
+import { closeButtonView } from '../dialogs'
+import { CLOCK_ICON, SHARE_ICON, TROPHY_ICON } from '../icons'
 import type { Appearance } from '../model'
 import {
   AWAY_ICON,
@@ -129,16 +130,14 @@ const portraitView = (
   h: HtmlBuilder<Message>,
 ): Html => iconView(`coop-portrait ${className}`, portraitOf(look), h)
 
-const closeButtonView = (inputs: ViewInputs, h: HtmlBuilder<Message>): Html =>
-  h.button(
-    [
-      h.Type('button'),
-      h.Class('panel-close coop-close'),
-      h.AriaLabel('Close co-op'),
-      h.AriaKeyshortcuts('Escape'),
-      h.OnClick(Message.ClickedCloseButton()),
-    ],
-    [iconView('panel-close-icon', CLOSE_ICON, h), keyCapView(inputs, 'ESC', h)],
+const coopCloseView = (h: HtmlBuilder<Message>): Html =>
+  closeButtonView(
+    {
+      attributes: [h.OnClick(Message.ClickedCloseButton())],
+      className: 'coop-close',
+      label: 'Close co-op',
+    },
+    h,
   )
 
 const backButtonView = (
@@ -217,7 +216,7 @@ const hubView = (
   h.div(
     [h.Class('coop-hub')],
     [
-      closeButtonView(inputs, h),
+      coopCloseView(h),
       h.h2(
         [h.Class('coop-title'), h.AriaLabel('Co-op')],
         [iconView('coop-title-icon', COOP_ICON, h), h.span([], ['CO-OP'])],
@@ -312,7 +311,7 @@ const codeView = (
     [h.Class('coop-code')],
     [
       backButtonView('Back', Message.ClickedBackButton(), h),
-      closeButtonView(inputs, h),
+      coopCloseView(h),
       iconView('coop-code-icon', CODE_ICON, h),
       h.form(
         [h.Class('coop-code-form'), h.OnSubmit(Message.SubmittedCode())],
@@ -459,18 +458,13 @@ const queueView = (
   h.div(
     [h.Class('coop-queue')],
     [
-      h.button(
-        [
-          h.Type('button'),
-          h.Class('panel-close coop-close'),
-          h.AriaLabel('Stop looking'),
-          h.AriaKeyshortcuts('Escape'),
-          h.OnClick(Message.ClickedCancelQueueButton()),
-        ],
-        [
-          iconView('panel-close-icon', CLOSE_ICON, h),
-          keyCapView(inputs, 'ESC', h),
-        ],
+      closeButtonView(
+        {
+          attributes: [h.OnClick(Message.ClickedCancelQueueButton())],
+          className: 'coop-close',
+          label: 'Stop looking',
+        },
+        h,
       ),
       iconView('coop-queue-icon', QUICK_ICON, h),
       h.ol(

src/dialogs.ts

@@ -1,9 +1,11 @@
 import { Option } from 'effect'
 import { Update } from 'foldkit'
-import type { Attribute, Html, HtmlBuilder } from 'foldkit/html'
+import type { Attribute, ChildAttribute, Html, HtmlBuilder } from 'foldkit/html'
 
 import { Dialog } from '@foldkit/ui'
 
+import { CLOSE_ICON } from './icons'
+
 // UPDATE
 
 type DialogFoldConfig<Model, Message, R> = Readonly<{
@@ -94,3 +96,41 @@ export const dialogShell = <Message>(
     },
     toParentMessage,
   })
+
+// CLOSE
+
+type CloseButton<Message> = Readonly<{
+  attributes: ReadonlyArray<Attribute<Message> | ChildAttribute>
+  className: string
+  label: string
+}>
+
+// NOTE: the one close button every menu dialog shares: the shop's red pixel
+// X on a small face, centered in a bigger see-through button, so it looks
+// small but a thumb still has a 48 px target. `className` only places it.
+// `attributes` carry what it does: a Dialog's `closeButton`, or an OnClick
+// for a screen that is not a Dialog, such as co-op's.
+export const closeButtonView = <Message>(
+  { attributes, className, label }: CloseButton<Message>,
+  h: HtmlBuilder<Message>,
+): Html =>
+  h.button(
+    [
+      h.Type('button'),
+      ...attributes,
+      h.Class(`menu-close ${className}`),
+      h.AriaLabel(label),
+      h.AriaKeyshortcuts('Escape'),
+    ],
+    [
+      h.span(
+        [h.Class('menu-close-face'), h.AriaHidden(true)],
+        [
+          h.span([
+            h.Class('menu-close-icon'),
+            h.Style({ backgroundImage: CLOSE_ICON }),
+          ]),
+        ],
+      ),
+    ],
+  )

src/difficulty.scene.test.ts

@@ -20,7 +20,7 @@ import { asVeteran } from './veteran'
 import { view } from './view'
 
 const playButton = role('button', {
-  name: 'Play the campaign: 10 waves, then victory',
+  name: 'Play',
 })
 const difficultyButton = role('button', {
   name: 'Difficulty: Normal. Change it',
@@ -38,7 +38,7 @@ const lockedNightmare = role('button', {
 const openNightmare = role('button', {
   name: 'Nightmare: No mercy. Bring snacks',
 })
-const done = role('button', { name: 'Done' })
+const done = role('button', { name: 'Close' })
 
 // NOTE: the attribute the Foldkit dialog focuses when it opens.
 const INITIAL_FOCUS = 'data-foldkit-dialog-initial-focus'