Just moved the background-image onto singular lines.

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs

@@ -25,38 +25,38 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
         private List<PokemonImage> _shinyPokemonImages = new List<PokemonImage>();
         private Random random = new Random();
 
-        protected override async Task OnInitializedAsync()
+        //protected override async Task OnInitializedAsync()
-        {
+        //{
-            await LoadPokemonBackgrounds();
+        //    await LoadPokemonBackgrounds();
-        }
+        //}
 
-        private async Task LoadPokemonBackgrounds()
+        //private async Task LoadPokemonBackgrounds()
-        {
+        //{
 
-            foreach (var pokemonimgurl in PokemonImages)
+        //    foreach (var pokemonimgurl in PokemonImages)
-            {
+        //    {
-                Console.WriteLine(pokemonimgurl);
+        //        Console.WriteLine(pokemonimgurl);
-                _pokemonImages.Add(new PokemonImage
+        //        _pokemonImages.Add(new PokemonImage
-                {
+        //        {
-                    Url = pokemonimgurl, // URL retrieved from the database
+        //            Url = pokemonimgurl, // URL retrieved from the database
-                    Left = random.Next(0, 100),
+        //            Left = random.Next(0, 100),
-                    Top = random.Next(0, 100),
+        //            Top = random.Next(0, 100),
-                    Size = random.Next(50, 130),
+        //            Size = random.Next(50, 130),
-                    Rotation = random.Next(0, 360)
+        //            Rotation = random.Next(0, 360)
-                });
+        //        });
-            }
+        //    }
-            foreach (var pokemonimgurl in ShinyPokemonImages)
+        //    foreach (var pokemonimgurl in ShinyPokemonImages)
-            {
+        //    {
-                _shinyPokemonImages.Add(new PokemonImage
+        //        _shinyPokemonImages.Add(new PokemonImage
-                {
+        //        {
-                    Url = pokemonimgurl, // URL retrieved from the database
+        //            Url = pokemonimgurl, // URL retrieved from the database
-                    Left = random.Next(0, 100),
+        //            Left = random.Next(0, 100),
-                    Top = random.Next(0, 100),
+        //            Top = random.Next(0, 100),
-                    Size = random.Next(50, 130),
+        //            Size = random.Next(50, 130),
-                    Rotation = random.Next(0, 360)
+        //            Rotation = random.Next(0, 360)
-                });
+        //        });
-            }
+        //    }
-        }
+        //}
 
 
     }

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css

