Subskill and Nature information being collected; Pokemon are being rated; UI improvements to specialities/sleep types

Portfolio.Application/DependencyInjection.cs

@@ -1,6 +1,8 @@
 using Microsoft.Extensions.DependencyInjection;
 using Portfolio.Application.Services.Articles;
+using Portfolio.Application.Services.PokemonNatureService;
 using Portfolio.Application.Services.PokemonService;
+using Portfolio.Application.Services.PokemonSubskillService;
 using System;
 using System.Collections.Generic;
 using System.Linq;
@@ -15,6 +17,8 @@ namespace Portfolio.Application
         {
             services.AddScoped<IArticleService, ArticleService>();
             services.AddScoped<IPokemonService, PokemonService>();
+            services.AddScoped<IPokemonSubskillService, PokemonSubskillService>();
+            services.AddScoped<IPokemonNatureService, PokemonNatureService>();
 
 
 

Portfolio.Application/Services/PokemonNatureService/IPokemonNatureService.cs

@@ -1,4 +1,5 @@
-using System;
+using Portfolio.Domain.Features.Pokemon_Natures;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -8,5 +9,6 @@ namespace Portfolio.Application.Services.PokemonNatureService
 {
     public interface IPokemonNatureService
     {
+        Task<List<PokemonNature>> GetAllPokemonNaturesAsync();
     }
 }

Portfolio.Application/Services/PokemonNatureService/PokemonNatureService.cs

@@ -1,4 +1,6 @@
-using System;
+using Portfolio.Domain.Features.Pokemon;
+using Portfolio.Domain.Features.Pokemon_Natures;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -8,5 +10,16 @@ namespace Portfolio.Application.Services.PokemonNatureService
 {
     public class PokemonNatureService : IPokemonNatureService
     {
+        private readonly IPokemonNatureRepository _pokemonNatureRepository;
+
+        public PokemonNatureService(IPokemonNatureRepository pokemonNatureRepository)
+        {
+            _pokemonNatureRepository = pokemonNatureRepository;
+        }
+
+        public async Task<List<PokemonNature>> GetAllPokemonNaturesAsync()
+        {
+            return await _pokemonNatureRepository.GetAllPokemonNaturesAsync();
+        }
     }
 }

Portfolio.Application/Services/PokemonService/IPokemonService.cs

@@ -10,6 +10,7 @@ namespace Portfolio.Application.Services.PokemonService
     public interface IPokemonService
     {
         Task<List<Pokemon>> GetAllPokemonAsync();
+        Task<Pokemon> GetPokemonByIdAsync(int id);
         Task AddPokemonAsync(Pokemon pokemon);
         Task DeletePokemonAsync(int pokemonId);
     }

Portfolio.Application/Services/PokemonService/PokemonService.cs

@@ -32,5 +32,10 @@ namespace Portfolio.Application.Services.PokemonService
             return await _pokemonRepository.GetAllPokemonsAsync();
 
         }
+
+        public async Task<Pokemon> GetPokemonByIdAsync(int id)
+        {
+            return await _pokemonRepository.GetPokemonByIdAsync(id);
+        }
     }
 }

Portfolio.Application/Services/PokemonSubskillService/IPokemonSubskillService.cs

@@ -1,4 +1,5 @@
-using System;
+using Portfolio.Domain.Features.Pokemon_Subskills;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -8,5 +9,7 @@ namespace Portfolio.Application.Services.PokemonSubskillService
 {
     public interface IPokemonSubskillService
     {
+        Task<List<PokemonSubskill>> GetAllPokemonSubskillsAsync();
+
     }
 }

Portfolio.Application/Services/PokemonSubskillService/PokemonSubskillService.cs

@@ -1,4 +1,6 @@
-using System;
+using Portfolio.Domain.Features.Pokemon;
+using Portfolio.Domain.Features.Pokemon_Subskills;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -8,5 +10,15 @@ namespace Portfolio.Application.Services.PokemonSubskillService
 {
     public class PokemonSubskillService : IPokemonSubskillService
     {
+        private readonly IPokemonSubskillRepository _pokemonSubskillRepository;
+
+        public PokemonSubskillService(IPokemonSubskillRepository pokemonSubskillRepository)
+        {
+            _pokemonSubskillRepository = pokemonSubskillRepository;
+        }
+        public async Task<List<PokemonSubskill>> GetAllPokemonSubskillsAsync()
+        {
+            return await _pokemonSubskillRepository.GetAllPokemonSubskillsAsync();
+        }
     }
 }

