mirror of
https://github.com/DrMboga/WotBlitzStatisticsBlazor.git
synced 2026-10-21 02:17:20 +02:00
feat: tank card ready
This commit is contained in:
Mikhail Shabanov committed
1 parent
c0b1fde821
commit
bc839a7ab7
10 files changed
+183
-15
No files matched your search
@@ -3,8 +3,8 @@
|
||||
|
||||
<RadzenCard>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-lg-6">
|
||||
<table class="table" width="250px">
|
||||
<div class="col-md-3 col-lg-3">
|
||||
<table class="table" width="230px">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>@Localize["Battles"]:</td>
|
||||
@@ -35,11 +35,33 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-6">
|
||||
@if(MostRelevantTank != null)
|
||||
{
|
||||
<p>@MostRelevantTank.Name</p>
|
||||
}
|
||||
<div class="col-md-3 col-lg-3 align-items-center d-flex">
|
||||
<div style="width: 120px; margin: 3px;">
|
||||
@Localize["Most effective tank"]:
|
||||
</div>
|
||||
@if (MostRelevantTank != null)
|
||||
{
|
||||
<TankCard Tank=@MostRelevantTank></TankCard>
|
||||
}
|
||||
</div>
|
||||
<div class="col-md-3 col-lg-3 align-items-center d-flex">
|
||||
<div style="width: 100px; margin: 3px;">
|
||||
@Localize["Tank with Max XP"] (@AccountInfo.MaxXp.ToString("N0")):
|
||||
</div>
|
||||
@if (MaxXpTank != null)
|
||||
{
|
||||
<TankCard Tank=@MaxXpTank></TankCard>
|
||||
}
|
||||
</div>
|
||||
<div class="col-md-3 col-lg-3 align-items-center d-flex">
|
||||
<div style="width: 100px; margin: 3px;">
|
||||
@Localize["Tank with Max frags"] (@AccountInfo.MaxFrags):
|
||||
</div>
|
||||
|
||||
@if (MaxFragsTank != null)
|
||||
{
|
||||
<TankCard Tank=@MaxFragsTank></TankCard>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</RadzenCard>
|
||||
@@ -49,10 +71,14 @@
|
||||
public IAccount AccountInfo { get; set; }
|
||||
|
||||
public ITank? MostRelevantTank;
|
||||
public ITank? MaxXpTank;
|
||||
public ITank? MaxFragsTank;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
MostRelevantTank = AccountInfo?.Tanks?.Where(t => t.Battles > 50).OrderByDescending(t => t.Wn7).FirstOrDefault();
|
||||
MaxXpTank = AccountInfo?.Tanks?.FirstOrDefault(t => t.TankId == AccountInfo.MaxXpTankId);
|
||||
MaxFragsTank = AccountInfo?.Tanks?.FirstOrDefault(t => t.TankId == AccountInfo.MaxFragsTankId);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -61,32 +61,33 @@
|
||||
LogicalFilterOperator="LogicalFilterOperator.Or"
|
||||
@ref="TanksGrid">
|
||||
<Columns>
|
||||
<RadzenDataGridColumn TItem="ITank" Property="Tier" Sortable="true" Filterable="false" Title="" Frozen="true" Width="34px" TextAlign="TextAlign.Center">
|
||||
<RadzenDataGridColumn TItem="ITank" Property="Tier" Sortable="true" Filterable="false" Title="" Frozen="false" Width="34px" TextAlign="TextAlign.Center">
|
||||
<Template Context="data">
|
||||
<b>@data.Tier.RomanNumber()</b>
|
||||
</Template>
|
||||
</RadzenDataGridColumn>
|
||||
<RadzenDataGridColumn TItem="ITank" Property="TankTypeId" Filterable="false" Sortable="true" Title="" Frozen="true" Width="34px" TextAlign="TextAlign.Center">
|
||||
<RadzenDataGridColumn TItem="ITank" Property="TankTypeId" Filterable="false" Sortable="true" Title="" Frozen="false" Width="34px" TextAlign="TextAlign.Center">
|
||||
<Template Context="data">
|
||||
<RadzenImage Path="@data.TankTypeId.TankTypeAsset(data.IsPremium)" MouseEnter="@(args => ShowTooltip(args, data.TankType) )" style="width: 24px; height: 24px;" />
|
||||
<RadzenImage Path="@data.TankTypeId.TankTypeAsset(data.IsPremium)" MouseEnter="@(args => ShowTooltip(args, data.TankType, new TooltipOptions(){ Style = "background-color:#2F3D43" }) )" style="width: 24px; height: 24px;" />
|
||||
</Template>
|
||||
</RadzenDataGridColumn>
|
||||
<RadzenDataGridColumn TItem="ITank" Property="TankNationId" Filterable="false" Sortable="true" Title="" Frozen="true" Width="50px" TextAlign="TextAlign.Center">
|
||||
<RadzenDataGridColumn TItem="ITank" Property="TankNationId" Filterable="false" Sortable="true" Title="" Frozen="false" Width="50px" TextAlign="TextAlign.Center">
|
||||
<Template Context="data">
|
||||
<RadzenImage Path="@data.TankNationId.NationAsset()" MouseEnter="@(args => ShowTooltip(args, data.TankNation) )" style="width: 35px; height: 23px; border-radius: 4px;" />
|
||||
<RadzenImage Path="@data.TankNationId.NationAsset()" MouseEnter="@(args => ShowTooltip(args, data.TankNation, new TooltipOptions(){ Style = "background-color:#2F3D43" }) )" style="width: 35px; height: 23px; border-radius: 4px;" />
|
||||
</Template>
|
||||
</RadzenDataGridColumn>
|
||||
<RadzenDataGridColumn TItem="ITank" Property="MarkOfMastery" Filterable="false" Sortable="true" Title="" Frozen="true" Width="34px" TextAlign="TextAlign.Center">
|
||||
<RadzenDataGridColumn TItem="ITank" Property="MarkOfMastery" Filterable="false" Sortable="true" Title="" Frozen="false" Width="34px" TextAlign="TextAlign.Center">
|
||||
<Template Context="data">
|
||||
<RadzenImage Path="@data.MarkOfMastery.IconAsset()" style="width: 24px; height: 24px;" />
|
||||
</Template>
|
||||
</RadzenDataGridColumn>
|
||||
<RadzenDataGridColumn TItem="ITank" Title="" Sortable="false" Filterable="false" Width="55px">
|
||||
<Template Context="data">
|
||||
<RadzenImage Path="@data.PreviewImage" style="width: 50px; height: 40px; border-radius: 8px;" />
|
||||
<RadzenImage Path="@data.PreviewImage" style="width: 50px; height: 40px; border-radius: 8px;"
|
||||
MouseEnter="@(args => ShowTankTooltip(args, data.PreviewImage, data.TankNationId, new TooltipOptions(){ Style = "background-color:#2F3D43" }) )" />
|
||||
</Template>
|
||||
</RadzenDataGridColumn>
|
||||
<RadzenDataGridColumn TItem="ITank" Property="Name" Filterable="false" Sortable="true" Title="@Localize["Tank"]" Frozen="true" Width="100px" TextAlign="TextAlign.Left">
|
||||
<RadzenDataGridColumn TItem="ITank" Property="Name" Filterable="false" Sortable="true" Title="@Localize["Tank"]" Frozen="false" Width="100px" TextAlign="TextAlign.Left">
|
||||
<FooterTemplate>
|
||||
@Localize["Tanks"]: <b>@TanksGrid.View.Count()</b> @Localize["of"] <b>@TanksList.Count()</b>
|
||||
</FooterTemplate>
|
||||
@@ -184,3 +185,11 @@
|
||||
SortOrder="SortOrder.Descending"/>
|
||||
</Columns>
|
||||
</RadzenDataGrid>
|
||||
|
||||
|
||||
@code {
|
||||
void ShowTankTooltip(ElementReference elementReference, string img, string nationId, TooltipOptions options = null) => TooltipService.Open(elementReference, ds =>
|
||||
@<div style="background-image: url('@nationId.NationAsset()'); background-repeat: no-repeat;">
|
||||
<img src=@img style="width: 360px; height: 263px; " />
|
||||
</div>, options);
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@using WotBlitzStatisticsPro.Blazor.Helpers
|
||||
@inject IStringLocalizer<App> Localize;
|
||||
|
||||
<div class="card-body">
|
||||
<div class="header-area">
|
||||
<div class="middle-alligned">
|
||||
<img src="@Tank.TankTypeId.TankTypeAsset(Tank.IsPremium)" class="tank-type-icon" />
|
||||
@if (Tank.IsPremium)
|
||||
{
|
||||
|
||||
<b style="color: @Constants.ClanTagColor; font-size: 21px"> @Tank.Tier.RomanNumber()</b>
|
||||
}
|
||||
else
|
||||
{
|
||||
<b style="font-size: 21px"> @Tank.Tier.RomanNumber()</b>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<img src="@Tank.MarkOfMastery.IconAsset()" class="mastery-image" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-flag-area" style="background-image: url('@Tank.TankNationId.NationAsset()')" title=@($"{@Localize["Wn7"]}: {Tank.Wn7:N0}; {@Localize["Last battle"]}: {Tank.LastBattleTime:d}")>
|
||||
<img [email protected] class="tank-preview" />
|
||||
</div>
|
||||
<div>
|
||||
@if (Tank.IsPremium)
|
||||
{
|
||||
<span style="color: @Constants.ClanTagColor;">
|
||||
@Tank.Name
|
||||
</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
@Tank.Name
|
||||
}
|
||||
</div>
|
||||
<div class="statistics-row">
|
||||
<div>
|
||||
<img src="icons/details.battles.scale-200.png" class="icon-scale" /> @Tank.Battles.ToString("N0")
|
||||
</div>
|
||||
<div>
|
||||
<img src="icons/details.wins.scale-200.png" class="icon-scale" /> <b>@Tank.WinRate.ToString("N0")%</b>
|
||||
<div style="background-color: @Tank.WinRate.ScaleColor(); width: 100%; height: 5px; margin-left: 2px; margin-right: 2px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="statistics-row">
|
||||
<div>
|
||||
<img src="icons/damage.scale-200.png" class="icon-scale" /> @Tank.AvgDamage.ToString("N0")
|
||||
</div>
|
||||
<div>
|
||||
<img src="icons/xp.avg.scale-200.png" class="icon-scale" /> @Tank.AvgXp.ToString("N0")
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public ITank Tank { get; set; }
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.header-area {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.middle-alligned {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-flag-area {
|
||||
background-repeat: no-repeat;
|
||||
width: 120px;
|
||||
height: 70px;
|
||||
justify-content: flex-end;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.mastery-image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.tank-preview {
|
||||
width: 95px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.tank-type-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.icon-scale {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.statistics-row {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
@@ -177,6 +177,9 @@
|
||||
<data name="months ago" xml:space="preserve">
|
||||
<value>vor Monaten</value>
|
||||
</data>
|
||||
<data name="Most effective tank" xml:space="preserve">
|
||||
<value>Effektivster Panzer</value>
|
||||
</data>
|
||||
<data name="of" xml:space="preserve">
|
||||
<value>von</value>
|
||||
</data>
|
||||
@@ -198,6 +201,12 @@
|
||||
<data name="Tank" xml:space="preserve">
|
||||
<value>Panzer</value>
|
||||
</data>
|
||||
<data name="Tank with Max frags" xml:space="preserve">
|
||||
<value>Panzer max zerstört</value>
|
||||
</data>
|
||||
<data name="Tank with Max XP" xml:space="preserve">
|
||||
<value>Panzer mit max EP</value>
|
||||
</data>
|
||||
<data name="Tanks" xml:space="preserve">
|
||||
<value>Panzern</value>
|
||||
</data>
|
||||
|
||||
@@ -177,6 +177,9 @@
|
||||
<data name="months ago" xml:space="preserve">
|
||||
<value>месяцев назад</value>
|
||||
</data>
|
||||
<data name="Most effective tank" xml:space="preserve">
|
||||
<value>Самый эффективный танк</value>
|
||||
</data>
|
||||
<data name="of" xml:space="preserve">
|
||||
<value>из</value>
|
||||
</data>
|
||||
@@ -198,6 +201,12 @@
|
||||
<data name="Tank" xml:space="preserve">
|
||||
<value>Танк</value>
|
||||
</data>
|
||||
<data name="Tank with Max frags" xml:space="preserve">
|
||||
<value>Максимум фрагов </value>
|
||||
</data>
|
||||
<data name="Tank with Max XP" xml:space="preserve">
|
||||
<value>Максимум XP</value>
|
||||
</data>
|
||||
<data name="Tanks" xml:space="preserve">
|
||||
<value>Танков</value>
|
||||
</data>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Reference in new issue
Block a user