crossmate

KeyboardView.swift (18683B)

---

 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
 
     /// Whether the secondary numbers/symbols layer is showing in place of the
     /// letters. Reached via the `…` key and dismissed via `ABC`; sticky across
     /// keystrokes (crossword input isn't predominantly numeric, so we don't
     /// auto-revert). Stays available during rebus entry so mixed fills like
     /// `H2O` can be typed.
     @State private var showsSymbols = 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 digitRow = Array("1234567890").map(String.init)
     // The nine symbols on the NYT Games keyboard's middle row. NYT shows a
     // further row (' ` , . : /) we omit: a grid fill that isn't a letter is
     // almost always a digit, with `&` the only symbol seen in practice, so the
     // omitted ones are not expected to appear in any puzzle.
     private let symbolRow = ["@", "#", "$", "%", "&", "*", "-", "!", "+"]
 
     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 {
         Group {
             if showsSymbols {
                 symbolRows
             } else {
                 letterRows
             }
         }
         .padding(.horizontal, 4)
         .padding(.top, 12)
         .padding(.bottom, 8)
     }
 
     private var letterRows: 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 {
                     layerToggleKey
                         .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 {
                     layerToggleKey
                         .keyWidthMultiplier(metaKeyWidthMultiplier)
                 }
 
                 ForEach(bottomLetters, id: \.self) { letter in
                     letterKey(letter)
                 }
 
                 if showsNavigationKeys {
                     actionKey(
                         systemImage: "arrow.2.squarepath",
                         accessibilityLabel: "Switch Direction"
                     ) {
                         session.toggleDirection()
                     }
                     .disablesKeyboardMetaAnimations()
                     .fillsExtraKeyboardSpace()
                 }
 
                 deleteKey
                     .keyWidthMultiplier(showsNavigationKeys ? 1 : metaKeyWidthMultiplier)
                     .fillsExtraKeyboardSpace(showsNavigationKeys)
             }
         }
     }
 
     /// The secondary numbers/symbols layer. It mirrors the letters layer's
     /// scaffolding exactly — the `…` toggle, Delete, and (on iPad) the
     /// navigation arrows / pencil / switch-direction keys keep their position
     /// and width — and only swaps the *centre* keys: digits on the top row,
     /// symbols on the middle row, and the Undo / Rebus / Redo meta keys on the
     /// bottom row. The digit/symbol keys reuse `letterKey`, so they append to
     /// the rebus buffer during entry and enter directly otherwise. The three
     /// meta keys take the same column budget the seven letters they replace had,
     /// so `…` and Delete don't change size between layers.
     private var symbolRows: 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(digitRow, id: \.self) { letterKey($0) }
                 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(symbolRow, id: \.self) { letterKey($0) }
                 if showsNavigationKeys {
                     actionKey(systemImage: "arrowtriangle.right.fill", accessibilityLabel: "Next Letter") {
                         session.goToNextLetter()
                     }
                     .fillsExtraKeyboardSpace()
                 }
             }
             KeyboardRow(
                 referenceColumns: showsNavigationKeys ? 12 : 10,
                 spacing: spacing,
                 keyHeight: keyHeight
             ) {
                 if showsNavigationKeys {
                     layerToggleKey
                         .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 {
                     layerToggleKey
                         .keyWidthMultiplier(metaKeyWidthMultiplier)
                 }
 
                 undoKey
                     .keyWidthMultiplier(metaKeyWidthMultiplier)
                 rebusKey
                     .disablesKeyboardMetaAnimations()
                     .keyWidthMultiplier(rebusKeyWidthMultiplier)
                     // The bottom row has four fewer inter-key gaps than the
                     // letters row (three meta keys replace seven letters). That
                     // shortfall otherwise pulls the flanking keys inward — `…`
                     // and Delete on compact, and the flex keys' shared width on
                     // iPad. Giving Rebus the missing gap width makes the row's
                     // total identical to the letters row, so those keys don't
                     // move between layers on either device.
                     .extraGapWidth(rebusExtraGapWidth)
                 redoKey
                     .keyWidthMultiplier(metaKeyWidthMultiplier)
 
                 if showsNavigationKeys {
                     actionKey(
                         systemImage: "arrow.2.squarepath",
                         accessibilityLabel: "Switch Direction"
                     ) {
                         session.toggleDirection()
                     }
                     .disablesKeyboardMetaAnimations()
                     .fillsExtraKeyboardSpace()
                 }
 
                 deleteKey
                     .keyWidthMultiplier(showsNavigationKeys ? 1 : metaKeyWidthMultiplier)
                     .fillsExtraKeyboardSpace(showsNavigationKeys)
             }
         }
     }
 
     /// Width (in base key columns) for the Rebus key on the secondary layer's
     /// bottom row. Undo and Redo match the `…` and Delete meta-key width; Rebus
     /// absorbs the remainder of the column budget the seven `ZXCVBNM` keys
     /// occupy on the letters layer, so the surrounding `…` and Delete keys keep
     /// their letters-layer width.
     private var rebusKeyWidthMultiplier: CGFloat {
         CGFloat(bottomLetters.count) - 2 * metaKeyWidthMultiplier
     }
 
     /// Extra gap widths the Rebus key takes so the meta row totals the same
     /// width as the letters row — the difference in their inter-key gap counts.
     /// The two rows share scaffolding and differ only in the centre (three meta
     /// keys vs the seven `bottomLetters`), so the gap shortfall is the same on
     /// both layouts.
     private var rebusExtraGapWidth: CGFloat {
         CGFloat(bottomLetters.count - 3)
     }
 
     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()
                 }
             }
         }
     }
 
     /// The `…` key. It swaps between the letters and the numbers/symbols layer,
     /// keeping the same icon and position on both so it reads as one persistent
     /// control. Available during rebus entry too, so mixed fills can be typed.
     private var layerToggleKey: some View {
         actionKey(systemImage: "ellipsis", accessibilityLabel: showsSymbols ? "Letters" : "Numbers and Symbols") {
             showsSymbols.toggle()
         }
     }
 
     private var undoKey: some View {
         actionKey(systemImage: "arrow.uturn.backward", accessibilityLabel: "Undo Move") {
             session.undo()
         }
         .disabled(!session.canUndo)
         .opacity(session.canUndo ? 1 : 0.4)
     }
 
     private var redoKey: some View {
         actionKey(systemImage: "arrow.uturn.forward", accessibilityLabel: "Redo Move") {
             session.redo()
         }
         .disabled(!session.canRedo)
         .opacity(session.canRedo ? 1 : 0.4)
     }
 
     private var deleteKey: some View {
         actionKey(systemImage: "delete.left") {
             if session.isRebusActive {
                 session.deleteRebusLetter()
             } else {
                 session.deleteBackward()
             }
         }
         .disablesKeyboardMetaAnimations()
     }
 
     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`, take a fixed number of extra
 /// inter-key gap widths via `extraGapWidth` (to compensate for a row having
 /// fewer gaps than another), 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] + spacing * $0[ExtraGapWidth.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
 }
 
 /// Extra width, measured in inter-key gap (`spacing`) multiples, added to a key
 /// on top of its column width. Used to make a sparse row total the same width as
 /// a denser one so their shared edge keys line up.
 private struct ExtraGapWidth: LayoutValueKey {
     static let defaultValue: CGFloat = 0
 }
 
 private extension View {
     func keyWidthMultiplier(_ multiplier: CGFloat) -> some View {
         layoutValue(key: KeyWidthMultiplier.self, value: multiplier)
     }
 
     func extraGapWidth(_ gaps: CGFloat) -> some View {
         layoutValue(key: ExtraGapWidth.self, value: gaps)
     }
 
     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
         }
     }
 }