73 lines
2.3 KiB
Plaintext
73 lines
2.3 KiB
Plaintext
<div class="position-relative w-100 bg-white card border border-5 rounded border-info-subtle shadow-sm " style="height:300px;">
|
|
|
|
<div class=" z-3">
|
|
<div class="">
|
|
@if (_pokemon.IsVariation)
|
|
{
|
|
<div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y">
|
|
<p class="fs-2 fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p>
|
|
</div>
|
|
<div class="position-absolute top-0 start-0 pt-1 ms-3 mt-4">
|
|
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
|
|
</div>
|
|
}
|
|
else
|
|
{
|
|
<div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y">
|
|
<p class="fs-1 fw-bold card-title">@_pokemon.PokemonName</p>
|
|
</div>
|
|
<div class="position-absolute top-0 start-0 pt-2 ms-3 mt-4">
|
|
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Image and other Pokemon info -->
|
|
<div class="position-absolute top-50 start-50 translate-middle flip-container z-1 card-body" @onclick="() => ToggleImage()">
|
|
<div class="flipper @(isShiny ? "flipped" : "")">
|
|
<img class="card-img front" src="@_pokemon.PokemonImageUrl" />
|
|
<img class="card-img back" src="@_pokemon.PokemonShinyImageUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
|
|
<div class="">
|
|
<div class="d-flex justify-content-between">
|
|
<div class="m-1 badge @_pokemon.SleepType.ToLower()"><p class="statText">@_pokemon.SleepType</p></div>
|
|
<div class="m-1 badge @_pokemon.Speciality.ToLower()"><p class="statText">@_pokemon.Speciality</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@code {
|
|
|
|
[Parameter]
|
|
public Pokemon Pokemon { get; set; }
|
|
|
|
private Pokemon _pokemon { get; set; }
|
|
|
|
private bool isShiny = false;
|
|
|
|
protected override void OnParametersSet()
|
|
{
|
|
if(Pokemon != null)
|
|
{
|
|
_pokemon = Pokemon;
|
|
|
|
}
|
|
}
|
|
|
|
private void ToggleImage()
|
|
{
|
|
isShiny = !isShiny;
|
|
StateHasChanged();
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|