feat: Real cards in a tree

WotBlitzStatisticsPro.Blazor/Model/TankTreeItem.cs

@@ -0,0 +1,37 @@
+using System;
+using WotBlitzStatisticsPro.Blazor.GraphQl;
+
+namespace WotBlitzStatisticsPro.Blazor.Model
+{
+    public class TankTreeItem
+    {
+        public long TankId { get; set; }
+
+        public int Tier { get; set; }
+
+        public int Row { get; set; }
+
+        public string TankTypeId { get; set; }
+
+        public bool IsPremium { get; set; }
+
+        public bool IsResearched { get; set; }
+
+        public string PreviewImage { get; set; }
+
+        public string Name { get; set; }
+
+        public MarkOfMastery? MarkOfMastery { get; set; }
+
+        public decimal? WinRate { get; set; }
+
+        public decimal? AvgDamage { get; set; }
+
+        public long? Battles { get; set; }
+
+        public DateTimeOffset? LastBattleTime { get; set; }
+
+        public Decimal PriceCredit { get; set; }
+        
+    }
+}

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor

@@ -1,4 +1,5 @@
 @using WotBlitzStatisticsPro.Blazor.Helpers
+@using System.Linq
 @inherits PlayerInfoTanksTreeBase;
 <div style="overflow-y: auto; overflow-x: auto;">
     <svg
@@ -18,13 +19,17 @@
                 >
             </rect>
         }
-        @for (int i = 0; i < 3; i++)
+        @if (TreeItems != null)
+        {
+            @for (int tier = 1; tier < 11; tier++)
+            {
+                @foreach (var tank in TreeItems.Where(t => t.Tier == tier).OrderBy(t => t.Row).ToList())
                 {
                     <!-- Tank card svg-->
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
-                x="20"
+                        x="@((tier - 1) * (CardWidth + 40) + 20)"
-                y="@(i * (CardWidth + 20) + 20)"
+                        y="@(tank.Row * (CardHeigth + 20) + 20)"
                         width="@CardWidth"
                         height="@CardHeigth">
                         <g>
@@ -36,70 +41,66 @@
                                 height="@CardHeigth"
                                 rx="10"
                                 ry="10"
-                        fill="@(i == 0 ? "#275950" : (i == 1 ? "#2E353B" : "#66502b"))"
+                                fill="@(tank.IsResearched ? (tank.IsPremium ? "#66502b" : "#275950") : "#2E353B")">
-                        >
                             </rect>
 
                             <!--Tank type-->
-                    <image x="7" y="7" width="25" height="25" href="@TanksList.ToArray()[i].TankTypeId.TankTypeAsset(i == 2)"/>
+                            <image x="7" y="7" width="25" height="25" href="@tank.TankTypeId.TankTypeAsset(tank.IsPremium)"/>
                             <!--Tank tier-->
-                    <text x="33" y="4" fill="@(i == 2 ? @Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="19">
+                            <text x="33" y="4" fill="@(tank.IsPremium ? Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="19">
-                        @TanksList.ToArray()[i].Tier.RomanNumber()
+                                @tank.Tier.RomanNumber()
                             </text>
                             <!--TankImage-->
-                    <image x="@((CardWidth - 95) / 2)" y="@((CardHeigth - 70) / 2)" width="95" height="70" href="@TanksList.ToArray()[i].PreviewImage"/>
+                            <image x="@((CardWidth - 95) / 2)" y="@((CardHeigth - 70) / 2)" width="95" height="70" href="@tank.PreviewImage"/>
                             <!--TankName-->
-                    <text x="33" y="@(CardHeigth - 25)" fill="@(i == 2 ? @Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
+                            <text x="33" y="@(CardHeigth - 25)" fill="@(tank.IsPremium ? Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                        @TanksList.ToArray()[i].Name
+                                @tank.Name
                             </text>
 
                             <!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
-                    @if (i == 0 || i == 2)
+                            @if (tank.IsResearched && tank.MarkOfMastery.HasValue && tank.WinRate.HasValue && tank.AvgDamage.HasValue && tank.Battles.HasValue && tank.LastBattleTime.HasValue)
                             {
                                 <g>
                                     <!--Mastery-->
-                            <image x="7" y="@(CardHeigth - 26)" width="20" height="20" href="@TanksList.ToArray()[i].MarkOfMastery.IconAsset()"/>
+                                    <image x="7" y="@(CardHeigth - 26)" width="20" height="20" href="@tank.MarkOfMastery.Value.IconAsset()"/>
                                     <!--Winrate-->
                                     <image x="7" y="40" width="20" height="20" href="icons/details.wins.scale-200.png"/>
                                     <text x="32" y="40" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                                @(TanksList.ToArray()[i].WinRate.ToString("N0"))%
+                                        @(tank.WinRate.Value.ToString("N0"))%
                                     </text>
-                            <line x1="8" y1="60" x2="58" y2="60" style="@($"stroke:{TanksList.ToArray()[i].WinRate.ScaleColor()};stroke-width:3")"/>
+                                    <line x1="8" y1="60" x2="58" y2="60" style="@($"stroke:{tank.WinRate.Value.ScaleColor()};stroke-width:3")"/>
                                     <!--AvgDmg-->
                                     <image x="@(CardWidth - 62)" y="40" width="20" height="20" href="icons/damage.scale-200.png"/>
                                     <text x="@(CardWidth - 37)" y="40" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                                @TanksList.ToArray()[i].AvgDamage.ToString("N0")
+                                        @tank.AvgDamage.Value.ToString("N0")
                                     </text>
                                     <!--Battles-->
                                     <image x="@(CardWidth - 62)" y="9" width="20" height="20" href="icons/details.battles.scale-200.png"/>
                                     <text x="@(CardWidth - 37)" y="9" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                                @TanksList.ToArray()[i].Battles.ToString("N0")
+                                        @tank.Battles.Value.ToString("N0")
                                     </text>
                                     <!--Last battle-->
                                     <image x="@(CardWidth - 83)" y="@(CardHeigth - 23)" width="16" height="16" href="icons/calendar.scale-200.png"/>
                                     <text x="@(CardWidth - 60)" y="@(CardHeigth - 23)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                                @TanksList.ToArray()[i].LastBattleTime.ToString("d")
+                                        @tank.LastBattleTime.Value.ToString("d")
                                     </text>
                                 </g>
                             }
                             <!--Unresearched: XP, Credits-->
-                    @if (i == 1)
+                            @if (!tank.IsResearched)
                             {
                                 <g>
-                            <!--XP-->
-                            <image x="@(CardWidth - 84)" y="9" width="20" height="20" href="icons/xp.avg.scale-200.png"/>
-                            <text x="@(CardWidth - 60)" y="9" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                                203.5 K
-                            </text>
                                     <!--Credits-->
                                     <image x="@(CardWidth - 84)" y="@(CardHeigth - 23)" width="20" height="20" href="icons/encyclopedia.vehicle.credits.scale-200.png"/>
                                     <text x="@(CardWidth - 60)" y="@(CardHeigth - 23)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
-                                8 500 K
+                                        @((tank.PriceCredit / 1000).ToString("N0")) K
                                     </text>
                                 </g>
                             }
                         </g>
                     </svg>
                 }
+            }
+        }
     </svg>
 </div>

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs

