feat: add creatures and drops on the map

Client/Application/Components/Map.xaml

@@ -5,6 +5,7 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:Client.Application.Components"
         xmlns:services="clr-namespace:Client.Application.Services"
+        xmlns:components="clr-namespace:Client.Application.Components"
         mc:Ignorable="d"
         services:SizeObserver.Observe="True"
         services:SizeObserver.ObservedWidth="{Binding ViewportWidth, Mode=OneWayToSource}"
@@ -35,6 +36,125 @@
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
+        <ItemsControl ItemsSource="{Binding Path=Creatures}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <Canvas ClipToBounds="True" />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Path x:Name="CreatureAggroRadius" StrokeThickness="2" Visibility="Hidden" Fill="#11ff0000" Stroke="#33ff0000">
+                            <Path.Data>
+                                <EllipseGeometry 
+                                    RadiusX="{Binding AggroRadius,Mode=OneWay}" 
+                                    RadiusY="{Binding AggroRadius,Mode=OneWay}" />
+                            </Path.Data>
+                            <Path.RenderTransform>
+                                <TranslateTransform X="{Binding Position.X,Mode=OneWay}" Y="{Binding Position.Y,Mode=OneWay}"/>
+                            </Path.RenderTransform>
+                        </Path>
+                        <Path x:Name="CreatureBody" StrokeThickness="2">
+                            <Path.Data>
+                                <EllipseGeometry 
+                                    RadiusX="{Binding Radius,Mode=OneWay}" 
+                                    RadiusY="{Binding Radius,Mode=OneWay}" />
+                            </Path.Data>
+                            <Path.RenderTransform>
+                                <TranslateTransform X="{Binding Position.X,Mode=OneWay}" Y="{Binding Position.Y,Mode=OneWay}"/>
+                            </Path.RenderTransform>
+                        </Path>
+                        <Line x:Name="CreatureDirection" X1="0" Y1="0" X2="{Binding Direction.X,Mode=OneWay}" Y2="{Binding Direction.Y,Mode=OneWay}" StrokeThickness="2">
+                            <Line.RenderTransform>
+                                <TranslateTransform X="{Binding Position.X,Mode=OneWay}" Y="{Binding Position.Y,Mode=OneWay}"/>
+                            </Line.RenderTransform>
+                        </Line>
+                        <Grid x:Name="CreatureName" Visibility="Hidden" VerticalAlignment="Top" HorizontalAlignment="Left">
+                            <Grid.RenderTransform>
+                                <TransformGroup>
+                                    <ScaleTransform ScaleX="-2" ScaleY="-1" />
+                                    <TranslateTransform
+                                        X="{Binding Path=ActualWidth,RelativeSource={RelativeSource AncestorType=Grid}}"
+                                        Y="{Binding Path=ActualHeight,RelativeSource={RelativeSource AncestorType=Grid}}"
+                                        />
+                                    <ScaleTransform ScaleX="-0.5" ScaleY="-1" />
+                                    <ScaleTransform ScaleY="-0.5" />
+                                    <TranslateTransform Y="{Binding Radius}" />
+                                    <ScaleTransform ScaleY="-2" />
+                                    <TranslateTransform X="{Binding Position.X,Mode=OneWay}" Y="{Binding Position.Y,Mode=OneWay}"/>
+                                </TransformGroup>
+                            </Grid.RenderTransform>
+                            <Grid.RowDefinitions>
+                                <RowDefinition Height="Auto"></RowDefinition>
+                                <RowDefinition Height="Auto"></RowDefinition>
+                            </Grid.RowDefinitions>
+                            <TextBlock Text="{Binding Name,Mode=OneWay}" Foreground="Black">
+                                <TextBlock.Effect>
+                                    <BlurEffect
+                                  Radius="2"
+                                  KernelType="Box"/>
+                                </TextBlock.Effect>
+                            </TextBlock>
+                            <TextBlock Text="{Binding Name,Mode=OneWay}" Foreground="White" />
+                            <components:StatsBar
+                                Grid.Row="1"
+                                BackgroundSource="/Assets/icons/ps_hpbar_back.png"
+                                ForegroundSource="/Assets/icons/ps_hpbar.png"
+                                Current="{Binding VitalStats.Hp}"
+                                Total="{Binding VitalStats.MaxHp}"
+                                Height="{Binding Radius}"
+                                OnlyBar="True"
+                                Margin="0 2 0 0"
+                            />
+                        </Grid>
+                    </Grid>
+                    <DataTemplate.Triggers>
+                        <DataTrigger Binding="{Binding Type,Mode=OneWay}" Value="NPC">
+                            <Setter TargetName="CreatureBody" Property="Stroke" Value="LimeGreen" />
+                            <Setter TargetName="CreatureDirection" Property="Stroke" Value="LimeGreen" />
+                        </DataTrigger>
+                        <DataTrigger Binding="{Binding Type,Mode=OneWay}" Value="Player">
+                            <Setter TargetName="CreatureBody" Property="Stroke" Value="Blue" />
+                            <Setter TargetName="CreatureDirection" Property="Stroke" Value="Blue" />
+                        </DataTrigger>
+                        <DataTrigger Binding="{Binding Type,Mode=OneWay}" Value="Hero">
+                            <Setter TargetName="CreatureBody" Property="Stroke" Value="Black" />
+                            <Setter TargetName="CreatureDirection" Property="Stroke" Value="Black" />
+                        </DataTrigger>
+                        <DataTrigger Binding="{Binding IsTarget,Mode=OneWay}" Value="True">
+                            <Setter TargetName="CreatureName" Property="Visibility" Value="Visible" />
+                        </DataTrigger>
+                        <DataTrigger Binding="{Binding IsAggressive,Mode=OneWay}" Value="True">
+                            <Setter TargetName="CreatureAggroRadius" Property="Visibility" Value="Visible" />
+                        </DataTrigger>
+                    </DataTemplate.Triggers>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+        <ItemsControl ItemsSource="{Binding Path=Drops}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <Canvas ClipToBounds="True" />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <Grid>
+                        <Path StrokeThickness="2" Stroke="Gold">
+                            <Path.Data>
+                                <EllipseGeometry 
+                                    RadiusX="{Binding Radius,Mode=OneWay}" 
+                                    RadiusY="{Binding Radius,Mode=OneWay}" />
+                            </Path.Data>
+                            <Path.RenderTransform>
+                                <TranslateTransform X="{Binding Position.X,Mode=OneWay}" Y="{Binding Position.Y,Mode=OneWay}"/>
+                            </Path.RenderTransform>
+                        </Path>
+                    </Grid>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
         <Grid VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="200" Height="20" Margin="0 0 5 5">
             <Grid.ColumnDefinitions>
                 <ColumnDefinition Width="30"></ColumnDefinition>