Portfolio.Domain/Features/Pokemon Natures/IPokemonNatureRepository.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Portfolio.Domain.Features.Pokemon_Natures
+{
+    public interface IPokemonNatureRepository
+    {
+        Task<List<PokemonNature>> GetAllPokemonNaturesAsync();
+    }
+}

Portfolio.Domain/Features/Pokemon Natures/PokemonNature.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace Portfolio.Domain.Features.Pokemon_Natures
 {
-    public class PokemonNatures
+    public class PokemonNature
     {
         public int Id { get; set; }
         public string Nature { get; set; }

Portfolio.Domain/Features/Pokemon Subskills/IPokemonSubskillRepository.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Portfolio.Domain.Features.Pokemon_Subskills
+{
+    public interface IPokemonSubskillRepository
+    {
+        Task<List<PokemonSubskill>> GetAllPokemonSubskillsAsync();
+    }
+}

Portfolio.Domain/Features/Pokemon Subskills/PokemonSubskill.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace Portfolio.Domain.Features.Pokemon_Subskills
 {
-    public class PokemonSubskills
+    public class PokemonSubskill
     {
         public int Id { get; set; }
         public string SubSkill { get; set; }

Portfolio.Domain/Features/Pokemon/IPokemonRepository.cs

@@ -9,6 +9,7 @@ namespace Portfolio.Domain.Features.Pokemon
     public interface IPokemonRepository
     {
         Task<List<Pokemon>> GetAllPokemonsAsync();
+        Task<Pokemon> GetPokemonByIdAsync(int id);
         Task AddPokemonAsync(Pokemon pokemon);
         Task DeletePokemonAsync(int pokemonId);
 

Portfolio.Infrastructure/ApplicationDbContext.cs

@@ -18,8 +18,8 @@ namespace Portfolio.Infrastructure
             
         }
         public DbSet<Pokemon> Pokemons { get; set; }
-        public DbSet<PokemonNatures> PokemonNatures { get; set; }
-        public DbSet<PokemonSubskills> PokemonSubskills { get; set; }
+        public DbSet<PokemonNature> PokemonNatures { get; set; }
+        public DbSet<PokemonSubskill> PokemonSubskills { get; set; }
 
     }
 }

Portfolio.Infrastructure/DependencyInjection.cs

@@ -4,6 +4,8 @@ using Microsoft.Extensions.DependencyInjection;
 using Portfolio.Application.Services.Articles;
 using Portfolio.Application.Services.PokemonService;
 using Portfolio.Domain.Features.Pokemon;
+using Portfolio.Domain.Features.Pokemon_Natures;
+using Portfolio.Domain.Features.Pokemon_Subskills;
 using Portfolio.Infrastructure.Repositories;
 using System;
 using System.Collections.Generic;
@@ -21,6 +23,8 @@ namespace Portfolio.Infrastructure
                 options.UseSqlServer(configuration.GetConnectionString("DefaultConnection")
             ));
             services.AddScoped<IPokemonRepository, PokemonRepository>();
+            services.AddScoped<IPokemonNatureRepository, PokemonNatureRepository>();
+            services.AddScoped<IPokemonSubskillRepository, PokemonSubskillRepository>();
 
             return services;
         }

Portfolio.Infrastructure/Repositories/PokemonNatureRepository.cs

@@ -0,0 +1,24 @@
+using Microsoft.EntityFrameworkCore;
+using Portfolio.Domain.Features.Pokemon_Natures;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Portfolio.Infrastructure.Repositories
+{
+    public class PokemonNatureRepository : IPokemonNatureRepository
+    {
+        private readonly ApplicationDbContext _context;
+
+        public PokemonNatureRepository(ApplicationDbContext context)
+        {
+            _context = context;
+        }
+        public async Task<List<PokemonNature>> GetAllPokemonNaturesAsync()
+        {
+            return await _context.PokemonNatures.ToListAsync();
+        }
+    }
+}

Portfolio.Infrastructure/Repositories/PokemonRepository.cs

@@ -21,6 +21,11 @@ namespace Portfolio.Infrastructure.Repositories
         {
             return await _context.Pokemons.ToListAsync();
         }
