Minor changes in an attempt to make a pokemon sticker background. Will return but will offer no issues. Plus NavMenu3

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

@@ -0,0 +1,80 @@
+@inject NavigationManager NavManager
+
+<div class="pokemon-background">
+    @foreach (var image in BackgroundImages)
+    {
+        <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();
+
+    // Your specified set of Pokémon numbers
+    private readonly int[] AllowedPokemonNumbers = new int[]
+    {
+        1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
+        11, 12, 19, 20, 23, 24, 25, 26, 35, 36,
+        37, 38, 39, 40, 50, 51, 52, 53, 54, 55,
+        56, 57, 58, 59, 69, 70, 71, 74, 75, 76,
+        79, 80, 81, 82, 84, 85, 92, 93, 94, 95,
+        104, 105, 115, 122, 127, 132, 133, 134,
+        135, 136, 147, 148, 149, 152, 153, 154,
+        155, 156, 157, 158, 159, 160, 172, 173,
+        174, 175, 176, 179, 180, 181, 185, 194,
+        195, 196, 197, 199, 202, 208, 214, 215,
+        225, 228, 229, 243, 244, 245, 246, 247,
+        248, 280, 281, 282, 287, 288, 289, 302,
+        304, 305, 306, 316, 317, 333, 334, 353,
+        354, 359, 360, 363, 364, 365, 403, 404,
+        405, 425, 426, 438, 439, 447, 448, 453,
+        454, 459, 460, 461, 462, 468, 470, 471,
+        475, 627, 628, 700, 702, 736, 737, 738,
+        759, 760, 764, 778, 845, 906, 907, 908,
+        909, 910, 911, 912, 913, 914, 921, 922,
+        923, 980
+    };
+
+    protected override void OnInitialized()
+    {
+        GeneratePokemonBackground();
+    }
+
+    private void GeneratePokemonBackground()
+    {
+        var normalPath = $"/pokemon_images/normal/";
+        var shinyPath = $"/pokemon_images/shiny/";
+
+        for (int i = 0; i < 30; i++) // Generate 30 Pokémon images
+        {
+            int pokemonNumber = AllowedPokemonNumbers[random.Next(AllowedPokemonNumbers.Length)];
+
+            // 10% chance to use a shiny version
+            bool isShiny = random.NextDouble() < 0.1;
+            string imageUrl = isShiny
+                ? $"{shinyPath}{pokemonNumber}.png"
+                : $"{normalPath}{pokemonNumber}.png";
+
+            BackgroundImages.Add(new PokemonImage
+                {
+                    Url = imageUrl,
+                    Left = random.Next(0, 100), // 0-100% of background container width
+                    Top = random.Next(0, 100), // 0-100% of background container height
+                    Size = random.Next(50, 130), // 50px to 130px
+                    Rotation = random.Next(0, 360) // Random rotation
+                });
+        }
+    }
+
+    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.css

@@ -0,0 +1,16 @@
+.pokemon-background {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background-color: #f5f5f5; /* Optional, adjust to match your design */
+    pointer-events: none; /* So clicks pass through the background */
+    z-index: 0; /* Sits behind main content */
+}
+
+.pokemon-bg-img {
+    position: absolute;
+    object-fit: contain;
+    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); /* Sticker-like shadow */
+    pointer-events: none; /* Just visual */
+}

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

@@ -24,8 +24,20 @@
         <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Pokemon Sleep</a>
             <ul class="dropdown-menu" aria-labelledby="dropdown08">
-                <li><a class="dropdown-item" href="#">Action</a></li>
+                <li>
-                <li><a class="dropdown-item" href="#">Another action</a></li>
+                    <NavLink class="nav-link" href="pokemonsleep/add-new-pokemon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
+                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
+                        </svg> Pokemon Sleep
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink class="nav-link" href="pokemonsleep/rate-pokemon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
+                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
+                        </svg> Pokemon Sleep
+                    </NavLink>
+                </li>
                 <li><a class="dropdown-item" href="#">Something else here</a></li>
             </ul>
         </li>

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

@@ -2,6 +2,7 @@
 
 <PageTitle>Home</PageTitle>
 
+<PokemonBackground />
 <h1 class="test">Hello, world!</h1>
 <p>Ensuring that git is connected properly.</p>
 

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

@@ -11,93 +11,6 @@
 
 <PageTitle>Rate Pokémon</PageTitle>
 
-<style>
-
-    .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: 100px;
-        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 {
-        width: 30px;
-        height: 30px;
-        color: white;
-        padding: 4px 8px;
-        text-align: center;
-        vertical-align: middle;
-        border-radius: 3px;
-    }
-
-
-</style>
-
-
 <div class="card-header bg-secondary bg-gradient ml-0 py-3">
     <div class="row">
         <div class="col-12 text-center">

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

@@ -0,0 +1,83 @@
+
+.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: 100px;
+    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 {
+    width: 30px;
+    height: 30px;
+    color: white;
+    padding: 4px 8px;
+    text-align: center;
+    vertical-align: middle;
+    border-radius: 3px;
+}

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

@@ -1,5 +1,6 @@
 @page "/pokemonsleep"
 
+
 @inject IPokemonService PokemonService
 @inject IJSRuntime JS
 
@@ -8,96 +9,10 @@
 
 <PageTitle>Pokémon Sleep</PageTitle>
 
-<style>
-
-    .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;
-    }
-
-</style>
 
+<PokemonBackground /> 
 <!-- Heading + Buttons -->
-<div class="top-row bg-secondary bg-gradient ml-0 py-3">
+<div class="top-row bg-secondary bg-gradient ml-0 py-3 page-content">
     <div class="row">
         <div class="col-4"></div>
         <div class="col-4 text-center">

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

@@ -0,0 +1,93 @@
+
+.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;
+}
+
+.page-content {
+    position: relative;
+    z-index: 1; /* Higher than stickers */
+    background-color: rgba(255, 255, 255, 0.8); /* Optional translucent bg */
+}
+

Portfolio.WebUI.Server/Components/_Imports.razor

@@ -8,6 +8,7 @@
 @using Microsoft.JSInterop
 @using Portfolio.WebUI.Server
 @using Portfolio.WebUI.Server.Components
+@using Portfolio.WebUI.Server.Components.Component
 @using Portfolio.Domain.Features.Articles
 @using Portfolio.Domain.Features.Pokemon
 @using Portfolio.Domain.Features.Pokemon_Natures

Portfolio.WebUI.Server/Portfolio.WebUI.Server.csproj

@@ -7,6 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazored.Typeahead" Version="4.7.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.2">
       <PrivateAssets>all</PrivateAssets>
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>