fix(onboarding): hide canvas empty-state message while TownManager is open by jacuzzicoding · Pull Request #110 · jacuzzicoding/animalcrossingwebapp

jacuzzicoding · 2026-05-06T19:54:54Z

Bug

On first load with no towns, App.tsx calls openTownManager(forceCreate=true), which opens the TownManager drawer with a backdrop blur covering the canvas. The canvas-level EmptyState — "Create a town to start tracking your museum donations." — still rendered behind that blur: faded out, obscured, and redundant since the drawer is already prompting the user to create a town.

Closes #107

Fix

In ACCanvas.tsx, gate the <EmptyState> on noTowns && !townManagerOpen. When the drawer is open it is the active onboarding surface (forceCreate flow or user-opened). The canvas message is suppressed entirely while the drawer is visible and reappears if the user closes the drawer without creating a town.

Changed file: src/components/ACCanvas.tsx — imports useUIStore, reads townManagerOpen, adds !townManagerOpen to the existing noTowns guard.

Tests

Added src/lib/uiStore.test.ts (4 tests) verifying the store's open/close lifecycle and the canvas gate logic (noTowns && !townManagerOpen).

Test plan

npm run build — clean
npm test — 2073 tests pass
Manual: first load with no towns → drawer opens, canvas empty-state hidden behind backdrop is gone
Manual: close drawer without creating a town → canvas empty-state reappears

… open On first load with no towns, App.tsx opens TownManager in forceCreate mode, rendering a backdrop blur. The canvas-level "Create a town..." EmptyState rendered behind that blur — redundant and visually broken. Gate the EmptyState on `!townManagerOpen` so the drawer is the sole onboarding surface whenever it's open. Closes #107. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

vercel · 2026-05-06T19:54:58Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
animalcrossingwebapp	Ready	Preview, Comment	May 6, 2026 8:02pm

Copilot

Pull request overview

This PR fixes an onboarding visual bug where the canvas-level empty-state message was still visible behind the TownManager drawer’s backdrop on first load (no towns), by suppressing the canvas empty-state while the TownManager is open.

Changes:

Gate ACCanvas’s <EmptyState> rendering on noTowns && !townManagerOpen.
Add a new useUIStore unit test file covering TownManager open/close state and a basic “gate” assertion.
Document the fix in CHANGELOG.md.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
src/components/ACCanvas.tsx	Suppresses the canvas empty-state message while the TownManager drawer is open.
src/lib/uiStore.test.ts	Adds store lifecycle tests and a basic assertion for the empty-state gating condition.
CHANGELOG.md	Notes the onboarding empty-state/backdrop fix in the “Fixed” section.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

  const toggle = useAppStore(s => s.toggle);
+  const townManagerOpen = useUIStore(s => s.townManagerOpen);



