294 lines
11 KiB
Plaintext
294 lines
11 KiB
Plaintext
@page "/pokemonsleep"
|
|
|
|
@inject IPokemonService PokemonService
|
|
@inject IJSRuntime JS
|
|
|
|
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
<PageTitle>Pokémon Sleep</PageTitle>
|
|
|
|
<style>
|
|
|
|
.tableFixHead {
|
|
overflow: auto;
|
|
height: 600px;
|
|
}
|
|
|
|
.tableFixHead thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
}
|
|
|
|
.flip-container {
|
|
perspective: 1000px;
|
|
display: inline-block;
|
|
width: 90px;
|
|
height: 90px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.flipper {
|
|
transition: transform 0.6s;
|
|
transform-style: preserve-3d;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.flipped {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.front, .back {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.back {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.badge {
|
|
width: 100px;
|
|
height: 30px;
|
|
color: white;
|
|
padding: 4px 8px;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border-radius: 30px;
|
|
}
|
|
.statText {
|
|
position: relative;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.dozing {
|
|
background-color: #fcdc5e;
|
|
}
|
|
.snoozing {
|
|
background-color: #4ce8ed;
|
|
}
|
|
|
|
.slumbering {
|
|
background-color: #4588fb;
|
|
}
|
|
|
|
.berries {
|
|
background-color: #24d86b;
|
|
}
|
|
|
|
.ingredients {
|
|
background-color: #fdbe4d;
|
|
}
|
|
|
|
.skills {
|
|
background-color: #47a0fc;
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- Heading + Buttons -->
|
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
|
<div class="row">
|
|
<div class="col-4"></div>
|
|
<div class="col-4 text-center">
|
|
<h1 class="text-primary">Pokémon Sleep</h1>
|
|
</div>
|
|
<div class="col-4 text-end">
|
|
<div class="btn-group col">
|
|
<NavLink class="btn btn-info" style="border-radius: 15px 50px;" href="/pokemonsleep/add-new-pokemon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
|
</svg> Add New Pokémon
|
|
</NavLink>
|
|
<NavLink class="btn btn-primary" style="border-radius: 15px 50px;" href="/pokemonsleep/rate-pokemon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
|
</svg> Rate Pokémon
|
|
</NavLink>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Main Body -->
|
|
@if (pokemons == null)
|
|
{
|
|
<p><em>Loading...</em></p>
|
|
}
|
|
else
|
|
{
|
|
<!-- Main UI -->
|
|
<div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; ">
|
|
|
|
<!-- Table Header -->
|
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<h2 class="text-info">Available Pokémon</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Table -->
|
|
<div class="tableFixHead" >
|
|
<table class="table table-striped" >
|
|
|
|
<!-- Table Head -->
|
|
<thead >
|
|
<tr>
|
|
<th class="text-bg-info" scope="col"></th>
|
|
<th class="text-bg-info" scope="col">#</th>
|
|
<th class="text-bg-info" scope="col">Pokemon</th>
|
|
<th class="text-bg-info" scope="col">Sleep Type</th>
|
|
<th class="text-bg-info" scope="col" style="padding-right: 30px;">Speciality</th>
|
|
<th class="text-bg-info" scope="col"></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<!-- Table Body -->
|
|
<tbody >
|
|
@foreach (var pokemon in pokemons)
|
|
{
|
|
<tr>
|
|
|
|
<!-- Section 1: Pokemon Image -->
|
|
@if (pokemon.IsVariation)
|
|
{
|
|
string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
|
|
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
|
|
<td style="text-align: center;">
|
|
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
<img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
|
|
<img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
}
|
|
else // Base Case
|
|
{
|
|
string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
|
|
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
|
|
<td style="text-align: center;">
|
|
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
<img class="front" src="/pokemon_images/normal/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
|
|
<img class="back" src="/pokemon_images/shiny/@(pokemon.IsVariation ? $"{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}" : pokemon.PokemonId).png" />
|
|
</div>
|
|
</div>
|
|
</td>
|
|
}
|
|
|
|
<!-- Section 2: Pokemon # -->
|
|
<th scope="row">@pokemon.PokemonId</th>
|
|
|
|
<!-- Section 3: Pokemon Name -->
|
|
@if (pokemon.IsVariation) // If a Variant
|
|
{
|
|
@if (pokemon.VariationName == "Alolan")
|
|
{
|
|
<td style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
|
|
}
|
|
@if (pokemon.VariationName == "Paldean")
|
|
{
|
|
<td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
|
|
}
|
|
}
|
|
else // Otherwise, Base Case
|
|
{
|
|
<td style="vertical-align: auto;"> @pokemon.PokemonName</td>
|
|
}
|
|
|
|
<!-- Section 4: Sleep Type -->
|
|
<td style="vertical-align: auto;">
|
|
<div class="m-1 col-1 badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
|
|
</td>
|
|
|
|
<!-- Section 5: Speciality -->
|
|
<td style="padding-right: 30px; vertical-align: auto;">
|
|
<div class="m-1 col-1 badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
|
|
</td>
|
|
|
|
<!-- Section 6: Delete Button -->
|
|
<td>
|
|
<button class="btn btn-danger" @onclick="() => ConfirmDelete(pokemon.Id)">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
|
|
class="bi bi-trash" viewBox="0 0 16 16">
|
|
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
|
|
<path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
|
|
</svg>
|
|
</button>
|
|
</td>
|
|
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
}
|
|
|
|
@code {
|
|
private List<Pokemon> pokemons = new List<Pokemon>();
|
|
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
|
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
|
|
var result = await PokemonService.GetAllPokemonAsync();
|
|
if (result is not null)
|
|
{
|
|
pokemons = result;
|
|
pokemons.Sort((x,y) => x.PokemonId.CompareTo(y.PokemonId));
|
|
|
|
// Initialize dictionary with false (show base image first)
|
|
foreach (var pokemon in pokemons)
|
|
{
|
|
isShiny[pokemon.Id] = false;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
private void ToggleImage(int Id)
|
|
{
|
|
if (isShiny.ContainsKey(Id))
|
|
{
|
|
isShiny[Id] = !isShiny[Id];
|
|
}
|
|
}
|
|
private async Task ConfirmDelete(int Id)
|
|
{
|
|
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
|
|
if (confirm)
|
|
{
|
|
await DeletePokemon(Id);
|
|
}
|
|
}
|
|
|
|
private async Task DeletePokemon(int Id)
|
|
{
|
|
await PokemonService.DeletePokemonAsync(Id);
|
|
pokemons.RemoveAll(p => p.Id == Id); // Remove from the list locally
|
|
StateHasChanged(); // Refresh the UI
|
|
}
|
|
|
|
|
|
}
|