Reconfiguring the PokemonSleep homepage

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

@@ -1,7 +1,7 @@
 @attribute [StreamRendering]
 @rendermode InteractiveServer
 
-<div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
+<div class="mx-2 pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
     <!-- Pokemon Name, Number, and Type -->
     <div class="z-3">
         @if (_pokemon.IsVariation) 
@@ -28,7 +28,8 @@
         </div>
     </div>
 
-    <div class="bg-info-subtle border rounded border-2 border-info z-3 pokemon-flavor-text">
+    <!-- Pokemon Flavortext -->
+    <div class="z-3 pokemon-flavor-text @(GetTypeCssClass(_pokemon.PokemonType))">
         @if (string.IsNullOrEmpty(_pokemon.FlavorText))
         {
             <p class="">[ Pokemon Flavor Text Placeholder ]</p>

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

@@ -36,5 +36,11 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 
             return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
         }
+
+        private string GetTypeCssClass(string type)
+        {
+            return "pokemon-type-" + type.ToLower();
+        }
+
     }
 }

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

@@ -4,9 +4,24 @@
     height: 32rem;
     max-width: 24rem;
     max-height: 32rem;
+    background-color: var(--bg-color);
+    border-width: .5rem;
+    border-style: solid;
     border-radius: 5% / 3.5%;
+    border-color: var(--border-color);
+    box-shadow: 0 0 10px var(--border-color);
 }
 
+    .pokemon-card:hover {
+        z-index: 10;
+        box-shadow: 0 0 10px var(--border-color), 0 0 20px var(--border-color), 0 0 30px var(--border-color);
+        transition: box-shadow 0.3s ease, transform 0.2s ease;
+        animation: glowPulse 1.5s ease-in-out infinite;
+        transform: translateY(-13px);
+    }
+
+
+
 .pokemon-name {
     position: absolute;
     top: 0 !important;
@@ -60,13 +75,20 @@
     align-items: start;
     justify-content: center; /* Horizontally centers text */
     overflow: hidden; /* Ensures no scrollbar */
+
+
+    border-width: 2px;
+    border-radius: 5% / 13%;
+    border-style: solid;
+    border-color: var(--border-color);
+    background-color: var(--flavor-bg-color);
 }
 
     .pokemon-flavor-text p {
         margin: 0;
         width: 100%;
         text-align: start;
-        font-size: min(14px, 1.5vw); /* Scales font but won't exceed 14px */
+        font-size: min(13px, 1.5vw); /* Scales font but won't exceed 13px */
         line-height: 1.2; /* Adjust spacing for readability */
         white-space: normal; /* Ensures wrapping */
         word-wrap: break-word;
@@ -127,6 +149,7 @@
     font-size: .8rem;
 }
 
+/* Sleep Type Badge Styling */
 .dozing {
     background-color: #fcdc5e;
 }
@@ -139,6 +162,7 @@
     background-color: #4588fb;
 }
 
+/* Speciality Badge Styling */
 .berries {
     background-color: #24d86b;
 }
@@ -151,3 +175,210 @@
     background-color: #47a0fc;
 }
 
