Serving up Pokemon Types and Flavor Text, adjustments made where necessary.

Portfolio.Domain/Features/Pokemon/Pokemon.cs

@@ -13,10 +13,12 @@ namespace Portfolio.Domain.Features.Pokemon
         public required string PokemonName { get; set; }
         public bool IsVariation { get; set; } = false;
         public string? VariationName { get; set; }
+        public string? PokemonType { get; set; }
         public required string SleepType { get; set; }
         public required string Speciality { get; set; }
         public string? PokemonImageUrl { get; set; }
         public string? PokemonShinyImageUrl { get; set; }
+        public string? FlavorText { get; set; }
 
     }
 

Portfolio.Infrastructure/Migrations/20250404172651_include_pokemon_type.Designer.cs

@@ -0,0 +1,124 @@
+// <auto-generated />
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Portfolio.Infrastructure;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20250404172651_include_pokemon_type")]
+    partial class include_pokemon_type
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.2")
+                .HasAnnotation("Relational:MaxIdentifierLength", 128);
+
+            SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder);
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon.Pokemon", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<bool>("IsVariation")
+                        .HasColumnType("bit");
+
+                    b.Property<int>("PokemonId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("PokemonImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonName")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonShinyImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonType")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("SleepType")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("Speciality")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("VariationName")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Pokemons");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Natures.PokemonNature", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRating")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRating")
+                        .HasColumnType("int");
+
+                    b.Property<string>("Nature")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<int>("SkillRating")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonNatures");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Subskills.PokemonSubskill", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("SkillRank")
+                        .HasColumnType("int");
+
+                    b.Property<string>("SubSkill")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonSubskills");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/20250404172651_include_pokemon_type.cs

@@ -0,0 +1,28 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    /// <inheritdoc />
+    public partial class include_pokemon_type : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "PokemonType",
+                table: "Pokemons",
+                type: "nvarchar(max)",
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "PokemonType",
+                table: "Pokemons");
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/20250404173359_include_flavortext.Designer.cs

@@ -0,0 +1,127 @@
+// <auto-generated />
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Metadata;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Portfolio.Infrastructure;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    [DbContext(typeof(ApplicationDbContext))]
+    [Migration("20250404173359_include_flavortext")]
+    partial class include_flavortext
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "9.0.2")
+                .HasAnnotation("Relational:MaxIdentifierLength", 128);
+
+            SqlServerModelBuilderExtensions.UseIdentityColumns(modelBuilder);
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon.Pokemon", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<string>("FlavorText")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<bool>("IsVariation")
+                        .HasColumnType("bit");
+
+                    b.Property<int>("PokemonId")
+                        .HasColumnType("int");
+
+                    b.Property<string>("PokemonImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonName")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonShinyImageUrl")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("PokemonType")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("SleepType")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("Speciality")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<string>("VariationName")
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("Pokemons");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Natures.PokemonNature", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRating")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRating")
+                        .HasColumnType("int");
+
+                    b.Property<string>("Nature")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.Property<int>("SkillRating")
+                        .HasColumnType("int");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonNatures");
+                });
+
+            modelBuilder.Entity("Portfolio.Domain.Features.Pokemon_Subskills.PokemonSubskill", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("int");
+
+                    SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
+
+                    b.Property<int>("BerryRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("IngredientRank")
+                        .HasColumnType("int");
+
+                    b.Property<int>("SkillRank")
+                        .HasColumnType("int");
+
+                    b.Property<string>("SubSkill")
+                        .IsRequired()
+                        .HasColumnType("nvarchar(max)");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PokemonSubskills");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/20250404173359_include_flavortext.cs

@@ -0,0 +1,28 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Portfolio.Infrastructure.Migrations
+{
+    /// <inheritdoc />
+    public partial class include_flavortext : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "FlavorText",
+                table: "Pokemons",
+                type: "nvarchar(max)",
+                nullable: true);
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "FlavorText",
+                table: "Pokemons");
+        }
+    }
+}