@@ -245,7 +245,10 @@
 
 .card-holo {
     position: relative;
-    background-image: url("https://assets.codepen.io/13471/sparkles.gif"), url("https://assets.codepen.io/13471/holo.png"), linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85% );
+    background-image: 
+        url("https://assets.codepen.io/13471/sparkles.gif"), 
+        url("https://assets.codepen.io/13471/holo.png"), 
+        linear-gradient(125deg, #ff008450 15%, #fca40040 30%, #ffff0030 40%, #00ff8a20 60%, #00cfff40 70%, #cc4cfa50 85% );
     background-blend-mode: screen;
     background-size: cover;
     background-position: center;

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor

@@ -0,0 +1,135 @@
+<div class="pokemon-rating-panel">
+
+     <!-- Dropdown Selects -->
+    <div class="ratings bg-light-subtle">
+        <h3 class="mb-3">Select Nature & Subskills</h3>
+
+        <!-- Nature -->
+        <div class="d-flex justify-content-between align-items-center">
+            <div>
+                <label>Select Nature</label>
+                <select class="form-control form-control select-width" @bind="SelectedNatureId">
+                    <option value="" disabled selected >Choose Nature...</option>
+                    @foreach (var nature in NatureList)
+                    {
+                        <option value="@nature.Id">@nature.Nature</option>
+                    }
+                </select>
+            </div>
+            <div class="text-center score-width">
+                <h4 class="mt-4">
+                    <span class="text-muted">@lastnaturescore</span>
+                </h4>
+            </div>
+        </div>
+
+        <!-- Subskill 1 -->
+        <div class="d-flex justify-content-between align-items-center mt-3">
+            <div>
+                <label for="subskillSelect1">Select Level 10 Subskill</label>
+                <select id="subskillSelect1" class="form-control form-control select-width" @bind="Subskill1">
+                    <option value="" disabled selected>Choose Subskill...</option>
+                    @foreach (var subskill in SubskillList)
+                    {
+                        <option value="@subskill.Id">@subskill.SubSkill</option>
+                    }
+                </select>
+            </div>
+            <div class="text-center score-width">
+                <h4 class="mt-4">
+                    <span class="text-muted">@lastS1score</span>
+                </h4>
+            </div>
+        </div>
+
+        <!-- Subskill 2 -->
+        <div class="d-flex justify-content-between align-items-center mt-3">
+            <div>
+                <label for="subskillSelect2">Select Level 25 Subskill</label>
+                <select id="subskillSelect2" class="form-control form-control select-width" @bind="Subskill2">
+                    <option value="" disabled selected>Choose Subskill...</option>
+                    @foreach (var subskill in SubskillList)
+                    {
+                        <option value="@subskill.Id">@subskill.SubSkill</option>
+                    }
+                </select>
+            </div>
+            <div class="text-center score-width">
+                <h4 class="mt-4">
+                    <span class="text-muted">@lastS2score</span>
+                </h4>
+            </div>
+        </div>
+
+        <!-- Subskill 3 -->
+        <div class="d-flex justify-content-between align-items-center mt-3">
+            <div>
+                <label for="subskillSelect3">Select Level 50 Subskill</label>
+                <select id="subskillSelect3" class="form-control form-control select-width" @bind="Subskill3">
+                    <option value="" disabled selected>Choose Subskill...</option>
+                    @foreach (var subskill in SubskillList)
+                    {
+                        <option value="@subskill.Id">@subskill.SubSkill</option>
+                    }
+                </select>
+            </div>
+            <div class="text-center score-width">
+                <h4 class="mt-4">
+                    <span class="text-muted">@lastS3score</span>
+                </h4>
+            </div>
+        </div>
+
+        <!-- Subskill 4 Disabled -->
+        <div class="d-flex justify-content-between align-items-center mt-3">
+            <div>
+                <label for="subskillSelect4">Select Level 75 Subskill</label>
+                <select id="subskillSelect4" disabled class="form-control form-control select-width" @bind="Subskill4">
+                    <option value="" disabled selected>Choose Subskill...</option>
+                    @foreach (var subskill in SubskillList)
+                    {
+                        <option value="@subskill.Id">@subskill.SubSkill</option>
+                    }
+                </select>
+            </div>
+            <div class="text-center score-width">
+                <h4 class="mt-4">
+                    <span class="text-muted">0</span>
+                </h4>
+            </div>
+        </div>
+
+        <!-- Subskill 5 Disabled -->
+        <div class="d-flex justify-content-between align-items-center mt-3">
+            <div>
+                <label for="subskillSelect5">Select Level 100 Subskill</label>
+                <select id="subskillSelect5" disabled class="form-control form-control mb-2 select-width" @bind="Subskill5">
+                    <option value="" disabled selected>Choose Subskill...</option>
+                    @foreach (var subskill in SubskillList)
+                    {
+                        <option value="@subskill.Id">@subskill.SubSkill</option>
+                    }
+                </select>
+            </div>
+            <div class="text-center score-width">
+                <h4 class="mt-4">
+                    <span class="text-muted">0</span>
+                </h4>
+            </div>
+        </div>
+
+        <hr/>
+        <!-- Score Output -->
+
+        <div class="d-flex justify-content-between align-items-center mt-3">
+            <h3>Final Score:</h3>
+            <div class="p-2 rounded text-center border score-width"
+                 style="background-color:@ScoreBackgroundColor; color:@ScoreColor; ">
+                @FinalScore
+            </div>
+        </div>
+
+
+    </div> 
+
+</div>

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<PokemonNature> NatureList { get; set; } = new();
+        [Parameter] public List<PokemonSubskill> 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";
+        }
+    }
+}

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;
+}

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor

