krz/daybyday

 1//
 2//  ColorCard.swift
 3//  DayByDay
 4//
 5
 6import SwiftUI
 7
 8/// A single large card filled with a color. Tapping speaks the color name aloud.
 9struct ColorCard: View {
10    let learnColor: LearnColor
11    @State private var isTapped = false
12
13    var body: some View {
14        ZStack {
15            RoundedRectangle(cornerRadius: 32, style: .continuous)
16                .fill(learnColor.color.gradient)
17                .shadow(color: learnColor.color.opacity(0.4), radius: 8, y: 4)
18
19            Text(learnColor.name)
20                .font(.system(size: 36, weight: .bold, design: .rounded))
21                .foregroundStyle(.white)
22                .shadow(color: .black.opacity(0.3), radius: 4, y: 2)
23        }
24        .scaleEffect(isTapped ? 1.12 : 1.0)
25        .contentShape(RoundedRectangle(cornerRadius: 32, style: .continuous))
26        .rotation3DEffect(.degrees(isTapped ? 6 : 0), axis: (x: 1, y: 0, z: 0))
27        .animation(.spring(response: 0.35, dampingFraction: 0.5), value: isTapped)
28        .onTapGesture {
29            isTapped = true
30            SpeechSynthesizer.shared.speak(learnColor.name)
31            DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
32                isTapped = false
33            }
34        }
35        .accessibilityLabel(learnColor.name)
36        .accessibilityAddTraits(.isButton)
37    }
38}
39
40// MARK: - Color model
41
42enum LearnColor: Int, CaseIterable, Identifiable {
43    case red, orange, yellow, green, blue, purple, pink, brown, black, white
44
45    var id: Int { rawValue }
46
47    var name: String {
48        switch self {
49        case .red:    "Red"
50        case .orange: "Orange"
51        case .yellow: "Yellow"
52        case .green:  "Green"
53        case .blue:   "Blue"
54        case .purple: "Purple"
55        case .pink:   "Pink"
56        case .brown:  "Brown"
57        case .black:  "Black"
58        case .white:  "White"
59        }
60    }
61
62    var color: Color {
63        switch self {
64        case .red:    Color(red: 0.9, green: 0.2, blue: 0.2)
65        case .orange: Color(red: 1.0, green: 0.55, blue: 0.15)
66        case .yellow: Color(red: 1.0, green: 0.82, blue: 0.15)
67        case .green:  Color(red: 0.2, green: 0.75, blue: 0.35)
68        case .blue:   Color(red: 0.2, green: 0.45, blue: 0.9)
69        case .purple: Color(red: 0.55, green: 0.3, blue: 0.85)
70        case .pink:   Color(red: 0.95, green: 0.4, blue: 0.6)
71        case .brown:  Color(red: 0.55, green: 0.35, blue: 0.2)
72        case .black:  Color(red: 0.15, green: 0.15, blue: 0.15)
73        case .white:  Color(red: 0.92, green: 0.92, blue: 0.92)
74        }
75    }
76}
77
78#Preview {
79    HStack(spacing: 24) {
80        ColorCard(learnColor: .red)
81            .frame(width: 200, height: 200)
82        ColorCard(learnColor: .blue)
83            .frame(width: 200, height: 200)
84    }
85    .padding()
86}