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

2025-04-04 15:35:49 -04:00 · 2025-04-04 15:35:49 -04:00 · dd9b0006d3
parent 0f235895f4
commit dd9b0006d3
15 changed files with 500 additions and 48 deletions
--- a/Portfolio.Domain/Features/Pokemon/Pokemon.cs
+++ b/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; }

    }

--- a/Portfolio.Infrastructure/Migrations/20250404172651_include_pokemon_type.Designer.cs
+++ b/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
+        }
+    }
+}
--- a/Portfolio.Infrastructure/Migrations/20250404172651_include_pokemon_type.cs
+++ b/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");
+        }
+    }
+}
--- a/Portfolio.Infrastructure/Migrations/20250404173359_include_flavortext.Designer.cs
+++ b/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
+        }
+    }
+}
--- a/Portfolio.Infrastructure/Migrations/20250404173359_include_flavortext.cs
+++ b/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");
+        }
+    }
+}
--- a/Portfolio.Infrastructure/Migrations/ApplicationDbContextModelSnapshot.cs
+++ b/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)");
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
+++ b/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">
-        <p class="">[ Pokemon Flavor Text Placeholder ]</p>
+        @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 -->
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs
+++ b/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";
+        }
+
+
    }
 }
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
+++ b/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;
--- a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor
+++ b/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" scope="col">#</th>
-                        <th class="text-bg-info" scope="col">Pokemon</th>
-                        <th class="text-bg-info" scope="col">Sleep Type</th>
-                        <th class="text-bg-info" scope="col">Speciality</th>
-                        <th class="text-bg-info" scope="col"></th>
+                        <th class="text-bg-info col col-2" scope="col"></th>
+                        <th class="text-bg-info col pokemon-dex-width" scope="col">#</th>
+                        <th class="text-bg-info col pokemon-name-width" scope="col">Pokemon</th>
+                        <th class="text-bg-info col pokemon-type-width" scope="col">Type</th>
+                        <th class="text-bg-info col pokemon-type-width" scope="col">Sleep Type</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">
--- a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.cs
+++ b/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";
+        }
+
    }
 }
--- a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor.css
+++ b/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%;
+}
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor
+++ b/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor
@ -14,8 +14,11 @@
 }
 else
 {
-    <div class="w-50 mt-5 m-auto create-container">
-        <div class="card-header bg-secondary bg-gradient ml-0 py-3">
+    <!-- Total Componenet-->
+    <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,23 +39,51 @@ else
                    </div>
                </div>

-                <div class="row 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>
-                        <option value="Snoozing">Snoozing</option>
-                        <option value="Slumbering">Slumbering</option>
-                    </InputSelect>
+                <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>
+                            <option value="Snoozing">Snoozing</option>
+                            <option value="Slumbering">Slumbering</option>
+                        </InputSelect>
+                    </div>
+
+                    <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>
+                            <option value="Ingredients">Ingredients</option>
+                            <option value="Skills">Skills</option>
+                        </InputSelect>
+                    </div>
                </div>
                
-                <div class="row 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>
-                        <option value="Ingredients">Ingredients</option>
-                        <option value="Skills">Skills</option>
-                    </InputSelect>
-                </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");
-    }
 }
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor.cs
+++ b/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");
+        }
+    }
+}
--- a/Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor.css
+++ b/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;
+}