feat(ui): add sport backgrounds to share cards, achievement filtering, and wizard validation

- Add ShareCardSportBackground with floating sport icons for share cards
- Share cards now show sport-specific backgrounds (single or multiple sports)
- Achievement collection share respects sport filter selection
- Add ability to share individual achievements from detail sheet
- Trip wizard ReviewStep highlights missing required fields in red
- Add FieldValidation model to TripWizardViewModel

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Trey t
2026-01-14 12:02:57 -06:00
parent 1e26cfebc8
commit 3d4952e5ff
9 changed files with 255 additions and 23 deletions

View File

@@ -38,6 +38,8 @@ struct AchievementSpotlightContent: ShareableContent {
struct AchievementCollectionContent: ShareableContent {
let achievements: [AchievementProgress]
let year: Int
var sports: Set<Sport> = [] // Sports for background icons
var filterSport: Sport? = nil // The sport filter applied (for header title)
var cardType: ShareCardType { .achievementCollection }
@@ -46,6 +48,8 @@ struct AchievementCollectionContent: ShareableContent {
let cardView = AchievementCollectionView(
achievements: achievements,
year: year,
sports: sports,
filterSport: filterSport,
theme: theme
)
@@ -120,9 +124,16 @@ private struct AchievementSpotlightView: View {
let achievement: AchievementProgress
let theme: ShareTheme
private var sports: Set<Sport> {
if let sport = achievement.definition.sport {
return [sport]
}
return []
}
var body: some View {
ZStack {
ShareCardBackground(theme: theme)
ShareCardBackground(theme: theme, sports: sports)
VStack(spacing: 50) {
Spacer()
@@ -176,6 +187,8 @@ private struct AchievementSpotlightView: View {
private struct AchievementCollectionView: View {
let achievements: [AchievementProgress]
let year: Int
let sports: Set<Sport>
let filterSport: Sport?
let theme: ShareTheme
private let columns = [
@@ -184,13 +197,20 @@ private struct AchievementCollectionView: View {
GridItem(.flexible(), spacing: 30)
]
private var headerTitle: String {
if let sport = filterSport {
return "My \(String(year)) \(sport.rawValue) Achievements"
}
return "My \(String(year)) Achievements"
}
var body: some View {
ZStack {
ShareCardBackground(theme: theme)
ShareCardBackground(theme: theme, sports: sports)
VStack(spacing: 40) {
// Header
Text("My \(String(year)) Achievements")
Text(headerTitle)
.font(.system(size: 48, weight: .bold, design: .rounded))
.foregroundStyle(theme.textColor)
@@ -241,9 +261,16 @@ private struct AchievementMilestoneView: View {
private let goldColor = Color(hex: "FFD700")
private var sports: Set<Sport> {
if let sport = achievement.definition.sport {
return [sport]
}
return []
}
var body: some View {
ZStack {
ShareCardBackground(theme: theme)
ShareCardBackground(theme: theme, sports: sports)
// Confetti burst pattern
ConfettiBurst()
@@ -304,9 +331,16 @@ private struct AchievementContextView: View {
let mapSnapshot: UIImage?
let theme: ShareTheme
private var sports: Set<Sport> {
if let sport = achievement.definition.sport {
return [sport]
}
return []
}
var body: some View {
ZStack {
ShareCardBackground(theme: theme)
ShareCardBackground(theme: theme, sports: sports)
VStack(spacing: 40) {
// Header with badge and name

View File

@@ -53,7 +53,7 @@ private struct ProgressCardView: View {
var body: some View {
ZStack {
ShareCardBackground(theme: theme)
ShareCardBackground(theme: theme, sports: [progress.sport])
VStack(spacing: 40) {
ShareCardHeader(

View File

@@ -13,13 +13,18 @@ import UIKit
struct ShareCardBackground: View {
let theme: ShareTheme
var sports: Set<Sport>? = nil
var body: some View {
LinearGradient(
colors: theme.gradientColors,
startPoint: .top,
endPoint: .bottom
)
if let sports = sports, !sports.isEmpty {
ShareCardSportBackground(sports: sports, theme: theme)
} else {
LinearGradient(
colors: theme.gradientColors,
startPoint: .top,
endPoint: .bottom
)
}
}
}

View File

@@ -0,0 +1,80 @@
//
// ShareCardSportBackground.swift
// SportsTime
//
// Sport-specific background with floating league icons for share cards.
//
import SwiftUI
struct ShareCardSportBackground: View {
let sports: Set<Sport>
let theme: ShareTheme
/// Fixed positions for 12 scattered icons (x, y as percentage, rotation, scale)
private let iconConfigs: [(x: CGFloat, y: CGFloat, rotation: Double, scale: CGFloat)] = [
(0.08, 0.08, -20, 0.9),
(0.92, 0.05, 15, 0.85),
(0.15, 0.28, 25, 0.8),
(0.88, 0.22, -10, 0.95),
(0.05, 0.48, 30, 0.85),
(0.95, 0.45, -25, 0.9),
(0.12, 0.68, -15, 0.8),
(0.90, 0.65, 20, 0.85),
(0.08, 0.88, 10, 0.9),
(0.92, 0.85, -30, 0.8),
(0.50, 0.15, 5, 0.75),
(0.50, 0.90, -5, 0.75)
]
/// Get icon name for a given index, cycling through sports
private func iconName(at index: Int) -> String {
let sportArray = Array(sports).sorted { $0.rawValue < $1.rawValue }
guard !sportArray.isEmpty else {
return "sportscourt.fill"
}
return sportArray[index % sportArray.count].iconName
}
var body: some View {
ZStack {
// Base gradient
LinearGradient(
colors: theme.gradientColors,
startPoint: .top,
endPoint: .bottom
)
// Scattered sport icons
GeometryReader { geo in
ForEach(0..<iconConfigs.count, id: \.self) { index in
let config = iconConfigs[index]
Image(systemName: iconName(at: index))
.font(.system(size: 32 * config.scale))
.foregroundStyle(theme.accentColor.opacity(0.15))
.rotationEffect(.degrees(config.rotation))
.position(
x: geo.size.width * config.x,
y: geo.size.height * config.y
)
}
}
}
}
}
#Preview("Single Sport - MLB") {
ShareCardSportBackground(
sports: [.mlb],
theme: .sunset
)
.frame(width: 400, height: 600)
}
#Preview("Multiple Sports") {
ShareCardSportBackground(
sports: [.mlb, .nba, .nfl],
theme: .dark
)
.frame(width: 400, height: 600)
}

View File

@@ -60,7 +60,7 @@ private struct TripCardView: View {
var body: some View {
ZStack {
ShareCardBackground(theme: theme)
ShareCardBackground(theme: theme, sports: trip.uniqueSports)
VStack(spacing: 40) {
ShareCardHeader(

View File

@@ -38,11 +38,27 @@ struct AchievementsListView: View {
.navigationTitle("Achievements")
.toolbar {
ToolbarItem(placement: .topBarTrailing) {
if !earnedAchievements.isEmpty {
// Share only achievements matching current filter
let achievementsToShare = selectedSport != nil
? filteredAchievements.filter { $0.isEarned }
: earnedAchievements
// Collect sports for background: single sport if filtered, all sports from achievements if "All"
let sportsForBackground: Set<Sport> = {
if let sport = selectedSport {
return [sport]
}
// Extract all unique sports from earned achievements
return Set(achievementsToShare.compactMap { $0.definition.sport })
}()
if !achievementsToShare.isEmpty {
ShareButton(
content: AchievementCollectionContent(
achievements: earnedAchievements,
year: Calendar.current.component(.year, from: Date())
achievements: achievementsToShare,
year: Calendar.current.component(.year, from: Date()),
sports: sportsForBackground,
filterSport: selectedSport
),
style: .icon
)
@@ -573,6 +589,16 @@ struct AchievementDetailSheet: View {
ToolbarItem(placement: .cancellationAction) {
Button("Done") { dismiss() }
}
if achievement.isEarned {
ToolbarItem(placement: .primaryAction) {
ShareButton(
content: AchievementSpotlightContent(achievement: achievement),
style: .icon
)
.foregroundStyle(completedGold)
}
}
}
}
}

View File

@@ -77,6 +77,17 @@ final class TripWizardViewModel {
hasSetRepeatCities
}
/// Field validation for the review step - shows which fields are missing
var fieldValidation: FieldValidation {
FieldValidation(
sports: selectedSports.isEmpty ? .missing : .valid,
dates: hasSetDates ? .valid : .missing,
regions: selectedRegions.isEmpty ? .missing : .valid,
routePreference: hasSetRoutePreference ? .valid : .missing,
repeatCities: hasSetRepeatCities ? .valid : .missing
)
}
// MARK: - Sport Availability
func canSelectSport(_ sport: Sport) -> Bool {
@@ -120,3 +131,18 @@ final class TripWizardViewModel {
mustStopLocations = []
}
}
// MARK: - Field Validation
struct FieldValidation {
enum Status {
case valid
case missing
}
let sports: Status
let dates: Status
let regions: Status
let routePreference: Status
let repeatCities: Status
}

View File

@@ -19,6 +19,7 @@ struct ReviewStep: View {
let mustStopLocations: [LocationInput]
let isPlanning: Bool
let canPlanTrip: Bool
let fieldValidation: FieldValidation
let onPlan: () -> Void
var body: some View {
@@ -30,11 +31,31 @@ struct ReviewStep: View {
VStack(alignment: .leading, spacing: Theme.Spacing.sm) {
ReviewRow(label: "Mode", value: planningMode.displayName)
ReviewRow(label: "Sports", value: selectedSports.map(\.rawValue).sorted().joined(separator: ", "))
ReviewRow(label: "Dates", value: dateRangeText)
ReviewRow(label: "Regions", value: selectedRegions.map(\.shortName).sorted().joined(separator: ", "))
ReviewRow(label: "Route", value: routePreference.displayName)
ReviewRow(label: "Repeat cities", value: allowRepeatCities ? "Yes" : "No")
ReviewRow(
label: "Sports",
value: selectedSports.isEmpty ? "Not selected" : selectedSports.map(\.rawValue).sorted().joined(separator: ", "),
isMissing: fieldValidation.sports == .missing
)
ReviewRow(
label: "Dates",
value: dateRangeText,
isMissing: fieldValidation.dates == .missing
)
ReviewRow(
label: "Regions",
value: selectedRegions.isEmpty ? "Not selected" : selectedRegions.map(\.shortName).sorted().joined(separator: ", "),
isMissing: fieldValidation.regions == .missing
)
ReviewRow(
label: "Route",
value: routePreference.displayName,
isMissing: fieldValidation.routePreference == .missing
)
ReviewRow(
label: "Repeat cities",
value: allowRepeatCities ? "Yes" : "No",
isMissing: fieldValidation.repeatCities == .missing
)
if !mustStopLocations.isEmpty {
ReviewRow(label: "Must-stops", value: mustStopLocations.map(\.name).joined(separator: ", "))
@@ -83,26 +104,33 @@ private struct ReviewRow: View {
@Environment(\.colorScheme) private var colorScheme
let label: String
let value: String
var isMissing: Bool = false
var body: some View {
HStack(alignment: .top) {
Text(label)
.font(.caption)
.foregroundStyle(Theme.textMuted(colorScheme))
.foregroundStyle(isMissing ? .red : Theme.textMuted(colorScheme))
.frame(width: 80, alignment: .leading)
Text(value)
.font(.subheadline)
.foregroundStyle(Theme.textPrimary(colorScheme))
.foregroundStyle(isMissing ? .red : Theme.textPrimary(colorScheme))
Spacer()
if isMissing {
Image(systemName: "exclamationmark.circle.fill")
.font(.caption)
.foregroundStyle(.red)
}
}
}
}
// MARK: - Preview
#Preview {
#Preview("All Valid") {
ReviewStep(
planningMode: .dateRange,
selectedSports: [.mlb, .nba],
@@ -114,6 +142,38 @@ private struct ReviewRow: View {
mustStopLocations: [],
isPlanning: false,
canPlanTrip: true,
fieldValidation: FieldValidation(
sports: .valid,
dates: .valid,
regions: .valid,
routePreference: .valid,
repeatCities: .valid
),
onPlan: {}
)
.padding()
.themedBackground()
}
#Preview("Missing Fields") {
ReviewStep(
planningMode: .dateRange,
selectedSports: [],
startDate: Date(),
endDate: Date().addingTimeInterval(86400 * 7),
selectedRegions: [],
routePreference: .balanced,
allowRepeatCities: false,
mustStopLocations: [],
isPlanning: false,
canPlanTrip: false,
fieldValidation: FieldValidation(
sports: .missing,
dates: .valid,
regions: .missing,
routePreference: .valid,
repeatCities: .missing
),
onPlan: {}
)
.padding()

View File

@@ -72,6 +72,7 @@ struct TripWizardView: View {
mustStopLocations: viewModel.mustStopLocations,
isPlanning: viewModel.isPlanning,
canPlanTrip: viewModel.canPlanTrip,
fieldValidation: viewModel.fieldValidation,
onPlan: { Task { await planTrip() } }
)
}