crossmate

GridView.swift (22763B)

---

 import SwiftUI
 
 struct GridView: View {
     @Bindable var session: PlayerSession
     let roster: PlayerRoster
     let showsSharedAnnotations: Bool
     /// Whether to render peers' live cursor tracks. Off for a solved puzzle —
     /// the game is no longer a live session, so the other player's cursor is
     /// dropped while author tints stay to colour the finished grid.
     var showsPeerCursors: Bool = true
     /// The finish-banner replay frame to render. When non-nil (the user has
     /// scrubbed back from the end), the grid renders this reconstructed history
     /// instead of the live `Game`: each touched cell shows its after-state,
     /// blanks elsewhere. Live selection, word highlight, and taps are
     /// suppressed, and the playhead cell is tinted in the acting author's
     /// colour. `nil` (the default, or a scrubber at rest) leaves normal play.
     var replayFrame: ReplayFrame? = nil
 
     private let spacing: CGFloat = 1
 
     var body: some View {
         let width = session.puzzle.width
         let height = session.puzzle.height
         let replayCells = replayFrame?.cells
         let isReplaying = replayFrame != nil
         let replayCursor = replayFrame?.cursor
         // Once the puzzle is solved, rebus squares show their canonical fill
         // (e.g. a Schrödinger square reads "MTWA" rather than the "WA" the
         // solver typed for the down answer). Purely a render-time substitution
         // — the stored entry, its authorship, and marks are left untouched.
         let showsCanonicalRebus = !isReplaying && session.game.completionState == .solved
         // Peer cursor tints are rendered in a separate Canvas layer (see
         // `RemoteCursorTints`) so this 441-cell grid no longer re-evaluates on
         // every peer cursor move — only on local selection and letter changes.
         let showsRemoteTints = showsSharedAnnotations && showsPeerCursors && !isReplaying
         // Author colours are shown for shared live play and for any replay
         // (the rewind reads as coloured per author, matching the scoreboard).
         let authorTintByID: [String: Color] = (showsSharedAnnotations || isReplaying)
             ? Dictionary(
                 uniqueKeysWithValues: roster.entries.map { ($0.authorID, $0.color.tint) }
             )
             : [:]
         // Colour for the replay playhead: the acting author's selection fill,
         // so a rewound move reads in that player's colour (the local fill for
         // our own moves). `nil` outside replay leaves the local cursor as-is.
         let playheadTint: Color? = replayFrame?.cursorAuthorID
             .flatMap { id in roster.entries.first { $0.authorID == id } }
             .map { $0.color.selectionFill }
         let patternPalette = CrossRefPattern.allCases
         let cellGroups = session.puzzle.cellGroups
         // Layered back to front: black (shows through the inter-cell gaps and
         // behind blocks) -> white cell backdrop -> peer cursor tints -> local
         // cursor tints -> cells. Keep these as siblings in one layout so
         // iPad-sized proposals cannot give the backing Canvases a different
         // drawing rect than the cells. The cursor layers each read their own
         // selection state in their own body, so a cursor move repaints only a
         // lightweight Canvas and never invalidates the cell `ForEach`.
         PuzzleGridLayerLayout(columns: width, rows: height, spacing: spacing) {
             GridBackdrop(puzzle: session.puzzle, spacing: spacing)
             if showsRemoteTints {
                 RemoteCursorTints(roster: roster, puzzle: session.puzzle, spacing: spacing)
             }
             LocalCursorTints(
                 session: session,
                 spacing: spacing,
                 isReplaying: isReplaying,
                 replayCursor: replayCursor,
                 replayPlayheadTint: playheadTint
             )
             if !isReplaying {
                 RecentChangeBorders(session: session, roster: roster, spacing: spacing)
             }
             PuzzleGridLayout(columns: width, rows: height, spacing: spacing) {
                 ForEach(0..<(width * height), id: \.self) { index in
                     let r = index / width
                     let c = index % width
                     let pos = GridPosition(row: r, col: c)
                     let cell = session.puzzle.cells[r][c]
                     let square = session.game.squares[r][c]
                     // During replay the cell's letter/mark/author come from the
                     // reconstructed history, not the live square.
                     let replayCell = replayCells?[pos]
                     let entry = isReplaying ? (replayCell?.letter ?? "") : square.entry
                     let displayEntry = canonicalRebusFill(for: cell, when: showsCanonicalRebus) ?? entry
                     let mark = isReplaying ? (replayCell?.mark ?? .none) : square.mark
                     let letterAuthorID = isReplaying ? replayCell?.cellAuthorID : square.letterAuthorID
                     CellView(
                         cell: cell,
                         entry: displayEntry,
                         mark: mark,
                         crossRefPattern: cellGroups[pos].map {
                             patternPalette[$0 % patternPalette.count]
                         },
                         gridRow: r,
                         gridCol: c,
                         gridSpacing: spacing,
                         authorTint: entry.isEmpty
                             ? nil
                             : letterAuthorID.flatMap { authorTintByID[$0] }
                     )
                     .equatable()
                     .onTapGesture {
                         guard !isReplaying else { return }
                         session.select(row: r, col: c)
                     }
                 }
             }
         }
     }
 
     /// The canonical fill to display for a rebus square on a solved puzzle, or
     /// `nil` to fall back to the stored entry. Only multi-character solutions
     /// (rebus/Schrödinger squares) differ from what the solver typed; ordinary
     /// single-letter cells return `nil` and render their entry unchanged.
     private func canonicalRebusFill(for cell: Puzzle.Cell, when isSolved: Bool) -> String? {
         guard isSolved, let solution = cell.solution, solution.count > 1 else { return nil }
         return solution
     }
 
 }
 
 // MARK: - Layout
 
 private enum PuzzleGridMetrics {
     static func cellSize(
         for proposal: ProposedViewSize,
         columns: Int,
         rows: Int,
         spacing: CGFloat
     ) -> CGFloat {
         cellSize(
             availableWidth: proposal.width,
             availableHeight: proposal.height,
             columns: columns,
             rows: rows,
             spacing: spacing
         )
     }
 
     static func cellSize(
         availableWidth: CGFloat?,
         availableHeight: CGFloat?,
         columns: Int,
         rows: Int,
         spacing: CGFloat
     ) -> CGFloat {
         let cols = CGFloat(columns)
         let rs = CGFloat(rows)
         let width = availableWidth ?? .infinity
         let height = availableHeight ?? .infinity
         let widthBased = width.isFinite
             ? (width - spacing * (cols + 1)) / cols
             : .infinity
         let heightBased = height.isFinite
             ? (height - spacing * (rs + 1)) / rs
             : .infinity
         return max(0, min(widthBased, heightBased))
     }
 }
 
 /// Lays out puzzle cells in a `rows × columns` grid with a uniform square
 /// cell size. The cell size is chosen to fit the proposed container, with
 /// `spacing` points between every cell and around the outer edge (the black
 /// grid border shows through the gaps). The laid-out grid reports its tight
 /// size via `sizeThatFits`, so the parent view sizes us to exactly the grid
 /// dimensions — no `.aspectRatio` modifier needed.
 private struct PuzzleGridLayout: Layout {
     let columns: Int
     let rows: Int
     let spacing: CGFloat
 
     func sizeThatFits(
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) -> CGSize {
         let cellSize = PuzzleGridMetrics.cellSize(
             for: proposal,
             columns: columns,
             rows: rows,
             spacing: spacing
         )
         let width = cellSize * CGFloat(columns) + spacing * CGFloat(columns + 1)
         let height = cellSize * CGFloat(rows) + spacing * CGFloat(rows + 1)
         return CGSize(width: width, height: height)
     }
 
     func placeSubviews(
         in bounds: CGRect,
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) {
         let geometry = PuzzleGridGeometry(
             size: bounds.size,
             columns: columns,
             rows: rows,
             spacing: spacing
         )
         let cellProposal = ProposedViewSize(
             width: geometry.cellSize,
             height: geometry.cellSize
         )
         for (index, subview) in subviews.enumerated() {
             let rect = geometry.cellRect(row: index / columns, col: index % columns)
             subview.place(
                 at: CGPoint(x: bounds.minX + rect.minX, y: bounds.minY + rect.minY),
                 anchor: .topLeading,
                 proposal: cellProposal
             )
         }
     }
 }
 
 /// Stacks the grid's backing layers and cell layout into one measured surface.
 /// Using `.background` for the Canvases can let SwiftUI hand those layers a
 /// different size from the custom cell layout on iPad, which makes their
 /// derived rects drift. This layout makes the Canvases draw from the same
 /// surface size and places the cell grid at the exact rect derived from it.
 private struct PuzzleGridLayerLayout: Layout {
     let columns: Int
     let rows: Int
     let spacing: CGFloat
 
     func sizeThatFits(
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) -> CGSize {
         let cellSize = PuzzleGridMetrics.cellSize(
             for: proposal,
             columns: columns,
             rows: rows,
             spacing: spacing
         )
         let width = cellSize * CGFloat(columns) + spacing * CGFloat(columns + 1)
         let height = cellSize * CGFloat(rows) + spacing * CGFloat(rows + 1)
         return CGSize(width: width, height: height)
     }
 
     func placeSubviews(
         in bounds: CGRect,
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) {
         guard let cellGrid = subviews.last else { return }
         let geometry = PuzzleGridGeometry(
             size: bounds.size,
             columns: columns,
             rows: rows,
             spacing: spacing
         )
         let layerProposal = ProposedViewSize(width: bounds.width, height: bounds.height)
         for subview in subviews.dropLast() {
             subview.place(
                 at: CGPoint(x: bounds.minX, y: bounds.minY),
                 anchor: .topLeading,
                 proposal: layerProposal
             )
         }
         // The view builder must emit backing layers first and the cell grid
         // last; the cell grid is the only subview placed on the tight grid rect.
         let cellGridRect = geometry.gridRect.offsetBy(dx: bounds.minX, dy: bounds.minY)
         cellGrid.place(
             at: cellGridRect.origin,
             anchor: .topLeading,
             proposal: ProposedViewSize(width: cellGridRect.width, height: cellGridRect.height)
         )
     }
 }
 
 /// Shared cell geometry for the puzzle grid: given a container `size`, computes
 /// the uniform cell size (via `PuzzleGridMetrics`) and the centred origin, then
 /// hands back the frame of any `(row, col)`. `PuzzleGridLayout` and the backing
 /// `Canvas` layers (`GridBackdrop`, `RemoteCursorTints`, `LocalCursorTints`) all
 /// derive their cell rects from this, so the layers stay pixel-aligned with the
 /// cells above them.
 private struct PuzzleGridGeometry {
     let cellSize: CGFloat
     let spacing: CGFloat
     let gridSize: CGSize
     private let originX: CGFloat
     private let originY: CGFloat
 
     init(size: CGSize, columns: Int, rows: Int, spacing: CGFloat) {
         let cellSize = PuzzleGridMetrics.cellSize(
             for: ProposedViewSize(width: size.width, height: size.height),
             columns: columns,
             rows: rows,
             spacing: spacing
         )
         let gridWidth = cellSize * CGFloat(columns) + spacing * CGFloat(columns + 1)
         let gridHeight = cellSize * CGFloat(rows) + spacing * CGFloat(rows + 1)
         self.cellSize = cellSize
         self.spacing = spacing
         self.gridSize = CGSize(width: gridWidth, height: gridHeight)
         self.originX = (size.width - gridWidth) / 2
         self.originY = (size.height - gridHeight) / 2
     }
 
     var gridRect: CGRect {
         CGRect(origin: CGPoint(x: originX, y: originY), size: gridSize)
     }
 
     func cellRect(row: Int, col: Int) -> CGRect {
         CGRect(
             x: originX + spacing + CGFloat(col) * (cellSize + spacing),
             y: originY + spacing + CGFloat(row) * (cellSize + spacing),
             width: cellSize,
             height: cellSize
         )
     }
 }
 
 // MARK: - Backing layers
 
 /// The opaque white cell backdrop, drawn behind the (clear-based) cells and
 /// beneath the peer cursor tints. Depends only on the puzzle's block layout, so
 /// it is static for the life of the game and never repaints during play. Blocks
 /// are skipped, leaving the container's black to show through.
 private struct GridBackdrop: View {
     let puzzle: Puzzle
     let spacing: CGFloat
 
     var body: some View {
         Canvas { context, size in
             let geometry = PuzzleGridGeometry(
                 size: size,
                 columns: puzzle.width,
                 rows: puzzle.height,
                 spacing: spacing
             )
             context.fill(Path(geometry.gridRect), with: .color(.black))
             for r in 0..<puzzle.height {
                 for c in 0..<puzzle.width where !puzzle.cells[r][c].isBlock {
                     context.fill(Path(geometry.cellRect(row: r, col: c)), with: .color(.white))
                 }
             }
         }
         .allowsHitTesting(false)
     }
 }
 
 /// Every present peer's selected answer, filled with that peer's selection
 /// colour so the track reads as a coloured run; the exact focused square is
 /// intentionally local-only. This is the only layer that observes the
 /// high-frequency `roster.remoteSelections` stream, so a peer cursor move
 /// repaints just this Canvas — drawing a handful of word cells — instead of
 /// re-evaluating the cell grid above.
 private struct RemoteCursorTints: View {
     let roster: PlayerRoster
     let puzzle: Puzzle
     let spacing: CGFloat
 
     var body: some View {
         let tints = remoteTrackTints()
         Canvas { context, size in
             guard !tints.isEmpty else { return }
             let geometry = PuzzleGridGeometry(
                 size: size,
                 columns: puzzle.width,
                 rows: puzzle.height,
                 spacing: spacing
             )
             for (pos, color) in tints {
                 context.fill(Path(geometry.cellRect(row: pos.row, col: pos.col)), with: .color(color))
             }
         }
         .allowsHitTesting(false)
     }
 
     /// Resolves each peer's cursor track to a per-cell fill colour, latest
     /// write winning where two peers' words overlap a cell.
     private func remoteTrackTints() -> [GridPosition: Color] {
         var tint: [GridPosition: (Date, Color)] = [:]
         for (_, sel) in roster.remoteSelections {
             for cell in puzzle.wordCells(
                 atRow: sel.row, col: sel.col, direction: sel.direction
             ) {
                 let pos = GridPosition(row: cell.row, col: cell.col)
                 if tint[pos].map({ $0.0 < sel.updatedAt }) ?? true {
                     tint[pos] = (sel.updatedAt, sel.color.selectionFill)
                 }
             }
         }
         return tint.mapValues { $0.1 }
     }
 }
 
 /// The local player's own cursor: the focused square (selection fill), the rest
 /// of the focused word (highlight fill), and a border on cross-referenced cells
 /// related to the focus. Like `RemoteCursorTints`, this is the only view that
 /// reads `session`'s selection, so a local cursor move repaints just this Canvas
 /// — a handful of cells — instead of re-evaluating the 441-cell grid above. In
 /// replay it draws only the single playhead cell in the acting author's colour;
 /// the live selection is suppressed. Sits above `RemoteCursorTints` so the local
 /// cursor reads over a peer's track where they overlap.
 private struct LocalCursorTints: View {
     let session: PlayerSession
     let spacing: CGFloat
     let isReplaying: Bool
     let replayCursor: GridPosition?
     let replayPlayheadTint: Color?
 
     @Environment(PlayerPreferences.self) private var preferences
 
     var body: some View {
         let fills = cellFills()
         let borders = isReplaying ? [] : relatedBorderCells()
         let borderColor = preferences.color.highlightFill
         Canvas { context, size in
             guard !fills.isEmpty || !borders.isEmpty else { return }
             let geometry = PuzzleGridGeometry(
                 size: size,
                 columns: session.puzzle.width,
                 rows: session.puzzle.height,
                 spacing: spacing
             )
             for (pos, color) in fills {
                 context.fill(Path(geometry.cellRect(row: pos.row, col: pos.col)), with: .color(color))
             }
             for pos in borders {
                 // Inset by half the line width so the stroke sits inside the
                 // cell, matching the in-cell `strokeBorder` it replaces.
                 let rect = geometry.cellRect(row: pos.row, col: pos.col).insetBy(dx: 1.5, dy: 1.5)
                 context.stroke(Path(rect), with: .color(borderColor), lineWidth: 3)
             }
         }
         .allowsHitTesting(false)
     }
 
     /// The selection/highlight fills. In replay this is just the playhead cell in
     /// the acting author's colour; live, it's the focused word in the highlight
     /// fill with the focused square overridden to the stronger selection fill.
     private func cellFills() -> [GridPosition: Color] {
         if isReplaying {
             guard let replayCursor, let replayPlayheadTint else { return [:] }
             return [replayCursor: replayPlayheadTint]
         }
         let color = preferences.color
         var fills: [GridPosition: Color] = [:]
         for cell in session.puzzle.wordCells(
             atRow: session.selectedRow,
             col: session.selectedCol,
             direction: session.direction
         ) {
             fills[GridPosition(row: cell.row, col: cell.col)] = color.highlightFill
         }
         fills[GridPosition(row: session.selectedRow, col: session.selectedCol)] = color.selectionFill
         return fills
     }
 
     private func relatedBorderCells() -> [GridPosition] {
         Array(session.puzzle.relatedCells(
             atRow: session.selectedRow,
             col: session.selectedCol,
             direction: session.direction
         ))
     }
 }
 
 /// Fading author-coloured borders on cells a peer filled or cleared since this
 /// player last viewed the puzzle. The set is captured once on the open arm beat
 /// (`PlayerSession.recentChanges`, populated by `PuzzleView`); this layer reveals
 /// it and fades it out when the player's first interaction clears the set. Like
 /// the cursor-tint layers it reads only its own slice of `session`, so it is the
 /// only view that repaints when the change set changes. Drawn over the cursor
 /// tints but behind the cells, matching `LocalCursorTints`' related-cell borders.
 private struct RecentChangeBorders: View {
     let session: PlayerSession
     let roster: PlayerRoster
     let spacing: CGFloat
 
     /// The resolved strokes currently drawn. Held locally so they stay on
     /// screen through the fade-out after `recentChanges` is cleared.
     @State private var shown: [GridPosition: Color] = [:]
     @State private var visible = false
 
     var body: some View {
         Canvas { context, size in
             guard !shown.isEmpty else { return }
             let geometry = PuzzleGridGeometry(
                 size: size,
                 columns: session.puzzle.width,
                 rows: session.puzzle.height,
                 spacing: spacing
             )
             for (pos, color) in shown {
                 let rect = geometry.cellRect(row: pos.row, col: pos.col)
                 let path = Path(rect.insetBy(dx: 1.5, dy: 1.5))
                 context.stroke(
                     path,
                     with: .color(color.opacity(0.10)),
                     lineWidth: 6
                 )
                 context.stroke(
                     path,
                     with: .color(color.opacity(0.30)),
                     lineWidth: 2
                 )
             }
         }
         .opacity(visible ? 1 : 0)
         .animation(.easeOut(duration: 0.45), value: visible)
         .allowsHitTesting(false)
         .onAppear { apply(session.recentChanges) }
         .onChange(of: session.recentChanges) { _, changes in apply(changes) }
     }
 
     private func apply(_ changes: [GridPosition: String]) {
         if changes.isEmpty {
             // Fade out, then drop the strokes once the animation has finished so
             // they remain visible while the opacity animates down.
             visible = false
             Task {
                 try? await Task.sleep(for: .milliseconds(500))
                 if session.recentChanges.isEmpty { shown = [:] }
             }
         } else {
             shown = resolve(changes)
             visible = true
         }
     }
 
     /// Maps each changed cell to its writer's colour, dropping out-of-bounds or
     /// block positions defensively. A writer no longer in the roster falls back
     /// to a neutral border rather than being skipped.
     private func resolve(_ changes: [GridPosition: String]) -> [GridPosition: Color] {
         let colorByAuthor = Dictionary(
             roster.entries.map { ($0.authorID, $0.color.tint) },
             uniquingKeysWith: { first, _ in first }
         )
         let width = session.puzzle.width
         let height = session.puzzle.height
         var result: [GridPosition: Color] = [:]
         for (pos, authorID) in changes {
             guard pos.row >= 0, pos.row < height, pos.col >= 0, pos.col < width else { continue }
             guard !session.puzzle.cells[pos.row][pos.col].isBlock else { continue }
             result[pos] = colorByAuthor[authorID] ?? Color.secondary
         }
         return result
     }
 }