Pokemon are being delivered to the pokemon table and pokemon background components; works for table, background still in need of work. But not pertinent.

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

@@ -1,46 +1,8 @@
-@inject IPokemonService PokemonService
-
-<div class="pokemon-background">
-    @foreach (var image in BackgroundImages)
+<div class="pokemon-background">
+    @foreach (var image in _pokemonImages)
     {
         <img src="@image.Url"
              class="pokemon-bg-img"
              style="left:@image.Left%; top:@image.Top%; width:@image.Size}px; transform:rotate(@(image.Rotation)deg);" />
     }
 </div>
-
-@code {
-    private List<PokemonImage> BackgroundImages = new();
-    private Random random = new();
-
-    protected override async Task OnInitializedAsync()
-    {
-        await LoadPokemonBackgrounds();
-    }
-
-    private async Task LoadPokemonBackgrounds()
-    {
-        var pokemonList = await PokemonService.GetAllPokemonAsync(); // Retrieves Pokémon with background URLs
-
-        foreach (var pokemon in pokemonList)
-        {
-            BackgroundImages.Add(new PokemonImage
-                {
-                    Url = pokemon.PokemonImageUrl, // 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)
-                });
-        }
-    }
-
-    private class PokemonImage
-    {
-        public string Url { get; set; } = "";
-        public int Left { get; set; }
-        public int Top { get; set; }
-        public int Size { get; set; }
-        public int Rotation { get; set; }
-    }
-}

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

@@ -0,0 +1,63 @@
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Component
+{
+    public partial class PokemonBackground
+    {
+
+        private class PokemonImage
+        {
+            public string Url { get; set; } = "";
+            public int Left { get; set; }
+            public int Top { get; set; }
+            public int Size { get; set; }
+            public int Rotation { get; set; }
+        }
+
+
+        [Parameter]
+        public List<string> PokemonImages { get; set; }
+        [Parameter]
+        public List<string> ShinyPokemonImages { get; set; }
+
+        private List<PokemonImage> _pokemonImages = new List<PokemonImage>();
+        private List<PokemonImage> _shinyPokemonImages = new List<PokemonImage>();
+        private Random random = new Random();
+
+        protected override async Task OnInitializedAsync()
+        {
+            await 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)
+                });
+            }
+        }
+
+
+    }
+}

Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.cs

@@ -1,4 +1,5 @@
-using Microsoft.EntityFrameworkCore.Metadata.Internal;
+using Microsoft.AspNetCore.Components;
+using Microsoft.EntityFrameworkCore.Metadata.Internal;
 using Microsoft.JSInterop;
 using Portfolio.Domain.Features.Pokemon;
 
@@ -6,19 +7,18 @@ namespace Portfolio.WebUI.Server.Components.Component
 {
     public partial class PokemonTable
     {
+        [Parameter]
+        public List<Pokemon> AllPokemon {  get; set; }
+
         private List<Pokemon> pokemons = new List<Pokemon>();
         private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
 
 
-        protected override async Task OnInitializedAsync()
+        protected override void OnParametersSet()
         {
-            var result = await PokemonService.GetAllPokemonAsync();
-            if (result is not null)
-            {
-                pokemons = result;
-                pokemons.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
+            if (AllPokemon != null) { 
+                pokemons = AllPokemon.ToList();
 
-                // Initialize dictionary with false (show base image first)
                 foreach (var pokemon in pokemons)
                 {
                     isShiny[pokemon.Id] = false;

Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor

@@ -72,8 +72,8 @@ else
                             <!-- Image and other Pokemon info -->
                             <div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
                                 <div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
-                                    <img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
-                                    <img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
+                                    <img class="front" src="@SelectedPokemon.PokemonImageUrl" />
+                                    <img class="back" src="@SelectedPokemon.PokemonShinyImageUrl" />
                                 </div>
                             </div>
                             <div class="row">

Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor

@@ -1,5 +1,7 @@
 @page "/pokemonsleep"
 
+@inject IPokemonService PokemonService
+
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
@@ -7,10 +9,10 @@
 <PageTitle>Pokémon Sleep</PageTitle>
 
 <div class="w-100">
-    <!-- <PokemonBackground /> -->
+    <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" />
 
     <PokemonHeader />
 
-    <PokemonTable />
+    <PokemonTable AllPokemon="pokemons"/>
 
 </div>

Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.cs

@@ -0,0 +1,30 @@
+using Portfolio.Application.Services.PokemonService;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Pages
+{
+    public partial class PokemonSleep
+    {
+        public List<Pokemon> pokemons = new List<Pokemon>();
+        public List<string> pokemonImageUrls = new List<string>();
+        public List<string> pokemonShinyImageUrls = new List<string>();
+
+
+        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));
+
+                foreach (var pokemon in pokemons)
+                {
+                    pokemonImageUrls.Add(pokemon.PokemonImageUrl);
+                    pokemonShinyImageUrls.Add(pokemon.PokemonShinyImageUrl);
+                }
+
+            }
+        }
+    }
+}