Skip to content

fix: UX polish — z-index, header, scroll, persistence, sticky buy-all#21

Merged
Fralleee merged 4 commits into
mainfrom
fix/ux-polish-pass
Apr 17, 2026
Merged

fix: UX polish — z-index, header, scroll, persistence, sticky buy-all#21
Fralleee merged 4 commits into
mainfrom
fix/ux-polish-pass

Conversation

@Fralleee
Copy link
Copy Markdown
Owner

@Fralleee Fralleee commented Apr 17, 2026

Summary

Six small UX fixes surfaced during play:

  • Powerups above drawers — spawn buttons bumped to z-60 with pointer-events-auto so they stay visible and clickable while a drawer is open.
  • Two-column header on mobile — LoC counter is full-height on the left; stats and Ship button stack as two rows on the right. Desktop layout unchanged.
  • "LoC/s each" removed from building card descriptions; the total /s on the bottom row already carries the info.
  • Scrollbar flicker — added scrollbar-gutter: stable to shop, stats, code editor, and the ActiveBuffBar scrollers so the gutter stays reserved and width no longer oscillates.
  • Buy quantity persists — new useLocalStorageState hook with a type-guard stores the selection under codeclicker_buy_qty, separate from the game save so no migration is needed.
  • Sticky "Buy All Affordable" — wrapped in a position: sticky band at the top of the upgrades list with a solid background so it stays reachable while scrolling.

Test plan

  • Trigger a buff spawn, open the help drawer and the mobile shop drawer — powerup stays above and remains clickable.
  • Resize below lg — LoC is full-height on the left, stats and Ship button stack on the right. Desktop unchanged.
  • Open shop → buildings tab — no "(/s each)" text next to the description.
  • Play for ~30s and switch tabs in shop/stats — no scrollbar width oscillation. Active-buff bar still scrolls horizontally when many buffs stack, without flicker.
  • Pick x10 → reload → still x10. Hand-edit localStorage to garbage → reload falls back to x1.
  • Open upgrades tab with many entries, scroll — Buy All stays pinned at the top; cards scroll under it.

🤖 Generated with Claude Code

- Raise powerup/bug spawn buttons to z-60 with pointer-events-auto so
  they render above drawers and stay clickable while drawers are open
- Restructure TopBar: LoC counter full-height on left, stats + Ship
  button stacked on right for mobile; desktop layout unchanged
- Drop '(x/s each)' from building cards; total /s on bottom is enough
- Add scrollbar-gutter:stable to shop/stats/editor scrollers and switch
  ActiveBuffBar to overflow-x-hidden to eliminate scrollbar flicker
- Persist buy-quantity selector to localStorage via a small
  useLocalStorageState hook with type-guard validation
- Pin 'Buy All Affordable' button to the top of the upgrades list with
  position: sticky so it stays reachable while scrolling

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 17, 2026

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

Project Deployment Actions Updated (UTC)
code-clicker Ready Ready Preview, Comment Apr 17, 2026 5:51pm

This comment was marked as resolved.

Addresses PR #21 review comments:
- Adds vitest coverage: empty storage, existing value, invalid JSON,
  validate-rejects, validate-accepts, write-back.
- Documents that `key` is expected to be stable for the component
  lifetime; changing it won't re-read storage.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

This comment was marked as resolved.

- ShopPanel: drop redundant re-sort of upgrades (selectVisibleUpgrades
  already sorts by cost) and use the render-snapshot state for the
  'Buy All Affordable' disabled check instead of re-reading the store
  inside a .some() callback
- ActiveBuffBar: restore overflow-x-auto so many active buffs stay
  reachable; use scrollbar-gutter:stable to eliminate the flicker
- useLocalStorageState: guard against JSON.stringify returning
  undefined (functions/symbols/undefined values) by removing the key
  instead of writing the literal string "undefined"; added a test

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

This comment was marked as resolved.

This comment was marked as resolved.

Addresses PR #21 review feedback:
- Relocates the hook from src/utils/ to src/hooks/ to match the
  existing convention (useAutoSave, useGameLoop, etc.)
- Expands the stable-key doc comment to note that a `key` change
  would persist the current in-memory value under the new key
- Updates imports in ShopPanel and the test file

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 10 out of 10 changed files in this pull request and generated no new comments.


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

@Fralleee Fralleee merged commit c9701fc into main Apr 17, 2026
7 checks passed
@Fralleee Fralleee deleted the fix/ux-polish-pass branch April 17, 2026 17:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants