Update flip clock

This commit is contained in:
2025-03-01 22:49:45 +11:00
parent 8955223e0a
commit 02dd768366
4 changed files with 40 additions and 70 deletions
+25 -49
View File
@@ -46,63 +46,39 @@ struct ClockPreviewView: View {
}
private var flipPreview: some View {
HStack(spacing: 8) {
HStack(spacing: 4) {
// Hours
VStack {
ZStack {
RoundedRectangle(cornerRadius: 4)
.fill(Color.black)
.frame(width: 30, height: 30)
Text("\(String(format: "%02d", calendar.component(.hour, from: currentTime)))")
.font(.system(size: 22, weight: .bold))
.foregroundColor(.white)
}
Rectangle()
.fill(Color.gray.opacity(0.5))
.frame(height: 1)
ZStack {
RoundedRectangle(cornerRadius: 4)
.fill(Color.black)
.frame(width: 30, height: 30)
Text("\(String(format: "%02d", calendar.component(.hour, from: currentTime)))")
.font(.system(size: 22, weight: .bold))
.foregroundColor(.white)
}
HStack(spacing: 2) {
digitView(value: calendar.component(.hour, from: currentTime) / 10)
digitView(value: calendar.component(.hour, from: currentTime) % 10)
}
// Separator
Text(":")
.font(.system(size: 26, weight: .bold))
.foregroundColor(.primary)
.offset(y: -2)
// Minutes
VStack {
ZStack {
RoundedRectangle(cornerRadius: 4)
.fill(Color.black)
.frame(width: 30, height: 30)
Text("\(String(format: "%02d", calendar.component(.minute, from: currentTime)))")
.font(.system(size: 22, weight: .bold))
.foregroundColor(.white)
}
Rectangle()
.fill(Color.gray.opacity(0.5))
.frame(height: 1)
ZStack {
RoundedRectangle(cornerRadius: 4)
.fill(Color.black)
.frame(width: 30, height: 30)
Text("\(String(format: "%02d", calendar.component(.minute, from: currentTime)))")
.font(.system(size: 22, weight: .bold))
.foregroundColor(.white)
}
HStack(spacing: 2) {
digitView(value: calendar.component(.minute, from: currentTime) / 10)
digitView(value: calendar.component(.minute, from: currentTime) % 10)
}
}
}
private func digitView(value: Int) -> some View {
ZStack {
RoundedRectangle(cornerRadius: 4)
.fill(Color.black)
.frame(width: 30, height: 40)
Text("\(value)")
.font(.system(size: 26, weight: .bold))
.foregroundColor(.white)
}
}
private var minimalPreview: some View {
Text(minimalTimeFormatter.string(from: currentTime))
.font(.system(size: 36, weight: .thin, design: .rounded))
+2 -2
View File
@@ -6,7 +6,7 @@ class FlipClockViewModel: ObservableObject {
setupTimer()
}
private(set) lazy var flipViewModels = { (0...5).map { _ in FlipViewModel() } }()
private(set) lazy var flipViewModels = { (0...3).map { _ in FlipViewModel() } }()
// MARK: - Private
@@ -29,7 +29,7 @@ class FlipClockViewModel: ObservableObject {
private var timeFormatter: DateFormatter {
let formatter = DateFormatter()
formatter.dateFormat = "HHmmss"
formatter.dateFormat = "HHmm"
return formatter
}
}
+6 -6
View File
@@ -8,17 +8,17 @@ struct SingleFlipView: View {
var body: some View {
Text(text)
.font(.system(size: 40))
.font(.system(size: 60))
.fontWeight(.heavy)
.foregroundColor(.white)
.fixedSize()
.padding(type.padding, -20)
.frame(width: 15, height: 20, alignment: type.alignment)
.padding(type.paddingEdges, 10)
.padding(type.padding, -30)
.frame(width: 25, height: 30, alignment: type.alignment)
.padding(type.paddingEdges, 15)
.clipped()
.background(Color.black)
.cornerRadius(4)
.padding(type.padding, -4.5)
.cornerRadius(6)
.padding(type.padding, -6)
.clipped()
}
+7 -13
View File
@@ -187,37 +187,31 @@ struct FlipClockView: View {
var body: some View {
GeometryReader { geometry in
let isPortrait = geometry.size.width < geometry.size.height
let scale: CGFloat = isPortrait ? 1.0 : 0.7
let scale: CGFloat = isPortrait ? 1.2 : 1.0
VStack {
HStack(spacing: 15) {
HStack(spacing: 25) {
// Hours
HStack(spacing: 5) {
HStack(spacing: 8) {
FlipView(viewModel: viewModel.flipViewModels[0])
FlipView(viewModel: viewModel.flipViewModels[1])
}
// Minutes
HStack(spacing: 5) {
HStack(spacing: 8) {
FlipView(viewModel: viewModel.flipViewModels[2])
FlipView(viewModel: viewModel.flipViewModels[3])
}
// Seconds
HStack(spacing: 5) {
FlipView(viewModel: viewModel.flipViewModels[4])
FlipView(viewModel: viewModel.flipViewModels[5])
}
}
.scaleEffect(scale)
// AM/PM indicator
Text(Calendar.current.component(.hour, from: currentTime) >= 12 ? "PM" : "AM")
.font(.system(size: 24 * scale, weight: .bold, design: .rounded))
.font(.system(size: 32 * scale, weight: .bold, design: .rounded))
.foregroundColor(.white)
.padding(.top, 10 * scale)
.padding(.top, 15 * scale)
}
.shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 2)
.shadow(color: .black.opacity(0.6), radius: 8, x: 0, y: 3)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
}