+        public async Task<Pokemon> GetPokemonByIdAsync(int id)
+        {
+            return await _context.Pokemons.FirstOrDefaultAsync(p => p.Id == id);
+        }
+
         public async Task AddPokemonAsync(Pokemon pokemon)
         {
             _context.Pokemons.Add(pokemon);
@@ -35,5 +40,6 @@ namespace Portfolio.Infrastructure.Repositories
                 await _context.SaveChangesAsync();
             }
         }
+
     }
 }

Portfolio.Infrastructure/Repositories/PokemonSubskillRepository.cs

@@ -0,0 +1,24 @@
+using Microsoft.EntityFrameworkCore;
+using Portfolio.Domain.Features.Pokemon_Subskills;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Portfolio.Infrastructure.Repositories
+{
+    public class PokemonSubskillRepository : IPokemonSubskillRepository
+    {
+        private readonly ApplicationDbContext _context;
+
+        public PokemonSubskillRepository(ApplicationDbContext context)
+        {
+            _context = context;
+        }
+        public async Task<List<PokemonSubskill>> GetAllPokemonSubskillsAsync()
+        {
+            return await _context.PokemonSubskills.ToListAsync();
+        }
+    }
+}

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

@@ -9,10 +9,11 @@
 
 <PageTitle>Add New Pokémon</PageTitle>
 
+
 <div class="card-header bg-secondary bg-gradient ml-0 py-3">
     <div class="row">
         <div class="col-12 text-center">
-            <h1 class="text-info">Pokémon Sleep</h1>
+            <h1 class="text-primary">Pokémon Sleep</h1>
         </div>
     </div>
 </div>

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

@@ -1,7 +1,381 @@
-@page "/pokemonsleep/add-new-pokemon"
+@page "/pokemonsleep/rate-pokemon"
 
 @inject IPokemonService PokemonService
+@inject IPokemonNatureService PokemonNatureService
+@inject IPokemonSubskillService PokemonSubskillService
 @inject NavigationManager Navigation
 
 @attribute [StreamRendering]