@@ -41,6 +41,10 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         public int CardWidth { get; } = 200;
         public int CardHeigth { get; } = 120;
 
+        public List<TankTreeItem> TreeItems { get; set; } = new();
+
+        public string SelectedNation { get; set; } = "germany";
+        
         public string FrameStyle
         {
             get
@@ -56,8 +60,8 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
             // TODO: Move it to the Nation selector handler
             try
             {
-                string nationId = "germany";
+                VehiclesLibrary = await GraphQlBackendService.GetVehiclesByNation(SelectedNation);
-                VehiclesLibrary = await GraphQlBackendService.GetVehiclesByNation(nationId);
+                BuildTree();
             }
             catch (System.Exception e)
             {
@@ -71,5 +75,66 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         {
             return SvgHelper.CalculateTextBlockSize(text, fontFace, fontSize).Width;
         }
+
+        private void BuildTree()
+        {
+            TreeItems.Clear();
+            var vehiclesTree = VehiclesLibrary.Where(v => v.IsPremium == false).ToList();
+            for (int tier = 1; tier < 11; tier++)
+            {
+                var vehiclesByTier = vehiclesTree.Where(v => v.Tier == tier).ToList();
+                int row = 0;
+                foreach (var vehicleFromDictionary in vehiclesByTier)
+                {
+                    var treeItem = new TankTreeItem
+                    {
+                        Tier = tier,
+                        TankId = vehicleFromDictionary.TankId,
+                        Name = vehicleFromDictionary.Name,
+                        PriceCredit = vehicleFromDictionary.PriceCredit,
+                        PreviewImage = vehicleFromDictionary.PreviewImage,
+                        TankTypeId = vehicleFromDictionary.TypeId,
+                        IsPremium = false,
+                        Row = row
+                    };
+                    var researched = TanksList.FirstOrDefault(t => t.TankId == treeItem.TankId);
+                    treeItem.IsResearched = researched != null;
+                    if (researched != null)
+                    {
+                        treeItem.MarkOfMastery = researched.MarkOfMastery;
+                        treeItem.WinRate = researched.WinRate;
+                        treeItem.AvgDamage = researched.AvgDamage;
+                        treeItem.Battles = researched.Battles;
+                        treeItem.LastBattleTime = researched.LastBattleTime;
+                    }
+
+                    TreeItems.Add(treeItem);
+                    row++;
+                }
+            }
+            // TODO: build matrix and connections
+            
+            // Adding prem tanks
+            foreach (var prem in TanksList.Where(t => t.IsPremium && t.TankNationId == SelectedNation))
+            {
+                int row = TreeItems.Count(i => i.Tier == prem.Tier) + 1;
+                TreeItems.Add(new TankTreeItem
+                {
+                    Tier = prem.Tier,
+                    TankId = prem.TankId,
+                    Name = prem.Name,
+                    PreviewImage = prem.PreviewImage,
+                    TankTypeId = prem.TankTypeId,
+                    IsPremium = true,
+                    MarkOfMastery = prem.MarkOfMastery,
+                    WinRate = prem.WinRate,
+                    AvgDamage = prem.AvgDamage,
+                    Battles = prem.Battles,
+                    LastBattleTime = prem.LastBattleTime,
+                    IsResearched = true,
+                    Row = row
+                });
+            }
+        }
     }
 }