Portfolio.Infrastructure/Migrations/ApplicationDbContextModelSnapshot.cs

@@ -29,6 +29,9 @@ namespace Portfolio.Infrastructure.Migrations
 
                     SqlServerPropertyBuilderExtensions.UseIdentityColumn(b.Property<int>("Id"));
 
+                    b.Property<string>("FlavorText")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<bool>("IsVariation")
                         .HasColumnType("bit");
 
@@ -45,6 +48,9 @@ namespace Portfolio.Infrastructure.Migrations
                     b.Property<string>("PokemonShinyImageUrl")
                         .HasColumnType("nvarchar(max)");
 
+                    b.Property<string>("PokemonType")
+                        .HasColumnType("nvarchar(max)");
+
                     b.Property<string>("SleepType")
                         .IsRequired()
                         .HasColumnType("nvarchar(max)");

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

@@ -2,7 +2,7 @@
 @rendermode InteractiveServer
 
 <div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
-    <!-- Pokemon Name and Number -->
+    <!-- Pokemon Name, Number, and Type -->
     <div class="z-3">
         @if (_pokemon.IsVariation) 
         {
@@ -15,6 +15,9 @@
         <div class="pokemon-number">
             <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
         </div>
+        <div >
+            <img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
+        </div>
     </div>
 
     <!-- Pokemon Image -->
@@ -26,7 +29,16 @@
     </div>
 
     <div class="bg-info-subtle border rounded border-2 border-info pokemon-flavor-text">
+        @if (string.IsNullOrEmpty(_pokemon.FlavorText))
+        {
             <p class="">[ Pokemon Flavor Text Placeholder ]</p>
+
+        }
+        else
+        {
+            <p class="fw-light ">@_pokemon.FlavorText</p>
+
+        }
     </div>
 
     <!-- Pokemon Sleep Type and Specialty Badges -->

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

@@ -26,5 +26,17 @@ namespace Portfolio.WebUI.Server.Components.Component
             isShiny = !isShiny;
             StateHasChanged();
         }
+
+        private string GetTypeImageUrl(string pokemonType)
+        {
+            if (string.IsNullOrEmpty(pokemonType))
+            {
+                return "https://www.serebii.net/pokemonsleep/pokemon/type/normal.png"; // Fallback image
+            }
+
+            return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
+        }
+
+
     }
 }

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

@@ -21,12 +21,22 @@
     position: absolute;
     top: 0 !important;
     left: 0 !important;
-    margin-top: 3rem !important;
+    margin-top: 3.3rem !important;
     margin-left: 1.5rem !important;
     transform: translateY(-50%) !important;
     font-size: .75rem;
 }
 
+.pokemon-type {
+    position: absolute;
+    top: 0 !important;
+    right: 0 !important;
+    width: 2.5rem;
+    height: 2.5rem;
+    margin-top: .5rem !important;
+    margin-right: .5rem !important;
+}
+
 .pokemon-image {
     width: 100%; /* Look to flip-container for the width/height of image */
     height: 100%;
@@ -41,11 +51,29 @@
     left: 50% !important;
     width: 90%;
     height: 20%;
-    padding: 0.5rem;
+    padding: 0.25rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
     margin-top: 3rem !important;
     transform: translateX(-50%) !important;
+
+    display: flex; /* Centers text inside */
+    align-items: start;
+    justify-content: center; /* Horizontally centers text */
+    overflow: hidden; /* Ensures no scrollbar */
 }
 
