207 lines
9.7 KiB
Plaintext
207 lines
9.7 KiB
Plaintext
@inject IPokemonService PokemonService
|
|
@inject IJSRuntime JS
|
|
@inject NavigationManager Navigation
|
|
|
|
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
<!-- Table A: Desktop View-->
|
|
<div class="container d-none d-md-block " style="height: 70vh;">
|
|
<!-- Main UI -->
|
|
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
|
|
<!-- Table Header -->
|
|
<div class="row card-header bg-secondary bg-gradient py-3 border-0">
|
|
<div class="flex-row justify-content-between">
|
|
<div class="text-center position-relative">
|
|
<input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
|
|
|
|
<h2 class="text-white text-decoration-underline">Available Pokémon</h2>
|
|
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row">
|
|
<table class="table col table-borderless border-0 table-secondary table-striped align-middle">
|
|
<!-- Table Head -->
|
|
<thead class="">
|
|
<tr class="">
|
|
<th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
|
|
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
|
<th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
|
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
|
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
|
|
|
</tr>
|
|
</thead>
|
|
<!-- If/Else Pokemon Loaded-->
|
|
@if(pokemons == null)
|
|
{
|
|
<tbody>
|
|
<Loading />
|
|
</tbody>
|
|
}
|
|
else
|
|
{
|
|
<!-- Table Body -->
|
|
<tbody class="">
|
|
<tr></tr>
|
|
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
|
{
|
|
|
|
@foreach (var pokemon in FilteredPokemon)
|
|
{
|
|
<tr class="flex-row">
|
|
<!-- Section: Pokemon Image -->
|
|
@{
|
|
string baseUrl = pokemon.PokemonImageUrl;
|
|
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
|
}
|
|
<td class="text-center d-none d-md-table-cell">
|
|
@if (shinyUrl == null)
|
|
{
|
|
<div class="flip-container">
|
|
<div class="flipper">
|
|
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
else
|
|
{
|
|
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
|
|
<img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
</td>
|
|
|
|
<!-- Section 2: Pokemon # -->
|
|
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
|
|
|
|
|
<!-- Section 3: Pokemon Name -->
|
|
|
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
|
|
|
|
|
|
|
|
<!-- Section 4: Pokemon Type -->
|
|
<td class="">
|
|
<div class="d-flex justify-content-center">
|
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 5: Sleep Type -->
|
|
<td class="" style="">
|
|
<div class="d-flex justify-content-center ">
|
|
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
|
</div>
|
|
</td>
|
|
|
|
<!-- Section 6: Speciality -->
|
|
<td class="" style="">
|
|
<div class="d-flex justify-content-center">
|
|
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
|
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<tr>
|
|
<td colspan="100%">
|
|
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
|
|
<p class="text-muted">Pokémon could not be found.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
}
|
|
|
|
|
|
</table>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Desktop B: Mobile View -->
|
|
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
|
<!-- Table Header -->
|
|
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
|
|
<div class="flex-row justify-content-between">
|
|
<div class="text-center position-relative">
|
|
<h2 class="text-white text-decoration-underline">Pokémon</h2>
|
|
<div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Table Body -->
|
|
<div class="tableFixHead row">
|
|
<table class="table table-striped border-0">
|
|
|
|
|
|
<tbody>
|
|
@if (pokemons == null)
|
|
{
|
|
<Loading />
|
|
}
|
|
else
|
|
{
|
|
|
|
@foreach (var pokemon in pokemons)
|
|
{
|
|
<tr class="border-0">
|
|
<div class="d-flex align-items-center">
|
|
|
|
<!-- Pokemon Image -->
|
|
<div class="me-3">
|
|
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
|
|
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
<img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
|
|
@if (pokemon.PokemonShinyImageUrl != null)
|
|
{
|
|
<img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="">
|
|
<!-- Number and Name -->
|
|
<h5>
|
|
@pokemon.PokemonId -
|
|
<span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
|
|
@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
|
|
</span>
|
|
</h5>
|
|
<!-- Stats -->
|
|
<div class="d-flex flex-wrap align-items-center gap-2">
|
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
|
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
|
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</tr>
|
|
}
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|