crossmate

KeyboardView.swift (11744B)

---

 import SwiftUI
 
 /// Custom on-screen keyboard. We use a hand-rolled keyboard rather than the
 /// system keyboard because crossword input is single-character and needs to
 /// stay glued to the bottom of the screen alongside the grid.
 struct KeyboardView: View {
     @Bindable var session: PlayerSession
     var showsNavigationKeys = false
     @State private var showingOverflow = false
 
     private let topRow = Array("QWERTYUIOP").map(String.init)
     private let middleRow = Array("ASDFGHJKL").map(String.init)
     private let bottomLetters = Array("ZXCVBNM").map(String.init)
 
     private let spacing: CGFloat = 6
     private let keyHeight: CGFloat = 46
     private let metaKeyWidthMultiplier: CGFloat = 1.5
 
     static let standardHeight: CGFloat = 170
 
     var body: some View {
         VStack(spacing: spacing) {
             KeyboardRow(
                 referenceColumns: showsNavigationKeys ? 12 : 10,
                 spacing: spacing,
                 keyHeight: keyHeight
             ) {
                 if showsNavigationKeys {
                     actionKey(systemImage: "chevron.left", accessibilityLabel: "Previous Word") {
                         session.goToPreviousWord()
                     }
                     .fillsExtraKeyboardSpace()
                 }
                 ForEach(topRow, id: \.self) { letter in
                     letterKey(letter)
                 }
                 if showsNavigationKeys {
                     actionKey(systemImage: "chevron.right", accessibilityLabel: "Next Word") {
                         session.goToNextWord()
                     }
                     .fillsExtraKeyboardSpace()
                 }
             }
             KeyboardRow(
                 referenceColumns: showsNavigationKeys ? 12 : 10,
                 spacing: spacing,
                 keyHeight: keyHeight
             ) {
                 if showsNavigationKeys {
                     actionKey(systemImage: "arrowtriangle.left.fill", accessibilityLabel: "Previous Letter") {
                         session.goToPreviousLetter()
                     }
                     .fillsExtraKeyboardSpace()
                 }
                 ForEach(middleRow, id: \.self) { letter in
                     letterKey(letter)
                 }
                 if showsNavigationKeys {
                     actionKey(systemImage: "arrowtriangle.right.fill", accessibilityLabel: "Next Letter") {
                         session.goToNextLetter()
                     }
                     .fillsExtraKeyboardSpace()
                 }
             }
             KeyboardRow(
                 referenceColumns: showsNavigationKeys ? 12 : 10,
                 spacing: spacing,
                 keyHeight: keyHeight
             ) {
                 if showsNavigationKeys {
                     rebusKey
                         .disablesKeyboardMetaAnimations()
                         .fillsExtraKeyboardSpace()
 
                     actionKey(
                         systemImage: "pencil",
                         accessibilityLabel: session.isPencilMode ? "Turn Off Draft" : "Turn On Draft",
                         background: session.isPencilMode ? .blue : Color(.systemFill),
                         foreground: session.isPencilMode ? .white : .primary
                     ) {
                         session.togglePencil()
                     }
                     .disablesKeyboardMetaAnimations()
                     .fillsExtraKeyboardSpace()
                 } else {
                     if session.isRebusActive {
                         actionKey(text: "Done", background: .blue, foreground: .white) {
                             session.commitRebus()
                         }
                         .keyWidthMultiplier(metaKeyWidthMultiplier)
                     } else {
                         overflowKey
                     }
                 }
 
                 ForEach(bottomLetters, id: \.self) { letter in
                     letterKey(letter)
                 }
 
                 if showsNavigationKeys {
                     actionKey(
                         systemImage: "arrow.2.squarepath",
                         accessibilityLabel: "Switch Direction"
                     ) {
                         session.toggleDirection()
                     }
                     .disablesKeyboardMetaAnimations()
                     .fillsExtraKeyboardSpace()
                 }
 
                 actionKey(systemImage: "delete.left") {
                     if session.isRebusActive {
                         session.deleteRebusLetter()
                     } else {
                         session.deleteBackward()
                     }
                 }
                 .disablesKeyboardMetaAnimations()
                 .keyWidthMultiplier(showsNavigationKeys ? 1 : metaKeyWidthMultiplier)
                 .fillsExtraKeyboardSpace(showsNavigationKeys)
             }
         }
         .padding(.horizontal, 4)
         .padding(.top, 12)
         .padding(.bottom, 8)
     }
 
     private func letterKey(_ letter: String) -> some View {
         Button {
             if session.isRebusActive {
                 session.appendRebusLetter(letter)
             } else {
                 session.enter(letter)
             }
         } label: {
             Text(letter)
                 .font(.system(size: 22, weight: .medium, design: .rounded))
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
                 .background(Color(.tertiarySystemBackground))
                 .foregroundStyle(.primary)
                 .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
         }
         .buttonStyle(.plain)
     }
 
     private var rebusKey: some View {
         Group {
             if session.isRebusActive {
                 actionKey(text: "Done", background: .blue, foreground: .white) {
                     session.commitRebus()
                 }
             } else {
                 actionKey(text: "Rebus") {
                     session.startRebus()
                 }
             }
         }
     }
 
     private var overflowKey: some View {
         actionKey(systemImage: "ellipsis") {
             showingOverflow = true
         }
         .keyWidthMultiplier(metaKeyWidthMultiplier)
         .popover(isPresented: $showingOverflow) {
             VStack(alignment: .leading, spacing: 0) {
                 Button {
                     showingOverflow = false
                     session.togglePencil()
                 } label: {
                     Text("Toggle Draft")
                         .frame(maxWidth: .infinity, alignment: .leading)
                         .padding(.horizontal, 16)
                         .padding(.vertical, 12)
                 }
                 .buttonStyle(.plain)
 
                 Button {
                     showingOverflow = false
                     session.startRebus()
                 } label: {
                     Text("Enter Rebus")
                         .frame(maxWidth: .infinity, alignment: .leading)
                         .padding(.horizontal, 16)
                         .padding(.vertical, 12)
                 }
                 .buttonStyle(.plain)
             }
             .frame(minWidth: 160)
             .presentationCompactAdaptation(.popover)
             .presentationBackground(.thinMaterial)
         }
     }
 
     private func actionKey(
         systemImage: String,
         accessibilityLabel: String? = nil,
         background: Color = Color(.systemFill),
         foreground: Color = .primary,
         action: @escaping () -> Void
     ) -> some View {
         Button(action: action) {
             Image(systemName: systemImage)
                 .font(.system(size: 18, weight: .medium))
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
                 .background(background)
                 .foregroundStyle(foreground)
                 .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
         }
         .buttonStyle(.plain)
         .accessibilityLabel(accessibilityLabel ?? systemImage)
     }
 
     private func actionKey(
         text: String,
         background: Color = Color(.systemFill),
         foreground: Color = .primary,
         action: @escaping () -> Void
     ) -> some View {
         Button(action: action) {
             Text(text)
                 .font(.system(size: 16, weight: .semibold, design: .rounded))
                 .frame(maxWidth: .infinity, maxHeight: .infinity)
                 .background(background)
                 .foregroundStyle(foreground)
                 .clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
         }
         .buttonStyle(.plain)
     }
 
 }
 
 // MARK: - Layout
 
 /// Lays out a row of keys at a fixed key height. Every key is sized as a
 /// fraction of `referenceColumns`, so a row containing fewer keys ends up
 /// narrower than the reference row and is centered. Action keys can opt into
 /// a wider width via `keyWidthMultiplier`, and selected keys can split any
 /// leftover row width via `fillsExtraKeyboardSpace`.
 private struct KeyboardRow: Layout {
     let referenceColumns: Int
     let spacing: CGFloat
     let keyHeight: CGFloat
 
     func sizeThatFits(
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) -> CGSize {
         CGSize(width: proposal.width ?? 0, height: keyHeight)
     }
 
     func placeSubviews(
         in bounds: CGRect,
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) {
         let containerWidth = bounds.width
         let columns = CGFloat(referenceColumns)
         let baseKeyWidth = (containerWidth - spacing * (columns - 1)) / columns
 
         let widths = measuredWidths(for: subviews, baseKeyWidth: baseKeyWidth, containerWidth: containerWidth)
         let totalWidth = widths.reduce(0, +) + spacing * CGFloat(max(0, subviews.count - 1))
 
         var x = bounds.minX + (containerWidth - totalWidth) / 2
         for (index, subview) in subviews.enumerated() {
             let width = widths[index]
             subview.place(
                 at: CGPoint(x: x, y: bounds.minY),
                 anchor: .topLeading,
                 proposal: ProposedViewSize(width: width, height: keyHeight)
             )
             x += width + spacing
         }
     }
 
     private func measuredWidths(
         for subviews: Subviews,
         baseKeyWidth: CGFloat,
         containerWidth: CGFloat
     ) -> [CGFloat] {
         var widths = subviews.map { baseKeyWidth * $0[KeyWidthMultiplier.self] }
         let fixedSpacing = spacing * CGFloat(max(0, subviews.count - 1))
         let totalWidth = widths.reduce(0, +) + fixedSpacing
         let flexibleIndexes = subviews.indices.filter { subviews[$0][FillsExtraKeyboardSpace.self] }
         guard totalWidth < containerWidth, !flexibleIndexes.isEmpty else {
             return widths
         }
 
         let extraWidth = (containerWidth - totalWidth) / CGFloat(flexibleIndexes.count)
         for index in flexibleIndexes {
             widths[index] += extraWidth
         }
         return widths
     }
 }
 
 private struct KeyWidthMultiplier: LayoutValueKey {
     static let defaultValue: CGFloat = 1.0
 }
 
 private struct FillsExtraKeyboardSpace: LayoutValueKey {
     static let defaultValue = false
 }
 
 private extension View {
     func keyWidthMultiplier(_ multiplier: CGFloat) -> some View {
         layoutValue(key: KeyWidthMultiplier.self, value: multiplier)
     }
 
     func fillsExtraKeyboardSpace(_ fills: Bool = true) -> some View {
         layoutValue(key: FillsExtraKeyboardSpace.self, value: fills)
     }
 
     func disablesKeyboardMetaAnimations() -> some View {
         transaction { transaction in
             transaction.animation = nil
             transaction.disablesAnimations = true
         }
     }
 }