-@rendermode InteractiveServer
+@rendermode InteractiveServer
+
+
+<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;
+        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>
+
+
+<div class="card-header bg-secondary bg-gradient ml-0 py-3">
+    <div class="row">
+        <div class="col-12 text-center">
+            <h1 class="text-primary">Pokémon Sleep</h1>
+        </div>
+    </div>
+</div>
+
+
+@if (PokemonList == null || NatureList == null || SubskillList == null)
+{
+    <p>Loading...</p>
+}
+else
+{
+        <div class="w-75 mt-3 m-auto " style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
+
+            <div class="card-header bg-secondary bg-gradient ml-0 py-3">
+                <div class="row">
+                    <div class="col-12 text-center">
+                    <h2 class="text-info">Pokémon Rater</h2>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Section 1: Pokemon Selection -->
+        <div class="card-body p-4 col-12" >
+                <div class="row pb-3">
+                    <div class="col-3">
+                        <label for="pokemonSelect">Select Pokémon</label>
+                        <select class="form-control form-control-lg" @bind="SelectedPokemonId">
+                            <option value="" disabled selected>Choose your Pokémon...</option>
+                            @foreach (var pokemon in PokemonList)
+                            {
+                            if(pokemon.IsVariation)
+                            {
+                                <option value="@pokemon.Id">@pokemon.PokemonId @pokemon.VariationName @pokemon.PokemonName</option>
+
+                            }
+                            else
+                            {
+                                
+                                <option value="@pokemon.Id">@pokemon.PokemonId @pokemon.PokemonName</option>
+                            }
+                            }
+                        </select>
+                    </div>
+                </div>
+
+            <!-- Section 2: Pokemon Rating -->
+                @if (SelectedPokemon != null)
+                {
+                <div class="border rounded p-3 row" >
+                    <div class="d-flex align-top col">
+
+                            <!-- Pokemon Interface -->
+                        <div class="m-1 p-1 col-5" >
+
+                                <!-- Image -->
+                                @if (SelectedPokemon.IsVariation)
+                                {
+                                <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" />
+                                    </div>
+                                </div>
+                                }
+                                else
+                                {
+                                <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" />
+                                    </div>
+                                </div>
+                                }
+                                <div class="row">
+                                <div class="col-7" >
+                                        <!-- Name -->
+                                        <div class="row mb-0">
+                                            @if (SelectedPokemon.IsVariation)   // If a Variant
+                                            {
+                                                <h2 class="">@SelectedPokemon.VariationName @SelectedPokemon.PokemonName</h2>
+                                            }
+                                            else // Otherwise, Base Case
+                                            {
+                                                <h3 class="">@SelectedPokemon.PokemonName</h3>
+                                            }
+                                        </div>
+
+                                        <!-- Pokedex Number -->
+                                        <div  class="mt-0">
+                                            <p class="col-4">Pokédex #<strong>@SelectedPokemon.PokemonId</strong></p>
+                                        </div>
+
+
+                                    </div>
+
+                                    <!-- Pokemon Sleep Stats-->
+                                    <div class="col-5 p-1 ">
+                                    <div class="row d-flex justify-content-between">
+                                            <div class="m-1 col badge @SelectedPokemon.SleepType.ToLower()"><p class="statText">@SelectedPokemon.SleepType</p></div>
+
+                                            <div class="m-1 col badge @SelectedPokemon.Speciality.ToLower()"><p class="statText">@SelectedPokemon.Speciality</p></div>
+
+                                        </div>
+
+                                    </div>
+                                </div>
+
+                            </div>
+
+
+
+                            <!-- Nature / Subskill Selection Dropdowns-->
+                        <div class="m-1 p-1 col " >
+                                <h4 class="mb-3">Select Nature & Subskills</h4>
+
+                                <!-- Nature -->
+                                <div class="row">
+                                    <div class="col-12">
+                                        <label>Select Nature</label>
+                                        <select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
+                                            <option value="" disabled>Choose Nature...</option>
+                                            @foreach (var nature in NatureList)
+                                            {
+                                                <option value="@nature.Id">@nature.Nature</option>
+                                            }
+                                        </select>
+                                    </div>
+                                </div>
+
+                                <!-- Subskills -->
+                                <div class="row">
+                                    <div class="col-4">
+                                        <label for="subskillSelect1">Select Level 10 Subskill</label>
+                                        <select id="subskillSelect1" class="form-control form-control-lg mb-2" @bind="subskillSelect1">
+                                            <option value="" disabled selected>Choose Subskill...</option>
+                                            @foreach (var subskill in SubskillList)
+                                            {
+                                                <option value="@subskill.Id">@subskill.SubSkill</option>
+                                            }
+                                        </select>
+                                    </div>
+                                    <div class="col-4">
+                                        <label for="subskillSelect2">Select Level 25 Subskill</label>
+                                        <select id="subskillSelect2" class="form-control form-control-lg mb-2" @bind="subskillSelect2">
+                                            <option value="" disabled selected>Choose Subskill...</option>
+                                            @foreach (var subskill in SubskillList)
+                                            {
+                                                <option value="@subskill.Id">@subskill.SubSkill</option>
+                                            }
+                                        </select>
+                                    </div>
+                                    <div class="col-4">
+                                        <label for="subskillSelect3">Select Level 50 Subskill</label>
+                                        <select id="subskillSelect3" class="form-control form-control-lg mb-2" @bind="subskillSelect3">
+                                            <option value="" disabled selected>Choose Subskill...</option>
+                                            @foreach (var subskill in SubskillList)
+                                            {
+                                                <option value="@subskill.Id">@subskill.SubSkill</option>
+                                            }
+                                        </select>
+                                    </div>
+                                </div>
+
+                            </div>
+
+                        </div>
+
+                      
+
+                        <div class="d-flex justify-content-between align-items-center mt-3">
+                            <button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
+                            <h4>Final Score: <span>@FinalScore</span></h4>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+}
+
+
+
+
+@code {
+
+    private List<Pokemon> PokemonList;
+    private List<PokemonNature> NatureList;
+    private List<PokemonSubskill> SubskillList;
+
+    private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
+
+
+    private int _selectedPokemonId;
+    private int SelectedPokemonId
+    {
+        get => _selectedPokemonId;
+        set
+        {
+            _selectedPokemonId = value;
+            OnPokemonSelected();
+        }
+    }
+
+    private int SelectedNatureId;
+    private int subskillSelect1;
+    private int subskillSelect2;
+    private int subskillSelect3;
+
+    private int[] SelectedSubskills = new int[3];
+
+    private Pokemon SelectedPokemon;
+
+    private int FinalScore;
+
+    private string PokemonImageUrl => SelectedPokemon != null
+        ? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
+        : string.Empty;
+
+    protected override async Task OnInitializedAsync()
+    {
+        PokemonList = await PokemonService.GetAllPokemonAsync();
+        NatureList = await PokemonNatureService.GetAllPokemonNaturesAsync();
+        SubskillList = await PokemonSubskillService.GetAllPokemonSubskillsAsync();
+
+        if (PokemonList is not null)
+        {
+            
+            PokemonList.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
+
+            // Initialize dictionary with false (show base image first)
+            foreach (var pokemon in PokemonList)
+            {
+                isShiny[pokemon.Id] = false;
+            }
+
+        }
+
+    }
+
+    private async void OnPokemonSelected()
+    {
+        if (SelectedPokemonId > 0)
+        {
+            SelectedPokemon = await PokemonService.GetPokemonByIdAsync(SelectedPokemonId);
+            StateHasChanged(); // Force UI to refresh
+        }
+    }
+
+    private void ToggleImage(int Id)
+    {
+        if (isShiny.ContainsKey(Id))
+        {
+            isShiny[Id] = !isShiny[Id];
+        }
+    }
+
+    private void CalculateScore()
+    {
+        if (SelectedPokemon == null || SelectedNatureId == 0 || subskillSelect1 == 0 || subskillSelect2 == 0 || subskillSelect3 == 0 )
+        {
+            return;
+        }
+
+        var nature = NatureList.FirstOrDefault(n => n.Id == SelectedNatureId);
+        var subskill1 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect1);
+        var subskill2 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect2);
+        var subskill3 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect3);
+
+        if (nature == null || subskill1 == null || subskill2 == null || subskill3 == null)
+        {
+            return;
+        }
+
+        FinalScore = SelectedPokemon.Speciality switch
+        {
+            "Berries" => nature.BerryRating + subskill1.BerryRank + subskill2.BerryRank + subskill3.BerryRank,
+            "Ingredients" => nature.IngredientRating + subskill1.IngredientRank + subskill2.IngredientRank + subskill3.IngredientRank,
+            "Skills" => nature.SkillRating + subskill1.SkillRank + subskill2.SkillRank + subskill3.SkillRank,
+            _ => 0
+        };
+    }
+}

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

