crossmate

PuzzleScoreboard.swift (14600B)

---

 import SwiftUI
 
 struct PuzzleScoreboard: View {
     @Bindable var session: PlayerSession
     let roster: PlayerRoster
     var layout: Layout = .vertical
     /// Sends a broadcast nudge to the other players. `nil` hides the button.
     var onNudge: (() async -> Void)? = nil
     /// When the next nudge becomes allowed (the send cooldown's end), or `nil`
     /// if a nudge is allowed right now.
     var nudgeReadyAt: () -> Date? = { nil }
     @Environment(PlayerPreferences.self) private var preferences
     /// Briefly swaps the nudge capsule for a "Nudge Sent" confirmation.
     @State private var showNudgeSent = false
     /// The send-cooldown deadline that dims the button, stamped synchronously on
     /// tap (`tapTime + nudgeCooldown`) so it exists at render time — the
     /// coordinator stamps its own copy asynchronously, too late for this view.
     /// `cooldownWatch` clears it at the deadline to un-dim; seeded from the
     /// coordinator on appear so the dimming survives a view rebuild mid-cooldown.
     @State private var nudgeDeadline: Date?
 
     enum Layout {
         /// Side-panel style: stacked rows under a "Players" heading.
         case vertical
         /// Paged-header style: a horizontally scrollable strip of player
         /// chips, sized to scroll past two players when more arrive.
         case horizontal
     }
 
     private typealias Score = PuzzleGridStats.ParticipantCount
 
     private var gridStats: PuzzleGridStats {
         let hasRemotePlayers = roster.entries.contains { !$0.isLocal }
         return PuzzleGridStats(
             puzzle: session.puzzle,
             hasRemotePlayers: hasRemotePlayers,
             localAuthorID: roster.localAuthorID
         ) { r, c in
             let square = session.game.squares[r][c]
             return PuzzleGridStats.CellState(
                 entry: square.entry,
                 mark: square.mark,
                 authorID: square.letterAuthorID
             )
         }
     }
 
     private func remainingCount(for stats: PuzzleGridStats) -> Int {
         max(0, stats.fillableCellCount - stats.filledCellCount)
     }
 
     private func remainingPhrase(for stats: PuzzleGridStats) -> String {
         switch remainingCount(for: stats) {
         case 0:
             return "no squares to go"
         case 1:
             return "1 square to go"
         default:
             return "\(remainingCount(for: stats)) squares to go"
         }
     }
 
     private func revealedPhrase(for stats: PuzzleGridStats) -> String {
         switch stats.revealedSquareCount {
         case 0:
             return "No squares revealed"
         case 1:
             return "1 square revealed"
         default:
             return "\(stats.revealedSquareCount) squares revealed"
         }
     }
 
     private func progressText(for stats: PuzzleGridStats) -> String {
         if stats.revealedSquareCount > 0 {
             return "\(revealedPhrase(for: stats)), \(remainingPhrase(for: stats))"
         }
         switch remainingCount(for: stats) {
         case 0:
             return "No squares to go"
         case 1:
             return "1 square to go"
         default:
             return "\(remainingCount(for: stats)) squares to go"
         }
     }
 
     private func scores(for stats: PuzzleGridStats) -> [Score] {
         return ParticipantSummaries.sortedByScore(
             stats.participantCounts(
                 entries: roster.entries,
                 localName: preferences.name,
                 localColor: preferences.color
             ),
             score: \.count,
             name: \.name,
             id: \.id
         )
     }
 
     private var showsNudgeButton: Bool {
         onNudge != nil
             && !session.mutator.isCompleted
             && roster.entries.contains(where: { !$0.isLocal })
     }
 
     var body: some View {
         Group {
             switch layout {
             case .vertical:
                 verticalBody
             case .horizontal:
                 horizontalBody
             }
         }
         .onAppear { if nudgeDeadline == nil { nudgeDeadline = nudgeReadyAt() } }
         .task(id: nudgeDeadline) { await cooldownWatch() }
     }
 
     /// Sleeps until `nudgeDeadline`, then clears it so the button un-dims on its
     /// own. Re-runs whenever `nudgeDeadline` changes — a fresh nudge or the view
     /// re-appearing mid-cooldown — and no-ops when none is pending. Re-checks the
     /// deadline is unchanged before clearing so a nudge fired during the sleep
     /// isn't cut short.
     private func cooldownWatch() async {
         guard let deadline = nudgeDeadline else { return }
         let delay = deadline.timeIntervalSinceNow
         if delay > 0 {
             try? await Task.sleep(for: .seconds(delay))
         }
         if nudgeDeadline == deadline { nudgeDeadline = nil }
     }
 
     private var verticalBody: some View {
         let stats = gridStats
         let scores = scores(for: stats)
         return VStack(alignment: .leading, spacing: 12) {
             verticalHeading
 
             VStack(alignment: .leading, spacing: 6) {
                 ForEach(scores) { score in
                     scoreRow(score)
                 }
 
                 Text(progressText(for: stats))
                     .font(.footnote)
                     .foregroundStyle(.secondary)
                     .padding(.top, 10)
                     .frame(maxWidth: .infinity, alignment: .center)
             }
         }
         .padding(.horizontal, 18)
         .padding(.vertical, 14)
         .frame(maxWidth: .infinity, alignment: .leading)
     }
 
     private var horizontalBody: some View {
         let scores = scores(for: gridStats)
         // The heading/nudge capsule pins to the leading edge and the score
         // chips flow after it, wrapping leading-to-trailing onto new lines.
         // The whole [heading | chips] group hugs its content and centres in
         // the band, so it grows outward from the middle as players arrive,
         // while the rows inside stay leading-aligned. A vertical ScrollView
         // absorbs the overflow when enough players wrap past the slim band,
         // rather than letting it spill into the toolbar above. Filling the
         // band's height (rather than pinning a fixed height) keeps the strip
         // inside whatever space the header yields as Dynamic Type grows.
         //
         // `.bottom` scroll anchor rests a short strip (the common 2–3 player
         // case) against the bottom of the band, matching the title/credits
         // pages, yet still scrolls up from the bottom once the rows overflow.
         return ScrollView(.vertical, showsIndicators: false) {
             HStack(alignment: .center, spacing: 18) {
                 playersHeading
                 FlowLayout(alignment: .leading, spacing: 18, lineSpacing: 8) {
                     ForEach(scores) { score in
                         scoreChip(score)
                     }
                 }
             }
             .frame(maxWidth: .infinity)
             .padding(.horizontal, 18)
             .padding(.vertical, 4)
         }
         .frame(maxHeight: .infinity)
         .defaultScrollAnchor(.bottom)
         // The scoreboard is the least important text in the band, so cap its
         // type scaling a few steps below the top: past xLarge it stops growing
         // rather than forcing the chips to wrap further and the band to keep
         // eating into the grid.
         .dynamicTypeSize(...DynamicTypeSize.xLarge)
     }
 
     /// The vertical (side-panel) heading. With more horizontal room to spare,
     /// "Players" stays a plain leading heading and the nudge action lives in a
     /// separate accent-coloured capsule button, vertically centred on the
     /// trailing side. The button is omitted entirely when there's no one to nudge.
     @ViewBuilder
     private var verticalHeading: some View {
         HStack(spacing: 8) {
             Text("Players")
                 .font(.headline)
             if showsNudgeButton {
                 Spacer(minLength: 8)
                 nudgeButton
             }
         }
     }
 
     /// The trailing nudge capsule used by `verticalHeading`. Wrapped in a ZStack
     /// with the "Nudge Sent" confirmation and cross-faded with opacity, so the
     /// heading reserves the capsule's footprint and nothing shifts on tap.
     private var nudgeButton: some View {
         // The capsule and confirmation are cross-faded in a ZStack so the
         // heading reserves the capsule's footprint and nothing shifts on tap.
         // The cooldown un-dim is driven by `cooldownWatch` (see `body`).
         ZStack(alignment: .trailing) {
             Button {
                 sendNudge()
             } label: {
                 nudgeCapsule
             }
             .buttonStyle(.plain)
             .disabled(isNudgeDisabled)
             .accessibilityLabel("Nudge Players")
             .opacity(showNudgeSent ? 0 : 1)
             .accessibilityHidden(showNudgeSent)
 
             Text("Nudge Sent")
                 .font(.footnote.weight(.semibold))
                 .foregroundStyle(.secondary)
                 .opacity(showNudgeSent ? 1 : 0)
                 .accessibilityHidden(!showNudgeSent)
         }
     }
 
     private var nudgeCapsule: some View {
         HStack(spacing: 5) {
             Image(systemName: "hand.wave")
             Text("Nudge")
         }
         .font(.footnote.weight(.semibold))
         .padding(.horizontal, 12)
         .padding(.vertical, 4)
         .nudgeGlass(isLabeled: true)
     }
 
     /// The horizontal (paged-header) heading. With little vertical room, the
     /// "Players" heading itself *is* the nudge button — a tinted capsule carrying
     /// the wave symbol and the title that, on tap, swaps to a brief "Nudge Sent"
     /// confirmation. Otherwise it falls back to a plain heading.
     @ViewBuilder
     private var playersHeading: some View {
         if showsNudgeButton {
             // Keep both the capsule and the confirmation laid out in a ZStack
             // and cross-fade with opacity, so the header always reserves the
             // capsule's exact footprint — the score chips below never shift. The
             // cooldown un-dim is driven by `cooldownWatch` (see `body`).
             ZStack {
                 Button {
                     sendNudge()
                 } label: {
                     playersCapsule
                 }
                 .buttonStyle(.plain)
                 .disabled(isNudgeDisabled)
                 .accessibilityLabel("Nudge Players")
                 .opacity(showNudgeSent ? 0 : 1)
                 .accessibilityHidden(showNudgeSent)
 
                 Text("Nudge Sent")
                     .font(.footnote.weight(.semibold))
                     .foregroundStyle(.primary)
                     .opacity(showNudgeSent ? 1 : 0)
                     .accessibilityHidden(!showNudgeSent)
             }
         } else {
             // No one to nudge (a solo game, or no peers have joined yet): the
             // plain, non-button heading. It centres against the chip row on its
             // own, so it needs no padding — the capsule's footprint is taller,
             // but the chips centre against the tallest element either way.
             Text("Players")
                 .font(.subheadline.weight(.semibold))
         }
     }
 
     /// The nudge button is disabled mid-confirmation and during the send
     /// cooldown (a pending `nudgeDeadline`).
     private var isNudgeDisabled: Bool {
         showNudgeSent || nudgeDeadline != nil
     }
 
     /// Fires the nudge and flashes the "Nudge Sent" confirmation in the header
     /// for a couple of seconds before restoring the button. Arms the cooldown
     /// deadline synchronously (`cooldownWatch` clears it) so the button dims with
     /// the tap regardless of how the actual send fans out.
     private func sendNudge() {
         if let onNudge {
             Task { await onNudge() }
         }
         nudgeDeadline = Date().addingTimeInterval(SessionCoordinator.nudgeCooldown)
         withAnimation(.easeInOut(duration: 0.25)) { showNudgeSent = true }
         Task {
             try? await Task.sleep(for: .seconds(3))
             withAnimation(.easeInOut(duration: 0.25)) { showNudgeSent = false }
         }
     }
 
     private var playersCapsule: some View {
         HStack(spacing: 5) {
             Image(systemName: "hand.wave")
             Text("Players")
         }
         .font(.footnote.weight(.semibold))
         .padding(.horizontal, 12)
         .padding(.vertical, 4)
         // Real `glassEffect` casts its own ambient shadow that clips untidily
         // against the band edge on this flat white header, so the capsule
         // imitates glass rather than using the system material: a translucent
         // white fill brightens the capsule off the header and the hairline rim
         // below supplies the lit glass edge, with no shadow. (The iPad side
         // panel keeps real glass via `nudgeCapsule`/`nudgeGlass`, where the
         // shadow has room to sit.)
         .background(Color.white.opacity(0.6), in: Capsule())
         // A rim bright along the top, fading dark along the bottom, reads as a
         // curved glass edge — defining the button without flattening it into a
         // plain outline.
         .overlay {
             Capsule()
                 .strokeBorder(
                     LinearGradient(
                         colors: [.white.opacity(0.4), .black.opacity(0.14)],
                         startPoint: .top,
                         endPoint: .bottom
                     ),
                     lineWidth: 0.75
                 )
         }
     }
 
     private func scoreChip(_ score: Score) -> some View {
         HStack(spacing: 6) {
             Circle()
                 .fill(score.color?.tint ?? Color.secondary)
                 .frame(width: 8, height: 8)
             Text(score.name)
                 .font(.subheadline)
                 .lineLimit(1)
             Text("\(score.count)")
                 .font(.subheadline.monospacedDigit().weight(.semibold))
         }
         .accessibilityElement(children: .combine)
     }
 
     private func scoreRow(_ score: Score) -> some View {
         HStack(spacing: 8) {
             Circle()
                 .fill(score.color?.tint ?? Color.secondary)
                 .frame(width: 8, height: 8)
             Text(score.name)
                 .font(.subheadline)
                 .lineLimit(1)
             Spacer(minLength: 8)
             Text("\(score.count)")
                 .font(.subheadline.monospacedDigit().weight(.semibold))
         }
         .accessibilityElement(children: .combine)
     }
 }