WotBlitzStatisticsBlazor/WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoTanksTreeSmall.razor

@using WotBlitzStatisticsPro.Blazor.Helpers
@using System.Linq
@inherits PlayerInfoTanksTreeBase;
<div class="d-flex flex-column">
    <div class="d-flex flex-row mb-3">
        @foreach (var nationForFilter in NationsFilter)
        {
            <img src="@nationForFilter.ItemName" class="@NationFilterStyle(nationForFilter.ItemId)" @onclick="@(async (e) => { await ApplyNationFilter(e, nationForFilter.ItemId); })" />
        }
    </div>
    <div style="overflow-y: auto; overflow-x: auto;">
        <svg xmlns="http://www.w3.org/2000/svg"
             height="@((CardWidth + 40) * 10)"
             width="@(FrameHeigth + LeftMargin)">

            <!-- Background -->
            @for (int i = 0; i < 10; i++)
            {
                <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++)
                {
                    @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"
                             x="@(tank.Row * (CardHeigth + 20) + 20 + LeftMargin)"
                             y="@(((10 - tier)) * (CardWidth + 40) + 20)"
                             height="@CardWidth"
                             width="@CardHeigth">
                            <g>
                                <!--Rect fill = #275950 - researched, #2E353B - unresearched, #66502b - prem-->
                                <rect x="0"
                                      y="0"
                                      height="@CardWidth"
                                      width="@CardHeigth"
                                      rx="10"
                                      ry="10"
                                      fill="@(tank.IsResearched ? (tank.IsPremium ? "#66502b" : "#275950") : "#2E353B")">
                                </rect>

                                <!--Tank type-->
                                <image x="5" y="7" width="25" height="25" href="@tank.TankTypeId.TankTypeAsset(tank.IsPremium)" />
                                <!--TankImage-->
                                <image x="@((CardHeigth - 95) / 2)" y="5" width="95" height="70" href="@tank.PreviewImage" />
                                <!--TankName-->
                                <text x="5" y="80" fill="@(tank.IsPremium ? Constants.ClanTagColor : "white")" text-anchor="start" alignment-baseline="before-edge" font-family="Segoe UI" font-size="14">
                                    @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>
                    }
                }
            }
        </svg>
    </div>
</div>