Merge pull request #93 from CodebreakerApp/92-animations-and-infomessages

92 animations and infomessages

Author: christiannagel

src/Codebreaker.ViewModels/Pages/GamePageViewModel.cs

@@ -52,11 +52,6 @@ IInfoBarService infoBarService
         };
     }
 
-    /// <summary>
-    /// Information on the game - messages, errors, etc. See <see cref="InfoBarMessageService"/>.
-    /// </summary>
-    public InfoBarService InfoBarMessageService { get; } = new();
-
     private Game? _game;
     /// <summary>
     /// <see cref="Models.Game"/> instance."/>
@@ -121,7 +116,7 @@ public Game? Game
     /// Updates the <see cref="GameStatus"/> property.
     /// Initializes <see cref="Game"/>).
     /// Increments the move number.
-    /// Shows <see cref="IDialogService"/> messages or <see cref="InfoBarMessageService"/> messages with errors.
+    /// Shows <see cref="IDialogService"/> messages or <see cref="_infoBarService"/> messages with errors.
     /// </summary>
     /// <returns>A task</returns>
     [RelayCommand(AllowConcurrentExecutions = false, FlowExceptionsToTaskScheduler = true)]
@@ -219,17 +214,17 @@ private async Task SetMoveAsync()
             if (isVictory)
             {
                 GameStatus = GameMode.Won;
-                InfoBarMessageService.New.IsSuccessMessage().WithMessage("Congratulations - you won!").Show();
+                _infoBarService.New.IsSuccessMessage().WithMessage("Congratulations - you won!").Show();
             }
             else if (ended)
             {
                 GameStatus = GameMode.Lost;
-                InfoBarMessageService.New.WithMessage("Sorry, you didn't find the matching colors!").Show();
+                _infoBarService.New.WithMessage("Sorry, you didn't find the matching colors!").Show();
             }
         }
         catch (Exception ex)
         {
-            InfoBarMessageService.New.WithMessage(ex.Message).IsErrorMessage().Show();
+            _infoBarService.New.WithMessage(ex.Message).IsErrorMessage().Show();
         }
         finally
         {
@@ -254,7 +249,7 @@ private void InitializeValues()
         ClearSelectedColor();
         GameMoves.Clear();
         GameStatus = GameMode.NotRunning;
-        InfoBarMessageService.Clear();
+        _infoBarService.Clear();
         _moveNumber = 0;
     }
 }

src/Codebreaker.WinUI/Helpers/LinqExtensions.cs

@@ -0,0 +1,22 @@
+namespace System.Linq;
+
+internal static class LinqExtensions
+{
+    public static IEnumerable<T> Foreach<T>(this IEnumerable<T> enumerable, Action<T> action)
+    {
+        foreach (var item in enumerable)
+            action(item);
+
+        return enumerable;
+    }
+
+    public static IEnumerable<T> Foreach<T>(this IEnumerable<T> enumerable, Action<T, int> action)
+    {
+        int i = 0;
+
+        foreach (var item in enumerable)
+            action(item, i++);
+
+        return enumerable;
+    }
+}

src/Codebreaker.WinUI/Views/Components/PegSelectionComponent.xaml.cs

@@ -1,12 +1,16 @@
 using Codebreaker.ViewModels;
+using CommunityToolkit.Mvvm.Messaging;
+using Microsoft.UI.Xaml.Media.Animation;
 
 namespace CodeBreaker.WinUI.Views.Components;
 
-internal sealed partial class PegSelectionComponent : UserControl
+internal sealed partial class PegSelectionComponent : UserControl, IRecipient<GameMoveMessage>
 {
     public PegSelectionComponent()
     {
         InitializeComponent();
+        WeakReferenceMessenger.Default.Register(this);
+        WeakReferenceMessenger.Default.UnregisterAllOnUnloaded(this);
     }
 
     public GamePageViewModel ViewModel
@@ -22,4 +26,13 @@ public GamePageViewModel ViewModel
     public static readonly DependencyProperty ViewModelProperty =
         DependencyProperty.Register("ViewModel", typeof(GamePageViewModel), typeof(PegSelectionComponent), new PropertyMetadata(null));
 
+    public void Receive(GameMoveMessage message)
+    {
+        if (message.GameMoveValue is not GameMoveValue.Started)
+            return;
+
+        var animationService = ConnectedAnimationService.GetForCurrentView();
+        this.FindItemsOfType<ComboBox>(this)
+            .Foreach((comboBox, i) => animationService.PrepareToAnimate($"guess{i}", comboBox));
+    }
 }

src/Codebreaker.WinUI/Views/Pages/GamePage.xaml

