+
+
+
+
+ @if(!pokemon2FormView && !pokemon3FormView)
+ {
+
+ }
+
+ else if (pokemon2FormView && !pokemon3FormView)
+ {
+
+
+ }
+
+ else if (!pokemon2FormView && pokemon3FormView)
+ {
+
+
+ }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Pokemon Type
-
- Select Type
- Grass
- Fire
- Water
- Normal
- Flying
- Bug
- Poison
- Electric
- Ground
- Rock
- Ice
- Steel
- Fighting
- Psychic
- Dark
- Fairy
- Ghost
- Dragon
-
-
-
-
- Sleep Type
-
- Dozing
- Snoozing
- Slumbering
-
-
-
-
- Specialty
-
- Berries
- Ingredients
- Skills
- All
-
-
-
-
-
-
-
-
-
- Base Image URL
-
-
-
-
- Shiny Image URL
-
-
-
-
-
- Flavor Text
-
-
-
-
-
- Cancel
- Add Pokemon
-
-
+
+
}
+
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs
index 8299970..5377985 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs
@@ -1,17 +1,32 @@
using Microsoft.AspNetCore.Components.Web;
+using Microsoft.JSInterop;
using Portfolio.Domain.Features.Pokemon;
namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
{
public partial class PokemonCreate
{
+
+ private bool pokemon2FormView { get; set; } = false;
+ private bool pokemon3FormView { get; set; } = false;
+
private bool HideLabel { get; set; } = true;
private void Toggle()
{
HideLabel = !HideLabel;
}
+ private void TogglePokemon2FormView()
+ {
+ pokemon2FormView = !pokemon2FormView;
+ }
+ private void TogglePokemon3FormView()
+ {
+ pokemon3FormView = !pokemon3FormView;
+ TogglePokemon2FormView();
+
+ }
- private Pokemon NewPokemon = new Pokemon
+ private Pokemon pokemon1, pokemon2, pokemon3 = new Pokemon
{
PokemonId = 0, // Or any default ID logic
PokemonName = string.Empty, // Required fields cannot be null
@@ -27,12 +42,61 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
{
this.ToggleVariationName = true;
}
- private async Task HandleSubmit()
+ private bool IsComplete(Pokemon NewPokemon) =>
+ NewPokemon.PokemonId > 0 &&
+ !string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
+ !string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
+ !string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
+ !string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
+ (!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
+
+ private async Task HandleAdd()
+ {
+ /*
+ Okay there are three versions of submits which need to be checked
+ 1. Single submit, only one, if both pokemon#FormView is false
+ 2. 2 Submit, if pokemon2FormView is true
+ 3. 3 Submit, if pokemon3FormView is true
+ */
+ if (!pokemon2FormView && !pokemon3FormView)
+ {
+ if(IsComplete(pokemon1))
+ {
+ await HandleSubmit(pokemon1);
+ Navigation.NavigateTo("/pokemon");
+ }
+ }
+ else if (pokemon2FormView)
+ {
+ if (IsComplete(pokemon1) && IsComplete(pokemon2))
+ {
+ await HandleSubmit(pokemon1);
+ await HandleSubmit(pokemon2);
+ Navigation.NavigateTo("/pokemon");
+
+ }
+ }
+ else if (pokemon3FormView)
+ {
+ if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
+ {
+ await HandleSubmit(pokemon1);
+ await HandleSubmit(pokemon2);
+ await HandleSubmit(pokemon3);
+ Navigation.NavigateTo("/pokemon");
+
+ }
+ }
+
+ }
+
+ private async Task HandleSubmit(Pokemon NewPokemon)
{
isSubmitting = true;
+
await PokemonService.AddPokemonAsync(NewPokemon);
isSubmitting = false;
- Navigation.NavigateTo("/pokemon");
+
}
protected void Cancel(MouseEventArgs e)
@@ -41,5 +105,41 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
Navigation.NavigateTo("/pokemon");
}
+ private async Task ReceivePokemon1(Pokemon p)
+ {
+ // Save received pokemon as Pokemon 1
+ pokemon1 = p;
+
+ // Server console (Blazor Server)
+ Console.WriteLine($"[Pokemon 1] #{pokemon1.PokemonId} {pokemon1.PokemonName} | {pokemon1.PokemonType} | {pokemon1.SleepType} | {pokemon1.Speciality} | Var:{pokemon1.IsVariation} {pokemon1.VariationName}");
+
+ // Browser console
+ await JS.InvokeVoidAsync("console.log", "Pokemon 1:", pokemon1);
+ }
+
+ private async Task ReceivePokemon2(Pokemon p)
+ {
+ // Save received pokemon as Pokemon 1
+ pokemon2 = p;
+
+ // Server console (Blazor Server)
+ Console.WriteLine($"[Pokemon 2] #{pokemon2.PokemonId} {pokemon2.PokemonName} | {pokemon2.PokemonType} | {pokemon2.SleepType} | {pokemon2.Speciality} | Var:{pokemon2.IsVariation} {pokemon2.VariationName}");
+
+ // Browser console
+ await JS.InvokeVoidAsync("console.log", "Pokemon 2:", pokemon2);
+ }
+
+ private async Task ReceivePokemon3(Pokemon p)
+ {
+ // Save received pokemon as Pokemon 1
+ pokemon3 = p;
+
+ // Server console (Blazor Server)
+ Console.WriteLine($"[Pokemon 3] #{pokemon3.PokemonId} {pokemon3.PokemonName} | {pokemon3.PokemonType} | {pokemon3.SleepType} | {pokemon3.Speciality} | Var:{pokemon3.IsVariation} {pokemon3.VariationName}");
+
+ // Browser console
+ await JS.InvokeVoidAsync("console.log", "Pokemon 3:", pokemon3);
+ }
+
}
}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css
index c52defd..62df338 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.css
@@ -1,6 +1,10 @@
-
-.create-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;
+.addcard {
+ width: 100%;
+ max-width: 30rem;
+ flex: 0 0 auto; /* prevent flex shrink/grow */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.5rem;
}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor
new file mode 100644
index 0000000..d38ad02
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor
@@ -0,0 +1,93 @@
+@page "/pokemon/{id:int}"
+@inject IPokemonService PokemonService
+@inject NavigationManager Navigation
+
+@attribute [StreamRendering]
+@rendermode InteractiveServer
+
+
+
+
+
+
+@if (_pokemon == null)
+{
+
+}
+else
+{
+
@_pokemon.PokemonName
+
+
+
+
+
+
+
+
+
+
+ @if (_variationPokemonId != null)
+ {
+ @if (_variationPokemonId != null && _pokemonVariant == null){
+
+ }
+ else
+ {
+
+ @if(_pokemon.Id != _pokemonVariant.Id)
+ {
+
+
+ }
+
+ else
+ {
+
+
+ }
+ }
+ }
+ else{
+
+
+ }
+
+
+
+
+
+
+
+}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.cs
new file mode 100644
index 0000000..9b0a5e3
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.cs
@@ -0,0 +1,52 @@
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
+{
+ public partial class PokemonIndividualView
+ {
+ [Parameter] public int Id { get; set; }
+ private Pokemon? _pokemon;
+ private Pokemon? _pokemonVariant;
+ private List
_pokemonIds;
+ private int? _nextPokemonId;
+ private int? _previousPokemonId;
+ private int? _variationPokemonId;
+ private int _currentIndex;
+
+
+ protected override async Task OnParametersSetAsync()
+ {
+ _pokemon = await PokemonService.GetPokemonByPokemonIdAsync(Id);
+
+ // These can be smart queries if your data is sorted by ID or by another property
+ _pokemonIds = await PokemonService.GetAllPokemonIdsAsync();
+ _currentIndex = _pokemonIds.IndexOf(_pokemon.PokemonId);
+ //Console.WriteLine(_currentIndex);
+
+ _nextPokemonId = await PokemonService.GetNextPokemonIdAsync(Id);
+ _previousPokemonId = await PokemonService.GetPreviousPokemonIdAsync(Id);
+
+ _variationPokemonId = await PokemonService.GetVariationPokemonIdAsync(Id);
+ if (_variationPokemonId != null)
+ {
+ Console.WriteLine(_variationPokemonId);
+ _pokemonVariant = await PokemonService.GetPokemonByIdAsync((int)_variationPokemonId);
+ Console.WriteLine(_pokemonVariant.VariationName);
+ }
+ }
+
+ private void NavigateToNext()
+ {
+ if (_nextPokemonId.HasValue)
+ Navigation.NavigateTo($"/pokemon/{_nextPokemonId.Value}");
+ }
+
+ private void NavigateToPrevious()
+ {
+ if (_previousPokemonId.HasValue)
+ Navigation.NavigateTo($"/pokemon/{_previousPokemonId.Value}");
+ }
+
+ }
+}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.css
new file mode 100644
index 0000000..a9da88b
--- /dev/null
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.css
@@ -0,0 +1,9 @@
+.pokemoncard {
+ width: 100%;
+ max-width: 350px;
+ flex: 0 0 auto; /* prevent flex shrink/grow */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0.5rem;
+}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor
index fe08dd8..63e0916 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor
@@ -1,23 +1,67 @@
-@page "/pokemon"
+@page "/pokemonsleep"
-@inject IPokemonService PokemonService
-
@attribute [StreamRendering]
@rendermode InteractiveServer
Pokémon Sleep
+
+
-
-
+
+
-
+
+
+
+
+
+
+
+
+
Pokémon Sleep? Really?
+
+ Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
+
+
But what do you even do?
+
+ 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.
+
-
+
+
-
+
+
+
Okay, but why a whole section dedicated to Pokémon Sleep?
+
+ 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.
+
+
+
+
+
+
+
+
+
+
+ Available Pokémon
+
+
+
+
+
+
+
+
+
+ Rate Pokémon
+
+
+
-
\ No newline at end of file
+
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.cs b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.cs
deleted file mode 100644
index 0c2199f..0000000
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.cs
+++ /dev/null
@@ -1,30 +0,0 @@
-using Portfolio.Application.Services.PokemonService;
-using Portfolio.Domain.Features.Pokemon;
-
-namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
-{
- public partial class PokemonSleep
- {
- public List pokemons = new List();
- public List pokemonImageUrls = new List();
- public List pokemonShinyImageUrls = new List();
-
-
- 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);
- }
-
- }
- }
- }
-}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.css
deleted file mode 100644
index eb28ea8..0000000
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.css
+++ /dev/null
@@ -1,93 +0,0 @@
-
-.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 */
-}
-
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor
deleted file mode 100644
index 63e0916..0000000
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor
+++ /dev/null
@@ -1,67 +0,0 @@
-@page "/pokemonsleep"
-
-
-@attribute [StreamRendering]
-@rendermode InteractiveServer
-
-
-Pokémon Sleep
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Pokémon Sleep? Really?
-
- Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
-
-
But what do you even do?
-
- 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.
-
-
-
-
-
-
-
-
Okay, but why a whole section dedicated to Pokémon Sleep?
-
- 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.
-
-
-
-
-
-
-
-
-
-
- Available Pokémon
-
-
-
-
-
-
-
-
-
- Rate Pokémon
-
-
-
-
-
-
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor
index d38ad02..fe08dd8 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor
@@ -1,93 +1,23 @@
-@page "/pokemon/{id:int}"
+@page "/pokemon"
+
+
@inject IPokemonService PokemonService
-@inject NavigationManager Navigation
@attribute [StreamRendering]
@rendermode InteractiveServer
-
+Pokémon Sleep
+
+
-@if (_pokemon == null)
-{
-
-}
-else
-{
-
@_pokemon.PokemonName
-
+
-
-
+
-
-
+
-
-
- @if (_variationPokemonId != null)
- {
- @if (_variationPokemonId != null && _pokemonVariant == null){
-
- }
- else
- {
-
- @if(_pokemon.Id != _pokemonVariant.Id)
- {
-
-
- }
-
- else
- {
-
-
- }
- }
- }
- else{
-
-
- }
-
-
-
-
-
-
-
-}
+
\ No newline at end of file
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 6acd0ac..bb378db 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.cs
@@ -1,52 +1,30 @@
-using Microsoft.AspNetCore.Components;
+using Portfolio.Application.Services.PokemonService;
using Portfolio.Domain.Features.Pokemon;
namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
{
public partial class PokemonView
{
- [Parameter] public int Id { get; set; }
- private Pokemon? _pokemon;
- private Pokemon? _pokemonVariant;
- private List _pokemonIds;
- private int? _nextPokemonId;
- private int? _previousPokemonId;
- private int? _variationPokemonId;
- private int _currentIndex;
+ public List pokemons = new List();
+ public List pokemonImageUrls = new List();
+ public List pokemonShinyImageUrls = new List();
- protected override async Task OnParametersSetAsync()
+ protected override async Task OnInitializedAsync()
{
- _pokemon = await PokemonService.GetPokemonByPokemonIdAsync(Id);
-
- // These can be smart queries if your data is sorted by ID or by another property
- _pokemonIds = await PokemonService.GetAllPokemonIdsAsync();
- _currentIndex = _pokemonIds.IndexOf(_pokemon.PokemonId);
- //Console.WriteLine(_currentIndex);
-
- _nextPokemonId = await PokemonService.GetNextPokemonIdAsync(Id);
- _previousPokemonId = await PokemonService.GetPreviousPokemonIdAsync(Id);
-
- _variationPokemonId = await PokemonService.GetVariationPokemonIdAsync(Id);
- if (_variationPokemonId != null)
+ var result = await PokemonService.GetAllPokemonAsync();
+ if (result is not null)
{
- Console.WriteLine(_variationPokemonId);
- _pokemonVariant = await PokemonService.GetPokemonByIdAsync((int)_variationPokemonId);
- Console.WriteLine(_pokemonVariant.VariationName);
+ pokemons = result;
+ pokemons.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
+
+ foreach (var pokemon in pokemons)
+ {
+ pokemonImageUrls.Add(pokemon.PokemonImageUrl);
+ pokemonShinyImageUrls.Add(pokemon.PokemonShinyImageUrl);
+ }
+
}
}
-
- private void NavigateToNext()
- {
- if (_nextPokemonId.HasValue)
- Navigation.NavigateTo($"/pokemon/{_nextPokemonId.Value}");
- }
-
- private void NavigateToPrevious()
- {
- if (_previousPokemonId.HasValue)
- Navigation.NavigateTo($"/pokemon/{_previousPokemonId.Value}");
- }
-
}
}
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css
index a9da88b..eb28ea8 100644
--- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css
+++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css
@@ -1,9 +1,93 @@
-.pokemoncard {
- width: 100%;
- max-width: 350px;
- flex: 0 0 auto; /* prevent flex shrink/grow */
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 0.5rem;
+
+.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 */
+}
+