crossmate

FriendAvatarView.swift (8807B)

---

 import SwiftUI
 
 struct FriendAvatarView: View {
     /// Drives the in-place invite animation. `nil` (the default) keeps the
     /// avatar perfectly static, so call sites that merely identify a friend
     /// (e.g. `GameShareItem`) are completely unaffected.
     enum InvitePhase: Equatable {
         /// Invite is in flight: the glyph spins over to a paper plane, then
         /// rings broadcast outward from the avatar.
         case sending
         /// Invite is durable locally and waiting for CloudKit acknowledgement.
         /// The clock keeps the broadcast rings active while delivery is queued.
         case queued
         /// CloudKit confirmed the Ping exists: the glyph spins once and becomes
         /// a checkmark. This does not claim the recipient has fetched it.
         case sent
     }
 
     let authorID: String
     var size: CGFloat = 34
     var invitePhase: InvitePhase? = nil
 
     /// Spin shared by the avatar → paper plane and paper plane → checkmark
     /// transitions, so both glyph changes turn over identically.
     private let glyphSpin = Animation.spring(response: 0.55, dampingFraction: 0.65)
 
     @State private var revolutions = 0
     @State private var ringsActive = false
     @State private var ringsTask: Task<Void, Never>?
 
     private var avatar: FriendAvatar {
         FriendAvatar.avatar(for: authorID)
     }
 
     /// The glyph shown in the avatar. While sending it is a paper plane; on
     /// success it is *replaced* by a checkmark rather than a separate accessory
     /// appearing — the symbol the user tapped is the one that confirms.
     private var symbolName: String {
         switch invitePhase {
         case .sent:
             return "checkmark"
         case .queued:
             return "clock.fill"
         case .sending:
             return "paperplane.fill"
         case nil:
             return avatar.symbolName
         }
     }
 
     /// Stroke width of the broadcast rings, scaled so it reads at both a small
     /// list-row avatar and a large share-grid tile.
     private var ringWidth: CGFloat {
         max(1.5, size * 0.045)
     }
 
     var body: some View {
         ZStack {
             // Behind the avatar so the rings appear to emanate from its edge.
             if ringsActive {
                 BroadcastRing(color: avatar.background, lineWidth: ringWidth, delay: 0)
                 BroadcastRing(color: avatar.background, lineWidth: ringWidth, delay: 0.7)
             }
 
             Circle()
                 .fill(avatar.background)
                 // A soft radial wash from a lighter centre out to the base
                 // grey, so the medallion reads as gently domed rather than
                 // flat. Disabled for now — swap the flat `.fill` above for this
                 // to turn it back on.
                 // .fill(
                 //     RadialGradient(
                 //         colors: [Color(.systemGray3), avatar.background],
                 //         center: .center,
                 //         startRadius: 0,
                 //         endRadius: size / 2
                 //     )
                 // )
 
             // A faint, tiled watermark of the friend's own symbol — just enough
             // texture to lift the flat medallion, sitting under the main glyph.
             SymbolPattern(symbolName: avatar.symbolName, size: size)
 
             Image(systemName: symbolName)
                 .font(.system(size: size * 0.46, weight: .semibold))
                 .foregroundStyle(.white)
                 .contentTransition(.symbolEffect(.replace))
                 .rotationEffect(.degrees(Double(revolutions) * 360))
                 // Animate the glyph swap itself so the friend symbol → paper
                 // plane → checkmark changes morph rather than hard-cut.
                 .animation(.default, value: symbolName)
         }
         .frame(width: size, height: size)
         .onAppear {
             if invitePhase == .sending || invitePhase == .queued {
                 ringsActive = true
             }
         }
         .onChange(of: invitePhase) { _, phase in
             ringsTask?.cancel()
             switch phase {
             case .sending:
                 // The same spin as the checkmark turns the avatar over to the
                 // paper plane; the broadcast then starts once it has settled.
                 withAnimation(glyphSpin) { revolutions += 1 }
                 ringsTask = Task { @MainActor in
                     try? await Task.sleep(for: .seconds(0.5))
                     guard !Task.isCancelled else { return }
                     ringsActive = true
                 }
             case .queued:
                 ringsActive = true
                 withAnimation(glyphSpin) { revolutions += 1 }
             case .sent:
                 ringsActive = false
                 withAnimation(glyphSpin) { revolutions += 1 }
             case nil:
                 ringsActive = false
             }
         }
         .onDisappear {
             ringsTask?.cancel()
         }
         .accessibilityHidden(true)
     }
 }
 
 /// A single ring that grows out of the avatar and fades, looping forever. Each
 /// ring owns its animation and starts it in `onAppear`, so simply inserting
 /// the ring (when sending begins) is enough to set it going — no external
 /// trigger to keep in sync.
 private struct BroadcastRing: View {
     let color: Color
     let lineWidth: CGFloat
     /// Staggers this ring against its siblings so the broadcast is continuous.
     let delay: Double
 
     @State private var expanded = false
 
     var body: some View {
         Circle()
             .stroke(color, lineWidth: lineWidth)
             .scaleEffect(expanded ? 1.55 : 1.0)
             .opacity(expanded ? 0 : 0.5)
             .onAppear {
                 withAnimation(
                     .easeOut(duration: 1.4)
                         .repeatForever(autoreverses: false)
                         .delay(delay)
                 ) {
                     expanded = true
                 }
             }
     }
 }
 
 /// A faint, tiled wallpaper of an SF Symbol, clipped to the avatar circle, used
 /// as a subtle background texture behind the main glyph. Tiles are staggered
 /// row-to-row for a diaper pattern and drawn at low opacity in a single
 /// `Canvas`. Everything scales off `size`, so it reads the same on a list-row
 /// avatar and a larger share-grid tile.
 private struct SymbolPattern: View {
     let symbolName: String
     let size: CGFloat
     var tint: Color = .white
     var opacity: Double = 0.16
 
     /// Tile glyph size as a fraction of the avatar size.
     private static let tileRatio: CGFloat = 0.26
     /// Centre-to-centre tile spacing as a fraction of the avatar size.
     private static let spacingRatio: CGFloat = 0.30
 
     var body: some View {
         Canvas { context, canvasSize in
             guard let glyph = context.resolveSymbol(id: 0) else { return }
             context.clip(to: Path(ellipseIn: CGRect(origin: .zero, size: canvasSize)))
             context.opacity = opacity
 
             let spacing = size * Self.spacingRatio
             guard spacing > 0 else { return }
             var row = 0
             var y = spacing / 2
             while y < canvasSize.height + spacing {
                 // Offset alternate rows by half a step for the staggered look.
                 let stagger = row.isMultiple(of: 2) ? 0 : spacing / 2
                 var x = spacing / 2 + stagger - spacing
                 while x < canvasSize.width + spacing {
                     context.draw(glyph, at: CGPoint(x: x, y: y))
                     x += spacing
                 }
                 y += spacing
                 row += 1
             }
         } symbols: {
             Image(systemName: symbolName)
                 .font(.system(size: size * Self.tileRatio, weight: .semibold))
                 .foregroundStyle(tint)
                 .tag(0)
         }
         .frame(width: size, height: size)
     }
 }
 
 private struct FriendAvatar {
     let symbolName: String
     let background: Color
 
     static func avatar(for authorID: String) -> FriendAvatar {
         // Friend avatars are intentionally colourless. A player's colour now
         // lives only inside a game and varies per game, so outside one a friend
         // is identified by their symbol alone on a neutral grey — never a fixed
         // colour badge. The symbol is a stable, deterministic choice per author.
         let symbol = symbols[PlayerColor.stableIndex(for: "symbol-\(authorID)", count: symbols.count)]
         return FriendAvatar(symbolName: symbol, background: Color(.darkGray))
     }
 
     private static let symbols: [String] = [
         "star.fill",
         "sparkles",
         "bolt.fill",
         "moon.fill",
         "heart.fill",
         "crown.fill",
         "leaf.fill",
         "flame.fill"
     ]
 }