+/* Type Card Styling */
+
+/* Type Themes - define vars only */
+.pokemon-type-grass {
+    --border-color: #45ca24;
+    --bg-color: #e5f8dc;
+    --flavor-bg-color: #f2fbe9;
+}
+
+.pokemon-type-fire {
+    --border-color: #ff662c;
+    --bg-color: #ffe3d5;
+    --flavor-bg-color: #fff0e9;
+}
+
+.pokemon-type-water {
+    --border-color: #2b99fe;
+    --bg-color: #d6ecff;
+    --flavor-bg-color: #eaf5ff;
+}
+
+.pokemon-type-normal {
+    --border-color: #ababab;
+    --bg-color: #ededed;
+    --flavor-bg-color: #f7f7f7;
+}
+
+.pokemon-type-flying {
+    --border-color: #9ed3ff;
+    --bg-color: #e7f5ff;
+    --flavor-bg-color: #f3fbff;
+}
+
+.pokemon-type-bug {
+    --border-color: #a7b023;
+    --bg-color: #f2f6cd;
+    --flavor-bg-color: #f9fbe4;
+}
+
+.pokemon-type-poison {
+    --border-color: #9f4ed7;
+    --bg-color: #edd6f8;
+    --flavor-bg-color: #f7ebfc;
+}
+
+.pokemon-type-electric {
+    --border-color: #ffdf00;
+    --bg-color: #fff8c6;
+    --flavor-bg-color: #fffbdf;
+}
+
+.pokemon-type-ground {
+    --border-color: #af7d38;
+    --bg-color: #f0ddc2;
+    --flavor-bg-color: #f8eee2;
+}
+
+.pokemon-type-rock {
+    --border-color: #bebd8d;
+    --bg-color: #f4f3dc;
+    --flavor-bg-color: #faf9ee;
+}
+
+.pokemon-type-ice {
+    --border-color: #45e0ff;
+    --bg-color: #d1f7ff;
+    --flavor-bg-color: #e9fbff;
+}
+
+.pokemon-type-steel {
+    --border-color: #6db7de;
+    --bg-color: #daedf7;
+    --flavor-bg-color: #eef6fb;
+}
+
+.pokemon-type-fighting {
+    --border-color: #ffa803;
+    --bg-color: #ffe9c6;
+    --flavor-bg-color: #fff3df;
+}
+
+.pokemon-type-psychic {
+    --border-color: #ff6887;
+    --bg-color: #ffd6df;
+    --flavor-bg-color: #ffe8ef;
+}
+
+.pokemon-type-dark {
+    --border-color: #544b4c;
+    --bg-color: #dedcdc;
+    --flavor-bg-color: #f1f0f0;
+}
+
+.pokemon-type-fairy {
+    --border-color: #ffb5ff;
+    --bg-color: #ffe6ff;
+    --flavor-bg-color: #fff2ff;
+}
+
+.pokemon-type-ghost {
+    --border-color: #714775;
+    --bg-color: #e2d2e4;
+    --flavor-bg-color: #f0e8f1;
+}
+
+.pokemon-type-dragon {
+    --border-color: #5669e2;
+    --bg-color: #d6dbfa;
+    --flavor-bg-color: #eaedfc;
+}
+
+.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-blend-mode: screen;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    border-radius: 1rem;
+    transition: transform 0.4s ease;
+}
+
+    .card-holo:hover::before {
+        animation: holoGradient 12s ease 0s 1;
+    }
+
+    .card-holo:hover::after {
+        animation: holoSparkle 12s ease 0s 1;
+    }
+
+@keyframes holoSparkle {
+    0%, 100% {
+        opacity: .75;
+        background-position: 50% 50%;
+        filter: brightness(1.2) contrast(1.25);
+    }
+
+    5%, 8% {
+        opacity: 1;
+        background-position: 40% 40%;
+        filter: brightness(.8) contrast(1.2);
+    }
+
+    13%, 16% {
+        opacity: .5;
+        background-position: 50% 50%;
+        filter: brightness(1.2) contrast(.8);
+    }
+
+    35%, 38% {
+        opacity: 1;
+        background-position: 60% 60%;
+        filter: brightness(1) contrast(1);
+    }
+
+    55% {
+        opacity: .33;
+        background-position: 45% 45%;
+        filter: brightness(1.2) contrast(1.25);
+    }
+}
+
+@keyframes holoGradient {
+    0%, 100% {
+        opacity: 0.5;
+        background-position: 50% 50%;
+        filter: brightness(.5) contrast(1);
+    }
+
+    5%, 9% {
+        background-position: 100% 100%;
+        opacity: 1;
+        filter: brightness(.75) contrast(1.25);
+    }
+
+    13%, 17% {
+        background-position: 0% 0%;
+        opacity: .88;
+    }
+
+    35%, 39% {
+        background-position: 100% 100%;
+        opacity: 1;
+        filter: brightness(.5) contrast(1);
+    }
+
+    55% {
+        background-position: 0% 0%;
+        opacity: 1;
+        filter: brightness(.75) contrast(1.25);
+    }
+}
+@keyframes glowPulse {
+    0% {
+        box-shadow: 0 0 15px var(--border-color);
+    }
+
+    50% {
+        box-shadow: 0 0 25px var(--border-color);
+    }
+
+    100% {
+        box-shadow: 0 0 15px var(--border-color);
+    }
+}
+

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

@@ -1,6 +1,6 @@
 
 <!-- Heading + Buttons -->
-<div class="top-row row rounded-bottom-5 w-100 bg-secondary py-3">
+<div class="top-row row rounded-bottom-5 w-100 bg-secondary border-bottom border-start border-end border-2 border-primary py-3">
 
     <div class="col-4"></div>
 
@@ -8,28 +8,45 @@
         <h1 class="text-primary">Pokémon Sleep</h1>
     </div>
 
-    <div class="col-4 text-end">
+    <div class="col-4">
-        <div class="btn-group col my-1">
+        <div class="btn-group d-flex justify-content-end my-1">
-            <NavLink class="btn btn-danger" style="border-radius: 50px 15px;" href="/pokemonsleep">
+            <!-- Home -->
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
+            <button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
-                    <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
+                <NavLink href="/pokemonsleep">
-                </svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
-                <span class="mx-1">Pokémon</span>
+                        <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
-            </NavLink>
+                        <path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" />
-            <NavLink class="btn btn-primary" style="border-radius: 50px 15px;" href="/pokemonsleep/rate-pokemon">
+                    </svg>
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16">
+                </NavLink>
-                    <path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
+            </button>
-                    <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
-                </svg> 
-                <span class="mx-1">Rate Pokémon</span>
-            </NavLink>
-            <NavLink class="btn btn-info" style="border-radius: 50px 15px;" href="/pokemonsleep/add-new-pokemon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
-                    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
-                </svg> 
-                <span class="mx-1">Add New Pokémon</span>
-            </NavLink>
 
