Remove Zen mode — one consistent Game view

Zen mode defaulted ON and hid the whole score/economy layer (fans, buffs,
fan feed, Cred chip) plus muted the break/curfew nudges. That made the game
read as "nothing is happening" out of the box. Retired it entirely: the
economy, nudges, and HUD are always on now, so what the player sees matches
what the systems are doing.

- profile: drop the `zen` setting (+ migrate it off stale saves)
- main/controls: collapse every zen() guard to the game path; delete the
  one-tap Game/Calm toggle button and the remote "mode" command
- css/html: remove the modeToggle element + all body.zen rules

Verified in-browser: toggle gone, no body.zen class, buffs/economy visible,
no "Zen mode" setting, zero console errors.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: DaveEuson

index.html

@@ -18,7 +18,6 @@
       <canvas id="c"></canvas>
       <div id="crt"></div>
       <div id="drop"><span>drop audio to add it to your library<br /><small>mp3 · wav · aiff · flac · m4a · ogg</small></span></div>
-      <button id="modeToggle" title="game / calm view">🎮</button>
       <button id="qrBtn" title="phone remote">📱</button>
       <div id="deskClock" hidden><span class="dc-time">—</span><span class="dc-date"></span></div>
       <div id="breakSign" hidden></div>

src/config.ts

