From 9b9a3134113324e78bc3e701e4b6553766c6cb4a Mon Sep 17 00:00:00 2001 From: Kira Jiroux Date: Wed, 4 Jun 2025 17:52:56 -0400 Subject: [PATCH] Refactored the UI and made it possible to switch between pokemon; much better. --- .../PokemonBackground.razor.cs | 60 +++--- .../PokemonRatingPanel.razor | 135 ++++++++++++ .../PokemonRatingPanel.razor.cs | 143 +++++++++++++ .../PokemonRatingPanel.razor.css | 20 ++ .../Pokemon Components/PokemonSelector.razor | 28 +++ .../PokemonSelector.razor.cs | 37 ++++ .../PokemonSelector.razor.css | 23 ++ .../Components/Layout/MainLayout.razor | 2 +- .../Pages/Pokemon Pages/PokemonRate.razor | 198 ++++-------------- .../Pages/Pokemon Pages/PokemonRate.razor.cs | 3 +- .../Pages/Pokemon Pages/PokemonRate.razor.css | 93 +------- 11 files changed, 455 insertions(+), 287 deletions(-) create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.cs create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs index ee1dec9..75d0c6e 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs @@ -25,38 +25,38 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components private List _shinyPokemonImages = new List(); private Random random = new Random(); - protected override async Task OnInitializedAsync() - { - await LoadPokemonBackgrounds(); - } + //protected override async Task OnInitializedAsync() + //{ + // await LoadPokemonBackgrounds(); + //} - private async Task LoadPokemonBackgrounds() - { + //private async Task LoadPokemonBackgrounds() + //{ - foreach (var pokemonimgurl in PokemonImages) - { - Console.WriteLine(pokemonimgurl); - _pokemonImages.Add(new PokemonImage - { - Url = pokemonimgurl, // URL retrieved from the database - Left = random.Next(0, 100), - Top = random.Next(0, 100), - Size = random.Next(50, 130), - Rotation = random.Next(0, 360) - }); - } - foreach (var pokemonimgurl in ShinyPokemonImages) - { - _shinyPokemonImages.Add(new PokemonImage - { - Url = pokemonimgurl, // URL retrieved from the database - Left = random.Next(0, 100), - Top = random.Next(0, 100), - Size = random.Next(50, 130), - Rotation = random.Next(0, 360) - }); - } - } + // foreach (var pokemonimgurl in PokemonImages) + // { + // Console.WriteLine(pokemonimgurl); + // _pokemonImages.Add(new PokemonImage + // { + // Url = pokemonimgurl, // URL retrieved from the database + // Left = random.Next(0, 100), + // Top = random.Next(0, 100), + // Size = random.Next(50, 130), + // Rotation = random.Next(0, 360) + // }); + // } + // foreach (var pokemonimgurl in ShinyPokemonImages) + // { + // _shinyPokemonImages.Add(new PokemonImage + // { + // Url = pokemonimgurl, // URL retrieved from the database + // Left = random.Next(0, 100), + // Top = random.Next(0, 100), + // Size = random.Next(50, 130), + // Rotation = random.Next(0, 360) + // }); + // } + //} } diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor new file mode 100644 index 0000000..0b7a126 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor @@ -0,0 +1,135 @@ +
+ + +
+

Select Nature & Subskills

+ + +
+
+ + +
+
+

+ @lastnaturescore +

+
+
+ + +
+
+ + +
+
+

+ @lastS1score +

+
+
+ + +
+
+ + +
+
+

+ @lastS2score +

+
+
+ + +
+
+ + +
+
+

+ @lastS3score +

+
+
+ + +
+
+ + +
+
+

+ 0 +

+
+
+ + +
+
+ + +
+
+

+ 0 +

+
+
+ +
+ + +
+

Final Score:

