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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
//
// DayCard.swift
// DayByDay
//
import SwiftUI
/// A single large, colorful card representing one day of the week.
/// Tapping the card plays a bounce animation and speaks the day name aloud.
struct DayCard: View {
let day: DayOfWeek
var isHighlighted = false
@State private var isTapped = false
private var cardScale: CGFloat {
if isTapped { return 1.12 }
if isHighlighted { return 1.04 }
return 1.0
}
var body: some View {
ZStack {
RoundedRectangle(cornerRadius: 32, style: .continuous)
.fill(day.color.gradient)
.shadow(color: day.color.opacity(0.4), radius: 8, y: 4)
VStack(spacing: 16) {
Image(systemName: day.symbol)
.font(.system(size: 64))
.foregroundStyle(.white)
.symbolRenderingMode(.hierarchical)
Text(day.name)
.font(.system(size: 32, weight: .bold, design: .rounded))
.foregroundStyle(.white)
}
}
.overlay {
if isHighlighted {
RoundedRectangle(cornerRadius: 32, style: .continuous)
.strokeBorder(.white, lineWidth: 5)
}
}
.shadow(color: isHighlighted ? .white.opacity(0.8) : .clear, radius: 12)
.scaleEffect(cardScale)
.contentShape(RoundedRectangle(cornerRadius: 32, style: .continuous))
.rotation3DEffect(.degrees(isTapped ? 6 : 0), axis: (x: 1, y: 0, z: 0))
.animation(.spring(response: 0.35, dampingFraction: 0.5), value: isTapped)
.onTapGesture {
isTapped = true
SpeechSynthesizer.shared.speak(day.name)
DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) {
isTapped = false
}
}
.accessibilityLabel(day.name)
.accessibilityAddTraits(.isButton)
}
}
// MARK: - Day model
enum DayOfWeek: Int, CaseIterable, Identifiable {
case sunday, monday, tuesday, wednesday, thursday, friday, saturday
var id: Int { rawValue }
/// The day of the week for today's date.
static var current: DayOfWeek {
// Calendar weekday: 1 = Sunday, 7 = Saturday
let weekday = Calendar.current.component(.weekday, from: Date())
return DayOfWeek(rawValue: weekday - 1)!
}
var name: String {
switch self {
case .sunday: "Sunday"
case .monday: "Monday"
case .tuesday: "Tuesday"
case .wednesday: "Wednesday"
case .thursday: "Thursday"
case .friday: "Friday"
case .saturday: "Saturday"
}
}
/// A recognisable SF Symbol icon for each day so children who cannot read
/// still get a unique visual cue.
var symbol: String {
switch self {
case .sunday: "sun.max.fill"
case .monday: "moon.fill"
case .tuesday: "star.fill"
case .wednesday: "cloud.fill"
case .thursday: "bolt.fill"
case .friday: "heart.fill"
case .saturday: "sparkles"
}
}
/// Bright, child-friendly colour for each card.
var color: Color {
switch self {
case .sunday: Color(red: 1.0, green: 0.6, blue: 0.2) // orange
case .monday: Color(red: 0.35, green: 0.5, blue: 0.9) // blue
case .tuesday: Color(red: 0.9, green: 0.3, blue: 0.4) // red-pink
case .wednesday: Color(red: 0.3, green: 0.75, blue: 0.45) // green
case .thursday: Color(red: 0.55, green: 0.4, blue: 0.9) // purple
case .friday: Color(red: 1.0, green: 0.8, blue: 0.2) // yellow
case .saturday: Color(red: 0.2, green: 0.8, blue: 0.8) // teal
}
}
}
#Preview {
HStack(spacing: 24) {
DayCard(day: .wednesday, isHighlighted: true)
.frame(width: 200, height: 260)
DayCard(day: .thursday)
.frame(width: 200, height: 260)
}
.padding()
}
|
