polish iOS study flow
This commit is contained in:
@@ -2,104 +2,228 @@ import SwiftUI
|
||||
|
||||
struct RoundView: View {
|
||||
@EnvironmentObject private var localization: LocalizationStore
|
||||
@State private var selectedOutcomeID = "home"
|
||||
@EnvironmentObject private var analytics: HermesAnalyticsClient
|
||||
|
||||
private struct OutcomeOption: Identifiable {
|
||||
let id: String
|
||||
let label: String
|
||||
let odds: String
|
||||
@StateObject private var playerCoordinator = PlayerCoordinator()
|
||||
@State private var phase: Phase = .preview
|
||||
@State private var selectedOutcomeID: String? = nil
|
||||
@State private var lockAt: Date = Date().addingTimeInterval(47)
|
||||
@State private var transitionTask: Task<Void, Never>?
|
||||
|
||||
private let previewDuration: TimeInterval = 47
|
||||
private let winningOutcomeID = "home"
|
||||
|
||||
private enum Phase {
|
||||
case preview
|
||||
case locked
|
||||
case reveal
|
||||
case result
|
||||
}
|
||||
|
||||
private var outcomeOptions: [OutcomeOption] {
|
||||
private var selectionOptions: [SelectionOption] {
|
||||
[
|
||||
OutcomeOption(id: "home", label: localization.string(for: "round.home"), odds: "1.85"),
|
||||
OutcomeOption(id: "away", label: localization.string(for: "round.away"), odds: "2.05"),
|
||||
SelectionOption(
|
||||
id: "home",
|
||||
title: localization.string(for: "round.home"),
|
||||
subtitle: localization.string(for: "round.selection_prompt"),
|
||||
odds: "1.85"
|
||||
),
|
||||
SelectionOption(
|
||||
id: "away",
|
||||
title: localization.string(for: "round.away"),
|
||||
subtitle: localization.string(for: "round.selection_prompt"),
|
||||
odds: "2.05"
|
||||
),
|
||||
]
|
||||
}
|
||||
|
||||
private var selectedOutcome: SelectionOption? {
|
||||
guard let selectedOutcomeID else {
|
||||
return nil
|
||||
}
|
||||
|
||||
return selectionOptions.first { $0.id == selectedOutcomeID }
|
||||
}
|
||||
|
||||
private var winningOutcome: SelectionOption {
|
||||
selectionOptions.first { $0.id == winningOutcomeID } ?? selectionOptions[0]
|
||||
}
|
||||
|
||||
var body: some View {
|
||||
VStack(alignment: .leading, spacing: HermesTheme.sectionSpacing) {
|
||||
HermesSectionHeader(
|
||||
title: localization.string(for: "round.title"),
|
||||
subtitle: localization.string(for: "round.subtitle")
|
||||
)
|
||||
TimelineView(.periodic(from: Date(), by: 1)) { context in
|
||||
let remaining = max(lockAt.timeIntervalSince(context.date), 0)
|
||||
let timerLocked = remaining <= 0
|
||||
let countdownText = Self.countdownText(for: remaining)
|
||||
|
||||
VStack(alignment: .leading, spacing: 14) {
|
||||
ZStack(alignment: .topTrailing) {
|
||||
RoundedRectangle(cornerRadius: HermesTheme.cornerRadius, style: .continuous)
|
||||
.fill(
|
||||
LinearGradient(
|
||||
colors: [HermesTheme.surfaceElevated, HermesTheme.background],
|
||||
startPoint: .top,
|
||||
endPoint: .bottom
|
||||
)
|
||||
)
|
||||
.frame(height: 200)
|
||||
VStack(alignment: .leading, spacing: HermesTheme.sectionSpacing) {
|
||||
HermesSectionHeader(
|
||||
title: localization.string(for: "round.title"),
|
||||
subtitle: localization.string(for: "round.subtitle")
|
||||
)
|
||||
|
||||
Text(localization.string(for: "round.video_placeholder"))
|
||||
.font(.caption.weight(.semibold))
|
||||
.foregroundStyle(HermesTheme.textSecondary)
|
||||
.padding(12)
|
||||
}
|
||||
videoSection(countdownText: countdownText, remaining: remaining, isTimerLocked: timerLocked)
|
||||
|
||||
HStack(spacing: 12) {
|
||||
HermesCountdownBadge(
|
||||
label: localization.string(for: "round.countdown_label"),
|
||||
value: "00:47"
|
||||
)
|
||||
HermesMetricPill(label: localization.string(for: "round.odds_label"), value: "1.85 / 2.05")
|
||||
}
|
||||
|
||||
Text(localization.string(for: "round.selection_prompt"))
|
||||
.font(.callout)
|
||||
.foregroundStyle(HermesTheme.textSecondary)
|
||||
|
||||
VStack(spacing: 10) {
|
||||
ForEach(outcomeOptions) { option in
|
||||
outcomeButton(option)
|
||||
}
|
||||
}
|
||||
|
||||
Button {
|
||||
} label: {
|
||||
Text(localization.string(for: "round.primary_cta"))
|
||||
}
|
||||
.buttonStyle(HermesPrimaryButtonStyle())
|
||||
phaseContent(isTimerLocked: timerLocked)
|
||||
}
|
||||
}
|
||||
.hermesCard(elevated: true)
|
||||
.onAppear {
|
||||
startPreview()
|
||||
}
|
||||
.onDisappear {
|
||||
transitionTask?.cancel()
|
||||
playerCoordinator.pause()
|
||||
}
|
||||
}
|
||||
|
||||
private func outcomeButton(_ option: OutcomeOption) -> some View {
|
||||
let isSelected = selectedOutcomeID == option.id
|
||||
|
||||
return Button {
|
||||
selectedOutcomeID = option.id
|
||||
} label: {
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(option.label)
|
||||
.font(.headline.weight(.semibold))
|
||||
Text(option.odds)
|
||||
.font(.caption.weight(.semibold))
|
||||
.foregroundStyle(isSelected ? HermesTheme.background.opacity(0.72) : HermesTheme.textSecondary)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
|
||||
.font(.headline)
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 14)
|
||||
.foregroundStyle(isSelected ? HermesTheme.background : HermesTheme.textPrimary)
|
||||
.background(isSelected ? HermesTheme.accent : HermesTheme.surfaceElevated)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: HermesTheme.insetRadius, style: .continuous)
|
||||
.stroke(isSelected ? HermesTheme.accent : HermesTheme.accent.opacity(0.14), lineWidth: 1)
|
||||
@ViewBuilder
|
||||
private func phaseContent(isTimerLocked: Bool) -> some View {
|
||||
switch phase {
|
||||
case .preview, .locked:
|
||||
SelectionView(
|
||||
statusText: isTimerLocked || phase != .preview ? localization.string(for: "round.locked_label") : localization.string(for: "round.selection_prompt"),
|
||||
options: selectionOptions,
|
||||
selectedOptionID: selectedOutcomeID,
|
||||
isLocked: isTimerLocked || phase != .preview,
|
||||
confirmTitle: localization.string(for: "round.primary_cta"),
|
||||
onSelect: handleSelection,
|
||||
onConfirm: confirmSelection
|
||||
)
|
||||
|
||||
case .reveal:
|
||||
RevealView(
|
||||
title: localization.string(for: "reveal.title"),
|
||||
subtitle: localization.string(for: "reveal.subtitle"),
|
||||
statusText: localization.string(for: "reveal.status"),
|
||||
selectionLabel: localization.string(for: "result.selection_label"),
|
||||
selectionValue: selectedOutcome?.title ?? localization.string(for: "round.selection_prompt"),
|
||||
continueTitle: localization.string(for: "reveal.cta"),
|
||||
onContinue: showResult
|
||||
)
|
||||
|
||||
case .result:
|
||||
ResultView(
|
||||
title: localization.string(for: "result.title"),
|
||||
subtitle: localization.string(for: "result.subtitle"),
|
||||
selectionLabel: localization.string(for: "result.selection_label"),
|
||||
selectionValue: selectedOutcome?.title ?? localization.string(for: "round.selection_prompt"),
|
||||
outcomeLabel: localization.string(for: "result.outcome_label"),
|
||||
outcomeValue: winningOutcome.title,
|
||||
didWin: selectedOutcomeID == winningOutcomeID,
|
||||
winLabel: localization.string(for: "result.win"),
|
||||
loseLabel: localization.string(for: "result.lose"),
|
||||
nextRoundTitle: localization.string(for: "result.next_round"),
|
||||
onNextRound: resetRound
|
||||
)
|
||||
.clipShape(RoundedRectangle(cornerRadius: HermesTheme.insetRadius, style: .continuous))
|
||||
}
|
||||
.buttonStyle(.plain)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
private func videoSection(countdownText: String, remaining: TimeInterval, isTimerLocked: Bool) -> some View {
|
||||
ZStack(alignment: .topTrailing) {
|
||||
StudyVideoPlayerView(coordinator: playerCoordinator)
|
||||
|
||||
VStack(alignment: .trailing, spacing: 10) {
|
||||
HermesCountdownBadge(
|
||||
label: localization.string(for: "round.countdown_label"),
|
||||
value: countdownText,
|
||||
warning: !isTimerLocked && remaining <= 10
|
||||
)
|
||||
|
||||
HermesMetricPill(
|
||||
label: localization.string(for: "round.odds_label"),
|
||||
value: "1.85 / 2.05"
|
||||
)
|
||||
}
|
||||
.padding(12)
|
||||
|
||||
Text(phaseLabel(isTimerLocked: isTimerLocked))
|
||||
.font(.caption.weight(.bold))
|
||||
.foregroundStyle(HermesTheme.textPrimary)
|
||||
.padding(.horizontal, 12)
|
||||
.padding(.vertical, 8)
|
||||
.background(.black.opacity(0.35))
|
||||
.clipShape(Capsule())
|
||||
.padding(12)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
|
||||
}
|
||||
}
|
||||
|
||||
private func phaseLabel(isTimerLocked: Bool) -> String {
|
||||
switch phase {
|
||||
case .preview:
|
||||
return isTimerLocked ? localization.string(for: "round.locked_label") : localization.string(for: "round.preview_label")
|
||||
case .locked:
|
||||
return localization.string(for: "round.locked_label")
|
||||
case .reveal:
|
||||
return localization.string(for: "reveal.title")
|
||||
case .result:
|
||||
return localization.string(for: "result.title")
|
||||
}
|
||||
}
|
||||
|
||||
private func startPreview() {
|
||||
transitionTask?.cancel()
|
||||
phase = .preview
|
||||
lockAt = Date().addingTimeInterval(previewDuration)
|
||||
selectedOutcomeID = nil
|
||||
playerCoordinator.restart()
|
||||
|
||||
analytics.track("round_loaded", attributes: ["screen_name": "round"])
|
||||
analytics.track("preview_started", attributes: ["screen_name": "round"])
|
||||
analytics.track("screen_viewed", attributes: ["screen_name": "round"])
|
||||
}
|
||||
|
||||
private func handleSelection(_ option: SelectionOption) {
|
||||
guard phase == .preview else {
|
||||
return
|
||||
}
|
||||
|
||||
selectedOutcomeID = option.id
|
||||
analytics.track("outcome_focused", attributes: ["screen_name": "round", "outcome_id": option.id])
|
||||
analytics.track("outcome_selected", attributes: ["screen_name": "round", "outcome_id": option.id])
|
||||
}
|
||||
|
||||
private func confirmSelection() {
|
||||
guard phase == .preview, let selectedOutcomeID else {
|
||||
return
|
||||
}
|
||||
|
||||
analytics.track("selection_submitted", attributes: ["screen_name": "round", "outcome_id": selectedOutcomeID])
|
||||
analytics.track("selection_accepted", attributes: ["screen_name": "round", "outcome_id": selectedOutcomeID])
|
||||
analytics.track("market_locked", attributes: ["screen_name": "round", "lock_reason": "manual_selection"])
|
||||
|
||||
phase = .locked
|
||||
playerCoordinator.pause()
|
||||
|
||||
transitionTask?.cancel()
|
||||
transitionTask = Task { @MainActor in
|
||||
try? await Task.sleep(nanoseconds: 750_000_000)
|
||||
guard !Task.isCancelled else {
|
||||
return
|
||||
}
|
||||
|
||||
phase = .reveal
|
||||
}
|
||||
}
|
||||
|
||||
private func showResult() {
|
||||
analytics.track("reveal_completed", attributes: ["screen_name": "round"])
|
||||
phase = .result
|
||||
}
|
||||
|
||||
private func resetRound() {
|
||||
transitionTask?.cancel()
|
||||
selectedOutcomeID = nil
|
||||
phase = .preview
|
||||
lockAt = Date().addingTimeInterval(previewDuration)
|
||||
playerCoordinator.restart()
|
||||
}
|
||||
|
||||
private static func countdownText(for remaining: TimeInterval) -> String {
|
||||
let totalSeconds = max(Int(remaining.rounded(.down)), 0)
|
||||
let minutes = totalSeconds / 60
|
||||
let seconds = totalSeconds % 60
|
||||
return String(format: "%02d:%02d", minutes, seconds)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user