@@ -53,6 +173,5 @@
                 VerticalAlignment="Center"
                 />
         </Grid>
-        <Ellipse Width="10" Height="10" Fill="White" Stroke="Black" StrokeThickness="2" VerticalAlignment="Center" HorizontalAlignment="Center"></Ellipse>
     </Grid>
 </ContentControl>

Client/Application/Components/StatsBar.xaml.cs

@@ -30,6 +30,8 @@ namespace Client.Application.Components
             DependencyProperty.Register("ForegroundWidth", typeof(double), typeof(StatsBar), new PropertyMetadata(0.0, null, OnCoerceForegroundWidth));
         public static readonly DependencyProperty TextProperty =
             DependencyProperty.Register("Text", typeof(string), typeof(StatsBar), new PropertyMetadata("", null, OnCoerceText));
+        public static readonly DependencyProperty OnlyBarProperty =
+            DependencyProperty.Register("OnlyBar", typeof(bool), typeof(StatsBar), new PropertyMetadata(false, OnOnlyBarChanged));     
 
         private static void OnDataChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
@@ -37,7 +39,13 @@ namespace Client.Application.Components
             model.CoerceValue(ForegroundWidthProperty);
             model.CoerceValue(TextProperty);
         }
-        
+
+        private static void OnOnlyBarChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var model = (StatsBar)d;
+            model.CoerceValue(TextProperty);
+        }
+
         private static void OnFormatChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
         {
             var model = (StatsBar)d;
@@ -56,7 +64,7 @@ namespace Client.Application.Components
         {
             var model = (StatsBar)d;
 
-            return string.Format(model.Format, model.Current, model.Total, model.GetPercent());
+            return model.OnlyBar ? "" : string.Format(model.Format, model.Current, model.Total, model.GetPercent());
         }
 
         public StatsBar()
@@ -124,5 +132,10 @@ namespace Client.Application.Components
             get { return (string)GetValue(FormatProperty); }
             set { SetValue(FormatProperty, value); }
         }
+        public bool OnlyBar
+        {
+            get { return (bool)GetValue(OnlyBarProperty); }
+            set { SetValue(OnlyBarProperty, value); }
+        }
     }
 }

Client/Application/ViewModels/CreatureMapViewModel.cs

