53 lines
1.9 KiB
Plaintext
53 lines
1.9 KiB
Plaintext
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
<div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
|
|
<!-- Pokemon Name, Number, and Type -->
|
|
<div class="z-3">
|
|
@if (_pokemon.IsVariation)
|
|
{
|
|
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
|
|
}
|
|
else
|
|
{
|
|
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div>
|
|
}
|
|
<div class="pokemon-number">
|
|
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
|
|
</div>
|
|
<div >
|
|
<img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pokemon Image -->
|
|
<div class="flip-container z-1" @onclick="() => ToggleImage()">
|
|
<div class="flipper @(isShiny ? "flipped" : "")">
|
|
<img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
|
|
<img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-info-subtle border rounded border-2 border-info z-3 pokemon-flavor-text">
|
|
@if (string.IsNullOrEmpty(_pokemon.FlavorText))
|
|
{
|
|
<p class="">[ Pokemon Flavor Text Placeholder ]</p>
|
|
|
|
}
|
|
else
|
|
{
|
|
<p class="fw-light ">@_pokemon.FlavorText</p>
|
|
|
|
}
|
|
</div>
|
|
|
|
<!-- Pokemon Sleep Type and Specialty Badges -->
|
|
<div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
|
|
<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>
|