Pokemon images toggle and pokemon table has been perfected.
This commit is contained in:
Kira Jiroux
parent
6cef4939ab
commit
1c93b7aa25
|
|
@ -6,7 +6,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
|
||||
<link rel="stylesheet" href="bootstrap/bootstrap-cosmo.css" /> <!-- app.css -->
|
||||
<link rel="stylesheet" href="bootstrap/bootstrap-lumen.css" /> <!-- app.css -->
|
||||
<link rel="stylesheet" href="Portfolio.WebUI.Server.styles.css" />
|
||||
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
|
|
|
|||
|
|
@ -17,19 +17,54 @@
|
|||
.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);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<!-- Heading + Button -->
|
||||
<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-info">Pokémon Sleep</h1>
|
||||
<h1 class="text-primary">Pokémon Sleep</h1>
|
||||
</div>
|
||||
<div class="col-4 text-end">
|
||||
<NavLink class="btn btn-outline-primary" style="border-radius: 15px 50px;" href="/pokemonsleep/add-new-pokemon">
|
||||
<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 Pokemon
|
||||
|
|
@ -39,13 +74,17 @@
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Main Body -->
|
||||
@if (pokemons == null)
|
||||
{
|
||||
<p><em>Loading...</em></p>
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Pokemon Table -->
|
||||
<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">
|
||||
|
|
@ -53,52 +92,52 @@ else
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4 tableFixHead" >
|
||||
|
||||
<!-- Table -->
|
||||
<div class="tableFixHead" >
|
||||
<table class="table table-striped" >
|
||||
<thead class="thead-dark text-light">
|
||||
|
||||
<!-- Table Head -->
|
||||
<thead >
|
||||
<tr>
|
||||
<th scope="col" style="width: 50%;"></th>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">Pokemon</th>
|
||||
<th scope="col">Sleep Type</th>
|
||||
<th scope="col" style="padding-right: 30px;">Speciality</th>
|
||||
<th scope="col"></th>
|
||||
<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 style=" text-align: center; margin:0; padding: 0;">
|
||||
<tr>
|
||||
|
||||
<!-- Section 1: Pokemon Image -->
|
||||
@if (pokemon.IsVariation)
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
string URL = $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png";
|
||||
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>
|
||||
<img style=" width: 90px; height: 90px; " src=@URL />
|
||||
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
|
||||
<td style="text-align: center;">
|
||||
<img style="width: 90px; height: 90px; cursor: pointer;"
|
||||
src="@(isShiny[pokemon.PokemonId] ? ShinyURL : BaseURL)"
|
||||
@onclick="() => ToggleImage(pokemon.PokemonId)" />
|
||||
</td>
|
||||
}
|
||||
@if (pokemon.VariationName == "Paldean")
|
||||
{
|
||||
string URL = $"/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>
|
||||
<img style=" width: 90px; height: 90px; " src=@URL />
|
||||
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
|
||||
</td>
|
||||
}
|
||||
}
|
||||
else // Base Case
|
||||
{
|
||||
string URL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
|
||||
string BaseURL = $"/pokemon_images/normal/{pokemon.PokemonId}.png"; ;
|
||||
string ShinyURL = $"/pokemon_images/shiny/{pokemon.PokemonId}.png";
|
||||
<td>
|
||||
<img style=" width: 90px; height: 90px; " src=@URL />
|
||||
<img style=" width: 90px; height: 90px; " src=@ShinyURL />
|
||||
<td style="text-align: center;">
|
||||
<div class="flip-container" @onclick="() => ToggleImage(pokemon.PokemonId)">
|
||||
<div class="flipper @(isShiny[pokemon.PokemonId] ? "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>
|
||||
}
|
||||
|
||||
|
|
@ -110,26 +149,26 @@ else
|
|||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
<td> Alolan @pokemon.PokemonName</td>
|
||||
<td style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td>
|
||||
}
|
||||
@if (pokemon.VariationName == "Paldean")
|
||||
{
|
||||
<td> Paldean @pokemon.PokemonName</td>
|
||||
<td style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td>
|
||||
}
|
||||
}
|
||||
else // Otherwise, Base Case
|
||||
{
|
||||
<td> @pokemon.PokemonName</td>
|
||||
<td style="vertical-align: auto;"> @pokemon.PokemonName</td>
|
||||
}
|
||||
|
||||
<!-- Section 4: Sleep Type -->
|
||||
<td>@pokemon.SleepType</td>
|
||||
<td style="vertical-align: auto;">@pokemon.SleepType</td>
|
||||
|
||||
<!-- Section 5: Speciality -->
|
||||
<td style="padding-right: 30px;">@pokemon.Speciality</td>
|
||||
<td style="padding-right: 30px; vertical-align: auto;">@pokemon.Speciality</td>
|
||||
|
||||
<!-- Section 6: Delete Button -->
|
||||
<td>
|
||||
<td style="vertical-align: auto;">
|
||||
<a asp-controller="Pokemon" asp-action="PokemonDelete" asp-route-Id="@pokemon.Id" class="btn btn-danger" style="border-radius: 15px 50px 30px 5px;">
|
||||
<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" />
|
||||
|
|
@ -149,7 +188,7 @@ else
|
|||
|
||||
@code {
|
||||
private List<Pokemon> pokemons = new List<Pokemon>();
|
||||
|
||||
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
||||
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
|
|
@ -160,9 +199,22 @@ else
|
|||
{
|
||||
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.PokemonId] = false;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
private void ToggleImage(int pokemonId)
|
||||
{
|
||||
if (isShiny.ContainsKey(pokemonId))
|
||||
{
|
||||
isShiny[pokemonId] = !isShiny[pokemonId];
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue