crossmate

FriendAvatarView.swift (5713B)

---

 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 delivered: the glyph spins once and becomes a checkmark.
         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 .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)
 
             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 { 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 .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
                 }
             }
     }
 }
 
 private struct FriendAvatar {
     let symbolName: String
     let background: Color
 
     static func avatar(for authorID: String) -> FriendAvatar {
         // The symbol is seeded with a distinct string from the colour (which
         // `stableColor` hashes off the raw authorID) so a friend's symbol and
         // colour vary independently rather than always pairing up. The avatar
         // is global to the friend list, so no colours are reserved here — this
         // is the friend's base colour, which a busy game may probe off.
         let symbol = symbols[PlayerColor.stableIndex(for: "symbol-\(authorID)", count: symbols.count)]
         let color = PlayerColor.stableColor(forAuthorID: authorID, reserved: [])
         return FriendAvatar(symbolName: symbol, background: color.tint)
     }
 
     private static let symbols: [String] = [
         "star.fill",
         "sparkles",
         "bolt.fill",
         "moon.fill",
         "heart.fill",
         "crown.fill",
         "leaf.fill",
         "flame.fill"
     ]
 }