From 8c490edcc652df715ef380cc92692294d848cb11 Mon Sep 17 00:00:00 2001 From: Michael Shabanov Date: Thu, 21 Jul 2022 13:20:59 +0200 Subject: [PATCH] feat: tank tree svg cards ready --- .../Model/ElementDimensions.cs | 8 +++ .../Pages/PlayerInfoTanksTree.razor | 48 ++++++++++++++++-- .../Pages/PlayerInfoTanksTreeBase.cs | 24 ++++++++- WotBlitzStatisticsPro.Blazor/Program.cs | 1 + .../Services/ISvgHelper.cs | 10 ++++ .../Services/SvgHelper.cs | 28 ++++++++++ ...encyclopedia.vehicle.credits.scale-200.png | Bin 0 -> 1676 bytes .../wwwroot/index.html | 1 + .../wwwroot/svg-helper.js | 23 +++++++++ 9 files changed, 139 insertions(+), 4 deletions(-) create mode 100644 WotBlitzStatisticsPro.Blazor/Model/ElementDimensions.cs create mode 100644 WotBlitzStatisticsPro.Blazor/Services/ISvgHelper.cs create mode 100644 WotBlitzStatisticsPro.Blazor/Services/SvgHelper.cs create mode 100644 WotBlitzStatisticsPro.Blazor/wwwroot/icons/encyclopedia.vehicle.credits.scale-200.png create mode 100644 WotBlitzStatisticsPro.Blazor/wwwroot/svg-helper.js diff --git a/WotBlitzStatisticsPro.Blazor/Model/ElementDimensions.cs b/WotBlitzStatisticsPro.Blazor/Model/ElementDimensions.cs new file mode 100644 index 0000000..d626ee2 --- /dev/null +++ b/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; } + } +} diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor index ff79a7d..8743b04 100644 --- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor +++ b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTree.razor @@ -30,7 +30,7 @@ - + @TanksList.ToArray()[i].Tier.RomanNumber() @@ -40,9 +40,51 @@ @TanksList.ToArray()[i].Name - - + + @if(i == 0 || i == 2) + { + + + + + + + @(TanksList.ToArray()[i].WinRate.ToString("N0"))% + + + + + + @TanksList.ToArray()[i].AvgDamage.ToString("N0") + + + + + @TanksList.ToArray()[i].Battles.ToString("N0") + + + + + @TanksList.ToArray()[i].LastBattleTime.ToString("d") + + + } + @if(i == 1) + { + + + + + 203.5 K + + + + + 8 500 K + + + } } diff --git a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs b/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs index 995781f..3c3b23f 100644 --- a/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeBase.cs +++ b/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(); + //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; + } } } diff --git a/WotBlitzStatisticsPro.Blazor/Program.cs b/WotBlitzStatisticsPro.Blazor/Program.cs index 9c940d1..472ac37 100644 --- a/WotBlitzStatisticsPro.Blazor/Program.cs +++ b/WotBlitzStatisticsPro.Blazor/Program.cs @@ -33,6 +33,7 @@ namespace WotBlitzStatisticsPro.Blazor builder.Services.AddScoped(); builder.Services.AddScoped(); builder.Services.AddScoped(); + builder.Services.AddScoped(); builder.Services.AddMediatR(typeof(Program)); diff --git a/WotBlitzStatisticsPro.Blazor/Services/ISvgHelper.cs b/WotBlitzStatisticsPro.Blazor/Services/ISvgHelper.cs new file mode 100644 index 0000000..47f127f --- /dev/null +++ b/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); + } +} diff --git a/WotBlitzStatisticsPro.Blazor/Services/SvgHelper.cs b/WotBlitzStatisticsPro.Blazor/Services/SvgHelper.cs new file mode 100644 index 0000000..639a1c2 --- /dev/null +++ b/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("svgHelper.CalculateTextBlockDimensions", new + { + Text = text, + Font = fontFace, + Size = fontSize + }); + } + } +} diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/icons/encyclopedia.vehicle.credits.scale-200.png b/WotBlitzStatisticsPro.Blazor/wwwroot/icons/encyclopedia.vehicle.credits.scale-200.png new file mode 100644 index 0000000000000000000000000000000000000000..87f4bb2024aeab4454a104b9dc07286f28917c81 GIT binary patch literal 1676 zcmV;726Op|P);*rX0U-_m>xnA1_q)TNn#$fvI|)wSca8Q zVUp#9X4%DCUb58r|2CZASVl%KJ)8|6=lk}z_geq;U;nlCcN~+GljdU{PV?AUQ$K>P;>2kkn50g&PE?{A(zf6jbx zSXkIsX=!N*mo8mO=H0}^#1xwZLO{&Vh{5skaWiMm9HO_IxriF0fQHrZ@bL7wxH$iT zfdOlrx!JR4+da>oJ+r@nWH2vwl6LRjov(Lw_4W0ZDQrQ+eZ{wjT<*+u0b~A z#Lv&qI>I2J#fDkBbgAj<>+3EnD>L2Q-6kq3%E}=yFwpK1aJx1nB*gAJckZ0oyLYcy zxpHNdfTqBdn*i(+_j7lVR=j`sKW??OL|7A-Qpy}dU5 zIA-0wd-qIBON+UA^QPIeXAkd!C4ut_AoJ0qN3DPY9P%J*uS@Bj0Nr{4kWy+vl0L+& z$VbK4Pcpvi)vH>E;uBWm3Ac zS_JIfyLZibjm*r<`izVW+e&CL?@I5q07ZEkM1;2C%B+_74dJ}cI&S{_y9Nv0T!K{J{&DhyjN>({SGlanx0TU%>VQc?`ez$#jV<<8Dd z8!RlcM{|WLsB}H&?Ay05NV0IKg$+q2ZL<51?rYUQJ6``2Hw9p9Y;63-jT?WTKYxBU z(YV_Ht%0;HSg^o|1sjCGIOu_A&z`j@q?p964FavQkHTV&>~Ttb$vj0QKmQkpNJvRf zPv0pvf4+9@+HbO3{8oTPMMb~l<>h7HzklC8;}meD$ejjsNMpTz{kmmKCxz{Y2p-3* z=N$#Z+Rd9cPiWpLiCB%&9eBq9Kw-f;l2QNxIXO8$=-r51mre`t!i5VCdRcsYyfp@> z*49?rN^ndy9zJ~7R8&;h%EdUT<(@Pm`V}iySf&piJovZzWoKbw;kW3{-L}XIzz7}| z$qXz%c<{g^Cnsa?v$q1&QFK&|wt!Rs2qtM06awr}2#t-676|FwvSo|ev}u#A$mPqI z+e&8S=H{Zg{{8#+pFDKv(03&zCAN?_`WOU^Mj-=Vu!)ZoCr*&XK?-YHfD-JVs=#qo z=~hJ=Dix}LxfQ7ekUVQN{vfSzdmr_z>ga? zY_REp-RS6On=+V0LsTm#4bRop)uyzxv|UBAQ)`^s|BZC~xxj_u1Ay-14n1--%ErI4 zTc)&^dti7IAca5*xyJ}Yl^LxQphm}2GMb|jF#-#$r$7MN)YN2IKn6;Ck=U)&nps*q zC@}E~Hch|DYFiO9>(cY6_IGK2lh!rL#vqxP5kQ=}qr|xwh*X3nV(<%TC*1vcMoK9F zjy+BljTY_sRZjlUJ73<(`50^62LOZK>i&e|-u+d>8Z`Z00D0zOqvoQNqC8b-oaVxG z(f)_!s9Wi27O(~}H%xPSA4@3L89e%0`&fA@&fb%^aAt({P@Oy0t^7F Wuc)Mh8=^Y^0000`YkR1 literal 0 HcmV?d00001 diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/index.html b/WotBlitzStatisticsPro.Blazor/wwwroot/index.html index d70d6e4..4bb8474 100644 --- a/WotBlitzStatisticsPro.Blazor/wwwroot/index.html +++ b/WotBlitzStatisticsPro.Blazor/wwwroot/index.html @@ -27,6 +27,7 @@ + diff --git a/WotBlitzStatisticsPro.Blazor/wwwroot/svg-helper.js b/WotBlitzStatisticsPro.Blazor/wwwroot/svg-helper.js new file mode 100644 index 0000000..70f13e0 --- /dev/null +++ b/WotBlitzStatisticsPro.Blazor/wwwroot/svg-helper.js @@ -0,0 +1,23 @@ +var svgHelper = svgHelper || {}; + +svgHelper.CalculateTextBlockDimensions = function (textParams) { + const svg = ` + + + ${textParams.Text} + + `; + 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; +}; \ No newline at end of file