@@ -21,14 +21,13 @@
     </Page.Resources>
     <Grid x:Name="ContentArea">
         <Grid.RowDefinitions>
-            <RowDefinition Height="auto" />
             <RowDefinition Height="auto" />
             <RowDefinition Height="auto" />
             <RowDefinition Height="*" />
         </Grid.RowDefinitions>
         <!--Startgame section-->
         <Grid
-            Grid.Row="1"
+            Grid.Row="0"
             ColumnSpacing="25"
             Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibility}, ConverterParameter=Start}">
             <Grid.ColumnDefinitions>
@@ -85,15 +84,18 @@
                     <TextBlock Text="{cme:ResourceString Name=GamePage_CancelButtonText}" />
                 </StackPanel>
             </Button>-->
-            <components:PegSelectionComponent 
-                Grid.Row="2"
-                ViewModel="{x:Bind ViewModel, Mode=OneWay}" />
+                <components:PegSelectionComponent 
+            Grid.Row="3"
+            Margin="65,0,0,0"
+            ViewModel="{x:Bind ViewModel, Mode=OneWay}" />
         </StackPanel>
         <!--Move section-->
         <ListBox 
             x:Name="listGameMoves"
-            Grid.Row="3"
+            Grid.Row="2"
             Background="Transparent"
+            SelectedIndex="-1"
+            IsHitTestVisible="False"
             Visibility="{x:Bind ViewModel.GameStatus, Mode=OneWay, Converter={StaticResource GameStatusVisibility}, ConverterParameter=Running}"
             ItemsSource="{x:Bind ViewModel.GameMoves, Mode=OneWay}"
             ItemTemplate="{StaticResource PegsTemplate}" />

src/Codebreaker.WinUI/Views/Pages/GamePage.xaml.cs

@@ -1,17 +1,45 @@
 using Codebreaker.ViewModels;
+using CommunityToolkit.Mvvm.Messaging;
+using Microsoft.UI.Xaml.Media.Animation;
+using Microsoft.UI.Xaml.Shapes;
 
 namespace CodeBreaker.WinUI.Views.Pages;
 
 /// <summary>
 /// An empty page that can be used on its own or navigated to within a Frame.
 /// </summary>
-public sealed partial class GamePage : Page
+public sealed partial class GamePage : Page, IRecipient<GameMoveMessage>
 {
     public GamePageViewModel ViewModel { get; }
 
     public GamePage()
     {
         ViewModel = App.GetService<GamePageViewModel>();
         InitializeComponent();
+        WeakReferenceMessenger.Default.Register(this);
+        WeakReferenceMessenger.Default.UnregisterAllOnUnloaded(this);
+    }
+
+    public void Receive(GameMoveMessage message)
+    {
+        if (message.GameMoveValue is not GameMoveValue.Completed)
+            return;
+
+        var selectionAndKeyPegs = message.SelectionAndKeyPegs ?? throw new InvalidOperationException();
+        var animationService = ConnectedAnimationService.GetForCurrentView();
+        animationService.DefaultDuration = TimeSpan.FromMilliseconds(500);
+        var container = listGameMoves.ItemContainerGenerator.ContainerFromItem(selectionAndKeyPegs);
+        this.FindItemsOfType<Ellipse>(container)
+            .Foreach((ellipse, i) =>
+            {
+                ConnectedAnimation? animation = animationService.GetAnimation($"guess{i}");
+
+                // No animation found for this ellipxe -> the ellipse is most likely a key-peg
+                if (animation is null)
+                    return;
+
+                animation.Configuration = new BasicConnectedAnimationConfiguration();
+                animation.TryStart(ellipse);
+            });
     }
 }

src/Codebreaker.WinUI/Views/Templates/CodeBreakerTemplates.xaml

@@ -17,7 +17,7 @@
                 <ColumnDefinition Width="auto" />
                 <ColumnDefinition Width="auto" />
             </Grid.ColumnDefinitions>
-            <TextBlock Grid.Column="0" Text="{Binding Path=MoveNumber, Mode=OneTime}" FontSize="{ThemeResource LargeFontSize}" Margin="48,0" VerticalAlignment="Center" />
+            <TextBlock Grid.Column="0" Text="{Binding Path=MoveNumber, Mode=OneTime}" FontSize="{ThemeResource LargeFontSize}" Margin="48,0,10,0" VerticalAlignment="Center" />
             <Border Grid.Column="1" Margin="20,0,0,0" Padding="7" x:Name="ShadowTarget">
                 <ItemsControl ItemsSource="{Binding Path=GuessPegs, Mode=OneTime}">
                     <ItemsControl.ItemsPanel>