Want to "deal" cards in Swift: how to stop cards from changing sizes as more cards are dealt - swift

Question

I need help with this animation. Basically, I want to deal 12 cards when I tap on the "deck." However, I want to deal it so that the sizes of each card is already set; I don't want the card size to change as more cards come onto screen. Put differently, to put 12 cards on the screen, at the end, we have 3 rows of 4 cards. But the Swift system tries to put 3 cards per row, and then moves to 4 cards per row. This changing of card size looks very weird, so I was hoping to put in some code that makes it so the card size doesn't change.
ContentView
import SwiftUI
struct ContentView: View {
#ObservedObject var viewModel: GameViewModel
#Namespace private var dealingNamespace
var body: some View {
VStack {
newGameButton
gameBody
HStack {
deckBody
discardedDeckBody
}
shuffleButton
}
}
var newGameButton: some View {
Button(action: { viewModel.newGame() }) { Text("New Game")
.font(.caption) }
}
var gameBody: some View {
AspectVGrid(items: viewModel.playingCards, aspectRatio: 2/3) { card in
CardView(viewModel: viewModel, card: card)
.matchedGeometryEffect(id: card.id, in: dealingNamespace)
.padding(4)
// .transition(AnyTransition.asymmetric(insertion: .identity, removal: .scale))
.onTapGesture {
withAnimation {
viewModel.choose(card)
}
}
.foregroundColor(viewModel.borderColor(for: card))
}
.padding(.horizontal)
}
private func dealAnimation(for cardNumber: Int, _ totalCardsToDeal: Int) -> Animation {
let delay = Double(cardNumber) * (CardConstants.totalDealDuration / Double(totalCardsToDeal))
return Animation.easeInOut(duration: CardConstants.dealDuration).delay(delay)
}
var deckBody: some View {
ZStack {
ForEach(viewModel.undealtCards) { card in
CardView(viewModel: viewModel, card: card)
.matchedGeometryEffect(id: card.id, in: dealingNamespace)
// .transition(AnyTransition.asymmetric(insertion: .opacity, removal: .identity))
}
RoundedRectangle(cornerRadius: DrawingConstants.cornerRadius)
}
.frame(width: CardConstants.undealtWidth, height: CardConstants.undealtHeight)
.foregroundColor(CardConstants.color)
.onTapGesture {
for cardNumber in Array(0..<viewModel.numberOfCardsToDeal()) {
withAnimation(dealAnimation(for: cardNumber, viewModel.numberOfCardsToDeal())) {
viewModel.deal()
}
}
}
}
var discardedDeckBody: some View {
ZStack {
ForEach(viewModel.discardedCards()) { card in
CardView(viewModel: viewModel, card: card)
}
}
.frame(width: CardConstants.undealtWidth, height: CardConstants.undealtHeight)
.foregroundColor(CardConstants.color)
}
private struct CardConstants {
static let color = Color.red
static let aspectRatio: CGFloat = 2/3
static let dealDuration: Double = 0.5
static let totalDealDuration: Double = 2
static let undealtHeight: CGFloat = 90
static let undealtWidth = undealtHeight * aspectRatio
}
var shuffleButton: some View {
Button("Shuffle") {
withAnimation {
viewModel.shuffle()
}
}
}
}
struct CardView: View {
#ObservedObject var viewModel: GameViewModel
let card: GameModel.Card
var body: some View {
GeometryReader { geometry in
ZStack {
let shape = RoundedRectangle(cornerRadius: DrawingConstants.cornerRadius)
shape.fill().foregroundColor(.white)
shape.stroke(lineWidth: DrawingConstants.lineWidth)
viewModel.symbol(for: card)
.padding(.all)
shape.foregroundColor(viewModel.cover(for: card))
}
}
}
}
struct DrawingConstants {
static let cornerRadius: CGFloat = 10
static let lineWidth: CGFloat = 3
static let fontScale: CGFloat = 0.7
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
let game = GameViewModel()
ContentView(viewModel: game)
.previewInterfaceOrientation(.portrait)
}
}
AspectVGrid
import SwiftUI
struct AspectVGrid<Item, ItemView>: View where ItemView: View, Item: Identifiable {
var items: [Item]
var aspectRatio: CGFloat
var content: (Item) -> ItemView
init(items: [Item], aspectRatio: CGFloat, #ViewBuilder content: #escaping (Item) -> ItemView) {
self.items = items
self.aspectRatio = aspectRatio
self.content = content
}
var body: some View {
GeometryReader { geometry in
ScrollView {
VStack {
let computedWidth: CGFloat = widthThatFits(itemCount: items.count, in: geometry.size, itemAspectRatio: aspectRatio)
let width: CGFloat = computedWidth > 65 ? computedWidth : 65
LazyVGrid(columns: [adaptiveGridItem(width: width)], spacing: 0) {
ForEach(items) { item in
content(item).aspectRatio(aspectRatio, contentMode: .fit)
}
}
Spacer(minLength: 0)
}
}
}
}
private func adaptiveGridItem(width: CGFloat) -> GridItem {
var gridItem = GridItem(.adaptive(minimum: width))
gridItem.spacing = 0
return gridItem
}
private func widthThatFits(itemCount: Int, in size: CGSize, itemAspectRatio: CGFloat) -> CGFloat {
var columnCount = 1
var rowCount = itemCount
repeat {
let itemWidth = size.width / CGFloat(columnCount)
let itemHeight = itemWidth / itemAspectRatio
if CGFloat(rowCount) * itemHeight < size.height {
break
}
columnCount += 1
rowCount = (itemCount + (columnCount - 1)) / columnCount
} while columnCount < itemCount
if columnCount > itemCount {
columnCount = itemCount
}
return floor(size.width / CGFloat(columnCount))
}
}
Model
import Foundation
import SwiftUI
struct GameModel {
private(set) var cards: Array<Card>
var undealtCards: Array<Card>
var discardedCards: Array<Card> = []
private(set) var playingCards: Array<Card>
private var selectedCards: Array<Card> = []
private static var colors = [ContentColor.red, ContentColor.green, ContentColor.purple]
private static var shapes = [ContentShape.squiggly, ContentShape.circle, ContentShape.diamond]
private static var fillings = [ContentFilling.empty, ContentFilling.full, ContentFilling.striped]
private static var numbers = [1, 2, 3]
func numberOfUndealtCards() -> Int {
return undealtCards.count
}
mutating func deal() {
playingCards.append(undealtCards[0])
undealtCards.remove(at: 0)
}
func numberOfCardsToDeal() -> Int {
if numberOfUndealtCards() == 81 {
return 12
} else {
return 3
}
}
mutating func resetCards() {
if !playingCards.first(where: { $0 == selectedCards.first })!.isMatched! {
selectedCards.forEach { card in
let unmatchedIndex = playingCards.firstIndex(of: card)!
playingCards[unmatchedIndex].isMatched = nil
}
selectedCards = []
}
}
mutating func shuffle() {
playingCards = playingCards.shuffled()
}
mutating func choose(_ card: Card) {
if let chosenIndex = playingCards.firstIndex(where: { $0.id == card.id }) {
if selectedCards.count < 3 || selectedCards.count == 3 && !selectedCards.contains(playingCards[chosenIndex]) {
if selectedCards.count == 3 { resetCards() }
if !playingCards[chosenIndex].isSelected {
playingCards[chosenIndex].isSelected = true
selectedCards.append(playingCards[chosenIndex])
if selectedCards.count == 4 {
let chosenCard = playingCards[chosenIndex]
for card in selectedCards {
if card != chosenCard {
discardedCards.append(card)
let matchedIndex = playingCards.firstIndex(of: card)!
playingCards.remove(at: matchedIndex)
}
}
selectedCards = [chosenCard]
}
if selectedCards.count == 3 {
if formSet(by: selectedCards) {
selectedCards.forEach { card in
let index = playingCards.firstIndex(of: card)!
playingCards[index].isMatched = true
playingCards[index].isSelected = false
}
} else {
selectedCards.forEach { card in
let index = playingCards.firstIndex(of: card)!
playingCards[index].isMatched = false
playingCards[index].isSelected = false
}
}
}
}
else {
playingCards[chosenIndex].isSelected = false
selectedCards.removeAll(where: { $0 == playingCards[chosenIndex] })
}
}
}
}
private func formSet(by cards: [Card]) -> Bool {
return feature(\Card.color, isValidFor: cards) && feature(\Card.shape, isValidFor: cards) && feature(\Card.filling, isValidFor: cards) && feature(\Card.number, isValidFor: cards)
}
private func feature<F: Hashable>(_ keyPath: KeyPath<Card, F>, isValidFor cards: [Card]) -> Bool {
let count = cards.reduce(into: Set<F>()) { $0.insert($1[keyPath: keyPath]) }.count
return count == 1 || count == 3
}
init() {
cards = []
var counter = 0
for id1 in GameModel.colors.indices {
for id2 in GameModel.shapes.indices {
for id3 in GameModel.fillings.indices {
for id4 in GameModel.numbers.indices {
cards.append(Card(color: GameModel.colors[id1], shape: GameModel.shapes[id2], filling: GameModel.fillings[id3], number: GameModel.numbers[id4], id: counter))
counter += 1
}
}
}
}
playingCards = []
undealtCards = cards
}
enum ContentColor {
case red
case green
case purple
}
enum ContentShape {
case squiggly
case circle
case diamond
}
enum ContentFilling {
case empty
case full
case striped
}
struct Card: Identifiable, Equatable {
var color: ContentColor
var shape: ContentShape
var filling: ContentFilling
var number: Int
var id: Int
var isSelected = false
var isUndealt = false
var isMatched: Bool?
static func == (lhs: Card, rhs: Card) -> Bool {
return lhs.id == rhs.id
}
}
}

Answer 1

Code is untestable and unclear due to missed many components, but the issue is because use use withAnimation, like
.onTapGesture {
withAnimation {
viewModel.choose(card)
}
}
which animates everything animatable.
There are next directions to fix observed behavior
disable animations everywhere they are unneeded, for example animating of frames
.frame(width: CardConstants.undealtWidth, height: CardConstants.undealtHeight)
.animation(nil, value: viewModel.undealtCards) // << like this !!
.foregroundColor(CardConstants.color)
remove all explicit generic withAnimation and use animation(_, value) specifically in those places which are going to be animatable, like
VStack {
newGameButton
gameBody
HStack {
deckBody
discardedDeckBody
}
shuffleButton
}
.animation(.default, value: viewModel.playingCards) // << here !!
probably combine 1-2