+  it('opens in forceCreate mode when no towns exist', () => {
+    useUIStore.getState().openTownManager(true);
+    const { townManagerOpen, townManagerForceCreate } = useUIStore.getState();
+    expect(townManagerOpen).toBe(true);
+    expect(townManagerForceCreate).toBe(true);


+  it('canvas empty-state gate: suppressed when townManagerOpen is true', () => {
+    // Simulates the ACCanvas condition: noTowns && !townManagerOpen
+    const noTowns = true;
+
+    useUIStore.getState().openTownManager(true);
+    const { townManagerOpen } = useUIStore.getState();
+    expect(noTowns && !townManagerOpen).toBe(false); // empty-state suppressed
+
+    useUIStore.getState().closeTownManager();
+    const { townManagerOpen: closedOpen } = useUIStore.getState();
+    expect(noTowns && !closedOpen).toBe(true); // empty-state visible when drawer closed


Previous fix fell through to <FullView /> when noTowns && townManagerOpen, showing a stale populated HomeTab behind the backdrop blur — worse than the original bug. Simplify to `noTowns ? null : <FullView />`: the drawer is the sole onboarding surface and the full view must never mount without an active town. Removes now-unused EmptyState + useUIStore imports from ACCanvas. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…LAUDE.md Six source files and seven test files shipped in v0.9.1 and v0.9.3 were never added to the File Structure section of CLAUDE.md: Components (v0.9.1): - CreditsPage.tsx, CreditsRoute.tsx — /credits route body and wrapper Components (v0.9.3): - ImportSaveModal.tsx — import save-file modal (mounted at App layout level) Lib (v0.9.3): - saveFile.ts, saveFileImport.ts, saveFileReconcile.ts — save-file schema, parser/validator, and reconciler - saveFile.test.ts, saveFileImport.test.ts, saveFileReconcile.test.ts - uiStore.test.ts — added in PR #110 No logic or behaviour changed; documentation only.

…LAUDE.md (#126) Six source files and seven test files shipped in v0.9.1 and v0.9.3 were never added to the File Structure section of CLAUDE.md: Components (v0.9.1): - CreditsPage.tsx, CreditsRoute.tsx — /credits route body and wrapper Components (v0.9.3): - ImportSaveModal.tsx — import save-file modal (mounted at App layout level) Lib (v0.9.3): - saveFile.ts, saveFileImport.ts, saveFileReconcile.ts — save-file schema, parser/validator, and reconciler - saveFile.test.ts, saveFileImport.test.ts, saveFileReconcile.test.ts - uiStore.test.ts — added in PR #110 No logic or behaviour changed; documentation only.

* docs(claude.md): mark prior betas shipped + add v0.9.4 next milestone - v0.9.0-beta: mark shipped 2026-05-03, remove stale "in progress" label and "Pending" sub-block (Phase 10 and PR #78 both landed in subsequent betas) - v0.9.1-beta: mark shipped 2026-05-04, drop "(pending)" from PR (c) — NOTICE file and /credits route are present in tree - Add v0.9.4-beta next-milestone entry: per-game icon gap fills sequenced ACWW → ACCF → ACNL → ACNH Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Add hand-drawn coelacanth fish icon Replace wiki-scraped 544×288 placeholder with hand-drawn 2048×2048 source, exported to 512×512 via sharp + pngquant (96.9% reduction, 46 KB). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Bump icon export target size from 512 to 768 Hand-drawn icons in icon-sources/ render in the expand panel at 192px CSS. 512px was only 2.67× retina; 768px gives a true 4× retina buffer so the painterly / grunge detail in the brushwork survives the downsample cleanly. Re-exported all four current hand-drawn sources (ant, coelacanth, koi, sea-bass) with --force. File sizes roughly double (~32–47 KB → ~56–97 KB) which is acceptable given the visual quality gain. Wiki-scraped icons (public/icons/acgcn/**) are unaffected — they go through fetch-icons.ts, a separate pipeline that does not use TARGET_SIZE. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * docs: update roadmap to v0.9.3 shipped state + v0.9.4 plan - Bump last-updated date to 2026-05-07 - Mark v0.9.2-beta (2026-05-05) and v0.9.3-beta (2026-05-06) as shipped - Rewrite v0.9.3 note: JSON save-file round-trip (not CSV import) - Add v0.9.4 note: silhouette rendering (headline) + ACWW gap-fill + 768px icons - Drop ACCF gap-fill row (0 unique items post cross-game routing); renumber v0.9.5-v0.9.8 - Update sequence table with new version numbering - Correct hand-drawn canvas size (2048×2048, not 512×512); add progress count (4/255) - Add Post-v1.0 ideas section (Challenge Mode, art real-vs-fake) - Add Cloud-hosted full-resolution gallery section (opportunistic) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat: silhouette rendering for un-donated items (Closes #116) Render un-donated species as black silhouettes that fade to full color on donation, matching the canonical Animal Crossing museum experience. - CSS filter (`brightness(0)`) on existing PNGs — preserves alpha, no new assets - 300ms fade reveal on donation; honors `prefers-reduced-motion` - New `museumDisplay.silhouettesEnabled` setting on the persisted app store, defaulting ON. Single global toggle in a new "Museum display" section in Settings — no per-category granularity by design - `ItemIcon` now accepts a `donated?: boolean` prop and conveys donation state via `alt` text for screen readers ("…, not yet donated" / "…, donated") - Wired across category rows, expand panels, Home shelves, search results, and the recent-activity feed * Fill ACWW icon gaps (#119) * Fill ACWW icon gaps via Fandom wiki scrape (84 items) Scrapes all 84 items missing from the flat icon manifest for Wild World: fish (21), bugs (27), fossils (27), art (9). Resolver path summary: - 75 items resolved algorithmically (a:bare, b:disambig) on first pass - 9 fossil items required OVERRIDES: - ankylosaur-skull/torso/tail: wiki uses full "Ankylosaurus" (-us suffix) - pachycephalosaur-skull/torso/tail: wiki uses full "Pachycephalosaurus" - fern-fossil, shark-tooth, peking-man: pages exist but lack pageimages.original; resolved via { file: } direct-file override New files in scripts/lib/icon-resolver.ts: - 9 ACWW art painting overrides (lowercase second word, same pattern as ACGCN "Academic painting") - 9 ACWW fossil overrides for the resolver-ceiling items above Adds scripts/fetch-icons-acww.ts as the ACWW entry point following the established pattern from scripts/fetch-icons.ts (ACGCN). Audit post-scrape: ACWW 184/184 (100%). Shared ids also lifted ACCF 95.5%, ACNL 49.1%, ACNH 39.1%. Build: clean. Tests: 129/129 passed. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * Fix Prettier formatting in fetch-icons-acww.ts Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> * release: v0.9.4-beta (#120) Bumps package version to 0.9.4-beta and finalizes the CHANGELOG entry covering silhouette rendering (PR #118, closes #116), ACWW icon gap-fill (PR #119), the 768px hand-drawn icon pipeline (PR #115), and the coelacanth icon (PR #114). Updates README, CLAUDE.md, architecture docs, the public version-history timeline, and the roadmap doc to reflect v0.9.4-beta as the current release. * docs(sync): backfill art/sea data entries + update version-history (#123) - CLAUDE.md: add art.json for acww/accf; add full acnl/ section (fish, bugs, fossils, art, sea_creatures) — all files present since v0.8.0/v0.9.0 but never listed in the file-structure block - README.md: add art counts to acww (20) and accf (23) data lines; add art + sea_creatures to acnl line - .claude/rules/architecture.md: replace stale "ACWW + ACCF art incoming via PR #78" with current "Art for all five games" summary - public/version-history.html: bump release count 13→16, days elapsed 25→29, header date May 5→May 9; update "Currently building" checklist to reflect v0.9.4-beta as the latest shipped https://claude.ai/code/session_012rf2b3KMvBYRFMqzujpomY Co-authored-by: Claude <noreply@anthropic.com> * docs(changelog): restore missing v prefix on [0.9.4-beta] and [0.9.3-beta] entries (#125) All CHANGELOG entries from [v0.9.0-beta] through [v0.9.2-beta] carry the conventional `v` prefix. The two most recent entries ([0.9.4-beta] and [0.9.3-beta]) were written without it, breaking the established pattern. Corrects to [v0.9.4-beta] and [v0.9.3-beta] for consistency. Detected by nightly doc-sync run 2026-05-09. * docs(claude): add v0.9.1/v0.9.3 file-structure entries missing from CLAUDE.md (#126) Six source files and seven test files shipped in v0.9.1 and v0.9.3 were never added to the File Structure section of CLAUDE.md: Components (v0.9.1): - CreditsPage.tsx, CreditsRoute.tsx — /credits route body and wrapper Components (v0.9.3): - ImportSaveModal.tsx — import save-file modal (mounted at App layout level) Lib (v0.9.3): - saveFile.ts, saveFileImport.ts, saveFileReconcile.ts — save-file schema, parser/validator, and reconciler - saveFile.test.ts, saveFileImport.test.ts, saveFileReconcile.test.ts - uiStore.test.ts — added in PR #110 No logic or behaviour changed; documentation only. * feat(icons): add hand-drawn frog (fish) (#128) 2048×2048 Procreate source committed to icon-sources/fish/frog.png; optimized 768×768 deploy asset exported via icons:export pipeline (2.36 MB → 148 KB, 93.9% reduction). Replaces scraped wiki asset. Manifest regenerated. * Fill ACNL icon gaps (#127) * feat(icons): tighten resolver for ACNL gap-fill - Deprioritize /Gallery subpages in c:search so the parent article wins when both exist; preserves the Gallery as a fallback when the parent has no pageimages. - Add ACNL fossils OVERRIDES for Latin-genus oddities the algorithmic chain trips on (megacero → Megaloceros, deinony → Deinonychus, australopith → Australopithecus). - Add ACNL OVERRIDES for wrong-content cases where the bare title exists but pageimages.original lives elsewhere (great-white-shark, giant-water-bug). - Add ACNL OVERRIDES for "beetle"-suffix-stripped wiki titles (cyclommatus/golden/giraffe stag) and other anglicized names (man-faced stink bug, pearl oyster (deep-sea creature)). - Add ACNL OVERRIDES collapsing split-panel art to the single wiki page (wild-painting-{left,right}-half → Wild painting). - Add scripts/spike-acnl-icons.ts (10-item recon) and scripts/dry-run-acnl-icons.ts (resolve-only across all uncovered items) for honest-auditing before the full fetch run. The dry-run also adds sea_creatures: 'deep-sea creature' as a step-(b) disambig so the parent article wins over the Gallery for octopus, lobster, pearl-oyster — generalizes to ACNH next cycle. * feat(icons): scrape ACNL — 135 icons + 10 logged wiki gaps ACNL coverage 49.1% → 96.5% (275/285). Bonus cross-game routing lift: ACCF 95.5% → 100% (full coverage), ACNH 39.1% → 68.8% (sequenced for v0.9.6). - Add scripts/fetch-icons-acnl.ts (mirror of fetch-icons-acww.ts; adds the sea_creatures category branch). - Commit 135 fetched icons under public/icons/<category>/. - Regenerate public/icons/manifest.json (fish:84 bugs:95 fossils:86 art:40 sea_creatures:32). - Refresh docs/v0.9.2-icon-coverage-audit.md. - Log the 10 genuine wiki-gap items to scripts/missing-acnl.txt: pterodactyl-{skull,left-wing,right-wing}, dinopithecus-{skull,torso, tail}, opabinia, sakura-shrimp, blue-jellyfish, sea-angel. These fall through to ItemIcon's monogram-placeholder fallback. None have a Fandom page or a workable file: target — verified via direct API probes. Audit: - 145 targets, 135 downloaded, 10 logged misses (all anticipated by the dry-run). - 6/6 risky-chain hits (c:search + d:html) sample-audited; 0 failures. Three /Gallery-subpage hits (rajah-brooke-birdwing, atlas-moth, madagascan-sunset-moth) verified — parent article genuinely lacks pageimages, gallery is the only image source. Three d:html hits (ichthyosaurus-{skull,torso,tail}) all share the species infobox image, same shape as ACWW piece-suffix fossils. - npm test: 129/129 passed. npm run build: clean. scripts/resolve-report-acnl.txt is committed as a paper trail of which items resolved via which chain step — useful for the v0.9.6 ACNH scrape, where many of the same patterns (deep-sea-creature disambig, Latin-genus truncation) will fire again. * style(scripts): lint + prettier fixes for ACNL gap-fill scripts * chore: polish nits — close #60, #92.2, #92.4, #95, #124 (#130) Bundle three small fixes into one PR (two were already resolved): - version-history.html velocity headline corrected to 29 days (#124) - useIconChecker closure memoized with useMemo to avoid new function ref each render (#95) - vi.unstubAllGlobals cleanup added to ItemIcon test afterEach to prevent global stub leakage (#92 item 4) Fixes #60 and #92 item 2 were already resolved at inspection time and dropped from this bundle. Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(icons): add hand-drawn robust cicada + brown cicada (bugs) (#131) * release: v0.9.5-beta ACNL icon gap-fill (96.5% coverage, ACCF to 100% via cross-game), three hand-drawn icons (frog, robust cicada, brown cicada), polish nits roll-up. --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings May 6, 2026 19:54

vercel Bot deployed to Preview May 6, 2026 19:55 View deployment

Copilot started reviewing on behalf of jacuzzicoding May 6, 2026 19:55 View session

Copilot AI reviewed May 6, 2026

View reviewed changes

vercel Bot deployed to Preview May 6, 2026 20:02 View deployment

jacuzzicoding mentioned this pull request May 6, 2026

test(onboarding): render-based ACCanvas tests for empty-state gating #111

Open

jacuzzicoding merged commit c0b69f3 into development May 6, 2026
3 checks passed

jacuzzicoding deleted the fix/onboarding-message-behind-blur branch May 6, 2026 20:10

jacuzzicoding mentioned this pull request May 6, 2026

release: v0.9.3-beta #112

Merged

4 tasks

jacuzzicoding mentioned this pull request May 10, 2026

doc-sync: add v0.9.1/v0.9.3 file-structure entries missing from CLAUDE.md #126

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(onboarding): hide canvas empty-state message while TownManager is open#110

fix(onboarding): hide canvas empty-state message while TownManager is open#110
jacuzzicoding merged 2 commits into
developmentfrom
fix/onboarding-message-behind-blur

jacuzzicoding commented May 6, 2026

Uh oh!

vercel Bot commented May 6, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const toggle = useAppStore(s => s.toggle);
		const townManagerOpen = useUIStore(s => s.townManagerOpen);

Conversation

jacuzzicoding commented May 6, 2026

Bug

Fix

Tests

Test plan

Uh oh!

vercel Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel Bot commented May 6, 2026 •

edited

Loading