+            <!-- Pokemon Table-->
+            <button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
+                <NavLink href="/pokemon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
+                        <path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
+                    </svg>
+                </NavLink>
+            </button>
+
+            <!-- Rate Pokemon -->
+            <button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
+                <NavLink href="/pokemonsleep/rate-pokemon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16">
+                        <path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
+                        <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
+                    </svg>
+                </NavLink>
+            </button>
+
+            <!-- Add Pokemon (Wrap in Auth) -->
+            <button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;">
+                <NavLink  href="/pokemonsleep/add-new-pokemon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
+                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
+                    </svg> 
+                </NavLink>
+            </button>
 
         </div>
     </div>

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

@@ -77,7 +77,7 @@
                             </td>
 
                             <!-- Section 2: Pokemon # -->
-                            <th scope="row">@pokemon.PokemonId</th>
+                            <th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
 
 
                             <!-- Section 3: Pokemon Name -->
@@ -85,23 +85,23 @@
                             {
                                 @if (pokemon.VariationName == "Alolan")
                                 {
-                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> Alolan @pokemon.PokemonName</td>
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
                                 }
                                 @if (pokemon.VariationName == "Paldean")
                                 {
-                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> Paldean @pokemon.PokemonName</td>
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
                                 }
                             }
                             else // Otherwise, Base Case
                             {
-                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> @pokemon.PokemonName</td>
+                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
                             }
 
 
                             <!-- Section 4: Pokemon Type -->
                             <td>
                                 <div class="d-flex justify-content-center">
-                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" class="" style="width:36px; height:36px;" />
+                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)"  style="width:36px; height:36px;" />
                                 </div>
                             </td>
 

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

@@ -57,7 +57,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
 
         private void ViewPokemon(int id)
         {
-            Navigation.NavigateTo($"/pokemonsleep/pokemon/{id}");
+            Navigation.NavigateTo($"/pokemon/{id}");
         }
 
         private string GetTypeImageUrl(string pokemonType)

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

@@ -16,6 +16,9 @@
         z-index: 10;
     }
 
+.pokemon-name-style {
+    cursor:pointer;
+}
 
 
 .flip-container {
@@ -77,6 +80,7 @@
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 13px;
+    cursor: default;
 }
 
 .dozing {

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor

@@ -118,7 +118,7 @@ else
                 <!-- Flavor Text Input -->
                 <div class="row mb-3 m-auto">
                     <label for="FlavorText" class="form-label">Flavor Text</label>
-                    <InputText id="FlavorText" @bind-Value="pokemon.FlavorText" class="form-control" required />
+                    <InputText id="FlavorText" @bind-Value="pokemon.FlavorText" class="form-control" />
                 </div>
 
                 <!-- Form Buttons -->

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

@@ -1,4 +1,4 @@
-@page "/pokemonsleep"
+@page "/pokemon"
 
 
 @inject IPokemonService PokemonService

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor

@@ -0,0 +1,38 @@
+@page "/pokemonsleep"
+
+
+@attribute [StreamRendering]
+@rendermode InteractiveServer
+
+
+<PageTitle>Pokémon Sleep</PageTitle>
+
+<div class="w-100">
+    <!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
+    <PokemonHeader />
+    <div class="card shadow border-0 p-3 mt-4 m-auto w-75">
+        <div class="d-flex flex-row justify-content-around">
+            <div class="card border-0 shadow-sm"><img class="card-img shadow-sm w-auto" style="width: 540px; height: 540px;" src="images/Pokemon_Sleep_ID.jpg" /></div>
+            <div class="border border-warning w-50 p-3"> 
+                <p class="fw-bold fst-italic fs-3">Pokémon Sleep? Really?</p>
+                <p class="fw-normal fs-6 text-start">
+                    Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
+                </p>
+                <p class="fw-bold fst-italic fs-3">But what do you even do?</p>
+                <p class="fw-normal fs-6 text-start">
+                    That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
+                </p>
+                <p class="fw-bold fst-italic fs-3">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
+                <p class="fw-normal fs-6 text-start">
+                    Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
+                </p>
+            </div>
+        </div>
+        <div class="btn-group d-flex flex-row justify-content-around mt-4">
+            <button class="btn btn-info">Available Pokémon</button>
+            <button class="btn btn-success">Rate Pokémon</button>
+        </div>
+    </div>
+
+
+</div>

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor

@@ -1,4 +1,4 @@
-@page "/pokemonsleep/pokemon/{id:int}"
+@page "/pokemon/{id:int}"
 @inject IPokemonService PokemonService
 @inject NavigationManager Navigation
 

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs

@@ -39,13 +39,13 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
         private void NavigateToNext()
         {
             if (_nextPokemonId.HasValue)
-                Navigation.NavigateTo($"/pokemonsleep/pokemon/{_nextPokemonId.Value}");
+                Navigation.NavigateTo($"/pokemon/{_nextPokemonId.Value}");
         }
 
         private void NavigateToPrevious()
         {
             if (_previousPokemonId.HasValue)
-                Navigation.NavigateTo($"/pokemonsleep/pokemon/{_previousPokemonId.Value}");
+                Navigation.NavigateTo($"/pokemon/{_previousPokemonId.Value}");
         }
 
     }