+    .pokemon-flavor-text p {
+        margin: 0;
+        width: 100%;
+        text-align: start;
+        font-size: min(14px, 1.5vw); /* Scales font but won't exceed 14px */
+        line-height: 1.2; /* Adjust spacing for readability */
+        white-space: normal; /* Ensures wrapping */
+        word-wrap: break-word;
+        hyphens: auto;
+    }
+
 .flip-container {
     position: absolute !important;
     top: 40% !important;

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

@@ -33,12 +33,13 @@ else
                 <!-- Table Head -->
                 <thead>
                     <tr>
-                        <th class="text-bg-info" scope="col"></th>
+                        <th class="text-bg-info col col-2" scope="col"></th>
-                        <th class="text-bg-info" scope="col">#</th>
+                        <th class="text-bg-info col pokemon-dex-width" scope="col">#</th>
-                        <th class="text-bg-info" scope="col">Pokemon</th>
+                        <th class="text-bg-info col pokemon-name-width" scope="col">Pokemon</th>
-                        <th class="text-bg-info" scope="col">Sleep Type</th>
+                        <th class="text-bg-info col pokemon-type-width" scope="col">Type</th>
-                        <th class="text-bg-info" scope="col">Speciality</th>
+                        <th class="text-bg-info col pokemon-type-width" scope="col">Sleep Type</th>
-                        <th class="text-bg-info" scope="col"></th>
+                        <th class="text-bg-info col pokemon-type-width" scope="col">Speciality</th>
+                        <th class="text-bg-info col pokemon-type-width" scope="col"></th>
                     </tr>
                 </thead>
 
@@ -94,17 +95,25 @@ else
                                 <td style="vertical-align: auto;"> @pokemon.PokemonName</td>
                             }
 
-                            <!-- Section 4: Sleep Type -->
+
+                            <!-- Section 4: Pokemon Type -->
+                            <td >
+                                <div class="m-1 col-1" >
+                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" class="" style="width:60px; height:60px;" />
+                                </div>
+                            </td>
+
+                            <!-- Section 5: Sleep Type -->
                             <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 -->
+                            <!-- Section 6: Speciality -->
                             <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: Functional Buttons  -->
+                            <!-- Section 7: Functional Buttons  -->
                             <td>
                                 <button class="btn btn-warning" @onclick="() => EditPokemon(pokemon.Id)">
                                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">

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

@@ -54,5 +54,16 @@ namespace Portfolio.WebUI.Server.Components.Component
         {
             Navigation.NavigateTo($"/pokemonsleep/edit/{id}");
         }
+
+        private string GetTypeImageUrl(string pokemonType)
+        {
+            if (string.IsNullOrEmpty(pokemonType))
+            {
+                return "https://www.serebii.net/pokemonsleep/pokemon/type/normal.png"; // Fallback image
+            }
+
+            return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
+        }
+
     }
 }

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

@@ -94,3 +94,14 @@
 }
 
 
+.pokemon-dex-width {
+    width:3%;
+}
+
+.pokemon-name-width {
+    width:10%;
+}
+
+.pokemon-type-width {
+    width:5%;
+}

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

