View not rendering properly when embedded in App - view

Question

I have a view struct that renders ok in preview, but not when embedded in an app. The view used to display image files, and worked ok when the dice changed value. Now it has changed to drawing dynamically, it has stopped working correctly. It stays displaying the same number of dots as the first values, and misplaces the dots when it redraws.
Below is the code for the view:
import SwiftUI
struct DiceView: View {
var dice: NubbleGame.Dice
var color: Color = Color.red
let dotSizeDivisor = 5
var body: some View {
GeometryReader
{ viewSize in
let smallestSide = min(viewSize.size.width, viewSize.size.height)
let dotSize = smallestSide/CGFloat(dotSizeDivisor)
ZStack()
{
RoundedRectangle(cornerRadius: smallestSide/10)
.stroke(Color.black, lineWidth: viewSize.size.width/50)
ForEach(0..<dice.currentValue)
{ i in
ZStack()
{
Circle()
.fill(color)
.position(getPositionForDot(dotNumber: i+1, diceValue: dice.currentValue, diceSize:smallestSide))
.frame(width: dotSize, height: dotSize, alignment: .center)
Circle()
.stroke(Color.black, lineWidth: 2)
.position(getPositionForDot(dotNumber: i+1, diceValue: dice.currentValue, diceSize:smallestSide))
.frame(width: dotSize, height: dotSize, alignment: .center)
}
}
}
}
}
func getPositionForDot(dotNumber: Int, diceValue: Int, diceSize: CGFloat) -> CGPoint
{
var tempDiceValue = diceValue
var tempDotNumber = dotNumber
let zero = CGFloat(diceSize/CGFloat(dotSizeDivisor))
let offSet = CGFloat((diceSize * 0.9) / 2)
let center = CGFloat(diceSize/2)
var thisDot: CGPoint = CGPoint(x: 0, y: 0)
if diceValue%2 != 0
{
if dotNumber == 1
{
return CGPoint(x: (diceSize/2) - offSet, y: (diceSize/2) - offSet)
}
else
{
tempDiceValue = diceValue - 1
tempDotNumber = dotNumber - 1
}
}
for i in 1..<tempDotNumber+1
{
if tempDiceValue % 2 == 0
{
if i == 1
{
thisDot = CGPoint(x: zero - offSet, y: zero - offSet)
}
else if i == 2
{
thisDot = CGPoint(x: diceSize - zero - offSet, y: (diceSize - zero) - offSet)
}
else if i == 3
{
thisDot = CGPoint(x: (diceSize - zero) - offSet, y: zero - offSet)
}
else if i == 4
{
thisDot = CGPoint(x: zero - offSet, y: (diceSize - zero) - offSet)
}
else if i == 5
{
thisDot = CGPoint(x: zero - offSet, y: diceSize/2 - offSet)
}
else if i == 6
{
thisDot = CGPoint(x: (diceSize - zero) - offSet, y: center - offSet)
}
else if i == 7
{
thisDot = CGPoint(x: center - offSet, y: center-diceSize/(CGFloat(dotSizeDivisor)) - offSet)
}
else if i == 8
{
thisDot = CGPoint(x: center - offSet, y: center+diceSize/(CGFloat(dotSizeDivisor)) - offSet)
}
}
}
return thisDot
}
}
This is the code used in the app. The model has an array of Dice in it - either with 3 or 4 depending on the specific version of the game being played:
ForEach(viewModel.dice){dice in
DiceView(dice: dice)
.frame(width: 80, height: 80)
.onTapGesture(perform: {
if !viewModel.diceRolled
{
Sounds.playSounds(soundName: "diceroll")
}
viewModel.rollDice()
})
...and this is the Dice struct from the model:
struct Dice: Identifiable
{
var id: Int
var numberOfSides: Int
var currentValue: Int
}
Any help will be much appreciated! Thank you!

Answer 1

The issue was in the ForeEach loop that drew the dots... This answer had the solution. It needed to be identifiable.
View is not rerendered in Nested ForEach loop