A SwiftUI prototype animation for adding/removing players from a game

AnimationDemo.swift

import SwiftUI

let colors = [
    Color.pink,
    Color.blue,
    Color.green,
    Color.orange,
    Color.purple,
    Color.black,
]

struct ContentView: View {

    @State
    var playerCount: Int

    var body: some View {
        VStack {
            HStack(spacing: 0) {
                ForEach(Array(0..<playerCount), id: \.self) { index in
                    PlayerView(
                        backgroundColor: colors[index]
                    )
                    .transition(AnyTransition.move(edge: .trailing))
                    .animation(.easeInOut)
                }
            }
            .frame(height: 144.0)

            CounterView(playerCount: $playerCount)
        }
    }
}

struct PlayerView: View {

    var backgroundColor: Color

    var body: some View {
        ZStack {
            Rectangle()
                .fill(self.backgroundColor.opacity(0.25))

            GeometryReader { proxy in
                Image(systemName: "gamecontroller.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: proxy.smallerDimension * 3/4, height: proxy.smallerDimension * 3/4)
                    .foregroundColor(self.backgroundColor)
            }
        }
    }

}

struct CounterView: View {

    @Binding
    var playerCount: Int

    var body: some View {
        let minusDisabled = self.playerCount <= 1
        let plusDisabled = self.playerCount >= colors.count

        return HStack(spacing: 16.0) {
            Text("Number of players")
                .font(.title)
                .bold()

            Button(action: {
                if self.playerCount > 1 {
                    self.playerCount -= 1
                }
            }, label: {
                Image(systemName: "minus.circle.fill")
                    .resizable()
                    .frame(width: 36.0, height: 36.0)
                    .foregroundColor(minusDisabled ? Color.gray.opacity(0.1) : Color.gray.opacity(0.6))
            })
            .disabled(minusDisabled)

            Text("\(self.playerCount)")
                .font(.title)
                .bold()

            Button(action: {
                if self.playerCount < colors.count {
                    self.playerCount += 1
                }
            }, label: {
                Image(systemName: "plus.circle.fill")
                    .resizable()
                    .frame(width: 36.0, height: 36.0)
                    .foregroundColor(plusDisabled ? Color.gray.opacity(0.1) : Color.gray.opacity(0.6))
            })
            .disabled(plusDisabled)
        }
    }
}

extension GeometryProxy {
    var smallerDimension: CGFloat {
        min(self.size.width, self.size.height)
    }
}