feat: tanks tree connections added

This commit is contained in:
Mikhail Shabanov committed 2022-08-19 15:18:47 +02:00
1 parent 5fe3c458e1
commit 80050e1ddd
7 files changed
+161 -99

No files matched your search

@@ -2,23 +2,27 @@
@using System.Linq
@inherits PlayerInfoTanksTreeBase;
<div style="overflow-y: auto; overflow-x: auto;">
<svg
xmlns="http://www.w3.org/2000/svg"
<svg xmlns="http://www.w3.org/2000/svg"
width="@((CardWidth + 40) * 10)"
height="@FrameHeigth"
>
height="@FrameHeigth">
<!-- Background -->
@for (int i = 0; i < 10; i++)
{
<rect
x="@(i * (CardWidth + 40))"
<rect x="@(i * (CardWidth + 40))"
y="0"
width="@(CardWidth + 40)"
height="@FrameHeigth"
fill="@(i % 2 == 0 ? "#464A5D" : "#3A3D4B")"
>
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++)
@@ -26,16 +30,14 @@
@foreach (var tank in TreeItems.Where(t => t.Tier == tier).OrderBy(t => t.Row).ToList())
{
<!-- Tank card svg-->
<svg
xmlns="http://www.w3.org/2000/svg"
<svg xmlns="http://www.w3.org/2000/svg"
x="@((tier - 1) * (CardWidth + 40) + 20)"
y="@(tank.Row * (CardHeigth + 20) + 20)"
width="@CardWidth"
height="@CardHeigth">
<g>
<!--Rect fill = #275950 - researched, #2E353B - unresearched, #66502b - prem-->
<rect
x="0"
<rect x="0"
y="0"
width="@CardWidth"
height="@CardHeigth"
@@ -45,13 +47,13 @@
</rect>
<!--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-->
<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()
</text>
<!--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-->
<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
@@ -62,25 +64,25 @@
{
<g>
<!--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-->
<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">
@(tank.WinRate.Value.ToString("N0"))%
</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-->
<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">
@tank.AvgDamage.Value.ToString("N0")
</text>
<!--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">
@tank.Battles.Value.ToString("N0")
</text>
<!--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">
@tank.LastBattleTime.Value.ToString("d")
</text>
@@ -91,7 +93,7 @@
{
<g>
<!--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">
@((tank.PriceCredit / 1000).ToString("N0")) K
</text>
@@ -44,7 +44,9 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
public List<TankTreeItem> TreeItems { get; set; } = new();
public string SelectedNation { get; set; } = "germany";
public List<string> Connections { get; set; } = new List<string>();
public string FrameStyle
{
get
@@ -78,6 +80,7 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
private void BuildTree()
{
TreeItems.Clear();
Connections.Clear();
var vehiclesTree = VehiclesLibrary.Where(v => v.IsPremium == false).ToList();
for (int tier = 1; tier < 11; tier++)
{
@@ -102,6 +105,13 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
// Map next tier tanks by rows
treeItem.NextRows = BuildNextTanksRowMapping(vehicleFromDictionary, currentRow);
if(treeItem.NextRows != null)
{
foreach (var nextRow in treeItem.NextRows)
{
Connections.Add(SvgHelper.TankTreeConnectionPath(treeItem.Row, nextRow.Row, tier, CardWidth, CardHeigth));
}
}
TreeItems.Add(treeItem);
}
@@ -153,22 +163,17 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
if (vehicleFromDictionary.NexTanksInTree != null && vehicleFromDictionary.NexTanksInTree.Count > 0)
{
nextRowsMap = new List<TankTreeRowMap>();
if (vehicleFromDictionary.NexTanksInTree.Count == 1)
foreach (var nextTankInTree in vehicleFromDictionary.NexTanksInTree)
{
nextRowsMap.Add(new TankTreeRowMap(vehicleFromDictionary.NexTanksInTree[0], currentRow));
}
else
{
foreach (var nextTankInTree in vehicleFromDictionary.NexTanksInTree)
var rowMap = Constants.TanksTreeHelper.FirstOrDefault(v => v.TankId == nextTankInTree);
if (rowMap != null)
{
// If more than one, get tank row from special mappings array
var rowMap = Constants.TanksTreeHelper.FirstOrDefault(v => v.TankId == nextTankInTree);
if (rowMap != null)
{
nextRowsMap.Add(rowMap);
}
nextRowsMap.Add(rowMap);
}
else
{
nextRowsMap.Add(new TankTreeRowMap(vehicleFromDictionary.NexTanksInTree[0], currentRow));
}
}
}