@@ -14,8 +14,11 @@
 }
 else
 {
-    <div class="w-50 mt-5 m-auto create-container">
+    <!-- Total Componenet-->
-        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
+    <div class="w-50 mt-3 m-auto bg-info edit-container">
+
+        <!-- Header -->
+        <div class="card-header bg-secondary ml-0 py-3 w-100 ">
             <div class="row">
                 <div class="col-12 text-center">
                     <h2 class="text-info">Edit Pokémon</h2>
@@ -23,7 +26,8 @@ else
             </div>
         </div>
 
-        <div class="container m-lg-1">
+        <!-- Body -->
+        <div class="p-3 w-100 flex-column ">
             <EditForm class="col mb-3" Model="pokemon" OnValidSubmit="HandleSubmit">
                 <DataAnnotationsValidator />
 
@@ -35,7 +39,33 @@ else
                     </div>
                 </div>
 
-                <div class="row mb-3 m-auto">
+                <div class="row">
+                    <div class="col mb-3 m-auto">
+                        <label for="PokemonType" class="form-label">Pokemon Type</label>
+                        <InputSelect id="PokemonType" @bind-Value="pokemon.PokemonType" class="form-select">
+                            <option dsabled value="">Select Type</option>
+                            <option value="Grass">Grass</option>
+                            <option value="Fire">Fire</option>
+                            <option value="Water">Water</option>
+                            <option value="Normal">Normal</option>
+                            <option value="Flying">Flying</option>
+                            <option value="Bug">Bug</option>
+                            <option value="Poison">Poison</option>
+                            <option value="Electric">Electric</option>
+                            <option value="Ground">Ground</option>
+                            <option value="Rock">Rock</option>
+                            <option value="Ice">Ice</option>
+                            <option value="Steel">Steel</option>
+                            <option value="Fighting">Fighting</option>
+                            <option value="Psychic">Psychic</option>
+                            <option value="Dark">Dark</option>
+                            <option value="Fairy">Fairy</option>
+                            <option value="Ghost">Ghost</option>
+                            <option value="Dragon">Dragon</option>
+                        </InputSelect>
+                    </div>
+
+                    <div class="col mb-3 m-auto">
                         <label for="SleepType" class="form-label">Sleep Type</label>
                         <InputSelect id="SleepType" @bind-Value="pokemon.SleepType" class="form-select">
                             <option value="Dozing">Dozing</option>
@@ -44,7 +74,7 @@ else
                         </InputSelect>
                     </div>
 
-                <div class="row mb-3 m-auto">
+                    <div class="col mb-3 m-auto">
                         <label for="Speciality" class="form-label">Specialty</label>
                         <InputSelect id="Speciality" @bind-Value="pokemon.Speciality" class="form-select">
                             <option value="Berries">Berries</option>
@@ -52,6 +82,8 @@ else
                             <option value="Skills">Skills</option>
                         </InputSelect>
                     </div>
+                </div>
+                
 
                 <!-- New Image URL Field -->
                 <div class="row mb-3 m-auto">
@@ -63,6 +95,11 @@ else
                     <InputText id="ImageUrl" @bind-Value="pokemon.PokemonShinyImageUrl" class="form-control" />
                 </div>
 
+                <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 />
+                </div>
+
                 <button type="submit" class="btn btn-primary mb-3">Save Changes</button>
                 <button type="button" class="btn btn-secondary mb-3" @onclick="Cancel">Cancel</button>
             </EditForm>
@@ -71,22 +108,5 @@ else
 }
 
 @code {
-    [Parameter] public int Id { get; set; }
-    private Pokemon? pokemon;
 
-    protected override async Task OnInitializedAsync()
-    {
-        pokemon = await PokemonService.GetPokemonByIdAsync(Id);
-    }
-
-    private async Task HandleSubmit()
-    {
-        await PokemonService.UpdatePokemonAsync(pokemon);
-        Navigation.NavigateTo("/pokemonsleep");
-    }
-
-    private void Cancel()
-    {
-        Navigation.NavigateTo("/pokemonsleep");
-    }
 }

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

@@ -0,0 +1,27 @@
+using Microsoft.AspNetCore.Components;
+using Portfolio.Domain.Features.Pokemon;
+
+namespace Portfolio.WebUI.Server.Components.Pages
+{
+    public partial class PokemonEdit
+    {
+        [Parameter] public int Id { get; set; }
+        private Pokemon? pokemon;
+
+        protected override async Task OnInitializedAsync()
+        {
+            pokemon = await PokemonService.GetPokemonByIdAsync(Id);
+        }
+
+        private async Task HandleSubmit()
+        {
+            await PokemonService.UpdatePokemonAsync(pokemon);
+            Navigation.NavigateTo("/pokemonsleep");
+        }
+
+        private void Cancel()
+        {
+            Navigation.NavigateTo("/pokemonsleep");
+        }
+    }
+}

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

@@ -0,0 +1,7 @@
+body {
+}
+
+.edit-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;
+}