@@ -0,0 +1,28 @@
+@using Portfolio.Domain.Features.Pokemon
+
+<!-- Search Input -->
+<div class="pokemon-selector p-3 bg-light h-75 mb-5">
+    <input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
+
+    <!-- Scrollable Pokémon Grid -->
+    <div class="row pokemon-grid" style="max-height: 80vh; overflow-y: auto;">
+        @foreach (var pokemon in FilteredPokemon)
+        {
+            bool isSelected = SelectedPokemon?.Id == pokemon.Id;
+
+            <div class="col-6 col-md-3 mb-3">
+                <div class="card pokemon-card small-card @(isSelected ? "border-primary border-2 shadow" : "border-2 border-white")"
+                     @onclick="() => SelectPokemon(pokemon)">
+                    <img src="@pokemon.PokemonImageUrl" class="card-img-top" style="height: 50px; object-fit: contain;" />
+                    <div class="card-body p-2 text-center">
+                        <small>@pokemon.PokemonId</small>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+</div>
+
+<style>
+    
+</style>

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<Pokemon> PokemonList { get; set; } = new();
+
+    [Parameter]
+    public Pokemon? SelectedPokemon { get; set; }
+
+    [Parameter]
+    public EventCallback<Pokemon> OnPokemonSelected { get; set; }
+
+    private string SearchTerm { get; set; } = string.Empty;
+
+    private List<Pokemon> 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);
+    }
+    }
+}
+

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%;
+}

Portfolio.WebUI.Server/Components/Layout/MainLayout.razor

@@ -3,7 +3,7 @@
 <div class="page bg-primary-subtle">
     <main class="h-100 w-100">
         <NavMenu3 />
