mirror of
https://github.com/DrMboga/WotBlitzStatisticsBlazor.git
synced 2026-10-21 02:17:20 +02:00
feat: tanks tree vertical cards ready
This commit is contained in:
1 parent
ece6efaf58
commit
5a60c8e906
2 files changed
+69
-12
No files matched your search
@@ -43,12 +43,16 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
|
||||
public int CardWidth { get; } = 200;
|
||||
public int CardHeigth { get; } = 120;
|
||||
|
||||
public int LeftMargin { get; } = 30;
|
||||
|
||||
public List<TankTreeItem> TreeItems { get; set; } = new();
|
||||
|
||||
public string SelectedNation { get; set; }
|
||||
|
||||
public List<string> Connections { get; set; } = new List<string>();
|
||||
|
||||
public List<string> ConnectionsInVerticalView { get; set; } = new List<string>();
|
||||
|
||||
public List<FilterItem<string>> NationsFilter { get; set; } = new();
|
||||
|
||||
public string FrameStyle
|
||||
@@ -76,6 +80,7 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
|
||||
{
|
||||
TreeItems.Clear();
|
||||
Connections.Clear();
|
||||
ConnectionsInVerticalView.Clear();
|
||||
var vehiclesTree = VehiclesLibrary?.Where(v => v != null && v.IsPremium == false).ToList();
|
||||
for (int tier = 1; tier < 11; tier++)
|
||||
{
|
||||
@@ -105,6 +110,7 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
|
||||
foreach (var nextRow in treeItem.NextRows)
|
||||
{
|
||||
Connections.Add(SvgHelper.TankTreeConnectionPath(treeItem.Row, nextRow.Row, tier, CardWidth, CardHeigth));
|
||||
// TODO: Calc ConnectionsInVerticalView
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,19 +11,33 @@
|
||||
<div style="overflow-y: auto; overflow-x: auto;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
height="@((CardWidth + 40) * 10)"
|
||||
width="@FrameHeigth">
|
||||
width="@(FrameHeigth + LeftMargin)">
|
||||
|
||||
<!-- Background -->
|
||||
@for (int i = 0; i < 10; i++)
|
||||
{
|
||||
<rect x="0"
|
||||
y="@(i * (CardWidth + 40))"
|
||||
width="@FrameHeigth"
|
||||
height="@(CardWidth + 40)"
|
||||
fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")">
|
||||
</rect>
|
||||
<g>
|
||||
<rect x="0"
|
||||
y="@(i * (CardWidth + 40))"
|
||||
width="@(FrameHeigth + LeftMargin)"
|
||||
height="@(CardWidth + 40)"
|
||||
fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")">
|
||||
</rect>
|
||||
<!--Tank tier-->
|
||||
<text x="10" y="@(i * (CardWidth + 40) + CardWidth/2)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="16">
|
||||
@((10 - i).RomanNumber())
|
||||
</text>
|
||||
</g>
|
||||
}
|
||||
|
||||
<!-- Connections -->
|
||||
<!-- https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths -->
|
||||
@foreach (var pathConnection in ConnectionsInVerticalView)
|
||||
{
|
||||
<path fill="none" stroke="white" stroke-width="1" d="@pathConnection" />
|
||||
}
|
||||
|
||||
|
||||
@if (TreeItems != null)
|
||||
{
|
||||
@for (int tier = 1; tier < 11; tier++)
|
||||
@@ -32,7 +46,7 @@
|
||||
{
|
||||
<!-- Tank card svg-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
x="@(tank.Row * (CardHeigth + 20) + 20)"
|
||||
x="@(tank.Row * (CardHeigth + 20) + 20 + LeftMargin)"
|
||||
y="@(((10 - tier)) * (CardWidth + 40) + 20)"
|
||||
height="@CardWidth"
|
||||
width="@CardHeigth">
|
||||
@@ -49,10 +63,6 @@
|
||||
|
||||
<!--Tank type-->
|
||||
<image x="5" y="7" width="25" height="25" href="@tank.TankTypeId.TankTypeAsset(tank.IsPremium)" />
|
||||
<!--Tank tier-->
|
||||
<text x="30" 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()
|
||||
</text>
|
||||
<!--TankImage-->
|
||||
<image x="@((CardHeigth - 95) / 2)" y="5" width="95" height="70" href="@tank.PreviewImage" />
|
||||
<!--TankName-->
|
||||
@@ -60,6 +70,47 @@
|
||||
@tank.Name
|
||||
</text>
|
||||
|
||||
<!--Researched: Mastery, Winrate, AvgDmg, Battles, LastBattle-->
|
||||
@if (tank.IsResearched && tank.MarkOfMastery.HasValue && tank.WinRate.HasValue && tank.AvgDamage.HasValue && tank.Battles.HasValue && tank.LastBattleTime.HasValue)
|
||||
{
|
||||
<g>
|
||||
<!--Mastery-->
|
||||
<image x="7" y="105" width="20" height="20" href="@tank.MarkOfMastery.Value.IconAsset()" />
|
||||
<!--Winrate-->
|
||||
<image x="@((CardHeigth - 60))" y="@(CardWidth - 100)" width="20" height="20" href="icons/details.wins.scale-200.png" />
|
||||
<text x="@((CardHeigth - 40))" y="@(CardWidth - 100)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-weight="bold" font-size="12">
|
||||
@(tank.WinRate.Value.ToString("N0"))%
|
||||
</text>
|
||||
<line x1="@((CardHeigth - 60))" y1="@(CardWidth - 80)" x2="@((CardHeigth - 5))" y2="@(CardWidth - 80)" style="@($"stroke:{tank.WinRate.Value.ScaleColor()};stroke-width:3")" />
|
||||
<!--AvgDmg-->
|
||||
<image x="7" y="@(CardWidth - 75)" width="20" height="20" href="icons/damage.scale-200.png" />
|
||||
<text x="32" y="@(CardWidth - 75)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||
@tank.AvgDamage.Value.ToString("N0")
|
||||
</text>
|
||||
<!--Battles-->
|
||||
<image x="7" y="@(CardWidth - 55)" width="20" height="20" href="icons/details.battles.scale-200.png" />
|
||||
<text x="32" y="@(CardWidth - 55)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||
@tank.Battles.Value.ToString("N0")
|
||||
</text>
|
||||
<!--Last battle-->
|
||||
<image x="8" y="@(CardWidth - 30)" width="16" height="16" href="icons/calendar.scale-200.png" />
|
||||
<text x="32" y="@(CardWidth - 30)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||
@tank.LastBattleTime.Value.ToString("d")
|
||||
</text>
|
||||
</g>
|
||||
}
|
||||
<!--Unresearched: XP, Credits-->
|
||||
@if (!tank.IsResearched)
|
||||
{
|
||||
<g>
|
||||
<!--Credits-->
|
||||
<image x="8" y="@(CardWidth - 60)" width="20" height="20" href="icons/encyclopedia.vehicle.credits.scale-200.png" />
|
||||
<text x="32" y="@(CardWidth - 60)" fill="white" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="12">
|
||||
@((tank.PriceCredit / 1000).ToString("N0")) K
|
||||
</text>
|
||||
</g>
|
||||
}
|
||||
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user