From c53a320698c17d98477c0384f1f644da9735f645 Mon Sep 17 00:00:00 2001 From: Christian Cleberg Date: Sat, 14 Mar 2026 09:56:39 -0500 Subject: implement more learning categories --- ShapeCard.swift | 130 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 ShapeCard.swift (limited to 'ShapeCard.swift') diff --git a/ShapeCard.swift b/ShapeCard.swift new file mode 100644 index 0000000..ebc71e8 --- /dev/null +++ b/ShapeCard.swift @@ -0,0 +1,130 @@ +// +// ShapeCard.swift +// DayByDay +// + +import SwiftUI + +/// A single large, colorful card representing one shape. +/// Tapping the card plays a bounce animation and speaks the shape name aloud. +struct ShapeCard: View { + let shape: LearnShape + @State private var isTapped = false + + var body: some View { + ZStack { + RoundedRectangle(cornerRadius: 32, style: .continuous) + .fill(shape.color.gradient) + .shadow(color: shape.color.opacity(0.4), radius: 8, y: 4) + + VStack(spacing: 16) { + shape.shapeView + .frame(width: 80, height: 80) + .foregroundStyle(.white) + + Text(shape.name) + .font(.system(size: 32, weight: .bold, design: .rounded)) + .foregroundStyle(.white) + } + } + .scaleEffect(isTapped ? 1.12 : 1.0) + .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(shape.name) + DispatchQueue.main.asyncAfter(deadline: .now() + 0.4) { + isTapped = false + } + } + .accessibilityLabel(shape.name) + .accessibilityAddTraits(.isButton) + } +} + +// MARK: - Shape model + +enum LearnShape: Int, CaseIterable, Identifiable { + case circle, square, triangle, star, heart, oval, diamond, rectangle + + var id: Int { rawValue } + + var name: String { + switch self { + case .circle: "Circle" + case .square: "Square" + case .triangle: "Triangle" + case .star: "Star" + case .heart: "Heart" + case .oval: "Oval" + case .diamond: "Diamond" + case .rectangle: "Rectangle" + } + } + + @ViewBuilder + var shapeView: some View { + switch self { + case .circle: + Circle().fill(.white) + case .square: + SwiftUI.Rectangle().fill(.white) + case .triangle: + TriangleShape().fill(.white) + case .star: + Image(systemName: "star.fill") + .font(.system(size: 72)) + .foregroundStyle(.white) + case .heart: + Image(systemName: "heart.fill") + .font(.system(size: 72)) + .foregroundStyle(.white) + case .oval: + Ellipse().fill(.white) + .frame(width: 90, height: 60) + case .diamond: + SwiftUI.Rectangle().fill(.white) + .frame(width: 60, height: 60) + .rotationEffect(.degrees(45)) + case .rectangle: + SwiftUI.Rectangle().fill(.white) + .frame(width: 90, height: 55) + } + } + + var color: Color { + switch self { + case .circle: Color(red: 0.9, green: 0.3, blue: 0.3) // red + case .square: Color(red: 0.3, green: 0.5, blue: 0.9) // blue + case .triangle: Color(red: 0.35, green: 0.75, blue: 0.45) // green + case .star: Color(red: 1.0, green: 0.75, blue: 0.15) // gold + case .heart: Color(red: 0.9, green: 0.35, blue: 0.5) // pink + case .oval: Color(red: 0.55, green: 0.4, blue: 0.85) // purple + case .diamond: Color(red: 0.2, green: 0.75, blue: 0.8) // teal + case .rectangle: Color(red: 1.0, green: 0.55, blue: 0.2) // orange + } + } +} + +/// A simple triangle drawn with a Path. +struct TriangleShape: Shape { + func path(in rect: CGRect) -> Path { + Path { path in + path.move(to: CGPoint(x: rect.midX, y: rect.minY)) + path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY)) + path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY)) + path.closeSubpath() + } + } +} + +#Preview { + HStack(spacing: 24) { + ShapeCard(shape: .triangle) + .frame(width: 200, height: 260) + ShapeCard(shape: .star) + .frame(width: 200, height: 260) + } + .padding() +} -- cgit v1.2.3