+
+ @FinalScore +
+
+ + +
+ +
\ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs new file mode 100644 index 0000000..fd9dfbf --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs @@ -0,0 +1,143 @@ +using Microsoft.AspNetCore.Components; +using Portfolio.Domain.Features.Pokemon; +using Portfolio.Domain.Features.Pokemon_Natures; +using Portfolio.Domain.Features.Pokemon_Subskills; + +namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components +{ + partial class PokemonRatingPanel + { + [Parameter] public Pokemon PokemonToRate { get; set; } + [Parameter] public List NatureList { get; set; } = new(); + [Parameter] public List SubskillList { get; set; } = new(); + + private int SelectedNatureId; + private int Subskill1; + private int Subskill2; + private int Subskill3; + private int Subskill4; + private int Subskill5; + + private int FinalScore; + private string ScoreBackgroundColor = "#FFFFFF"; + private string ScoreColor = "#000000"; + + + private int lastNatureId; + private int lastS1, lastS2, lastS3; + private int lastnaturescore, lastS1score, lastS2score, lastS3score; + + protected override void OnAfterRender(bool firstRender) + { + if (SelectedNatureId != lastNatureId || + Subskill1 != lastS1 || Subskill2 != lastS2 || Subskill3 != lastS3) + { + CalculateScore(); + + lastNatureId = SelectedNatureId; + lastS1 = Subskill1; + lastS2 = Subskill2; + lastS3 = Subskill3; + + + StateHasChanged(); + } + } + protected override void OnParametersSet() + { + CalculateScore(); + } + + + private void CalculateScore() + { + if (PokemonToRate == null || SelectedNatureId == 0 || lastS1 == 0 || lastS2 == 0 || lastS3 == 0) + { + FinalScore = 0; + ScoreBackgroundColor = "#FFFFFF"; + ScoreColor = "#000000"; + return; + } + + var nature = NatureList.FirstOrDefault(n => n.Id == SelectedNatureId); + var s1 = SubskillList.FirstOrDefault(s => s.Id == Subskill1); + var s2 = SubskillList.FirstOrDefault(s => s.Id == Subskill2); + var s3 = SubskillList.FirstOrDefault(s => s.Id == Subskill3); + + if (nature == null || s1 == null || s2 == null || s3 == null) + { + FinalScore = 0; + ScoreBackgroundColor = "#FFFFFF"; + ScoreColor = "#000000"; + return; + } + + lastnaturescore = PokemonToRate.Speciality switch + { + "Berries" => nature.BerryRating, + "Ingredients" => nature.IngredientRating, + "Skills" => nature.SkillRating, + _ => 0 + }; + + lastS1score = PokemonToRate.Speciality switch + { + "Berries" => s1.BerryRank, + "Ingredients" => s1.IngredientRank, + "Skills" => s1.SkillRank, + _ => 0 + }; + Console.WriteLine(lastS1score); + + lastS2score = PokemonToRate.Speciality switch + { + "Berries" => s2.BerryRank, + "Ingredients" => s2.IngredientRank, + "Skills" => s2.SkillRank, + _ => 0 + }; + + lastS3score = PokemonToRate.Speciality switch + { + "Berries" => s3.BerryRank, + "Ingredients" => s3.IngredientRank, + "Skills" => s3.SkillRank, + _ => 0 + }; + + + FinalScore = PokemonToRate.Speciality switch + { + "Berries" => nature.BerryRating + s1.BerryRank + s2.BerryRank + s3.BerryRank, + "Ingredients" => nature.IngredientRating + s1.IngredientRank + s2.IngredientRank + s3.IngredientRank, + "Skills" => nature.SkillRating + s1.SkillRank + s2.SkillRank + s3.SkillRank, + _ => 0 + }; + + // Set score background based on value + ScoreBackgroundColor = FinalScore switch + { + 8 => "#16C47F", + 7 => "#33CB8F", + 6 => "#50D39F", + 5 => "#6DDAAF", + 4 => "#8BE2BF", + 3 => "#A8E9CF", + 2 => "#C5F0DF", + 1 => "#E2F8EF", + 0 => "#FFFFFF", + -1 => "#FFE7E7", + -2 => "#FED0D0", + -3 => "#FEB8B8", + -4 => "#FDA0A0", + -5 => "#FD8888", + -6 => "#FC7171", + -7 => "#FC5959", + -8 => "#FB4141", + _ => "#FFFFFF" + }; + + ScoreColor = FinalScore == 0 ? "#000000" : "#FFFFFF"; + } + } +} diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css new file mode 100644 index 0000000..da3d64b --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css @@ -0,0 +1,20 @@ +.pokemon-rating-panel { + + gap: 1.5rem; + +} + + +.ratings { + flex: 2; + padding: 1.5rem; + border-radius: 5% / 3.5%; +} + +.select-width { + width: 16rem; +} + +.score-width { + width: 100px; +} diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor new file mode 100644 index 0000000..2f04b91 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor @@ -0,0 +1,28 @@ +@using Portfolio.Domain.Features.Pokemon + + +
+ + + +
+ @foreach (var pokemon in FilteredPokemon) + { + bool isSelected = SelectedPokemon?.Id == pokemon.Id; + +
+
+ +
+ @pokemon.PokemonId +
+
+
+ } +
+
+ + \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.cs new file mode 100644 index 0000000..9a0f85b --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.cs @@ -0,0 +1,37 @@ +using Microsoft.AspNetCore.Components; +using Portfolio.Domain.Features.Pokemon; + +namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components +{ + partial class PokemonSelector + { + + [Parameter] + public List PokemonList { get; set; } = new(); + + [Parameter] + public Pokemon? SelectedPokemon { get; set; } + + [Parameter] + public EventCallback OnPokemonSelected { get; set; } + + private string SearchTerm { get; set; } = string.Empty; + + private List FilteredPokemon => + string.IsNullOrWhiteSpace(SearchTerm) + ? PokemonList + : PokemonList.Where(p => + p.PokemonName.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList(); + + private async Task HandleSearch(ChangeEventArgs e) + { + SearchTerm = e?.Value?.ToString() ?? ""; + } + + private async Task SelectPokemon(Pokemon pokemon) + { + await OnPokemonSelected.InvokeAsync(pokemon); + } + } +} + diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css new file mode 100644 index 0000000..ac7a1c4 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css @@ -0,0 +1,23 @@ +.pokemon-card { + cursor: pointer; + transition: transform 0.15s ease-in-out; +} + + .pokemon-card:hover { + transform: scale(1.05); + } + +.small-card { + font-size: 0.75rem; +} + +.pokemon-selector { + height:100%; + overflow: hidden; + border: 1px solid #ccc; + border-radius: 5% / 3.5%; +} + +.pokemon-grid { + height: 90%; +} diff --git a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor index 8bb1d7e..e7248d4 100644 --- a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor +++ b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor @@ -3,7 +3,7 @@
-
+
@Body
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor index 18f2b9d..cf9b1b8 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor @@ -3,7 +3,7 @@ @inject IPokemonService PokemonService @inject IPokemonNatureService PokemonNatureService @inject IPokemonSubskillService PokemonSubskillService -@inject NavigationManager Navigation + @attribute [StreamRendering] @rendermode InteractiveServer @@ -14,172 +14,44 @@ @if (PokemonList == null || NatureList == null || SubskillList == null) { -

Loading...

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

Pokémon Rater

+ + +
+
+ + +
+ @if (SelectedPokemon != null) + { + + } + else + { +

Please select a Pokémon to rate.

+ } +
+ + @if (SelectedPokemon != null) + { + +
+ +
+ }
- - -
- -
-
-
- - - @if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm)) - { -
    - @foreach (var pokemon in FilteredPokemonList) - { -
  • - @if (pokemon.IsVariation) - { - @($"{pokemon.PokemonId} {pokemon.VariationName} {pokemon.PokemonName}") - } - else - { - @($"{pokemon.PokemonId} {pokemon.PokemonName}") - } -
    • - } -
- } -
-
-
- -
-
- - - @if (SelectedPokemon != null) - { -
- -
-
- -
-
- - -
-

Select Nature & Subskills

- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -

- @FinalScore -

-
-
- -
-
- } -
-
-} +} \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.cs index 96cda6c..7e624a6 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.cs +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.cs @@ -58,7 +58,8 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages { SelectedPokemon = pokemon; PokemonSearchTerm = string.Empty; // Reset search term - FilteredPokemonList.Clear(); // Clear the filtered list to hide dropdown + StateHasChanged(); + //FilteredPokemonList.Clear(); // Clear the filtered list to hide dropdown } private async void OnPokemonSelected() diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.css index a8abed4..5f28270 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.css +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.css @@ -1,92 +1 @@ - -.rate-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; - -} - -.pokemon-search { - width: 95%; -} - -.flip-container { - perspective: 1000px; - display: inline-block; - width: 250px; - height: 250px; - 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: 90px; - height: 30px; - color: white; - padding: 4px 8px; - 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; -} - -.finalScore { - color: white; - padding: 4px 8px; - text-align: center; - vertical-align: middle; - border-radius: 3px; -} + \ No newline at end of file