GonnaHetzMe/WotBlitzStatisticsBlazor
0
0 Fork 0
mirror of https://github.com/DrMboga/WotBlitzStatisticsBlazor.git synced 2026-10-21 02:17:20 +02:00
Code Issues Projects Releases Wiki Activity

feat: tank tree svg cards ready

Browse Source
This commit is contained in:
Michael Shabanov committed 2022-07-21 13:20:59 +02:00
1 parent 0d98e81a8f
commit 8c490edcc6
9 files changed
+140 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WotBlitzStatisticsPro.Blazor/Model/ElementDimensions.cs
+8
View File
@@ -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
+45 -3
View File
@@ -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, Wn7, Battles, LastBattle-->
<!--Researched: Mastery, Winrate, AvgDmg, 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
+24 -2
View File
@@ -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
+1
View File
@@ -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
+10
View File
@@ -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
+28
View File
@@ -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/icons/encyclopedia.vehicle.credits.scale-200.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

WotBlitzStatisticsPro.Blazor/wwwroot/index.html
+1
View File
@@ -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
+23
View File
@@ -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;
};