Update View on button click SwiftUI - ios

Question

noob here
I am creating a game in which you have to flip tiles and find pairs.
Now I am faced with the following problem: when I click on the "New Game" button, I need the tiles to be updated and filled with a new array, but this does not happen.
My assumption is that after clicking the button I need to update the view, but I could not figure out how to do this.
Help me please
struct ContentView: View {
#ObservedObject var viewModel: EmojiMemoryGame
var model: MemoryGameTheme
var body: some View {
VStack {
ScrollView {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 75))]) {
ForEach (viewModel.cards) { card in
CardView(card: card)
.aspectRatio(2/3, contentMode: .fit)
.onTapGesture {
viewModel.choose(card)
}
}
}
}
.foregroundColor(.red)
Spacer()
HStack {
newGame
Spacer()
nameTheme
}
}
.padding(.horizontal)
}
var newGame: some View {
Button(action: {
model.refreshTheme()
self.onActivate()
}, label: {
Text("New Game")
.font(.title)
.fontWeight(.heavy)
})
}
var nameTheme: some View {
Text ("\(MemoryGameTheme.themeName)")
.font(.title3)
.fontWeight(.heavy)
}
}
struct CardView: View {
let card: MemoryGame<String>.Card
var body: some View {
ZStack {
let shape = RoundedRectangle(cornerRadius: 20)
if card.isFaceUp {
shape.fill().foregroundColor(.white)
shape.strokeBorder(lineWidth: 3)
Text(card.content).font(.largeTitle)
} else if card.isMatched {
shape.opacity(0)
} else {
shape.fill()
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
let game = EmojiMemoryGame()
let theme = MemoryGameTheme()
ContentView(viewModel: game, model: theme)
.preferredColorScheme(.dark)
ContentView(viewModel: game, model: theme)
.preferredColorScheme(.light)
}
}
import Foundation
import Accessibility
import SwiftUI
class MemoryGameTheme: ObservableObject {
enum ChoiseTheme: CaseIterable {
case car
case animal
case item
case food
case face
}
static var choiseTheme = ["🐣", "🙉", "🙊", "🙈", "🐵", "🐽", "🐸", "🦊", "🐨", "🐹", "🐰", "🐻", "🐼", "🐻‍❄️", "🐶", "🐱", "🐮"]
static var themeName = "Animals"
static var colorCard = Color.gray
func theme(_ choiseTheme: ChoiseTheme) {
let randomTheme = ChoiseTheme.allCases.randomElement()!
switch randomTheme {
case .car:
let emojis = ["🚗", "🚕", "🚙", "🚌", "🚎", "🏎", "🚓", "🚑", "🚒", "🚐", "🛻", "🚚", "🚛", "🚜", "🏍", "🚲", "🚁", "✈️", "🛵", "🚀", "🛶", "🛸", "⛵️", "🚅"] // red
MemoryGameTheme.choiseTheme = emojis
MemoryGameTheme.themeName = "Cars"
MemoryGameTheme.colorCard = .red
case .animal:
let emojis = ["🐣", "🙉", "🙊", "🙈", "🐵", "🐽", "🐸", "🦊", "🐨", "🐹", "🐰", "🐻", "🐼", "🐻‍❄️", "🐶", "🐱", "🐮"]
// gray
MemoryGameTheme.choiseTheme = emojis
MemoryGameTheme.themeName = "Animals"
MemoryGameTheme.colorCard = .gray
case .item:
let emojis = ["💻", "⌚️", "📱", "⌨️", "🖥", "🖨", "🖲", "🕹", "🎥", "📷", "☎️", "📺", "⏰", "🎛", "📟", "📡", "🧯"]
// purple
MemoryGameTheme.choiseTheme = emojis
MemoryGameTheme.themeName = "Items"
MemoryGameTheme.colorCard = .purple
case .food:
let emojis = ["🍎", "🍏", "🍊", "🍐", "🍋", "🍌", "🥭", "🍒", "🍆", "🍑", "🍓", "🫐", "🫒", "🧀", "🍟", "🍕", "🥙"]
// yelow
MemoryGameTheme.choiseTheme = emojis
MemoryGameTheme.themeName = "Food"
MemoryGameTheme.colorCard = .yellow
case .face:
let emojis = ["😀", "🥳", "😋", "😗", "🥰", "😍", "😛", "😌", "😡", "🤯", "🤬", "🥵", "😫", "🧐", "☺️", "😃", "😄", "😁"] // green
MemoryGameTheme.choiseTheme = emojis
MemoryGameTheme.themeName = "Face"
MemoryGameTheme.colorCard = .green
}
print(randomTheme)
print(MemoryGameTheme.choiseTheme)
}
func refreshTheme() {
theme(ChoiseTheme.car)
}
}
import SwiftUI
class EmojiMemoryGame: ObservableObject {
static func createMemoreGame() -> MemoryGame<String> {
return MemoryGame<String>(numberOfPairOfCards: MemoryGameTheme.choiseTheme.count) { pairIndex in
MemoryGameTheme.choiseTheme[pairIndex]
}
}
#Published private var model: MemoryGame<String> = createMemoreGame()
var cards: Array<MemoryGame<String>.Card> {
model.cards
}
// MARK: - Intens(s)
func choose(_ card: MemoryGame<String>.Card) {
model.choose(card)
}
}
import Foundation
struct MemoryGame<CardContent> where CardContent: Equatable {
private(set) var cards: Array<Card>
private var indexOfTheOneAndOnlyFaceUpCard: Int?
mutating func choose(_ card: Card) {
if let chosenIndex = cards.firstIndex(where: { $0.id == card.id }),
!cards[chosenIndex].isFaceUp,
!cards[chosenIndex].isMatched {
if let potentialMatchIndex = indexOfTheOneAndOnlyFaceUpCard {
if cards[chosenIndex].content == cards[potentialMatchIndex].content {
cards[chosenIndex].isMatched = true
cards[potentialMatchIndex].isMatched = true
}
indexOfTheOneAndOnlyFaceUpCard = nil
} else {
for index in cards.indices {
cards[index].isFaceUp = false
}
indexOfTheOneAndOnlyFaceUpCard = chosenIndex
}
cards[chosenIndex].isFaceUp.toggle()
}
// print("\(cards)")
}
init (numberOfPairOfCards: Int, createCardContent: (Int) -> CardContent) {
cards = Array<Card>()
// add numberOfPairOfCards x2 cards to cards array
for pairIndex in 0..<numberOfPairOfCards {
let content = createCardContent(pairIndex)
cards.append(Card(content: content, id: pairIndex*2))
cards.append(Card(content: content, id: pairIndex*2+1))
}
cards.shuffle()
}
struct Card: Identifiable {
var isFaceUp: Bool = false
var isMatched: Bool = false
var content: CardContent
var id: Int
}
}

Answer 1

model is not declared as StateObject, so any change in it will not be reflected in the UI.
EDIT : there is a logic problem in your code :
model is not used as a var but as a link to static class properties
the theme is choosen via static properties from MemoryGameClass
As you use static properties of a class, the values are only used when something that use this properties is updated, not when the property is updated.
The theme should be a published var of EmojisMemoryGame and declared as a struct. So when something changes in properties of the theme, it will cause a redraw of the view.
Edit 2 : what I meant :
Theme as a struct :
struct MemoryGameTheme {
// List of themes
static let allThemes: [ChoiseTheme: MemoryGameTheme] =
[.car: MemoryGameTheme(choiseTheme: .car, themeEmojis: ["🚗", "🚕", "🚙", "🚌", "🚎", "🏎", "🚓", "🚑", "🚒", "🚐", "🛻", "🚚", "🚛", "🚜", "🏍", "🚲", "🚁", "✈️", "🛵", "🚀", "🛶", "🛸", "⛵️", "🚅"], themeName: "Cars", colorCard: .red),
.animal: MemoryGameTheme(choiseTheme: .animal, themeEmojis: ["🐣", "🙉", "🙊", "🙈", "🐵", "🐽", "🐸", "🦊", "🐨", "🐹", "🐰", "🐻", "🐼", "🐻‍❄️", "🐶", "🐱", "🐮"], themeName: "Animals", colorCard: .gray),
.item: MemoryGameTheme(choiseTheme: .item, themeEmojis: ["💻", "⌚️", "📱", "⌨️", "🖥", "🖨", "🖲", "🕹", "🎥", "📷", "☎️", "📺", "⏰", "🎛", "📟", "📡", "🧯"], themeName: "Items", colorCard: .purple),
.food: MemoryGameTheme(choiseTheme: .food, themeEmojis: ["🍎", "🍏", "🍊", "🍐", "🍋", "🍌", "🥭", "🍒", "🍆", "🍑", "🍓", "🫐", "🫒", "🧀", "🍟", "🍕", "🥙"], themeName: "Food", colorCard: .yellow),
.face: MemoryGameTheme(choiseTheme: .face, themeEmojis: ["😀", "🥳", "😋", "😗", "🥰", "😍", "😛", "😌", "😡", "🤯", "🤬", "🥵", "😫", "🧐", "☺️", "😃", "😄", "😁"], themeName: "Face", colorCard: .green)]
// Type of themes
enum ChoiseTheme: CaseIterable {
case car
case animal
case item
case food
case face
}
var choiseTheme: ChoiseTheme = .animal
var themeEmojis = ["🐣", "🙉", "🙊", "🙈", "🐵", "🐽", "🐸", "🦊", "🐨", "🐹", "🐰", "🐻", "🐼", "🐻‍❄️", "🐶", "🐱", "🐮"]
var themeName = "Animals"
var colorCard = Color.gray
mutating func changeTheme(_ choiseTheme: ChoiseTheme) {
let randomTheme = ChoiseTheme.allCases.randomElement()!
// Initialise the theme from static dictionnary
let theme = Self.allThemes[randomTheme]!
self.choiseTheme = theme.choiseTheme
self.themeEmojis = theme.themeEmojis
self.themeName = theme.themeName
self.colorCard = theme.colorCard
print(randomTheme)
print(choiseTheme)
}
// Mutating func to change theme
mutating func refreshTheme() {
changeTheme(ChoiseTheme.car)
}
}
EmojiGame including theme as Published var :
class EmojiMemoryGame: ObservableObject {
// Create a new memory game based on specific theme
static func createMemoreGame(theme: MemoryGameTheme) -> MemoryGame<String> {
return MemoryGame<String>(numberOfPairOfCards: theme.themeEmojis.count) { pairIndex in
theme.themeEmojis[pairIndex]
}
}
// This model is a struct
#Published private var model: MemoryGame<String> = EmojiMemoryGame.createMemoreGame(theme: MemoryGameTheme())
// This is the theme of the model
#Published private var theme: MemoryGameTheme = MemoryGameTheme()
// To acces model and theme comtents
var themeName: String {
theme.themeName
}
var colorCard: Color {
theme.colorCard
}
var cards: Array<MemoryGame<String>.Card> {
model.cards
}
// MARK: - Intens(s)
func choose(_ card: MemoryGame<String>.Card) {
model.choose(card)
}
// When refreshing theme, create a new game with teh new theme
func refreshTheme() {
theme.refreshTheme()
model = Self.createMemoreGame(theme: theme)
}
}
The Content view using ObservedObject Emoji game :
struct ContentView: View {
// emoji memory game must declared as Observed object
// to enable SwiftUI to update when something change in it
#ObservedObject var emojisGame: EmojiMemoryGame
var body: some View {
VStack {
ScrollView {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 75))]) {
ForEach (emojisGame.cards) { card in
CardView(card: card)
.aspectRatio(2/3, contentMode: .fit)
.onTapGesture {
emojisGame.choose(card)
}
}
}
}
// Use theme color for cards
.foregroundColor(emojisGame.colorCard)
Spacer()
HStack {
newGame
Spacer()
nameTheme
}
}
.padding(.horizontal)
}
var newGame: some View {
Button(action: {
// Reset emoji game with theme change
emojisGame.refreshTheme()
self.onActivate()
}, label: {
Text("New Game")
.font(.title)
.fontWeight(.heavy)
})
}
var nameTheme: some View {
Text ("\(emojisGame.themeName)")
.font(.title3)
.fontWeight(.heavy)
}
func onActivate() {
}
}