Moon card

1<AppMoonCard angle={135} />

1/** The moon artwork and label for a phase angle, with the app's bands (moon_mini_card.dart). */2export function moonPhase(angle: number): { asset: string; label: string } {

1/** MoonMiniCard: the painted moon, illumination and phase name. */2export function AppMoonCard({ angle, illumination }: { angle: number; illumination?: number }) {3  const { asset, label } = moonPhase(angle);4  const lit = Math.round((illumination ?? (1 - Math.cos((angle * Math.PI) / 180)) / 2) * 100);5  return (6    <div className="app-ui app-card is-mini">7      <div className="app-card-head">8        <span className="app-label-sm">MOON</span>9        <span className="app-label-sm" style={{ color: "var(--c-text)" }}>{lit}%</span>10      </div>11      <div className="app-moon-body">12        {/* eslint-disable-next-line @next/next/no-img-element */}13        <img className="app-moon-img" src={`/app/${asset}.webp`} alt={label} />14      </div>15      <span className="app-label-md app-moon-name">{label}</span>16    </div>17  );18}

1.app-card {2  position: relative;3  box-sizing: border-box;4  display: flex;5  flex-direction: column;6  padding: var(--spacing-f13);7  border-radius: var(--radius-f21);8  border: var(--spacing-f1) solid var(--hair-strong);9  background: var(--sheen), var(--fill);10  box-shadow: var(--highlight);11  backdrop-filter: blur(var(--spacing-f13));12  overflow: hidden;13}1415.app-card.is-mini { width: var(--spacing-f144); height: calc(var(--spacing-f144) + var(--spacing-f21)); flex: none; }1617.app-card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-f8); }1819.app-moon-body { flex: 1; display: grid; place-items: center; }2021.app-moon-img { width: var(--spacing-f89); height: var(--spacing-f89); object-fit: contain; }

1MoonMiniCard(2moonPhaseInfo: MoonPhaseInfo(phaseAngle: 135, illumination: 0.85),3)

1/// The glass surface for cards: a sheen over the surface and a hairline edge.2/// Cards do not glow; glow belongs to buttons and tiles. Mini cards are3/// [AstrSpace.f144] wide and 144 + 21 tall.4class AstrGlassCard extends StatelessWidget {5  const AstrGlassCard({6    super.key,7    required this.child,8    this.width,9    this.height,10  });1112  final Widget child;13  final double? width;14  final double? height;1516  @override17  Widget build(BuildContext context) {18    final Color text = AstrColors.spaceGrey[50]!;19    final BorderRadius radius = BorderRadius.circular(AstrRadius.f21);2021    return RepaintBoundary(22      child: ClipRRect(23        borderRadius: radius,24        child: BackdropFilter(25          filter: ImageFilter.blur(sigmaX: AstrSpace.f13, sigmaY: AstrSpace.f13),26          child: Container(27            width: width,28            height: height,29            padding: const EdgeInsets.all(AstrSpace.f13),30            decoration: BoxDecoration(31              borderRadius: radius,32              border: Border.all(color: text.withValues(alpha: Mag.m5)),33              color: _ink.withValues(alpha: Mag.m1),34              gradient: LinearGradient(35                begin: Alignment.topLeft,36                end: Alignment.bottomRight,37                colors: <Color>[38                  text.withValues(alpha: Mag.m5),39                  text.withValues(alpha: Mag.m8),40                ],41              ),42            ),43            child: child,44          ),45        ),46      ),47    );48  }49}

1class MoonMiniCard extends StatelessWidget {2  const MoonMiniCard({3    super.key,4    required this.moonPhaseInfo,5  });67  final MoonPhaseInfo moonPhaseInfo;89  @override10  Widget build(BuildContext context) {11    final String moonAsset = _getMoonAsset(moonPhaseInfo);12    final String moonPhaseLabel = _getMoonPhaseLabel(moonPhaseInfo);13    final int illuminationPercent = (moonPhaseInfo.illumination * 100).round();1415    return GestureDetector(16      onTap: () {17        showModalBottomSheet<void>(18          context: context,19          backgroundColor: Colors.transparent,20          isScrollControlled: true,21          builder: (BuildContext ctx) => CelestialDetailSheet(22            objectId: 'moon',23            title: 'Moon',24            subtitle: moonPhaseLabel,25          ),26        );27      },28      child: RepaintBoundary(29        child: ClipRRect(30          borderRadius: BorderRadius.circular(AppSpacing.kCardRadius),31          child: BackdropFilter(32            filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),33            child: Container(34              width: AppSpacing.kMiniCardWidth,35              height: AppSpacing.kMiniCardHeight,36              decoration: BoxDecoration(37                color: AppColors.surfaceOverlay,38                border: Border.all(color: AppColors.borderPrimary),39                borderRadius: BorderRadius.circular(AppSpacing.kCardRadius),40              ),41              child: Stack(42                children: <Widget>[43                  Positioned(44                    top: 15,45                    left: 15,46                    child: Text(47                      'MOON',48                      style: AppTypography.labelSm.copyWith(color: AppColors.textMuted),49                    ),50                  ),51                  Positioned(52                    top: 15,53                    right: 15,54                    child: Text(55                      '$illuminationPercent%',56                      style: AppTypography.labelSm.copyWith(color: AppColors.textPrimary),57                    ),58                  ),59                  Positioned(60                    top: 32,61                    left: 33,62                    width: 98,63                    height: 92,64                    child: Image.asset(65                      moonAsset,66                      fit: BoxFit.contain,67                    ),68                  ),69                  Positioned(70                    bottom: 15,71                    left: 0,72                    right: 0,73                    child: Center(74                      child: Text(75                        moonPhaseLabel,76                        style: AppTypography.labelMd.copyWith(color: AppColors.textPrimary),77                      ),78                    ),79                  ),80                ],81              ),82            ),83          ),84        ),85      ),86    );87  }8889  static String _getMoonAsset(MoonPhaseInfo info) {90    final double angle = info.phaseAngle;9192    if (angle >= 355 || angle <= 5) return 'assets/img/moon_new.webp';93    if (angle > 5 && angle < 85) return 'assets/img/moon_waxing_crescent.webp';94    if (angle >= 85 && angle <= 95) return 'assets/img/moon_first_quarter.webp';95    if (angle > 95 && angle < 175) return 'assets/img/moon_waxing_gibbous.webp';96    if (angle >= 175 && angle <= 185) return 'assets/img/moon_full.webp';97    if (angle > 185 && angle < 265) return 'assets/img/moon_waning_gibbous.webp';98    if (angle >= 265 && angle <= 275) return 'assets/img/moon_last_quarter.webp';99    if (angle > 275 && angle < 355) return 'assets/img/moon_waning_crescent.webp';100101    return 'assets/img/moon_waning_gibbous.webp';102  }103104  static String _getMoonPhaseLabel(MoonPhaseInfo info) {105    final double angle = info.phaseAngle;106107    if (angle >= 355 || angle <= 5) return 'New Moon';108    if (angle > 5 && angle < 85) return 'Waxing Crescent';109    if (angle >= 85 && angle <= 95) return 'First Quarter';110    if (angle > 95 && angle < 175) return 'Waxing Gibbous';111    if (angle >= 175 && angle <= 185) return 'Full Moon';112    if (angle > 185 && angle < 265) return 'Waning Gibbous';113    if (angle >= 265 && angle <= 275) return 'Last Quarter';114    if (angle > 275 && angle < 355) return 'Waning Crescent';115116    return 'Moon';117  }118}