diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonHeader.razor b/Portfolio.WebUI.Server/Components/Component/PokemonHeader.razor new file mode 100644 index 0000000..810c0c8 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/PokemonHeader.razor @@ -0,0 +1,35 @@ + + +
+
+
+
+

Pokémon Sleep

+
+
+
+ + + + + Pokémon + + + + + + + Rate Pokémon + + + + + + Add New Pokémon + + + +
+
+
+
diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor new file mode 100644 index 0000000..ee7bdd1 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor @@ -0,0 +1,117 @@ +@inject IPokemonService PokemonService +@inject IJSRuntime JS + +@attribute [StreamRendering] +@rendermode InteractiveServer + + + +@if (pokemons == null) +{ +

Loading...

+} +else +{ + +
+ + +
+
+
+

Available Pokémon

+
+
+
+ + +
+ + + + + + + + + + + + + + + + + @foreach (var pokemon in pokemons) + { + + + + @{ + string baseUrl = pokemon.IsVariation + ? $"/pokemon_images/normal/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png" + : $"/pokemon_images/normal/{pokemon.PokemonId}.png"; + + string shinyUrl = pokemon.IsVariation + ? $"/pokemon_images/shiny/{pokemon.PokemonId}-{pokemon.VariationName.ToLower()}{pokemon.PokemonName.ToLower()}.png" + : $"/pokemon_images/shiny/{pokemon.PokemonId}.png"; + } + + + + + + + @if (pokemon.IsVariation) // If a Variant + { + @if (pokemon.VariationName == "Alolan") + { + + } + @if (pokemon.VariationName == "Paldean") + { + + } + } + else // Otherwise, Base Case + { + + } + + + + + + + + + + + + } + + +
#PokemonSleep TypeSpeciality
+
+
+ + +
+
+ 		@pokemon.PokemonId Alolan @pokemon.PokemonName Paldean @pokemon.PokemonName @pokemon.PokemonName +

@pokemon.SleepType

+ 		+

@pokemon.Speciality

+ 		+ +
+
+
+ +} diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.cs b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.cs new file mode 100644 index 0000000..f2c7de5 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.cs @@ -0,0 +1,52 @@ +using Microsoft.JSInterop; +using Portfolio.Domain.Features.Pokemon; + +namespace Portfolio.WebUI.Server.Components.Component +{ + public partial class PokemonTable + { + private List pokemons = new List(); + private Dictionary isShiny = new Dictionary(); + + + 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("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 + } + } +} diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.css b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.css new file mode 100644 index 0000000..3f02e37 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.css @@ -0,0 +1,88 @@ + +.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; +} + + diff --git a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor index 12255ea..e6525aa 100644 --- a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor +++ b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor @@ -1,8 +1,9 @@ @inherits LayoutComponentBase - +
+
diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor index 12ba31b..69526b9 100644 --- a/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor @@ -8,22 +8,16 @@ Add New Pokémon + -
-
-
-

Pokémon Sleep

-
-
-
@if (isSubmitting) {

Submitting...

} else { -
+
@@ -34,29 +28,35 @@ else
-
+
-
-
+
+
# - + - +
-
-
+
+
- - Variation? +
+ + Variation? +
+ -
@@ -89,46 +89,3 @@ else
} - - - - -@code { - - private bool HideLabel { get; set; } = true; - private void Toggle() - { - HideLabel = !HideLabel; - } - - private Pokemon NewPokemon = new Pokemon - { - PokemonId = 0, // Or any default ID logic - PokemonName = string.Empty, // Required fields cannot be null - SleepType = string.Empty, - Speciality = string.Empty, - IsVariation = false - }; - private bool isSubmitting = false; - - private bool ToggleVariationName { get; set; } - - private void onDisable() - { - this.ToggleVariationName = true; - } - private async Task HandleSubmit() - { - isSubmitting = true; - await PokemonService.AddPokemonAsync(NewPokemon); - isSubmitting = false; - Navigation.NavigateTo("/pokemonsleep"); - } - - protected void Cancel(MouseEventArgs e) - { - Console.WriteLine("Testing in Cancel"); - Navigation.NavigateTo("/pokemonsleep"); - } - -} \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor.cs b/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor.cs new file mode 100644 index 0000000..000c704 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor.cs @@ -0,0 +1,45 @@ +using Microsoft.AspNetCore.Components.Web; +using Portfolio.Domain.Features.Pokemon; + +namespace Portfolio.WebUI.Server.Components.Pages +{ + public partial class PokemonCreate + { + private bool HideLabel { get; set; } = true; + private void Toggle() + { + HideLabel = !HideLabel; + } + + private Pokemon NewPokemon = new Pokemon + { + PokemonId = 0, // Or any default ID logic + PokemonName = string.Empty, // Required fields cannot be null + SleepType = string.Empty, + Speciality = string.Empty, + IsVariation = false + }; + private bool isSubmitting = false; + + private bool ToggleVariationName { get; set; } + + private void onDisable() + { + this.ToggleVariationName = true; + } + private async Task HandleSubmit() + { + isSubmitting = true; + await PokemonService.AddPokemonAsync(NewPokemon); + isSubmitting = false; + Navigation.NavigateTo("/pokemonsleep"); + } + + protected void Cancel(MouseEventArgs e) + { + Console.WriteLine("Testing in Cancel"); + Navigation.NavigateTo("/pokemonsleep"); + } + + } +} diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor.css b/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor.css new file mode 100644 index 0000000..cd2085d --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonCreate.razor.css @@ -0,0 +1,9 @@ + +.create-container { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(255,255, 255, 0.19); + border-radius: 15px; +} + +.checkbox-styling { + border: 1px solid black; +} diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor index 5c78543..3720db8 100644 --- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor @@ -10,13 +10,7 @@ Rate Pokémon -
-
-
-

Pokémon Sleep

-
-
-
+ @if (PokemonList == null || NatureList == null || SubskillList == null) { @@ -24,7 +18,7 @@ } else { -
+
@@ -72,8 +66,9 @@ else {
+ -
+
@@ -109,7 +104,7 @@ else
-
+

Select Nature & Subskills

@@ -128,9 +123,10 @@ else
+
- @foreach (var subskill in SubskillList) { @@ -138,9 +134,10 @@ else }
+
- @foreach (var subskill in SubskillList) { @@ -148,9 +145,34 @@ else }
+
- + + @foreach (var subskill in SubskillList) + { + + } + +
+
+
+ +
+ + +
+ +
+ +