Improved visibility of keypegs on the gamepage and adapted the horizontal alignment of the guesspegs in the history.

Author: szv

src/clients/xaml/CodeBreaker.WinUI/Views/Pages/GamePage.xaml.cs

@@ -25,11 +25,11 @@ public void Receive(GameMoveMessage message)
         static void Animate(ConnectedAnimationService animationService, string key, UIElement target)
         {
             var animation = animationService.GetAnimation(key);
-            animation.Configuration = new BasicConnectedAnimationConfiguration();
 
             if (animation is null)
                 return;
 
+            animation.Configuration = new BasicConnectedAnimationConfiguration();
             animation.TryStart(target);
         }
 

src/clients/xaml/CodeBreaker.WinUI/Views/Templates/CodeBreakerTemplates.xaml

@@ -8,29 +8,34 @@
     <conv:IntToEnumerableConverter x:Key="IntToEnumerableConverter" />
 
     <DataTemplate x:Key="PegsTemplate" x:Name="PegsTemplate">
-        <Grid>
+        <Grid
+            Margin="-13,0"
+            Background="{ThemeResource CardBackgroundFillColorDefault}"
+            CornerRadius="{ThemeResource ControlCornerRadius}">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="auto" />
                 <ColumnDefinition Width="auto" />
                 <ColumnDefinition Width="auto" />
             </Grid.ColumnDefinitions>
-            <TextBlock Grid.Column="0" Text="{Binding Path=MoveNumber}" FontSize="{ThemeResource LargeFontSize}" Margin="20,0" VerticalAlignment="Center" />
-            <Border Grid.Column="1" BorderThickness="2,2,0,2" BorderBrush="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="7" CornerRadius="5,0,0,5">
+            <TextBlock Grid.Column="0" Text="{Binding Path=MoveNumber}" FontSize="{ThemeResource LargeFontSize}" Margin="48,0" VerticalAlignment="Center" />
+            <Border Grid.Column="1" Margin="20,0,0,0" Padding="7" x:Name="ShadowTarget">
                 <ItemsControl ItemsSource="{Binding Path=GuessPegs}">
                     <ItemsControl.ItemsPanel>
                         <ItemsPanelTemplate>
-                            <StackPanel Orientation="Horizontal" Margin="16,0,0,0" />
+                            <StackPanel Orientation="Horizontal" Spacing="27" />
                         </ItemsPanelTemplate>
                     </ItemsControl.ItemsPanel>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
-                            <Ellipse Width="68" Height="68" Margin="12,4" Fill="{Binding Converter={StaticResource ColorConverter}}" />
+                            <Grid>
+                                <Ellipse Width="68" Height="68" Margin="12,4" Fill="{Binding Converter={StaticResource ColorConverter}}" Stroke="{ThemeResource TextBoxBorderThemeBrush}" StrokeThickness="1" />
+                            </Grid>
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
             </Border>
 
-            <Border Grid.Column="2" BorderThickness="0,2,2,2" BorderBrush="{ThemeResource ApplicationPageBackgroundThemeBrush}" Padding="30,7" CornerRadius="0,5,5,0">
+            <Border Grid.Column="2" Padding="30,7" Margin="12,0,0,0" MinWidth="130">
                 <Grid>
                     <Grid.RowDefinitions>
                         <RowDefinition />
@@ -44,7 +49,7 @@
                         </ItemsControl.ItemsPanel>
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <Ellipse Width="16" Height="16" Fill="White" />
+                                <Ellipse Width="25" Height="25" Fill="White" Stroke="{ThemeResource TextBoxBorderThemeBrush}" StrokeThickness="1" />
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>
@@ -56,7 +61,7 @@
                         </ItemsControl.ItemsPanel>
                         <ItemsControl.ItemTemplate>
                             <DataTemplate>
-                                <Ellipse Width="16" Height="16" Fill="Black" />
+                                <Ellipse Width="25" Height="25" Fill="Black" Stroke="{ThemeResource TextBoxBorderThemeBrush}" StrokeThickness="1" />
                             </DataTemplate>
                         </ItemsControl.ItemTemplate>
                     </ItemsControl>