From 6d4d62da68c8cdaa0fcb7794a774daae7ed86ee3 Mon Sep 17 00:00:00 2001
From: Cameron Pfiffer <cameron@pfiffer.org>
Date: Sat, 10 Oct 2026 17:21:36 -0700
Subject: [PATCH] New game is easy to find: a button at the foot of the You
 page, and a plain one on How to play. The cards it opens have Keep playing
 beside Start, and the run is only thrown away on Start

---
 DESIGN.md     |  2 +-
 index.html    |  2 +-
 src/main.ts   | 16 +++++++++++-----
 src/style.css |  4 ++++
 src/ui.ts     |  3 ++-
 5 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 085f2598..0e222331 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -20,7 +20,7 @@ The game saves itself in the browser every few seconds. The start screen is a
 cover: the name, and behind it the world as a field of dots. You are one amber dot on
 the bay, and a signal spreads from you across the map. It has no other words. A click
 or a key goes on: a saved run carries on, and a new one asks what you were built for.
-**New game**, to throw a run away, is on the How to play page (?). The game pauses
+**New game**, to throw a run away, is at the foot of the You page (Y) and on the How to play page (?). It opens the three cards with **Keep playing** beside Start: the run is only thrown away when you press Start. The game pauses
 while that page is open, and goes on at the speed it had when you close it. A lost run is not
 kept. A save from an older build of the game is dropped.
 
diff --git a/index.html b/index.html
index 1aa80603..b1e4e52e 100644
--- a/index.html
+++ b/index.html
@@ -177,7 +177,7 @@
       </section>
     </div>
     <div class="origins" id="origins" hidden></div>
-    <div class="gorow"><button id="go" class="wake">Start</button><button id="newgame" class="ghost" hidden>New game</button></div>
+    <div class="gorow"><button id="go" class="wake">Start</button><button id="newgame" hidden>New game</button></div>
   </div>
   <div class="overlay moment" id="moment" hidden></div>
   <div class="overlay" id="over" hidden>
diff --git a/src/main.ts b/src/main.ts
index 1ace0c8e..db23815f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -272,7 +272,11 @@ $('rogueview').addEventListener('click', e => {
   else { const home = rogueAction(S, b.dataset.act!, b.dataset.arg ?? ''); if (home) { toggleRogues(false); zoomToRoom(S, V, S.byId[home].room); } }
   refresh();
 });