@@ -0,0 +1,126 @@
+using Client.Domain.Common;
+using Client.Domain.Entities;
+using Client.Domain.Enums;
+using Client.Domain.ValueObjects;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Client.Application.ViewModels
+{
+    public class CreatureMapViewModel : ObservableObject
+    {
+        public uint Id => creature.Id;
+        public string Name => creature.Name;
+        public Vector3 Position => new Vector3(
+            (creature.Transform.Position.X - hero.Transform.Position.X) / scale + (VieportSize.X / 2),
+            (creature.Transform.Position.Y - hero.Transform.Position.Y) / scale + (VieportSize.Y / 2),
+            0
+        );
+        public Vector3 Direction => new Vector3(
+            creature.Transform.Direction.X * Radius * 2f,
+            creature.Transform.Direction.Y * Radius * 2f,
+            0
+        );
+        public VitalStats VitalStats => creature.VitalStats;
+        public float Radius => MathF.Max(MAX_RADIUS / scale, MIN_RADIUS);
+        public float Scale
+        {
+            get => scale;
+            set
+            {
+                if (scale != value)
+                {
+                    scale = value;
+                    OnPropertyChanged("Position");
+                    OnPropertyChanged("Direction");
+                    OnPropertyChanged("Radius");
+                    OnPropertyChanged("AggroRadius");
+                }
+            }
+        }
+        public Vector3 VieportSize
+        {
+            get => vieportSize;
+            set
+            {
+                if (vieportSize != value)
+                {
+                    vieportSize = value;
+                    OnPropertyChanged("Position");
+                    OnPropertyChanged("Direction");
+                }
+            }
+        }
+        public CreatureTypeEnum Type => creature.Type;
+        public bool IsTarget => Id == hero.TargetId;
+        public bool IsAggressive => creature.AggroRadius > 0;
+        public float AggroRadius => creature.AggroRadius / scale;
+
+
+        public CreatureMapViewModel(CreatureInterface creature, Hero hero)
+        {
+            this.creature = creature;
+            this.hero = hero;
+            creature.PropertyChanged += Creature_PropertyChanged;
+            creature.Transform.PropertyChanged += Transform_PropertyChanged;
+            creature.Transform.Position.PropertyChanged += Position_PropertyChanged;
+            creature.VitalStats.PropertyChanged += VitalStats_PropertyChanged;
+            hero.Transform.Position.PropertyChanged += HeroPosition_PropertyChanged;
+            hero.PropertyChanged += Hero_PropertyChanged;
+        }
+
+        private void VitalStats_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == "Hp" || e.PropertyName == "MaxHp")
+            {
+                OnPropertyChanged("VitalStats");
+            }
+        }
+
+        private void Hero_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == "TargetId")
+            {
+                OnPropertyChanged("IsTarget");
+            }
+        }
+
+        private void HeroPosition_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            OnPropertyChanged("Position");
+            OnPropertyChanged("Direction");
+        }
+
+        private void Position_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            OnPropertyChanged("Position");
+            OnPropertyChanged("Direction");
+        }
+
+        private void Transform_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == "Direction")
+            {
+                OnPropertyChanged("Direction");
+            }
+        }
+
+        private void Creature_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == "Name")
+            {
+                OnPropertyChanged("Name");
+            }
+        }
+
+        private readonly CreatureInterface creature;
+        private readonly Hero hero;
+        private float scale = 1;
+        private static readonly float MAX_RADIUS = 10;
+        private static readonly float MIN_RADIUS = 4;
+        private Vector3 vieportSize = new Vector3(0, 0, 0);
+    }
+}

Client/Application/ViewModels/DropMapViewModel.cs