@@ -54,6 +54,45 @@
         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>
 
@@ -71,7 +110,7 @@
                         <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> Add New Pokémon
                 </NavLink>
-                <NavLink class="btn btn-primary" style="border-radius: 15px 50px;" href="/pokemonsleep/add-new-pokemon">
+                <NavLink class="btn btn-primary" style="border-radius: 15px 50px;" href="/pokemonsleep/rate-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> Rate Pokémon
@@ -90,7 +129,7 @@
 }
 else
 {
-    <!-- Pokemon Table -->
+    <!-- Main UI -->
     <div class="card shadow border-0 mt-4" style="margin: auto; width: 900px; max-width: 60%; ">
 
         <!-- Table Header -->
@@ -175,10 +214,14 @@ else
                             }
 
                             <!-- Section 4: Sleep Type -->
-                            <td style="vertical-align: auto;">@pokemon.SleepType</td>
+                            <td style="vertical-align: auto;">
+                                <div class="m-1 col-1 badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
+                            </td>
 
                             <!-- Section 5: Speciality -->
-                            <td style="padding-right: 30px; vertical-align: auto;">@pokemon.Speciality</td>
+                            <td style="padding-right: 30px; vertical-align: auto;">
+                                <div class="m-1 col-1 badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
+                            </td>
 
                             <!-- Section 6: Delete Button  -->
                             <td>

Portfolio.WebUI.Server/Components/_Imports.razor

@@ -10,6 +10,10 @@
 @using Portfolio.WebUI.Server.Components
 @using Portfolio.Domain.Features.Articles
 @using Portfolio.Domain.Features.Pokemon
+@using Portfolio.Domain.Features.Pokemon_Natures
+@using Portfolio.Domain.Features.Pokemon_Subskills
 @using Portfolio.Application.Services.Articles
 @using Portfolio.Application.Services.PokemonService
+@using Portfolio.Application.Services.PokemonNatureService
+@using Portfolio.Application.Services.PokemonSubskillService