mirror of
https://github.com/DrMboga/WotBlitzStatisticsBlazor.git
synced 2026-10-21 10:27:18 +02:00
feat: added nations selector to tanks tree
This commit is contained in:
Mikhail Shabanov committed
1 parent
80050e1ddd
commit
bb16617f3f
3 files changed
+170
-108
No files matched your search
@@ -1,108 +1,116 @@
|
|||||||
@using WotBlitzStatisticsPro.Blazor.Helpers
|
@using WotBlitzStatisticsPro.Blazor.Helpers
|
||||||
@using System.Linq
|
@using System.Linq
|
||||||
@inherits PlayerInfoTanksTreeBase;
|
@inherits PlayerInfoTanksTreeBase;
|
||||||
<div style="overflow-y: auto; overflow-x: auto;">
|
<div class="d-flex flex-column">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
<div class="d-flex flex-row mb-3">
|
||||||
width="@((CardWidth + 40) * 10)"
|
@foreach (var nationForFilter in NationsFilter)
|
||||||
height="@FrameHeigth">
|
|
||||||
<!-- Background -->
|
|
||||||
@for (int i = 0; i < 10; i++)
|
|
||||||
{
|
{
|
||||||
<rect x="@(i * (CardWidth + 40))"
|
<img src="@nationForFilter.ItemName" class="@NationFilterStyle(nationForFilter.ItemId)" @onclick="@(async (e) => { await ApplyNationFilter(e, nationForFilter.ItemId); })" />
|
||||||
y="0"
|
|
||||||
width="@(CardWidth + 40)"
|
|
||||||
height="@FrameHeigth"
|
|
||||||
fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")">
|
|
||||||
</rect>
|
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
<!-- Connections -->
|
<div style="overflow-y: auto; overflow-x: auto;">
|
||||||
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths -->
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
@foreach (var pathConnection in Connections)
|
width="@((CardWidth + 40) * 10)"
|
||||||
{
|
height="@FrameHeigth">
|
||||||
<path fill="none" stroke="white" stroke-width="1" d="@pathConnection" />
|
<!-- Background -->
|
||||||
}
|
@for (int i = 0; i < 10; 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())
|
<rect x="@(i * (CardWidth + 40))"
|
||||||
|
y="0"
|
||||||
|
width="@(CardWidth + 40)"
|
||||||
|
height="@FrameHeigth"
|
||||||
|
fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")">
|
||||||
|
</rect>
|
||||||
|
}
|
||||||
|
|
||||||
|
<!-- Connections -->
|
||||||
|
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths -->
|
||||||
|
@foreach (var pathConnection in Connections)
|
||||||
|
{
|
||||||
|
<path fill="none" stroke="white" stroke-width="1" d="@pathConnection" />
|
||||||
|
}
|
||||||
|
|
||||||
|
@if (TreeItems != null)
|
||||||
|
{
|
||||||
|
@for (int tier = 1; tier < 11; tier++)
|
||||||
{
|
{
|
||||||
<!-- Tank card svg-->
|
@foreach (var tank in TreeItems.Where(t => t.Tier == tier).OrderBy(t => t.Row).ToList())
|
||||||
<svg xmlns="http://www.w3.org/2000/svg"
|
{
|
||||||
x="@((tier - 1) * (CardWidth + 40) + 20)"
|
<!-- Tank card svg-->
|
||||||
y="@(tank.Row * (CardHeigth + 20) + 20)"
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
width="@CardWidth"
|
x="@((tier - 1) * (CardWidth + 40) + 20)"
|
||||||
height="@CardHeigth">
|
y="@(tank.Row * (CardHeigth + 20) + 20)"
|
||||||
<g>
|
|
||||||
<!--Rect fill = #275950 - researched, #2E353B - unresearched, #66502b - prem-->
|
|
||||||
<rect x="0"
|
|
||||||
y="0"
|
|
||||||
width="@CardWidth"
|
width="@CardWidth"
|
||||||
height="@CardHeigth"
|
height="@CardHeigth">
|
||||||
rx="10"
|
<g>
|
||||||
ry="10"
|
<!--Rect fill = #275950 - researched, #2E353B - unresearched, #66502b - prem-->
|
||||||
fill="@(tank.IsResearched ? (tank.IsPremium ? "#66502b" : "#275950") : "#2E353B")">
|
<rect x="0"
|
||||||
</rect>
|
y="0"
|
||||||
|
width="@CardWidth"
|
||||||
|
height="@CardHeigth"
|
||||||
|
rx="10"
|
||||||
|
ry="10"
|
||||||
|
fill="@(tank.IsResearched ? (tank.IsPremium ? "#66502b" : "#275950") : "#2E353B")">
|
||||||
|
</rect>
|
||||||
|
|
||||||
<!--Tank type-->
|
<!--Tank type-->
|
||||||
<image x="7" y="7" width="25" height="25" href="@tank.TankTypeId.TankTypeAsset(tank.IsPremium)" />
|
<image x="7" y="7" width="25" height="25" href="@tank.TankTypeId.TankTypeAsset(tank.IsPremium)" />
|
||||||
<!--Tank tier-->
|
<!--Tank tier-->
|
||||||
<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">
|
<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">
|
||||||
@tank.Tier.RomanNumber()
|
@tank.Tier.RomanNumber()
|
||||||
</text>
|
</text>
|
||||||
<!--TankImage-->
|
<!--TankImage-->
|
||||||
<image x="@((CardWidth - 95) / 2)" y="@((CardHeigth - 70) / 2)" width="95" height="70" href="@tank.PreviewImage" />
|
<image x="@((CardWidth - 95) / 2)" y="@((CardHeigth - 70) / 2)" width="95" height="70" href="@tank.PreviewImage" />
|
||||||
<!--TankName-->
|
<!--TankName-->
|
||||||
<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="14">
|
<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="14">
|
||||||
@tank.Name
|
@tank.Name
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
<!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
|
<!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
|
||||||
@if (tank.IsResearched && tank.MarkOfMastery.HasValue && tank.WinRate.HasValue && tank.AvgDamage.HasValue && tank.Battles.HasValue && tank.LastBattleTime.HasValue)
|
@if (tank.IsResearched && tank.MarkOfMastery.HasValue && tank.WinRate.HasValue && tank.AvgDamage.HasValue && tank.Battles.HasValue && tank.LastBattleTime.HasValue)
|
||||||
{
|
{
|
||||||
<g>
|
<g>
|
||||||
<!--Mastery-->
|
<!--Mastery-->
|
||||||
<image x="7" y="@(CardHeigth - 26)" width="20" height="20" href="@tank.MarkOfMastery.Value.IconAsset()" />
|
<image x="7" y="@(CardHeigth - 26)" width="20" height="20" href="@tank.MarkOfMastery.Value.IconAsset()" />
|
||||||
<!--Winrate-->
|
<!--Winrate-->
|
||||||
<image x="7" y="40" width="20" height="20" href="icons/details.wins.scale-200.png" />
|
<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-weight="bold" font-size="12">
|
<text x="32" y="40" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-weight="bold" font-size="12">
|
||||||
@(tank.WinRate.Value.ToString("N0"))%
|
@(tank.WinRate.Value.ToString("N0"))%
|
||||||
</text>
|
</text>
|
||||||
<line x1="8" y1="60" x2="58" y2="60" style="@($"stroke:{tank.WinRate.Value.ScaleColor()};stroke-width:3")" />
|
<line x1="8" y1="60" x2="58" y2="60" style="@($"stroke:{tank.WinRate.Value.ScaleColor()};stroke-width:3")" />
|
||||||
<!--AvgDmg-->
|
<!--AvgDmg-->
|
||||||
<image x="@(CardWidth - 62)" y="40" width="20" height="20" href="icons/damage.scale-200.png" />
|
<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">
|
<text x="@(CardWidth - 37)" y="40" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||||
@tank.AvgDamage.Value.ToString("N0")
|
@tank.AvgDamage.Value.ToString("N0")
|
||||||
</text>
|
</text>
|
||||||
<!--Battles-->
|
<!--Battles-->
|
||||||
<image x="@(CardWidth - 62)" y="9" width="20" height="20" href="icons/details.battles.scale-200.png" />
|
<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">
|
<text x="@(CardWidth - 37)" y="9" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||||
@tank.Battles.Value.ToString("N0")
|
@tank.Battles.Value.ToString("N0")
|
||||||
</text>
|
</text>
|
||||||
<!--Last battle-->
|
<!--Last battle-->
|
||||||
<image x="8" y="@(CardHeigth - 50)" width="16" height="16" href="icons/calendar.scale-200.png" />
|
<image x="8" y="@(CardHeigth - 50)" width="16" height="16" href="icons/calendar.scale-200.png" />
|
||||||
<text x="32" y="@(CardHeigth - 50)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
<text x="32" y="@(CardHeigth - 50)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||||
@tank.LastBattleTime.Value.ToString("d")
|
@tank.LastBattleTime.Value.ToString("d")
|
||||||
</text>
|
</text>
|
||||||
</g>
|
</g>
|
||||||
}
|
}
|
||||||
<!--Unresearched: XP, Credits-->
|
<!--Unresearched: XP, Credits-->
|
||||||
@if (!tank.IsResearched)
|
@if (!tank.IsResearched)
|
||||||
{
|
{
|
||||||
<g>
|
<g>
|
||||||
<!--Credits-->
|
<!--Credits-->
|
||||||
<image x="8" y="@(CardHeigth - 50)" width="20" height="20" href="icons/encyclopedia.vehicle.credits.scale-200.png" />
|
<image x="8" y="@(CardHeigth - 50)" width="20" height="20" href="icons/encyclopedia.vehicle.credits.scale-200.png" />
|
||||||
<text x="32" y="@(CardHeigth - 50)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
<text x="32" y="@(CardHeigth - 50)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||||
@((tank.PriceCredit / 1000).ToString("N0")) K
|
@((tank.PriceCredit / 1000).ToString("N0")) K
|
||||||
</text>
|
</text>
|
||||||
</g>
|
</g>
|
||||||
}
|
}
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
|
||||||
|
.nation-filter-flag {
|
||||||
|
width: 70px;
|
||||||
|
height: 46px;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-selected {
|
||||||
|
border-width: 1px;
|
||||||
|
border-color: #f5aa3b;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
@@ -1,11 +1,13 @@
|
|||||||
using MediatR;
|
using MediatR;
|
||||||
using Microsoft.AspNetCore.Components;
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Microsoft.AspNetCore.Components.Web;
|
||||||
using Microsoft.Extensions.Localization;
|
using Microsoft.Extensions.Localization;
|
||||||
using System;
|
using System;
|
||||||
using System.Collections.Generic;
|
using System.Collections.Generic;
|
||||||
using System.Linq;
|
using System.Linq;
|
||||||
using System.Threading.Tasks;
|
using System.Threading.Tasks;
|
||||||
using WotBlitzStatisticsPro.Blazor.GraphQl;
|
using WotBlitzStatisticsPro.Blazor.GraphQl;
|
||||||
|
using WotBlitzStatisticsPro.Blazor.Helpers;
|
||||||
using WotBlitzStatisticsPro.Blazor.Model;
|
using WotBlitzStatisticsPro.Blazor.Model;
|
||||||
using WotBlitzStatisticsPro.Blazor.Services;
|
using WotBlitzStatisticsPro.Blazor.Services;
|
||||||
|
|
||||||
@@ -43,10 +45,12 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
|
|||||||
|
|
||||||
public List<TankTreeItem> TreeItems { get; set; } = new();
|
public List<TankTreeItem> TreeItems { get; set; } = new();
|
||||||
|
|
||||||
public string SelectedNation { get; set; } = "germany";
|
public string SelectedNation { get; set; }
|
||||||
|
|
||||||
public List<string> Connections { get; set; } = new List<string>();
|
public List<string> Connections { get; set; } = new List<string>();
|
||||||
|
|
||||||
|
public List<FilterItem<string>> NationsFilter { get; set; } = new();
|
||||||
|
|
||||||
public string FrameStyle
|
public string FrameStyle
|
||||||
{
|
{
|
||||||
get
|
get
|
||||||
@@ -57,19 +61,10 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
|
|||||||
|
|
||||||
protected async override Task OnInitializedAsync()
|
protected async override Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
|
FillNationsFilter();
|
||||||
var screenHeight = await MediaQueriesService.WindowHeight();
|
var screenHeight = await MediaQueriesService.WindowHeight();
|
||||||
|
|
||||||
// TODO: Move it to the Nation selector handler
|
await LoadTree();
|
||||||
try
|
|
||||||
{
|
|
||||||
VehiclesLibrary = await GraphQlBackendService.GetVehiclesByNation(SelectedNation);
|
|
||||||
BuildTree();
|
|
||||||
}
|
|
||||||
catch (System.Exception e)
|
|
||||||
{
|
|
||||||
Notifications.ReportError("Can not get data from backend", e.Message);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public int GetTextWidth(string text, string fontFace, int fontSize)
|
public int GetTextWidth(string text, string fontFace, int fontSize)
|
||||||
@@ -242,5 +237,51 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
|
|||||||
|
|
||||||
return maxRowsCount;
|
return maxRowsCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private void FillNationsFilter()
|
||||||
|
{
|
||||||
|
// ToDo: Should get values from Dictionary here instead of hard code
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryUsa, Constants.CountryUsa.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryFrance, Constants.CountryFrance.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryUssr, Constants.CountryUssr.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryChina, Constants.CountryChina.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryUk, Constants.CountryUk.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryJapan, Constants.CountryJapan.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryGermany, Constants.CountryGermany.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryOther, Constants.CountryOther.NationAsset()));
|
||||||
|
NationsFilter.Add(new FilterItem<string>(Constants.CountryEuropean, Constants.CountryEuropean.NationAsset()));
|
||||||
|
|
||||||
|
SelectedNation = NationsFilter[0].ItemId;
|
||||||
|
}
|
||||||
|
|
||||||
|
public string NationFilterStyle(string nation)
|
||||||
|
{
|
||||||
|
string basic = "nation-filter-flag";
|
||||||
|
if (SelectedNation == nation)
|
||||||
|
{
|
||||||
|
return $"{basic} filter-selected";
|
||||||
|
}
|
||||||
|
return basic;
|
||||||
|
}
|
||||||
|
|
||||||
|
public async Task ApplyNationFilter(MouseEventArgs e, string nationToApply)
|
||||||
|
{
|
||||||
|
SelectedNation = nationToApply;
|
||||||
|
await LoadTree();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task LoadTree()
|
||||||
|
{
|
||||||
|
try
|
||||||
|
{
|
||||||
|
VehiclesLibrary = await GraphQlBackendService.GetVehiclesByNation(SelectedNation);
|
||||||
|
BuildTree();
|
||||||
|
}
|
||||||
|
catch (System.Exception e)
|
||||||
|
{
|
||||||
|
Notifications.ReportError("Can not get data from backend", e.Message);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Reference in new issue
Block a user