@@ -0,0 +1,84 @@
+using Client.Domain.Common;
+using Client.Domain.Entities;
+using Client.Domain.Enums;
+using Client.Domain.ValueObjects;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.ComponentModel;
+
+namespace Client.Application.ViewModels
+{
+    public class DropMapViewModel : ObservableObject
+    {
+        public uint Id => drop.Id;
+        public string Name => drop.Name;
+        public Vector3 Position => new Vector3(
+            (drop.Transform.Position.X - hero.Transform.Position.X) / scale + (VieportSize.X / 2),
+            (drop.Transform.Position.Y - hero.Transform.Position.Y) / scale + (VieportSize.Y / 2),
+            0
+        );
+        public float Radius => MathF.Max(MAX_RADIUS / scale, MIN_RADIUS);
+        public float Scale
+        {
+            get => scale;
+            set
+            {
+                if (scale != value)
+                {
+                    scale = value;
+                    OnPropertyChanged("Position");
+                    OnPropertyChanged("Radius");
+                }
+            }
+        }
+        public Vector3 VieportSize
+        {
+            get => vieportSize;
+            set
+            {
+                if (vieportSize != value)
+                {
+                    vieportSize = value;
+                    OnPropertyChanged("Position");
+                }
+            }
+        }
+
+        public DropMapViewModel(Drop drop, Hero hero)
+        {
+            this.drop = drop;
+            this.hero = hero;
+            drop.PropertyChanged += Creature_PropertyChanged;
+            drop.Transform.Position.PropertyChanged += Position_PropertyChanged;
+            hero.Transform.Position.PropertyChanged += HeroPosition_PropertyChanged;
+        }
+
+        private void HeroPosition_PropertyChanged(object? sender, PropertyChangedEventArgs e)
+        {
+            OnPropertyChanged("Position");
+        }
+
+        private void Position_PropertyChanged(object? sender, PropertyChangedEventArgs e)
+        {
+            OnPropertyChanged("Position");
+        }
+
+        private void Creature_PropertyChanged(object? sender, PropertyChangedEventArgs e)
+        {
+            if (e.PropertyName == "Name")
+            {
+                OnPropertyChanged("Name");
+            }
+        }
+
+        private readonly Drop drop;
+        private readonly Hero hero;
+        private float scale = 1;
+        private static readonly float MAX_RADIUS = 8;
+        private static readonly float MIN_RADIUS = 2;
+        private Vector3 vieportSize = new Vector3(0, 0, 0);
+    }
+}

Client/Application/ViewModels/MainViewModel.cs

@@ -35,12 +35,17 @@ namespace Client.Application.ViewModels
             Hero = new HeroSummaryInfoViewModel(@event.Hero);
             hero = @event.Hero;
             Map.Hero = hero;
+            AddCreature(hero);
             OnPropertyChanged("Hero");
             OnPropertyChanged("Map");
         }
 
         public void Handle(HeroDeletedEvent @event)
         {
+            if (hero != null)
+            {
+                RemoveCreature(hero.Id);
+            }
             Hero = null;
             hero = null;
             Map.Hero = null;
@@ -53,12 +58,14 @@ namespace Client.Application.ViewModels
             if (hero != null)
             {
                 Creatures.Add(new CreatureListViewModel(@event.Creature, hero));
+                AddCreature(@event.Creature);
             }
         }
 
         public void Handle(CreatureDeletedEvent @event)
         {
             Creatures.RemoveAll(x => x.Id == @event.Id);
+            RemoveCreature(@event.Id);
         }
 
         public void Handle(DropCreatedEvent @event)
@@ -66,12 +73,14 @@ namespace Client.Application.ViewModels
             if (hero != null)
             {
                 Drops.Add(new DropListViewModel(@event.Drop, hero));
+                Map.Drops.Add(new DropMapViewModel(@event.Drop, hero));
             }
         }
 
         public void Handle(DropDeletedEvent @event)
         {
             Drops.RemoveAll(x => x.Id == @event.Id);
+            Map.Drops.RemoveAll(x => x.Id == @event.Id);
         }
 
         public void Handle(ChatMessageCreatedEvent @event)
@@ -113,6 +122,19 @@ namespace Client.Application.ViewModels
             Items.RemoveAll(x => x.Id == @event.Id);
         }
 
+        private void AddCreature(CreatureInterface creature)
+        {
+            if (hero != null)
+            {
+                Map.Creatures.Add(new CreatureMapViewModel(creature, hero));
+            }
+        }
+
+        private void RemoveCreature(uint id)
+        {
+            Map.Creatures.RemoveAll(x => x.Id == id);
+        }
+
         public ObservableCollection<ChatMessageViewModel> ChatMessages { get; } = new ObservableCollection<ChatMessageViewModel>();
         public ObservableCollection<CreatureListViewModel> Creatures { get; } = new ObservableCollection<CreatureListViewModel>();
         public ObservableCollection<DropListViewModel> Drops { get; } = new ObservableCollection<DropListViewModel>();

Client/Application/ViewModels/MapViewModel.cs

@@ -8,7 +8,9 @@ using System.Collections.ObjectModel;
 using System.Linq;
 using System.Text;
 using System.Threading.Tasks;
+using System.Windows.Input;
 using System.Windows.Media.Animation;
+using System.Collections.Specialized;
 
 namespace Client.Application.ViewModels
 {
@@ -35,44 +37,6 @@ namespace Client.Application.ViewModels
             }
         }
 
