Added button for reseting the current move to the Playground component

Author: szv

src/CodeBreaker.Blazor.Client/Components/Playground.razor

@@ -35,10 +35,13 @@
                 }
                 @if (i == 1 && !GameFinished)
                 {
-                    <div>
+                    <div class="selectable-game-buttons">
                         <FluentButton Appearance="Appearance.Stealth" Disabled="PlayButtonDisabled" OnClick="SetMoveAsync">
                             <FluentIcon Value="new Icons.Filled.Size48.PlayCircle()" />
                         </FluentButton>
+                        <FluentButton Appearance="Appearance.Stealth" Disabled="ClearButtonDisabled" OnClick="ResetMove">
+                            <FluentIcon Value="new Icons.Filled.Size48.DismissCircle()" />
+                        </FluentButton>
                     </div>
                 }
                 else

src/CodeBreaker.Blazor.Client/Components/Playground.razor.cs

@@ -35,6 +35,8 @@ AvailableColors is not null && field.Color is null
         || AvailableShapes is not null && field.Shape is null
     );
 
+    private bool ClearButtonDisabled => _currentMove.All(field => field.Color is null && field.Shape is null);
+
     private string KeyPegsFormat => Game.NumberCodes > 4 ? "three-two" : "two-two";
 
     private IEnumerable<string>? AvailableColors => Game?.FieldValues.GetOrDefault("colors");
@@ -108,6 +110,9 @@ public async Task SetMoveAsync()
         }
     }
 
+    private void ResetMove() =>
+        InitialzePlayground();
+
     #region ClickEvents
     private void SelectField(int index)
     {

src/CodeBreaker.Blazor.Client/Components/Playground.razor.css

@@ -111,6 +111,11 @@
         transition: background-color .5s ease-in-out;
     }
 
+    .game-container .game-row .selectable-game-buttons {
+        width: unset;
+        margin-left: -5px;
+    }
+
         .game-container .game-row div.key-pegs {
             width: calc(var(--game-field-width) - 4px);
             height: calc(var(--game-field-height) - 4px);