I am creating an application that generates dice and lets the user place them in groups, if a user has 3 of the same dice linked to each other they get points.
The way it works is at the start of the game a user gets 3 dice. Now the user can select in which group they can place these dice. After the user places the first set of generated dice a new set is generated. If a user generates dice that has a possible link with already placed dice the dice which can be linked need to have an animation.
The problem that I am having is that the animations are not synchronized with each other. I want all linkable dice to start and end the animation at the same time.
This is what currently is happening: https://gyazo.com/e0586c0579f5845e78129f7e60f1ad6a
As you can see on the top are the generated dice. On the bottom the user has previously placed dice in that group and now they have a possible link(the generated dice with the placed dice). If this happens the animation needs to start on the dice that have the possible link.
My html code:
<button @onclick="GenerateDices">Generate Dice</button>
<button @onclick="AddToGroup">Add Dice to group</button>
<section id="Given-Dices">
@foreach (var dice in generatedDices)
{
<img src="@dice.Src" width="50" height="50" class="Dice" />
}
<div>
<section id="Group" class="Groups" )">
@foreach (var matrix in group.GetMatrix())
{
<section class="Matrix">
@foreach (var dice in matrix)
{
<img src="@dice.Src" width="50" height="50" class="Dice @(dice.blink ? "blink-image" : "")" />
}
</section>
}
</section>
</div>
</section>
I have 2 buttons, one to generate the dice and one to add them to the group.
I use a foreach to display the 3 generated dice.
To display the existing group I also use a foreach.
The matrix is a 3x3 matrix that works like following
At the start the matrix is empty and a first set of dice is generated:
(0 = empty, numbers = type of generated dice)
matrix:
0 0 0
0 0 0
0 0 0
generated dice:
1
1
5
when a user adds the generated dice to this group(the matrix of that group), the matrix becomes:
1 0 0
1 0 0
5 0 0
After this gets added, a new set of dice is generated at the top.
If one of the dice has a possible link with the group, the dice in that group need to start the animation.
So lets say the newly generated dice are:
1
2
6
With this example the dice between brackets needs to start animating:
[1] 0 0
1 0 0
5 0 0
The code behind this:
private List<Dice> generatedDices = new List<Dice>();
Group group = new Group();
private void GenerateDices()
{
generatedDices = new List<Dice>();
generatedDices.Add(new Dice());
generatedDices.Add(new Dice());
generatedDices.Add(new Dice());
Random rnd = new Random();
for (int i = 0; i < 3; i++)
{
int diceType = rnd.Next(1, 7);
Dice dice = GetDice(diceType);
generatedDices[i] = dice;
}
}
private Dice GetDice(int diceType)
{
Dice dice = new Dice();
switch (diceType)
{
case 1:
dice.FileName = "Dice1.png";
dice.value = 20;
dice.type = Dices.One;
return dice;
case 2:
dice.FileName = "Dice2.png";
dice.value = 20;
dice.type = Dices.Two;
return dice;
case 3:
dice.FileName = "Dice3.png";
dice.value = 20;
dice.type = Dices.Three;
return dice;
case 4:
dice.FileName = "Dice4.png";
dice.value = 40;
dice.type = Dices.Four;
return dice;
case 5:
dice.FileName = "Dice5.png";
dice.value = 40;
dice.type = Dices.Five;
return dice;
case 6:
dice.FileName = "Dice6.png";
dice.value = 60;
dice.type = Dices.Six;
return dice;
}
return dice;
}
private void AddToGroup()
{
this.group.AddList(this.generatedDices);
this.ChangeBoolean(this.group);
}
private void ChangeBoolean(Group group)
{
List<List<Dice>> matrix = group.GetMatrix();
if (matrix.Count == 2)
{
this.AddBlink2Rows(group);
}
else if (matrix.Count() == 1)
{
this.AddBlink1Row(group);
}
}
private void AddBlink1Row(Group group)
{
List<List<Dice>> matrix = group.GetMatrix();
if (matrix[0][0].Equals(this.generatedDices[0]))
{
matrix[0][0].blink = true;
}
if (matrix[0][1].Equals(this.generatedDices[1]))
{
matrix[0][1].blink = true;
}
if (matrix[0][2].Equals(this.generatedDices[2]))
{
matrix[0][2].blink = true;
}
if (matrix[0][0].Equals(this.generatedDices[1]))
{
matrix[0][0].blink = true;
}
if (matrix[0][2].Equals(this.generatedDices[1]))
{
matrix[0][2].blink = true;
}
}
private void AddBlink2Rows(Group group)
{
List<List<Dice>> matrix = group.GetMatrix();
if ((matrix[0][0].Equals(this.generatedDices[0])) && (matrix[1][0].Equals(this.generatedDices[0])) && (matrix[0][0].Equals(matrix[1][0])))
{
matrix[0][0].blink = true;
matrix[1][0].blink = true;
}
if ((matrix[0][1].Equals(this.generatedDices[1])) && (matrix[1][1].Equals(this.generatedDices[1])) && (matrix[0][1].Equals(matrix[1][1])))
{
matrix[0][1].blink = true;
matrix[1][1].blink = true;
}
if ((matrix[0][2].Equals(this.generatedDices[2])) && (matrix[1][2].Equals(this.generatedDices[2])) && (matrix[0][2].Equals(matrix[1][2])))
{
matrix[0][2].blink = true;
matrix[1][2].blink = true;
}
if ((matrix[0][0].Equals(this.generatedDices[2])) && (matrix[1][1].Equals(this.generatedDices[2])) && (matrix[0][0].Equals(matrix[1][1])))
{
matrix[0][0].blink = true;
matrix[1][1].blink = true;
}
if ((matrix[0][2].Equals(this.generatedDices[0])) && (matrix[1][1].Equals(this.generatedDices[0])) && (matrix[0][2].Equals(matrix[1][1])))
{
matrix[0][2].blink = true;
matrix[1][1].blink = true;
}
group.SetMatrix(matrix);
}
GenerateDices() creates 3 new dice between 1 and 6 , using the GetDice() we get the correct information. Example: if we generate a number 4 the GetDice() returns a dice with the information:
dice.FileName = "Dice4.png";
dice.value = 40;
dice.type = Dices.Four;
After all dices have been generated, the function "ChangeBoolean(this.group)"wil be triggerd.
private void ChangeBoolean(Group group)
{
List<List<Dice>> matrix = group.GetMatrix();
if (matrix.Count == 2)
{
this.AddBlink2Rows(group);
}
else if (matrix.Count() == 1)
{
this.AddBlink1Row(group);
}
}
if a matrix has a size of 1 the AddBlink1Row(Group group) will be triggered if it has a size of 2 the AddBlink2Rows(Group group) will be triggered.
Both of these functions wil go over each item of the matrix and compare it to the generated dice. If 2 dice have a possible link, the boolean "blink" will be set to true.
If the button "Add Dice to group" is pressed the function AddToGroup() will add the dice to the matrix of that group.
The animation I am using:
@-webkit-keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.blink-image {
-moz-animation: blink normal 0.5s infinite ease-in-out;
-webkit-animation: blink normal 0.5s infinite ease-in-out;
-ms-animation: blink normal 0.5s infinite ease-in-out;
animation: blink normal 0.5s infinite ease-in-out;
}
This animation will be triggered when the class "blink-image" is added to an element.
I add or remove this class by checking if the Boolean of the dice is true or false (in the html code):
@(image1.blink ? "blink-image" : "")"
Sometimes the animation start at the same time and sometimes it doesn't, an example of it happening :
https://gyazo.com/cc8394930d03550c46284617c146481f
As you can see in this gif, the first groups is not blinking at the same time and the 3th group is.
So what I want is that all dice start blinking at the same time.
How can I make them start at the same time?
question from:
https://stackoverflow.com/questions/66056510/synchronizing-css-animations-in-blazor 
