feat: tanks tree vertical cards ready

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs

@@ -43,12 +43,16 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         public int CardWidth { get; } = 200;
         public int CardHeigth { get; } = 120;
 
+        public int LeftMargin { get; } = 30;
+
         public List<TankTreeItem> TreeItems { get; set; } = new();
 
         public string SelectedNation { get; set; }
 
         public List<string> Connections { get; set; } = new List<string>();
 
+        public List<string> ConnectionsInVerticalView { get; set; } = new List<string>();
+
         public List<FilterItem<string>> NationsFilter { get; set; } = new();
 
         public string FrameStyle
@@ -76,6 +80,7 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         {
             TreeItems.Clear();
             Connections.Clear();
+            ConnectionsInVerticalView.Clear();
             var vehiclesTree = VehiclesLibrary?.Where(v => v != null && v.IsPremium == false).ToList();
             for (int tier = 1; tier < 11; tier++)
             {
@@ -105,6 +110,7 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
                         foreach (var nextRow in treeItem.NextRows)
                         {
                             Connections.Add(SvgHelper.TankTreeConnectionPath(treeItem.Row, nextRow.Row, tier, CardWidth, CardHeigth));
+                            // TODO: Calc ConnectionsInVerticalView
                         }
                     }
                     

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeSmall.razor

@@ -11,19 +11,33 @@
     <div style="overflow-y: auto; overflow-x: auto;">
         <svg xmlns="http://www.w3.org/2000/svg"
              height="@((CardWidth + 40) * 10)"
-             width="@FrameHeigth">
+             width="@(FrameHeigth + LeftMargin)">
 
             <!-- Background -->
             @for (int i = 0; i < 10; i++)
             {
-                <rect x="0"
+                <g>
-                      y="@(i * (CardWidth + 40))"
+                    <rect x="0"
-                      width="@FrameHeigth"
+                          y="@(i * (CardWidth + 40))"
-                      height="@(CardWidth + 40)"
+                          width="@(FrameHeigth + LeftMargin)"
-                      fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")">
+                          height="@(CardWidth + 40)"
-                </rect>
+                          fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")">
+                    </rect>
+                    <!--Tank tier-->
+                    <text x="10" y="@(i * (CardWidth + 40) + CardWidth/2)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="16">
+                        @((10 - i).RomanNumber())
+                    </text>
+                </g>
             }
 
+            <!-- Connections -->
+            <!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths -->
+            @foreach (var pathConnection in ConnectionsInVerticalView)
+            {
+                <path fill="none" stroke="white" stroke-width="1" d="@pathConnection" />
+            }
+
+
             @if (TreeItems != null)
             {
                 @for (int tier = 1; tier < 11; tier++)
@@ -32,7 +46,7 @@
                     {
                         <!-- Tank card svg-->
                         <svg xmlns="http://www.w3.org/2000/svg"
-                             x="@(tank.Row * (CardHeigth + 20) + 20)"
+                             x="@(tank.Row * (CardHeigth + 20) + 20 + LeftMargin)"
                              y="@(((10 - tier)) * (CardWidth + 40) + 20)"
                              height="@CardWidth"
                              width="@CardHeigth">
@@ -49,10 +63,6 @@
 
                                 <!--Tank type-->
                                 <image x="5" y="7" width="25" height="25" href="@tank.TankTypeId.TankTypeAsset(tank.IsPremium)" />
-                                <!--Tank tier-->
-                                <text x="30" y="4" fill="@(tank.IsPremium ? Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="19">
-                                    @tank.Tier.RomanNumber()
-                                </text>
                                 <!--TankImage-->
                                 <image x="@((CardHeigth - 95) / 2)" y="5" width="95" height="70" href="@tank.PreviewImage" />
                                 <!--TankName-->
@@ -60,6 +70,47 @@
                                     @tank.Name
                                 </text>
 
+                                <!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
+                                @if (tank.IsResearched && tank.MarkOfMastery.HasValue && tank.WinRate.HasValue && tank.AvgDamage.HasValue && tank.Battles.HasValue && tank.LastBattleTime.HasValue)
+                                {
+                                    <g>
+                                        <!--Mastery-->
+                                        <image x="7" y="105" width="20" height="20" href="@tank.MarkOfMastery.Value.IconAsset()" />
+                                        <!--Winrate-->
+                                        <image x="@((CardHeigth - 60))" y="@(CardWidth - 100)" width="20" height="20" href="icons/details.wins.scale-200.png" />
+                                        <text x="@((CardHeigth - 40))" y="@(CardWidth - 100)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-weight="bold" font-size="12">
+                                            @(tank.WinRate.Value.ToString("N0"))%
+                                        </text>
+                                        <line x1="@((CardHeigth - 60))" y1="@(CardWidth - 80)" x2="@((CardHeigth - 5))" y2="@(CardWidth - 80)" style="@($"stroke:{tank.WinRate.Value.ScaleColor()};stroke-width:3")" />
+                                        <!--AvgDmg-->
+                                        <image x="7" y="@(CardWidth - 75)" width="20" height="20" href="icons/damage.scale-200.png" />
+                                        <text x="32" y="@(CardWidth - 75)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
+                                            @tank.AvgDamage.Value.ToString("N0")
+                                        </text>
+                                        <!--Battles-->
+                                        <image x="7" y="@(CardWidth - 55)" width="20" height="20" href="icons/details.battles.scale-200.png" />
+                                        <text x="32" y="@(CardWidth - 55)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
+                                            @tank.Battles.Value.ToString("N0")
+                                        </text>
+                                        <!--Last battle-->
+                                        <image x="8" y="@(CardWidth - 30)" width="16" height="16" href="icons/calendar.scale-200.png" />
+                                        <text x="32" y="@(CardWidth - 30)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
+                                            @tank.LastBattleTime.Value.ToString("d")
+                                        </text>
+                                    </g>
+                                }
+                                <!--Unresearched: XP, Credits-->
+                                @if (!tank.IsResearched)
+                                {
+                                    <g>
+                                        <!--Credits-->
+                                        <image x="8" y="@(CardWidth - 60)" width="20" height="20" href="icons/encyclopedia.vehicle.credits.scale-200.png" />
+                                        <text x="32" y="@(CardWidth - 60)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
+                                            @((tank.PriceCredit / 1000).ToString("N0")) K
+                                        </text>
+                                    </g>
+                                }
+
                             </g>
                         </svg>
                     }