From 17607b663ba5d244087ab6498fee8d5526d296cc Mon Sep 17 00:00:00 2001 From: Kira Jiroux Date: Fri, 6 Jun 2025 00:09:47 -0400 Subject: [PATCH] Okay made some serious headway, and now the rater is pretty much perfected. Really need to look into responsive styling if I want it to be mobile efficient though. --- .../PokemonSubskillService.cs | 1 + Portfolio.WebUI.Server/Components/App.razor | 3 +- .../Pokemon Components/PokemonCard.razor | 2 +- .../Pokemon Components/PokemonCard.razor.cs | 1 + .../Pokemon Components/PokemonCard.razor.css | 41 ++++--- .../PokemonRatingPanel.razor | 66 +++++------ .../PokemonRatingPanel.razor.cs | 107 ++++++++++-------- .../PokemonRatingPanel.razor.css | 33 +++++- .../Pokemon Components/PokemonSelector.razor | 7 +- .../PokemonSelector.razor.css | 34 +++--- .../Layout/MadeWithLoveFooter.razor | 11 ++ .../Components/Layout/MainLayout.razor | 7 +- .../Components/Layout/NavMenu3.razor | 6 +- .../Components/Pages/Home.razor | 5 + .../Pages/Pokemon Pages/PokemonRate.razor | 15 ++- .../Pokemon Pages/PokemonSleepHome.razor | 15 ++- Portfolio.WebUI.Server/wwwroot/js/site.js | 9 ++ 17 files changed, 227 insertions(+), 136 deletions(-) create mode 100644 Portfolio.WebUI.Server/Components/Layout/MadeWithLoveFooter.razor create mode 100644 Portfolio.WebUI.Server/wwwroot/js/site.js diff --git a/Portfolio.Application/Services/PokemonSubskillService/PokemonSubskillService.cs b/Portfolio.Application/Services/PokemonSubskillService/PokemonSubskillService.cs index 16aea6e..c353112 100644 --- a/Portfolio.Application/Services/PokemonSubskillService/PokemonSubskillService.cs +++ b/Portfolio.Application/Services/PokemonSubskillService/PokemonSubskillService.cs @@ -18,6 +18,7 @@ namespace Portfolio.Application.Services.PokemonSubskillService } public async Task> GetAllPokemonSubskillsAsync() { + Console.WriteLine("Does this fire every time"); return await _pokemonSubskillRepository.GetAllPokemonSubskillsAsync(); } } diff --git a/Portfolio.WebUI.Server/Components/App.razor b/Portfolio.WebUI.Server/Components/App.razor index 73b4d41..581ac1a 100644 --- a/Portfolio.WebUI.Server/Components/App.razor +++ b/Portfolio.WebUI.Server/Components/App.razor @@ -13,9 +13,10 @@ - + + diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor index 5219023..79d4973 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor @@ -1,7 +1,7 @@ @attribute [StreamRendering] @rendermode InteractiveServer -
+
@if (_pokemon.IsVariation) diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.cs index 979e6b2..65844df 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.cs +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.cs @@ -42,5 +42,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components return "pokemon-type-" + type.ToLower(); } + } } diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css index 120374d..df10e67 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css @@ -1,9 +1,9 @@ .pokemon-card { position: relative; - width: 24rem; - height: 32rem; - max-width: 24rem; - max-height: 32rem; + width: 100%; + max-width: 350px; /* Prevent it from getting too huge */ + aspect-ratio: 3 / 4; /* Maintains card shape dynamically */ + overflow: hidden; background-color: var(--bg-color); border-width: .5rem; border-style: solid; @@ -24,32 +24,27 @@ .pokemon-name { position: absolute; - top: 0 !important; - left: 0 !important; - margin-top: 1.5rem !important; - margin-left: 0.5rem !important; + top: 5%; + left: 3%; transform: translateY(-50%) !important; - font-size: 2.5rem; + font-size: clamp(1.2rem, 2vw, 2rem); } .pokemon-number { position: absolute; - top: 0 !important; - left: 0 !important; - margin-top: 3.3rem !important; - margin-left: 1.5rem !important; + top: 10%; + left: 6%; + transform: translateY(-50%) !important; - font-size: .75rem; + font-size: clamp(0.7rem, 1.2vw, 0.75rem); } .pokemon-type { position: absolute; - top: 0 !important; - right: 0 !important; - width: 2.5rem; - height: 2.5rem; - margin-top: .5rem !important; - margin-right: .5rem !important; + top: 2%; + right: 2%; + width: clamp(1.5rem, 2.5vw, 2.5rem); + height: clamp(1.5rem, 2.5vw, 2.5rem); } .pokemon-image { @@ -102,8 +97,10 @@ transform: translate(-50%, -50%) !important; perspective: 1000px; display: inline-block; - width: 20rem; - height: 20rem; + width: 80%; + aspect-ratio: 1 / 1; + max-width: 280px; + margin: 0 auto; cursor: pointer; } diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor index 0b7a126..0beb92a 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor @@ -1,14 +1,14 @@ -
+
-
-

Select Nature & Subskills

+
+

Select Nature & Subskills

-
-
+
+
- @foreach (var nature in NatureList) { @@ -16,7 +16,7 @@ }
-
+

@lastnaturescore

@@ -24,10 +24,10 @@
-
-
+
+
- @foreach (var subskill in SubskillList) { @@ -35,7 +35,7 @@ }
-
+

@lastS1score

@@ -43,10 +43,10 @@
-
-
+
+
- @foreach (var subskill in SubskillList) { @@ -54,7 +54,7 @@ }
-
+

@lastS2score

@@ -62,18 +62,18 @@
-
-
+
+
- + @foreach (var subskill in SubskillList) { }
-
+

@lastS3score

@@ -81,10 +81,10 @@
-
-
+
+
- @foreach (var subskill in SubskillList) { @@ -92,7 +92,7 @@ }
-
+

0

@@ -100,10 +100,10 @@
-
-
+
+
- @foreach (var subskill in SubskillList) { @@ -111,7 +111,7 @@ }
-
+

0

@@ -119,13 +119,13 @@
- -
-

Final Score:

-
+
+

Final Score:

+
- @FinalScore +

@FinalScore

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs index fd9dfbf..1c04512 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs @@ -29,30 +29,75 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components protected override void OnAfterRender(bool firstRender) { - if (SelectedNatureId != lastNatureId || - Subskill1 != lastS1 || Subskill2 != lastS2 || Subskill3 != lastS3) - { - CalculateScore(); + // If last Nature or Subskill is different than previous + if (PokemonToRate != null) { + if (SelectedNatureId != lastNatureId) + { + lastNatureId = SelectedNatureId; + var nature = NatureList.FirstOrDefault(n => n.Id == lastNatureId); + lastnaturescore = PokemonToRate.Speciality switch + { + "Berries" => nature.BerryRating, + "Ingredients" => nature.IngredientRating, + "Skills" => nature.SkillRating, + _ => 0 + }; - lastNatureId = SelectedNatureId; - lastS1 = Subskill1; - lastS2 = Subskill2; - lastS3 = Subskill3; + } + if (Subskill1 != lastS1) + { + + lastS1 = Subskill1; + var s1 = SubskillList.FirstOrDefault(s => s.Id == Subskill1); + lastS1score = PokemonToRate.Speciality switch + { + "Berries" => s1.BerryRank, + "Ingredients" => s1.IngredientRank, + "Skills" => s1.SkillRank, + _ => 0 + }; + + } + if (Subskill2 != lastS2) + { + + lastS2 = Subskill2; + var s2 = SubskillList.FirstOrDefault(s => s.Id == Subskill2); + lastS2score = PokemonToRate.Speciality switch + { + "Berries" => s2.BerryRank, + "Ingredients" => s2.IngredientRank, + "Skills" => s2.SkillRank, + _ => 0 + }; - StateHasChanged(); + + } + if (Subskill3 != lastS3) + { + lastS3 = Subskill3; + var s3 = SubskillList.FirstOrDefault(s => s.Id == Subskill3); + lastS3score = PokemonToRate.Speciality switch + { + "Berries" => s3.BerryRank, + "Ingredients" => s3.IngredientRank, + "Skills" => s3.SkillRank, + _ => 0 + }; + } } - } - protected override void OnParametersSet() - { - CalculateScore(); - } + CalculateScore(); + StateHasChanged(); + + } private void CalculateScore() { if (PokemonToRate == null || SelectedNatureId == 0 || lastS1 == 0 || lastS2 == 0 || lastS3 == 0) { + FinalScore = 0; ScoreBackgroundColor = "#FFFFFF"; ScoreColor = "#000000"; @@ -72,39 +117,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components 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 { @@ -114,6 +126,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components _ => 0 }; + // Set score background based on value ScoreBackgroundColor = FinalScore switch { diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css index da3d64b..4257143 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css @@ -1,6 +1,8 @@ .pokemon-rating-panel { - + display: flex; + flex-direction: column; gap: 1.5rem; + width: 100%; } @@ -16,5 +18,32 @@ } .score-width { - width: 100px; + width: 6rem; } + + +@media (max-width: 768px) { + .pokemon-rating-panel { + padding: 1rem; + } + + .ratings { + padding: 1rem; + } + + .d-flex.justify-content-between.align-items-center { + flex-direction: column; + align-items: stretch !important; + gap: 0.5rem; + } + + .select-width + { + width: 4rem; + text-align: center; + } + + .score-width h4 { + margin-top: 0.5rem !important; + } +} \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor index 2f04b91..9c475f0 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor @@ -1,11 +1,10 @@ -@using Portfolio.Domain.Features.Pokemon - + -
+
-
+
@foreach (var pokemon in FilteredPokemon) { bool isSelected = SelectedPokemon?.Id == pokemon.Id; diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css index ac7a1c4..5d073f5 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css @@ -1,23 +1,31 @@ -.pokemon-card { +.pokemon-selector { + height: 66vh; + width: 20vw; + border: 1px solid #ccc; + border-radius: 5% / 3.5%; + display: flex; + flex-direction: column; +} + +.pokemon-grid { + flex: 1 1 auto; + overflow-y: auto; +} + + +.pokemon-card { cursor: pointer; transition: transform 0.15s ease-in-out; } - .pokemon-card:hover { - transform: scale(1.05); - } +.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/MadeWithLoveFooter.razor b/Portfolio.WebUI.Server/Components/Layout/MadeWithLoveFooter.razor new file mode 100644 index 0000000..f63b35b --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Layout/MadeWithLoveFooter.razor @@ -0,0 +1,11 @@ +
+
+
+

+ Made with Love + + + +

+
+
diff --git a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor index e7248d4..2cd520c 100644 --- a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor +++ b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor @@ -1,10 +1,13 @@ @inherits LayoutComponentBase -
+
- @Body +
+ @Body +
+ @* *@
diff --git a/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor b/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor index 8aa0c87..f0d1c70 100644 --- a/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor +++ b/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor @@ -1,9 +1,9 @@ -
+
- + - Kira Jiroux + Kira Jiroux
    diff --git a/Portfolio.WebUI.Server/Components/Pages/Home.razor b/Portfolio.WebUI.Server/Components/Pages/Home.razor index 9994a7d..c273078 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Home.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Home.razor @@ -7,3 +7,8 @@

    Ensuring that git is connected properly.

    Welcome to your new app. + + +
    + +
    diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor index cf9b1b8..77dd376 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor @@ -22,7 +22,7 @@ else
    -
    +
    -
    +
    +
    + + @if (SelectedPokemon != null) { @@ -40,18 +43,18 @@ else

    Please select a Pokémon to rate.

    }
    +
    - @if (SelectedPokemon != null) - { + -
    +
    - } +
    } \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor index dabf280..57bb295 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor @@ -6,14 +6,25 @@ Pokémon Sleep + +@* + + + *@ + +@* -
    + + *@ + + +
    -
    +
    diff --git a/Portfolio.WebUI.Server/wwwroot/js/site.js b/Portfolio.WebUI.Server/wwwroot/js/site.js new file mode 100644 index 0000000..cd486ce --- /dev/null +++ b/Portfolio.WebUI.Server/wwwroot/js/site.js @@ -0,0 +1,9 @@ +window.getScreenWidth = () => { + return window.innerWidth; +}; + +window.registerResizeCallback = (dotNetHelper) => { + window.onresize = () => { + dotNetHelper.invokeMethodAsync('UpdateScreenWidth', window.innerWidth); + }; +}; \ No newline at end of file