-        <article class="container w-100 m-auto">
+        <article class="container m-auto">
             @Body
         </article>
     </main>

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)
 {
-    <p>Loading...</p>
+        <Loading />
 }
 else
 {
-    <!-- Total Component -->
+        <div class="mt-4">
-    <div class="w-75 mt-3 m-auto rate-container bg-info ">
-
-        <!-- Header -->
-        <div class="card-header bg-secondary ml-0 py-3 w-100 ">
             <div class="row">
-                <div class=" text-center">
+
-                    <h2 class="text-info">Pokémon Rater</h2>
+                <!-- Left Panel: Selector -->
+                <div class="col-md-4">
+                    <PokemonSelector
+                        PokemonList="PokemonList"
+                        SelectedPokemon="SelectedPokemon"
+                        OnPokemonSelected="SelectPokemon" />
                 </div>
+
+                <!-- Center Panel: Pokemon View -->
+                <div class="col">
+                    @if (SelectedPokemon != null)
+                    {
+                        <PokemonCard Pokemon="SelectedPokemon" />
+                    }
+                    else
+                    {
+                        <p class="text-muted">Please select a Pokémon to rate.</p>
+                    }
+                </div>
+
+                @if (SelectedPokemon != null)
+                {
+                    <!-- Right Panel: Rating View -->
+                    <div class="col-md-4 col-4">
+                        <PokemonRatingPanel
+                            PokemonToRate="SelectedPokemon"
+                            NatureList="NatureList"
+                            SubskillList="SubskillList"
+                        />
+                    </div>
+                }
             </div>
         </div>
-
+}
-        <!-- Body -->
-        <div class="p-3 w-100 flex-column ">
-            <!-- Section 1: Top - Pokemon Selection -->
-            <div class="row flex-row justify-content-end">
-                <div class="pokemon-search col">
-                    <div class="position-relative pb-3" >
-                        <!-- Pokemon Selection -->
-                        <input type="text"
-                               class="form-control form-control"
-                               @bind="PokemonSearchTerm"
-                               placeholder="Search Pokémon..."
-                               @oninput="OnSearchTextChanged"
-                               />
-                        @if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
-                        {
-                            <ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
-                                @foreach (var pokemon in FilteredPokemonList)
-                                {
-                                    <li class="list-group-item list-group-item-action" @onclick="() => SelectPokemon(pokemon)">
-                                        @if (pokemon.IsVariation)
-                                        {
-                                            @($"{pokemon.PokemonId} {pokemon.VariationName} {pokemon.PokemonName}")
-                                        }
-                                        else
-                                        {
-                                            @($"{pokemon.PokemonId} {pokemon.PokemonName}")
-                                        }
-                                    </li>
-                                }
-                            </ul>
-                        }
-                    </div>
-                </div>
-                <div class="col-2">
-                    <button class="btn btn-danger">Clear</button>
-                </div>
-            </div>
-
-            <!-- Section 2: Bottom - Pokemon -->
-            @if (SelectedPokemon != null)
-            {
-                <div class="row w-100">
-                    <!-- Section 2A: Left Side - Pokemon Card View -->
-                    <div class="col">
-                        <div class="position-relative d-flex justify-content-center">
-                            <PokemonCard Pokemon="SelectedPokemon" />
-                        </div>
-                    </div>
-
-                    <!-- Section 2B: Right Side - Stat Selection + Form Submission -->
-                    <div class="col">
-                        <h4 class="mb-3">Select Nature & Subskills</h4>
-
-                        <!-- Nature -->
-                        <div class="">
-                            <div class="">
-                                <label>Select Nature</label>
-                                <select class="form-control form-control-sm mb-2" @bind="SelectedNatureId">
-                                    <option value="" disabled>Choose Nature...</option>
-                                    @foreach (var nature in NatureList)
-                                    {
-                                        <option value="@nature.Id">@nature.Nature</option>
-                                    }
-                                </select>
-                            </div>
-                        </div>
-
-                        <!-- Subskill 1 -->
-                        <div class="">
-                            <div class="">
-                                <label for="subskillSelect1">Select Level 10 Subskill</label>
-                                <select id="subskillSelect1" class="form-control form-control-sm mb-2" @bind="subskillSelect1">
-                                    <option value="" disabled selected>Choose Subskill...</option>
-                                    @foreach (var subskill in SubskillList)
-                                    {
-                                        <option value="@subskill.Id">@subskill.SubSkill</option>
-                                    }
-                                </select>
-                            </div>
-                        </div>
-
-                        <!-- Subskill 2 -->
-                        <div class="">
-                            <div class="">
-                                <label for="subskillSelect2">Select Level 25 Subskill</label>
-                                <select id="subskillSelect2" class="form-control form-control-sm mb-2" @bind="subskillSelect2">
-                                    <option value="" disabled selected>Choose Subskill...</option>
-                                    @foreach (var subskill in SubskillList)
-                                    {
-                                        <option value="@subskill.Id">@subskill.SubSkill</option>
-                                    }
-                                </select>
-                            </div>
-                        </div>
-
-                        <!-- Subskill 3 -->
-                        <div class="">
-                            <div class="">
-                                <label for="subskillSelect3">Select Level 50 Subskill</label>
-                                <select id="subskillSelect3" class="form-control form-control-sm mb-2" @bind="subskillSelect3">
-                                    <option value="" disabled selected>Choose Subskill...</option>
-                                    @foreach (var subskill in SubskillList)
-                                    {
-                                        <option value="@subskill.Id">@subskill.SubSkill</option>
-                                    }
-                                </select>
-                            </div>
-                        </div>
-
-                        <!-- Subskill 4 Disabled -->
-                        <div class="">
-                            <div class="">
-                                <label for="subskillSelect4">Select Level 75 Subskill</label>
-                                <select id="subskillSelect4" disabled class="form-control form-control-sm mb-2" @bind="subskillSelect4">
-                                    <option value="" disabled selected>Choose Subskill...</option>
-                                    @foreach (var subskill in SubskillList)
-                                    {
-                                        <option value="@subskill.Id">@subskill.SubSkill</option>
-                                    }
-                                </select>
-                            </div>
-                        </div>
-
-                        <!-- Subskill 5 Disabled -->
-                        <div class="">
-                            <div class="">
-                                <label for="subskillSelect5">Select Level 100 Subskill</label>
-                                <select id="subskillSelect5" disabled class="form-control form-control-sm mb-2" @bind="subskillSelect5">
-                                    <option value="" disabled selected>Choose Subskill...</option>
-                                    @foreach (var subskill in SubskillList)
-                                    {
-                                        <option value="@subskill.Id">@subskill.SubSkill</option>
-                                    }
-                                </select>
-                            </div>
-                        </div>
-
-                        <!-- Calculate Score -->
-                        <div class="">
-                            <div class="d-flex justify-content-between align-items-center mt-3">
-                                <button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
-                                <h4 class="bg-white border border-1 rounded p-2 m-2">
-                                    <span class="finalScore rounded" style="background-color: @ScoreBackgroundColor">@FinalScore</span>
-                                </h4>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-            }
-        </div>
-    </div>
-}

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()

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;
-}