Runnect-iOS/Runnect-iOS/RNWatch Watch App/Views/CourseProgressBar.swift at b510c5f199a5d3b5602c27eeb03df3cebdaf24cf · Runnect/Runnect-iOS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//
//  CourseProgressBar.swift
//  RNWatch Watch App
//
//  Created by 이명진 on 2026/02/09.
//

import SwiftUI

struct CourseProgressBar: View {
    let progress: Double
    let currentDistance: Double
    let totalDistance: Double

    private let barHeight: CGFloat = 5
    private let markerSize: CGFloat = 10
    private let runnerSize: CGFloat = 14

    var body: some View {
        VStack(spacing: 4) {
            GeometryReader { geometry in
                let barWidth = geometry.size.width
                let clampedProgress = min(max(progress, 0), 1)
                let runnerX = barWidth * clampedProgress

                ZStack(alignment: .leading) {
                    // Background bar (unfilled)
                    Capsule()
                        .fill(Color.gray.opacity(0.3))
                        .frame(height: barHeight)

                    // Filled bar (progress)
                    Capsule()
                        .fill(Color.runnectPrimary)
                        .frame(width: max(barWidth * clampedProgress, 0), height: barHeight)

                    // Start marker "S"
                    Text("S")
                        .font(.system(size: 8, weight: .bold, design: .rounded))
                        .foregroundColor(.white)
                        .frame(width: markerSize, height: markerSize)
                        .background(
                            Circle()
                                .fill(Color.gray.opacity(0.6))
                        )
                        .position(x: markerSize / 2, y: barHeight / 2)

                    // Runner marker
                    Image(systemName: "figure.run")
                        .font(.system(size: runnerSize, weight: .semibold))
                        .foregroundColor(.runnectPrimary)
                        .position(
                            x: min(max(runnerX, markerSize), barWidth - markerSize),
                            y: barHeight / 2
                        )
                        .animation(.easeInOut(duration: 0.5), value: clampedProgress)

                    // End marker "E"
                    Image(systemName: "flag.fill")
                        .font(.system(size: 9))
                        .foregroundColor(.white)
                        .frame(width: markerSize, height: markerSize)
                        .position(x: barWidth - markerSize / 2, y: barHeight / 2)
                }
            }
            .frame(height: max(runnerSize, markerSize))

            // Distance text
            Text("\(String(format: "%.1f", currentDistance)) / \(String(format: "%.1f", totalDistance)) km")
                .font(.system(size: 10, design: .rounded))
                .foregroundColor(.gray)
        }
    }
}