@@ -172,8 +172,7 @@ export const REWARDS = {
 // A crowd that never shrinks makes the fan count meaningless — you'd only ever
 // climb. So if you don't show up for a while, some of the room drifts away. It's
 // gentle and grace-buffered (a normal day off costs nothing), and only touches
-// fans — Cred is money you earned, it never evaporates. Not a Pomodoro penalty,
-// so it applies in both zen and game modes.
+// fans — Cred is money you earned, it never evaporates.
 export const DECAY = {
   graceHours: 20, // no crowd loss if you were last here within ~a day
   retainPerDay: 0.85, // fraction of fans kept per full idle day past the grace (≈15%/day)

src/controls.css

@@ -26,8 +26,6 @@
 .dock-cred .ds-fans { color: #ff9ad0; font-size: 14px; }
 .dock-cred b { font-family: "Press Start 2P", monospace; font-size: 11px; }
 .dock-toggle { background: rgba(124,58,237,.18); border: 1px solid #34294f; color: #cdbff0; font-size: 20px; line-height: 1; cursor: pointer; padding: 9px 13px; border-radius: 10px; flex: 0 0 auto; }
-/* Zen mode hides the always-on currency hook (Cred/fans chip) from the dock */
-body.zen .dock-cred { display: none; }
 .dock-toggle:hover { background: rgba(124,58,237,.34); color: #fff; }
 
 /* draw the eye until the user first opens the controls */

src/controls.ts

@@ -42,7 +42,6 @@ export class Controls {
   private playing = false;
   private muted = false;
   private vol = 0.8; // 0..1 — reflected by the menu volume slider
-  private get zenOn(): boolean { return this.p.settings.zen; }
 
   constructor(root: HTMLElement, private p: Profile, private cb: ControlsCallbacks) {
     this.root = root;
@@ -200,9 +199,9 @@ export class Controls {
     this.sheetBody.innerHTML = `
       ${this.unlockBar()}
       <div class="cv-level">
-        <div class="cv-lvlrow"><b>Level ${this.p.level}</b>${this.zenOn ? "" : `<span>👥 <b class="cv-fans-val">${Math.round(this.p.fans)}</b></span>`}</div>
+        <div class="cv-lvlrow"><b>Level ${this.p.level}</b><span>👥 <b class="cv-fans-val">${Math.round(this.p.fans)}</b></span></div>
         <div class="cv-bar"><i style="width:${Math.round(this.p.xp * 100)}%"></i></div>
-        <small>${this.p.listenedMinutes} min listened${this.zenOn ? "" : ` · next level in ~${Math.max(0, Math.round(need - need * this.p.xp))} min of play`}</small>
+        <small>${this.p.listenedMinutes} min listened · next level in ~${Math.max(0, Math.round(need - need * this.p.xp))} min of play</small>
       </div>
       <span class="cv-label">Time at desk</span>
       ${(() => { const d = deskTotals(this.p); return `<div class="cv-stats">
@@ -309,7 +308,7 @@ export class Controls {
     const presenceRow = `<div class="cv-opt cv-optseg"><span>👁 Presence source</span><select class="cv-presence">${
       pmodes.map(([v, lbl]) => `<option value="${v}" ${pm === v ? "selected" : ""}>${lbl}</option>`).join("")}</select></div>`
       + `<div class="cv-presence-note">${esc(pnote[pm])}</div>`;
-    this.sheetBody.innerHTML = `${toggle("zen", "🧘 Zen mode — hide scores & bonuses, just music")}${presenceRow}${toggle("sound", "🔊 Muffled kick (through the wall)")}`
+    this.sheetBody.innerHTML = `${presenceRow}${toggle("sound", "🔊 Muffled kick (through the wall)")}`
       + uiRow
       + `${toggle("weatherAuto", "🌦 Live weather — real rain/snow over the scene")}`
       + `<label class="cv-opt"><span>Weather city</span><input class="cv-city" type="text" placeholder="auto-detect from IP" maxlength="40" value="${esc(st.weatherCity)}" ${st.weatherAuto ? "" : "disabled"}/></label>`

src/main.ts

@@ -26,8 +26,6 @@ let profile: Profile = loadProfileSync(); // instant boot from the mirror
 // venue drives the scene; the real clock only grades it (day/night). ?venue= forces one for testing
 const forcedVenue = new URLSearchParams(location.search).get("venue") as VenueId | null;
 const currentVenue = (): VenueId => (forcedVenue && forcedVenue in VENUES ? forcedVenue : profile.venue);
-// Zen (calm) mode: hide the score/economy layer + drop all penalties. Default on.
-const zen = (): boolean => profile.settings.zen;
 
 // ?weather=rain|snow|haze|clear forces the atmosphere (testing / manual)
 type WeatherKind = "clear" | "rain" | "snow" | "haze";
@@ -67,7 +65,6 @@ function syncScene(): void {
     clock24: profile.settings.clock24, live: audio.playing,
   });
   document.body.classList.toggle("no-scanlines", !profile.settings.scanlines);
-  document.body.classList.toggle("zen", zen()); // hides the dock cred/fans chip in CSS
   document.body.dataset.ui = profile.settings.uiScale ?? "m"; // HUD size (drives --ui in CSS)
 }
 
@@ -108,7 +105,7 @@ const controls = new Controls($("controls"), profile, {
     persist(); controls.setProfile(profile); syncScene();
     toast(`🎉 ${pz.name} unlocked!`);
   },
-  onSettings: (patch) => { Object.assign(profile.settings, patch); persist(); syncScene(); syncClock(); if ("zen" in patch) controls.setProfile(profile); if ("presenceMode" in patch) void setPresence(patch.presenceMode!); if ("weatherAuto" in patch || "weatherCity" in patch) void refreshWeather(); },
+  onSettings: (patch) => { Object.assign(profile.settings, patch); persist(); syncScene(); syncClock(); if ("presenceMode" in patch) void setPresence(patch.presenceMode!); if ("weatherAuto" in patch || "weatherCity" in patch) void refreshWeather(); },
   onSelectTrack: (i) => void audio.select(i),
   onAddFiles: () => fileInput.click(),
   onAddStation: (name: string, url: string, genre: Genre) => tuneStation(name, url, genre),
@@ -239,23 +236,6 @@ venueName.onclick = () => openVenueBoard();
 venueBoard.querySelector(".vb-scrim")?.addEventListener("click", closeVenueBoard);
 venueBoard.querySelector(".vb-close")?.addEventListener("click", closeVenueBoard);
 
-// ── one-tap Game / Calm toggle — flips Zen (hides the game HUD for heads-down) ──
-const modeToggle = $("modeToggle");
-function syncModeToggle(): void {
-  modeToggle.textContent = zen() ? "🌿" : "🎮";
-  modeToggle.title = zen() ? "Calm view — tap for Game" : "Game view — tap for Calm";
-}
-modeToggle.onclick = (e) => {
-  e.stopPropagation();
-  profile.settings.zen = !profile.settings.zen;
-  persist();
-  syncScene(); // toggles body.zen → shows/hides buffs, Cred chip, desk counter
-  controls.setProfile(profile);
-  syncModeToggle();
-  toast(zen() ? "🌿 Calm view" : "🎮 Game view");
-};
-syncModeToggle();
-
 // ── 📱 QR → the phone REMOTE that controls this kiosk (/remote.html) ──────────
 const qrBtn = $("qrBtn"), qrOverlay = $("qrOverlay");
 let qrReady = false;
@@ -293,7 +273,6 @@ function applyRemote(cmd: string, value: unknown): void {
     case "prev": void audio.prev(); break;
     case "volume": if (typeof value === "number") applyVolume(Math.max(0, Math.min(1, value))); break;
     case "mute": audio.toggleMute(); syncMuteIcon(); controls.setTransport(audio.playing, audio.muted); break;
-    case "mode": profile.settings.zen = value === "calm"; persist(); syncScene(); controls.setProfile(profile); syncModeToggle(); break;
     case "buyVenue": if (typeof value === "string" && value in VENUES) buyVenue(value as VenueId); break;
     case "reloadLibrary": void fetchLibrary().then((lib) => { if (lib.length) { audio.addTracks(lib); controls.setMedia(audio.tracks, audio.index); } }); break;
     case "restoreProfile": void restoreProfile(value); break;
@@ -324,7 +303,7 @@ function reportState(): void {
       profileId: profile.id, // lets the companion fetch the full profile for backup
       trackIndex: audio.index, trackTitle: c?.title ?? null,
       playing: audio.playing, muted: audio.muted, volume: profile.settings.volume,
-      mode: zen() ? "calm" : "game", unlocks: profile.unlocks, cred: Math.floor(profile.cred),
+      mode: "game", unlocks: profile.unlocks, cred: Math.floor(profile.cred),
       tracks: audio.tracks.map((t, i) => ({ i, title: t.title, artist: t.artist, station: !!t.station })),
     }),
   }).catch(() => {});
@@ -375,7 +354,7 @@ function fanPost(): void {
   setTimeout(() => { card.classList.add("out"); setTimeout(() => card.remove(), 600); }, 7000);
 }
 (function scheduleFan() {
-  setTimeout(() => { if (!zen() && audio.playing) fanPost(); scheduleFan(); }, (20 + Math.random() * 18) * 1000);
+  setTimeout(() => { if (audio.playing) fanPost(); scheduleFan(); }, (20 + Math.random() * 18) * 1000);
 })();
 
 // ── curfew gag: linger at an outdoor venue after dark → 🚓 the cops show up ────
@@ -400,7 +379,7 @@ function curfewBlock(id: VenueId): boolean {
 }
 function updateCurfew(dt: number): void {
   if (!curfewHour() && busted.size) busted.clear(); // dawn — the raided spots reopen
-  if (copsActive || zen()) return; // a Game-mode gag — never interrupts Calm/focus
+  if (copsActive) return; // don't stack a second raid while one's playing out
   const v = currentVenue();
   if (VENUES[v].curfew && curfewHour() && (presence.current.present || audio.playing)) {
     curfewMs += dt;
@@ -428,20 +407,19 @@ function triggerCops(): void {
 // beacon after dark, and the cops countdown on the board while it's running
 function syncCurfewSign(): void {
   const v = currentVenue();
-  if (zen() || !VENUES[v].curfew) { scene.setCurfew(null); return; }
+  if (!VENUES[v].curfew) { scene.setCurfew(null); return; }
   const night = curfewHour();
   const remain = night && curfewMs > 0
     ? Math.max(0, Math.ceil((CURFEW.lingerSec * 1000 * FAST - curfewMs) / 1000))
     : null;
   scene.setCurfew({ night, remainSec: remain });
 }
 // break warning — the healthy counterpart to the cops: a prominent, escalating
-// nudge (heads-up → pulsing "BREAK TIME") once a focus block lands. Game-mode
-// only; Calm mode keeps the quiet deskTimer nudge.
+// nudge (heads-up → pulsing "BREAK TIME") once a focus block lands.
 function renderBreakSign(): void {
   const present = presence.active ? presence.current.present : audio.playing;
   let state = "";
-  if (!zen() && present && !onBreak) {
+  if (present && !onBreak) {
     if (breakDue) state = "due";
     else if (focusMs > 0 && FOCUS_MS - focusMs <= SOON_MS) state = "soon";
   }
@@ -457,9 +435,8 @@ function renderBreakSign(): void {
       + `<span class="cs-txt">a good stopping point in ${fmtDuration(Math.max(0, FOCUS_MS - focusMs))}</span>`;
   }
 }
-// a brief teal "you earned it" flash when a block first completes (Game mode)
+// a brief teal "you earned it" flash when a block first completes
 function triggerBreak(): void {
-  if (zen()) return;
   breakFlash.classList.add("on");
   setTimeout(() => breakFlash.classList.remove("on"), 2800);
 }
@@ -1067,11 +1044,9 @@ setInterval(() => {
   updateNowPlaying();
   if (++persistTick >= 20) { persistTick = 0; persist(); } // checkpoint the log ~every 20s
   const todayMs = deskTotals(profile).today * 1000;
-  // Zen: the desk timer only surfaces for the gentle break nudge — no always-on
-  // session counter to glance at.
   // keep the session timer on screen through an active session (or while music plays)
   // so a glance at your main monitor doesn't make it vanish + read as a reset
-  deskTimer.classList.toggle("on", breakDue || (!zen() && (presence.current.present || focusMs > 0 || audio.playing)));
+  deskTimer.classList.toggle("on", breakDue || presence.current.present || focusMs > 0 || audio.playing);
   deskTimer.classList.toggle("break", breakDue);
   const atDesk = presence.active ? presence.current.present : audio.playing;
   deskTimer.innerHTML = breakDue && !atDesk

src/profile.ts

@@ -28,6 +28,7 @@ export function normalize(p: Profile): Profile {
     p.settings.presenceMode = legacy.camera ? "camera" : "activity";
   }
   delete legacy.camera;
+  delete (p.settings as { zen?: boolean }).zen; // zen mode retired — one consistent game view now
   return p;
 }
 
@@ -45,7 +46,6 @@ export interface Settings {
   weatherCity: string; // manual city override; "" = auto-locate from IP
   onboarded: boolean; // has seen the first-run intro
   volume: number; // master playback volume 0..1 (remembered across sessions)
-  zen: boolean; // calm mode — hides the score/economy layer, no penalties (default on)
   uiScale: "s" | "m" | "l"; // HUD size — scales the readable overlays
 }
 
@@ -152,7 +152,7 @@ export function defaultProfile(): Profile {
     deskLog: {},
     customStations: [],
     addedTracks: [],
-    settings: { showClock: true, showDate: true, clock24: false, scanlines: true, sound: false, presenceMode: "activity", weather: "clear", weatherAuto: true, weatherCity: "", onboarded: false, volume: 0.8, zen: true, uiScale: "m" },
+    settings: { showClock: true, showDate: true, clock24: false, scanlines: true, sound: false, presenceMode: "activity", weather: "clear", weatherAuto: true, weatherCity: "", onboarded: false, volume: 0.8, uiScale: "m" },
     lastSeen: new Date().toISOString(),
   };
 }

src/styles.css

@@ -108,12 +108,6 @@ body.topsign #deskTimer { top: 98px; }
   padding: 2px 12px; border-radius: 999px; }
 #venueName:hover { background: rgba(255,255,255,.08); }
 
-/* one-tap Game / Calm toggle (top-left) */
-#modeToggle { position: absolute; top: 10px; left: 10px; z-index: 12; width: 38px; height: 38px;
-  border-radius: 999px; border: 1px solid #3a3258; background: rgba(10,8,20,.86); color: #e2d8f6;
-  font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
-#modeToggle:hover { background: rgba(124,58,237,.32); }
-
 /* 📱 QR-to-phone button + overlay */
 #qrBtn { position: absolute; top: 10px; left: 56px; z-index: 12; width: 38px; height: 38px;
   border-radius: 999px; border: 1px solid #3a3258; background: rgba(10,8,20,.86); color: #e2d8f6;
@@ -253,7 +247,6 @@ body.topsign #deskTimer { top: 98px; }
 .buff-ic { flex: 0 0 auto; font-size: calc(16px * var(--ui)); }
 .buff-tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .buff b { font-family: "Press Start 2P", monospace; font-size: calc(11px * var(--ui)); color: #ffd86a; flex: 0 0 auto; }
-body.zen #buffs { display: none; }
 /* progression meter — Cred left until the next venue unlocks */
 .prog { margin-top: 4px; display: flex; flex-direction: column; gap: 6px;
   background: rgba(12,9,22,.96); border: 1px solid #4a4270; border-radius: 11px; padding: 8px 12px;
@@ -271,7 +264,6 @@ body.zen #buffs { display: none; }
 /* fan feed — canned "what people are saying" social posts (Game mode only) */
 #fanFeed { position: absolute; top: 92px; right: 8px; z-index: 11; width: 250px; max-width: 44vw;
   display: flex; flex-direction: column; gap: 7px; pointer-events: none; }
-body.zen #fanFeed { display: none; }
 .fan-post { display: flex; gap: 8px; align-items: flex-start; background: rgba(14,10,26,.9); border: 1px solid #3a3258;
   border-radius: 12px; padding: 8px 10px; box-shadow: 0 4px 14px rgba(0,0,0,.45); animation: fanIn .35s ease; }
 .fan-post.out { animation: fanOut .6s ease forwards; }