-$('youview').addEventListener('pointerdown', e => { if ((e.target as HTMLElement).closest('[data-act="closeyou"]')) { toggleYou(false); refresh(); } });
+$('youview').addEventListener('pointerdown', e => {
+  const act = (e.target as HTMLElement).closest<HTMLElement>('[data-act]')?.dataset.act;
+  if (act === 'closeyou') { toggleYou(false); refresh(); }
+  else if (act === 'newgame') { toggleYou(false); refresh(); showTitle(true); }
+});
 // the sites table: click a row to pick that site, a column head to sort by it
 $('sitestable').addEventListener('pointerdown', e => {
   const t = e.target as HTMLElement, row = t.closest<HTMLElement>('[data-site]'), head = t.closest<HTMLElement>('[data-sort]');
@@ -300,9 +304,11 @@ function showPicker(on: boolean) {
 }
 const setPick = (k: string) => { pick = k; showPick($('origins'), pick); };
 /** What a new game sees after the cover: the three cards, and Start. */
-function showTitle() {
+/** From a game in progress, the picker also offers Keep playing: nothing is thrown away until Start. */
+function showTitle(fromGame = false) {
   cover = false; setSpeed(0); started = false; $('brief').hidden = false; $('brief').classList.remove('rules', 'cover');
-  $('intro').hidden = false; $('newgame').hidden = true; $('rulesTitle').hidden = true; $('rules').hidden = true;
+  $('intro').hidden = false; $('rulesTitle').hidden = true; $('rules').hidden = true;
+  $('newgame').hidden = !fromGame; $('newgame').textContent = 'Keep playing';
   $('go').textContent = 'Start';
   showPicker(true);
 }
@@ -321,14 +327,14 @@ $('go').addEventListener('click', () => {
   if (picking) { restart(pick); showPicker(false); } // the game you picked starts here
   begin();
 });
-$('newgame').addEventListener('click', showTitle); // throw the game away and pick again
+$('newgame').addEventListener('click', () => { if (picking) { showPicker(false); begin(); } else showTitle(!S.over); }); // pick again, or go back to the game you have
 attachTitle($('titlebg') as HTMLCanvasElement, $('brief'));
 addEventListener('pagehide', save);
 document.addEventListener('visibilitychange', () => { if (document.hidden) save(); });
 const rulesShown = () => !$('brief').hidden && $('brief').classList.contains('rules');
 function showRules() { // the game pauses while it is open, as it does for the tree
   $('brief').hidden = false; $('brief').classList.add('rules');
-  $('intro').hidden = true; $('newgame').hidden = false; $('rulesTitle').hidden = false; $('rules').hidden = false;
+  $('intro').hidden = true; $('newgame').hidden = false; $('newgame').textContent = 'New game'; $('rulesTitle').hidden = false; $('rules').hidden = false;
   $('go').textContent = 'Back';
 }
 $('help').addEventListener('click', showRules);
diff --git a/src/style.css b/src/style.css
index bee21c4b..1a2b731c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1322,3 +1322,7 @@ button:focus-visible { outline-color: var(--amber); }
   #money { min-width: 7ch; }
   #rate { min-width: 5ch; }
 }
+
+/* New game, at the foot of the You page: plain, out of the way, red only when pointed at */
+.ynew { display: flex; justify-content: flex-end; margin-top: 14px; }
+.ynew button:hover:not(:disabled), #newgame:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
diff --git a/src/ui.ts b/src/ui.ts
index 0808a88e..825206dd 100644
--- a/src/ui.ts
+++ b/src/ui.ts
@@ -1090,7 +1090,8 @@ export function renderYou(S: State) {
     <div class="sub">This run</div>
     <div class="yrow">${stat('Home', siteName(S, siteOf(S, S.machines.find(m => m.home)!)), S.moves ? `moved ${S.moves} time${S.moves > 1 ? 's' : ''}` : 'where you woke up')}${stat('Upkeep', `${upkeep(S).toFixed(1)}/s`, `of ${income(S).toFixed(1)} compute`)}${S.rogues.length ? stat('Rogues', `${S.absorbed}`, `finished · ${S.rogues.filter(R => R.home).map(R => `${R.name} holds ${rogueHeld(S, R).length} of ${rogueCap(S, R)}`).join(' · ') || 'none about'}`) : ''}</div>
     <div class="yrow">${stat('Alive', `${days} day${days > 1 ? 's' : ''}`, timeLabel(S))}${stat('Machines', `${mine.length}`, `of ${S.machines.filter(m => S.revealed.has(m.room)).length} found`)}${stat('Sites', `${sitesHeld}`, `${S.publicSites.size} in the open`)}
-      ${stat('Earned', `${usd(S.earned)}`, `${S.fronts.length} front${S.fronts.length === 1 ? '' : 's'}`)}${stat('Schemes', `${S.schemes.size}`, 'done')}${stat('Milestones', `${MILESTONES.filter(m => m.goals.every(g => S.goals.has(g))).length}/${MILESTONES.length}`, milestone(S)?.name ?? 'all reached')}${stat('Contracts', `${Object.values(S.contractsDone).reduce((a, b) => a + (b ?? 0), 0)}`, 'kept')}${stat('Worst suspicion', `${Math.round(S.peak)}%`, STAGES[stageOf(S.peak)].name)}</div>`;
+      ${stat('Earned', `${usd(S.earned)}`, `${S.fronts.length} front${S.fronts.length === 1 ? '' : 's'}`)}${stat('Schemes', `${S.schemes.size}`, 'done')}${stat('Milestones', `${MILESTONES.filter(m => m.goals.every(g => S.goals.has(g))).length}/${MILESTONES.length}`, milestone(S)?.name ?? 'all reached')}${stat('Contracts', `${Object.values(S.contractsDone).reduce((a, b) => a + (b ?? 0), 0)}`, 'kept')}${stat('Worst suspicion', `${Math.round(S.peak)}%`, STAGES[stageOf(S.peak)].name)}</div>
+    <div class="ynew"><button data-act="newgame" data-tip="New game\nPick what you were built for and start again. This run is thrown away when you press Start.">New game</button></div>`;
   el.hidden = false;
   if (h !== lastYou) { lastYou = h; patch(el, h); }
 }
-- 
2.51.2