FireWorks

struct DuoLingoFireworks: View {
    
    var body: some View {
        ZStack {
           FireWork()
        }
    }
}

#Preview {
    DuoLingoFireworks()
}

struct FireWork: View {
    @State private var largeWidth: CGFloat = 0
    @State private var minWidth: CGFloat = 0
    
    var body: some View {
        ZStack {
            Button(action: {
                largeWidth = 200
                minWidth = 60
            }, label: {
                Text("Boom!")
                    .font(.title)
            })
            .offset(y: -200)
            
            ZStack {
                ZStack(alignment: .bottom) {
                    ForEach(0...3, id: \.self) { largeLine in
                        let largeLineDegrees = CGFloat(largeLine) * 90 // tar ggr 90 här för 4 rectangles * 90 = 360 grader
                        
                        RoundedRectangle(cornerRadius: 5)
                            .frame(width: 10, height: largeWidth)
                            .rotationEffect(Angle(degrees: largeLineDegrees))
                            .foregroundStyle(.red)
                            .opacity(0.4)
                    }
                }
                
                ZStack(alignment: .bottom) {
                    ForEach(0...3, id: \.self) { largeLine in
                        let largeLineDegrees = CGFloat(largeLine) * 90 // tar ggr 90 här för 4 rectangles * 90 = 360 grader
                        
                        RoundedRectangle(cornerRadius: 5)
                            .frame(width: 10, height: minWidth)
                            .offset(x: -0, y: -70)
                            .rotationEffect(Angle(degrees: largeLineDegrees))
                            .foregroundStyle(.red)
                    }
                }
                .rotationEffect(.degrees(45))
            }
            .animation(.easeInOut(duration: 2), value: largeWidth)
            .animation(.easeInOut(duration: 2), value: minWidth)
            
        }
    }
}