feat: tank tree svg cards ready

WotBlitzStatisticsPro.Blazor/Model/ElementDimensions.cs

@@ -0,0 +1,8 @@
+namespace WotBlitzStatisticsPro.Blazor.Model
+{
+    public class ElementDimensions
+    {
+        public int Width { get; set; }
+        public int Height { get; set; }
+    }
+}

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor

@@ -30,7 +30,7 @@
                     <!--Tank type-->
                     <image x="7" y="7" width="25" height="25" href="@TanksList.ToArray()[i].TankTypeId.TankTypeAsset(i == 2)"/>
                     <!--Tank tier-->
-                    <text x="33" y="7" 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="@(i == 2 ? @Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="19">
                         @TanksList.ToArray()[i].Tier.RomanNumber()
                     </text>
                     <!--TankImage-->
@@ -40,9 +40,51 @@
                         @TanksList.ToArray()[i].Name
                     </text>
 
-                    <!--TODO: Split for researched and unresearched info-->
+                    <!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
-                    <!--Researched: Mastery, Winrate, Wn7, Battles, LastBattle-->
+                    @if(i == 0 || i == 2)
+                    {
+                        <g>
+                            <!--Mastery-->
+                            <image x="7" y="@(CardHeigth - 26)" width="20" height="20" href="@TanksList.ToArray()[i].MarkOfMastery.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"))%
+                            </text>
+                            <line x1="8" y1="60" x2="58" y2="60" style="@($"stroke:{TanksList.ToArray()[i].WinRate.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")
+                            </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")
+                            </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")
+                            </text>
+                        </g>
+                    }
                     <!--Unresearched: XP, Credits-->
+                    @if(i == 1)
+                    {
+                        <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
+                            </text>
+                        </g>
+                    }
                 </g>
             </svg>
         }

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs

@@ -3,8 +3,10 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.Extensions.Localization;
 using System;
 using System.Collections.Generic;
+using System.Linq;
 using System.Threading.Tasks;
 using WotBlitzStatisticsPro.Blazor.GraphQl;
+using WotBlitzStatisticsPro.Blazor.Model;
 using WotBlitzStatisticsPro.Blazor.Services;
 
 namespace WotBlitzStatisticsPro.Blazor.Pages
@@ -23,11 +25,17 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
         [Inject]
         public IMediaQueriesService MediaQueriesService { get; set; }
 
+        [Inject]
+        public ISvgHelper SvgHelper { get; set; }
+
         public int FrameHeigth { get; set; }
 
         public int CardWidth { get; } = 200;
         public int CardHeigth { get; } = 120;
 
+        //[Obsolete("Just temporary. In the future, add this into tankTree DTO")]
+        //public ElementDimensions[] BattlesTextSize { get; set; }
+
         public string FrameStyle
         {
             get
@@ -43,8 +51,22 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
 
             //FrameWidth = Convert.ToInt32(((decimal)screenWidth) * 0.94m);
             FrameHeigth = screenHeight - 390;
-        }
+            // TODO: This is temporary
-
+            //var dd = new List<ElementDimensions>();
+            //var tt = TanksList.ToArray();
+            //for (int i = 0; i < 3; i++)
+            //{
+            //    var d = await SvgHelper.CalculateTextBlockSizeAsync(tt[i].Battles.ToString("N0"), "Segoe UI", 12);
+            //    dd.Add(d);
+            //}
+            //BattlesTextSize = dd.ToArray();
+            //---
 
         }
+
+        public int GetTextWidth(string text, string fontFace, int fontSize)
+        {
+            return SvgHelper.CalculateTextBlockSize(text, fontFace, fontSize).Width;
+        }
+    }
 }

WotBlitzStatisticsPro.Blazor/Program.cs

@@ -33,6 +33,7 @@ namespace WotBlitzStatisticsPro.Blazor
             builder.Services.AddScoped<IMediaQueriesService, MediaQueriesService>();
             builder.Services.AddScoped<ITankStatisticDialogService, TankStatisticDialogService>();
             builder.Services.AddScoped<IMedalDialogService, MedalDialogService>();
+            builder.Services.AddScoped<ISvgHelper, SvgHelper>();
 
             builder.Services.AddMediatR(typeof(Program));
 

WotBlitzStatisticsPro.Blazor/Services/ISvgHelper.cs

@@ -0,0 +1,10 @@
+using System.Threading.Tasks;
+using WotBlitzStatisticsPro.Blazor.Model;
+
+namespace WotBlitzStatisticsPro.Blazor.Services
+{
+    public interface ISvgHelper
+    {
+        ElementDimensions CalculateTextBlockSize(string text, string fontFace, int fontSize);
+    }
+}

WotBlitzStatisticsPro.Blazor/Services/SvgHelper.cs

@@ -0,0 +1,28 @@
+using Microsoft.JSInterop;
+using System.Threading.Tasks;
+using WotBlitzStatisticsPro.Blazor.Model;
+using System.Text.Json;
+
+namespace WotBlitzStatisticsPro.Blazor.Services
+{
+    public class SvgHelper : ISvgHelper
+    {
+        private readonly IJSRuntime _jsRuntime;
+
+        public SvgHelper(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+
+        public ElementDimensions CalculateTextBlockSize(string text, string fontFace, int fontSize)
+        {
+            var jsInProcess = (IJSInProcessRuntime)_jsRuntime;
+            return jsInProcess.Invoke<ElementDimensions>("svgHelper.CalculateTextBlockDimensions", new
+            {
+                Text = text,
+                Font = fontFace,
+                Size = fontSize
+            });
+        }
+    }
+}

WotBlitzStatisticsPro.Blazor/wwwroot/index.html

@@ -27,6 +27,7 @@
     <script src="echarts/echarts.js"></script>
     <script src="echarts/echarts-interop.js"></script>
     <script src="media-queries.js"></script>
+    <script src="svg-helper.js"></script>
     <script>navigator.serviceWorker.register('service-worker.js');</script>
 </body>
 

WotBlitzStatisticsPro.Blazor/wwwroot/svg-helper.js

@@ -0,0 +1,23 @@
+var svgHelper = svgHelper || {};
+
+svgHelper.CalculateTextBlockDimensions = function (textParams) {
+    const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg">
+            <text 
+             x="0"
+             y="0"
+             text-anchor="start" 
+             alignment-baseline="before-edge"
+             font-family="${textParams.Font}" 
+             font-size="${textParams.Size}">
+                    ${textParams.Text}
+            </text>
+    </svg>`;
+    const el = document.createElement("div");
+    el.innerHTML = svg;
+    document.body.appendChild(el);
+    const svgText = el.querySelector('text').getBBox();
+    el.remove();
+    const result = { Height: Math.round(svgText.height), Width: Math.round(svgText.width) };
+    return result;
+};