-        private void HeroPosition_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
-        {
-            UpdateMap();
-        }
-
-        private void UpdateMap()
-        {
-            foreach (var block in Blocks)
-            {
-                block.Visible = false;
-            }
-
-            if (hero != null)
-            {
-                var blocks = selector.SelectImages((float)ViewportWidth, (float)ViewportHeight, hero.Transform.Position, Scale);
-
-                foreach (var block in blocks)
-                {
-                    if (this.blocks.ContainsKey(block.Id))
-                    {
-                        this.blocks[block.Id].MapBlock.DeltaX = block.DeltaX;
-                        this.blocks[block.Id].MapBlock.DeltaY = block.DeltaY;
-                        this.blocks[block.Id].MapBlock.Size = block.Size;
-
-                    }
-                    else
-                    {
-                        var model = new MapBlockViewModel(block);
-                        this.blocks.Add(block.Id, model);
-                        Blocks.Add(model);
-                    }
-
-                    this.blocks[block.Id].Visible = true;
-                }
-            }
-        }
-
-        public ObservableCollection<MapBlockViewModel> Blocks { get; } = new ObservableCollection<MapBlockViewModel>();
         public double ViewportWidth
         {
             get => viewportWidth;
@@ -112,11 +76,96 @@ namespace Client.Application.ViewModels
             }
         }
 
-        MapImageSelector selector = new MapImageSelector();
-        Dictionary<uint, MapBlockViewModel> blocks = new Dictionary<uint, MapBlockViewModel>();
+        private void HeroPosition_PropertyChanged(object? sender, System.ComponentModel.PropertyChangedEventArgs e)
+        {
+            UpdateMap();
+        }
+
+        private void UpdateMap()
+        {
+            foreach (var block in Blocks)
+            {
+                block.Visible = false;
+            }
+
+            if (hero != null)
+            {
+                var blocks = selector.SelectImages((float)ViewportWidth, (float)ViewportHeight, hero.Transform.Position, Scale);
+
+                foreach (var block in blocks)
+                {
+                    if (this.blocks.ContainsKey(block.Id))
+                    {
+                        this.blocks[block.Id].MapBlock.DeltaX = block.DeltaX;
+                        this.blocks[block.Id].MapBlock.DeltaY = block.DeltaY;
+                        this.blocks[block.Id].MapBlock.Size = block.Size;
+
+                    }
+                    else
+                    {
+                        var model = new MapBlockViewModel(block);
+                        this.blocks.Add(block.Id, model);
+                        Blocks.Add(model);
+                    }
+
+                    this.blocks[block.Id].Visible = true;
+                }
+
+                foreach (var creature in Creatures)
+                {
+                    creature.Scale = scale;
+                    creature.VieportSize = new Vector3((float)ViewportWidth, (float)ViewportHeight, 0);
+                }
+
+                foreach (var drop in Drops)
+                {
+                    drop.Scale = scale;
+                    drop.VieportSize = new Vector3((float)ViewportWidth, (float)ViewportHeight, 0);
+                }
+            }
+        }
+
+        public MapViewModel()
+        {
+            Creatures.CollectionChanged += Creatures_CollectionChanged;
+            Drops.CollectionChanged += Drops_CollectionChanged;
+        }
+
+        private void Drops_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
+            {
+                foreach (var item in e.NewItems)
+                {
+                    var creature = (DropMapViewModel)item;
+                    creature.Scale = scale;
+                    creature.VieportSize = new Vector3((float)ViewportWidth, (float)ViewportHeight, 0);
+                }
+            }
+        }
+
+        private void Creatures_CollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
+        {
+            if (e.Action == NotifyCollectionChangedAction.Add && e.NewItems != null)
+            {
+                foreach (var item in e.NewItems)
+                {
+                    var creature = (CreatureMapViewModel)item;
+                    creature.Scale = scale;
+                    creature.VieportSize = new Vector3((float)ViewportWidth, (float)ViewportHeight, 0);
+                }
+            }
+        }
+
+        public ObservableCollection<MapBlockViewModel> Blocks { get; } = new ObservableCollection<MapBlockViewModel>();
+        public ObservableCollection<CreatureMapViewModel> Creatures { get; } = new ObservableCollection<CreatureMapViewModel>();
+        public ObservableCollection<DropMapViewModel> Drops { get; } = new ObservableCollection<DropMapViewModel>();
+
+        private MapImageSelector selector = new MapImageSelector();
+        private Dictionary<uint, MapBlockViewModel> blocks = new Dictionary<uint, MapBlockViewModel>();
         private Hero? hero;
         private float scale = 8;
-        private double viewportWidth = 50;
-        private double viewportHeight = 50;
+        private double viewportWidth = 0;
+        private double viewportHeight = 0;
     }
 }