diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor index 688cc92..cd3f17e 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) @@ -28,7 +28,8 @@
-
+ +
@if (string.IsNullOrEmpty(_pokemon.FlavorText)) {

[ Pokemon Flavor Text Placeholder ]

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 9526ce0..979e6b2 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.cs +++ b/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(); + } + } } 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 7305ee9..819df01 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor.css +++ b/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); + } +} + diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor index b625fb9..60c2310 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonHeader.razor @@ -1,6 +1,6 @@  -
+
@@ -8,26 +8,26 @@

Pokémon Sleep

-
-
- +
+
+ Pokémon - + Rate Pokémon - + - Add New Pokémon + Add Pokémon diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor index 907925d..5933cff 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor @@ -77,7 +77,7 @@ - @pokemon.PokemonId + @pokemon.PokemonId @@ -85,23 +85,23 @@ { @if (pokemon.VariationName == "Alolan") { - Alolan @pokemon.PokemonName + Alolan @pokemon.PokemonName } @if (pokemon.VariationName == "Paldean") { - Paldean @pokemon.PokemonName + Paldean @pokemon.PokemonName } } else // Otherwise, Base Case { - @pokemon.PokemonName + @pokemon.PokemonName }
- +
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs index 6ffcf30..4107cdf 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs +++ b/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) diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css index 24da861..fe73e88 100644 --- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css +++ b/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 { diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor index 7c91440..4f86454 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor @@ -118,7 +118,7 @@ else
- +
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor index a90103a..eada6f6 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor +++ b/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 diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs index f9aeecf..6acd0ac 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs +++ b/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}"); } }