Add Stadium Progress system and themed loading spinners
Stadium Progress & Achievements: - Add StadiumVisit and Achievement SwiftData models - Create Progress tab with interactive map view - Implement photo-based visit import with GPS/date matching - Add achievement badges (count-based, regional, journey) - Create shareable progress cards for social media - Add canonical data infrastructure (stadium identities, team aliases) - Implement score resolution from free APIs (MLB, NBA, NHL stats) UI Improvements: - Add ThemedSpinner and ThemedSpinnerCompact components - Replace all ProgressView() with themed spinners throughout app - Fix sport selection state not persisting when navigating away Bug Fixes: - Fix Coast to Coast trips showing only 1 city (validation issue) - Fix stadium progress showing 0/0 (filtering issue) - Remove "Stadium Quest" title from progress view 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -103,6 +103,75 @@ struct AnimatedRouteGraphic: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Themed Spinner
|
||||
|
||||
/// A custom animated spinner matching the app's visual style
|
||||
struct ThemedSpinner: View {
|
||||
var size: CGFloat = 40
|
||||
var lineWidth: CGFloat = 4
|
||||
|
||||
@State private var rotation: Double = 0
|
||||
@State private var trimEnd: CGFloat = 0.6
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Background track
|
||||
Circle()
|
||||
.stroke(Theme.warmOrange.opacity(0.15), lineWidth: lineWidth)
|
||||
|
||||
// Animated arc
|
||||
Circle()
|
||||
.trim(from: 0, to: trimEnd)
|
||||
.stroke(
|
||||
AngularGradient(
|
||||
gradient: Gradient(colors: [Theme.warmOrange, Theme.routeGold, Theme.warmOrange.opacity(0.3)]),
|
||||
center: .center,
|
||||
startAngle: .degrees(0),
|
||||
endAngle: .degrees(360)
|
||||
),
|
||||
style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
|
||||
)
|
||||
.rotationEffect(.degrees(rotation))
|
||||
|
||||
// Center glow dot
|
||||
Circle()
|
||||
.fill(Theme.warmOrange.opacity(0.2))
|
||||
.frame(width: size * 0.3, height: size * 0.3)
|
||||
.blur(radius: 4)
|
||||
}
|
||||
.frame(width: size, height: size)
|
||||
.onAppear {
|
||||
withAnimation(.linear(duration: 1).repeatForever(autoreverses: false)) {
|
||||
rotation = 360
|
||||
}
|
||||
withAnimation(.easeInOut(duration: 0.8).repeatForever(autoreverses: true)) {
|
||||
trimEnd = 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Compact themed spinner for inline use
|
||||
struct ThemedSpinnerCompact: View {
|
||||
var size: CGFloat = 20
|
||||
var color: Color = Theme.warmOrange
|
||||
|
||||
@State private var rotation: Double = 0
|
||||
|
||||
var body: some View {
|
||||
Circle()
|
||||
.trim(from: 0, to: 0.7)
|
||||
.stroke(color, style: StrokeStyle(lineWidth: size > 16 ? 2.5 : 2, lineCap: .round))
|
||||
.frame(width: size, height: size)
|
||||
.rotationEffect(.degrees(rotation))
|
||||
.onAppear {
|
||||
withAnimation(.linear(duration: 0.8).repeatForever(autoreverses: false)) {
|
||||
rotation = 360
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Pulsing Dot
|
||||
|
||||
struct PulsingDot: View {
|
||||
@@ -188,10 +257,8 @@ struct PlanningProgressView: View {
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 24) {
|
||||
// Simple spinner
|
||||
ProgressView()
|
||||
.scaleEffect(1.5)
|
||||
.tint(Theme.warmOrange)
|
||||
// Themed spinner
|
||||
ThemedSpinner(size: 56, lineWidth: 5)
|
||||
|
||||
// Current step text
|
||||
Text(steps[currentStep])
|
||||
@@ -284,8 +351,96 @@ struct EmptyStateView: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Loading Overlay
|
||||
|
||||
/// A modal loading overlay with progress indication
|
||||
/// Reusable pattern from PDF export overlay
|
||||
struct LoadingOverlay: View {
|
||||
let message: String
|
||||
var detail: String?
|
||||
var progress: Double?
|
||||
var icon: String = "hourglass"
|
||||
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Background dimmer
|
||||
Color.black.opacity(0.6)
|
||||
.ignoresSafeArea()
|
||||
|
||||
// Progress card
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
// Progress ring or spinner
|
||||
ZStack {
|
||||
Circle()
|
||||
.stroke(Theme.cardBackgroundElevated(colorScheme), lineWidth: 8)
|
||||
.frame(width: 80, height: 80)
|
||||
|
||||
if let progress = progress {
|
||||
Circle()
|
||||
.trim(from: 0, to: progress)
|
||||
.stroke(Theme.warmOrange, style: StrokeStyle(lineWidth: 8, lineCap: .round))
|
||||
.frame(width: 80, height: 80)
|
||||
.rotationEffect(.degrees(-90))
|
||||
.animation(.easeInOut(duration: 0.3), value: progress)
|
||||
} else {
|
||||
ThemedSpinner(size: 48, lineWidth: 5)
|
||||
}
|
||||
|
||||
Image(systemName: icon)
|
||||
.font(.system(size: 24))
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
.opacity(progress != nil ? 1 : 0)
|
||||
}
|
||||
|
||||
VStack(spacing: Theme.Spacing.xs) {
|
||||
Text(message)
|
||||
.font(.system(size: Theme.FontSize.cardTitle, weight: .semibold))
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
if let detail = detail {
|
||||
Text(detail)
|
||||
.font(.system(size: Theme.FontSize.caption))
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
|
||||
if let progress = progress {
|
||||
Text("\(Int(progress * 100))%")
|
||||
.font(.system(size: Theme.FontSize.micro, weight: .medium, design: .monospaced))
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(Theme.Spacing.xl)
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
|
||||
.shadow(color: .black.opacity(0.3), radius: 20, y: 10)
|
||||
}
|
||||
.transition(.opacity)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Preview
|
||||
|
||||
#Preview("Themed Spinners") {
|
||||
VStack(spacing: 40) {
|
||||
ThemedSpinner(size: 60, lineWidth: 5)
|
||||
|
||||
ThemedSpinner(size: 40)
|
||||
|
||||
ThemedSpinnerCompact()
|
||||
|
||||
HStack(spacing: 20) {
|
||||
ThemedSpinnerCompact(size: 16)
|
||||
Text("Loading...")
|
||||
}
|
||||
}
|
||||
.padding(40)
|
||||
.themedBackground()
|
||||
}
|
||||
|
||||
#Preview("Animated Components") {
|
||||
VStack(spacing: 40) {
|
||||
AnimatedRouteGraphic()
|
||||
@@ -306,3 +461,25 @@ struct EmptyStateView: View {
|
||||
.padding()
|
||||
.themedBackground()
|
||||
}
|
||||
|
||||
#Preview("Loading Overlay") {
|
||||
ZStack {
|
||||
Color.gray
|
||||
LoadingOverlay(
|
||||
message: "Planning Your Trip",
|
||||
detail: "Finding the best route..."
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview("Loading Overlay with Progress") {
|
||||
ZStack {
|
||||
Color.gray
|
||||
LoadingOverlay(
|
||||
message: "Creating PDF",
|
||||
detail: "Processing images...",
|
||||
progress: 0.65,
|
||||
icon: "doc.fill"
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user