Skip to content

v0.12.0.md

Latest commit

 

History

History
147 lines (111 loc) · 4.77 KB

v0.12.0.md

File metadata and controls

147 lines (111 loc) · 4.77 KB

v0.12.0 - UI Polish & Statistics

Overview

Comprehensive UI polish, dark mode fixes, responsive scaling, and statistics visualisation enhancements.

Features Implemented

UI Polish

Fix Description Status
Cmd-R Soft Refresh Intercept browser reload, show confirmation dialogue ✅ Complete
Dark Mode (CollectionToast) Fix black text on black background ✅ Complete
Dark Mode (CollectionPicker) Fix CSS variable naming ✅ Complete
App Logo (Inline SVG) Convert to inline SVG for currentColor support ✅ Complete
Card Border Scaling Proportional border width for card sizes ✅ Complete
Rank Badge Scaling Size-responsive padding and font ✅ Complete
iPhone Large Cards Disable large card size on small screens ✅ Complete
Game Overlay z-index Fix completion modal overlapping stats bar ✅ Complete
Settings Footer Remove Reset button, reposition Accept/Cancel ✅ Complete
Drag Handle Visibility Keep visible but inactive during flip ✅ Complete
Background Zoom Change from cover to 110% ✅ Complete
YouTube Thumbnails Fix compact mode thumbnail for video URLs ✅ Complete

Architecture Changes

Change Description Status
Hardcoded Sources Removed Dynamic discovery via REPPL/MyPlausibleMe ✅ Complete
Card Back Default Changed from "year" to "logo" ✅ Complete

Statistics Enhancement

Component Description Status
BarChart.tsx Horizontal bar distribution visualisation ✅ Complete
StatisticsBar Update Expanded panel with bar charts ✅ Complete

Memory Game Settings

Component Description Status
Settings.tsx Card count and difficulty options ✅ Complete
types.ts Memory mechanic type definitions ✅ Complete

Dependencies

  • v0.11.5: UI Refinements & Documentation Sync (prerequisite)

Key Implementation Notes

Dark Mode Pattern

CSS Modules require explicit dark mode selectors for each class:

[data-theme="dark"] .className,
[data-colour-scheme="dark"] .className {
  color: #f9fafb;
}

Inline SVG Pattern

When SVG needs to inherit colour from CSS, use inline components:

function AppLogoIcon({ className }) {
  return (
    <svg viewBox="0 0 100 100" fill="currentColor" className={className}>
      {/* paths */}
    </svg>
  );
}

Responsive Scaling Pattern

Use CSS custom properties with calc for proportional sizing:

.card[data-card-size="small"] { --card-border-width-scale: 0.5; }
.card[data-card-size="large"] { --card-border-width-scale: 1.5; }

.cardFace {
  border: calc(var(--card-border-width) * var(--card-border-width-scale)) solid var(--card-border-colour);
}

Files Modified

New Components

  • src/components/Statistics/BarChart.tsx
  • src/components/Statistics/BarChart.module.css
  • src/mechanics/memory/Settings.tsx
  • src/mechanics/memory/Settings.module.css
  • src/mechanics/memory/types.ts
  • src/loaders/githubDiscovery.ts

Modified Components

  • CollectionToast.module.css - Dark mode fixes
  • CollectionPicker.module.css - CSS variable fix
  • Card.module.css - Border scaling, drag handle inactive
  • CardBack.tsx - Inline SVG, drag handle visibility
  • RankBadge.module.css - Size scaling
  • SettingsPanel.tsx - Remove Reset button
  • StatisticsBar.tsx - Bar chart integration
  • memory.module.css - z-index fix
  • main.tsx - Cmd-R interception

Modified Stores

  • sourceStore.ts - Remove hardcoded sources
  • settingsStore.ts - Default cardBackDisplay

Release Preparation

  • All features implemented
  • Tests passing
  • Documentation updated
  • Devlog created
  • Retrospective written

Deferred to Future Milestones

The following features originally planned for v0.12.0 have been moved to v0.12.5:

ID Feature New Target
F-057 Memory Game Mechanic (full) ✅ v0.11.0
F-058 Collection Mechanic ✅ v0.14.0
F-061 Snap Ranking Mechanic ✅ v0.12.5
F-037 Card Sorting ⚠️ Partial (v0.15.5)
F-091 Entity Auto-Discovery ✅ v0.11.5

Related Documentation

Status: Complete