From d977e08650b4089ec419ef923d3fa06e2c147b15 Mon Sep 17 00:00:00 2001 From: Kira Jiroux Date: Mon, 22 Sep 2025 16:13:52 -0400 Subject: [PATCH] Added multi-pokemon adding functionality including proper structuring and UI management; renamed some pages for clarity --- .../Pokemon Components/PokemonAddButton.razor | 19 ++ .../PokemonAddButton.razor.cs | 19 ++ .../PokemonAddButton.razor.css | 22 +++ .../Pokemon Components/PokemonAddForm.razor | 152 ++++++++++++++++ .../PokemonAddForm.razor.cs | 101 +++++++++++ .../PokemonAddForm.razor.css | 28 +++ .../Components/Layout/MainLayout.razor | 4 +- .../Pages/Pokemon Pages/PokemonCreate.razor | 169 +++++++----------- .../Pokemon Pages/PokemonCreate.razor.cs | 106 ++++++++++- .../Pokemon Pages/PokemonCreate.razor.css | 12 +- .../Pokemon Pages/PokemonIndividualView.razor | 93 ++++++++++ .../PokemonIndividualView.razor.cs | 52 ++++++ .../PokemonIndividualView.razor.css | 9 + .../Pages/Pokemon Pages/PokemonSleep.razor | 62 ++++++- .../Pages/Pokemon Pages/PokemonSleep.razor.cs | 30 ---- .../Pokemon Pages/PokemonSleep.razor.css | 93 ---------- .../Pokemon Pages/PokemonSleepHome.razor | 67 ------- .../Pages/Pokemon Pages/PokemonView.razor | 90 ++-------- .../Pages/Pokemon Pages/PokemonView.razor.cs | 54 ++---- .../Pages/Pokemon Pages/PokemonView.razor.css | 100 ++++++++++- 20 files changed, 838 insertions(+), 444 deletions(-) create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.cs create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.css create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs create mode 100644 Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css create mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor create mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.cs create mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor.css delete mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.cs delete mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor.css delete mode 100644 Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleepHome.razor diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor new file mode 100644 index 0000000..ce93321 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor @@ -0,0 +1,19 @@ +
+ +
+ + + +
+
+@code { + +} diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.cs new file mode 100644 index 0000000..7bfcf4a --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.cs @@ -0,0 +1,19 @@ +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components; + +namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components +{ + public partial class PokemonAddButton + { + [Parameter] + public EventCallback OnAdd { get; set; } + [Parameter] + public int IconSize { get; set; } = 64; + + private async Task HandleClick() + { + await OnAdd.InvokeAsync(); + } + + } +} diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.css new file mode 100644 index 0000000..bc3c476 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddButton.razor.css @@ -0,0 +1,22 @@ +.add-card { + min-width: 160px; + min-height: 120px; + max-width: 200px; + cursor: pointer; + background-color: var(--bs-info-subtle); + transition: transform .08s ease, box-shadow .08s ease, background-color .08s ease; +} + + .add-card:hover { + background-color: var(--bs-light); + transform: translateY(-1px); + } + + .add-card:focus { + outline: none; + box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); + } + + .add-card[aria-disabled="true"] { + cursor: not-allowed; + } diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor new file mode 100644 index 0000000..b4cbef9 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor @@ -0,0 +1,152 @@ +@inject IPokemonService PokemonService + + +
+ + + +

New Pokemon

+ + +
+
+ # + + +
+
+ + +
+ + Variation? +
+ + +
+ + +
+
+ Pokemon Type + + + @foreach (var pt in PokemonTypes) + { + + } + +
+ +
+ + +
+ +
+
+ Sleep Type +
+
+ + + @foreach (var st in SleepTypes) + { + + } + +
+
+ +
+
+ Specialty +
+
+ + + @foreach (var sp in Specialities) + { + + } + +
+
+
+ + +
+ + +
+
+ Base Image URL + +
+
+
+
+ Shiny Image URL + +
+
+ + +
+
+ Flavor Text + +
+
+ + +
+ + @if (showErrors && !IsComplete) + { +
+ Please complete: @string.Join(", ", MissingFields()) +
+ } + +
+ + @if(mostRecentForm) + { + + } +
+ +
+ diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs new file mode 100644 index 0000000..2e24639 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.cs @@ -0,0 +1,101 @@ +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.EntityFrameworkCore.Metadata.Internal; +using Portfolio.Application.Services.PokemonService; +using Portfolio.Domain.Features.Pokemon; + +namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components +{ + public partial class PokemonAddForm + { + [Parameter] + public EventCallback OnPokemonReady { get; set; } + [Parameter] + public EventCallback RemoveForm { get; set; } + [Parameter] + public bool mostRecentForm { get; set; } + + protected static readonly string[] PokemonTypes = new[] + { + "Grass","Fire","Water","Normal","Flying","Bug","Poison","Electric","Ground","Rock","Ice", + "Steel","Fighting","Psychic","Dark","Fairy","Ghost","Dragon" + }; + protected static readonly string[] SleepTypes = new[] { "Dozing", "Snoozing", "Slumbering" }; + protected static readonly string[] Specialities = new[] { "Berries", "Ingredients", "Skills", "All" }; + + + private bool HideLabel { get; set; } = true; + private bool showErrors { get; set; } = false; + + private Pokemon NewPokemon = new Pokemon + { + PokemonId = 0, // Or any default ID logic + PokemonName = string.Empty, // Required fields cannot be null + SleepType = string.Empty, + Speciality = string.Empty, + IsVariation = false + }; + + private void Toggle() => HideLabel = !HideLabel; + + + private string GetRoundingClass() + { + if (!HideLabel) { + return "rounded-start"; + } + return "rounded-start rounded-end"; + } + + // Minimal "complete" check (no data annotations needed) + private bool IsComplete => + 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 IEnumerable MissingFields() + { + if (NewPokemon.PokemonId <= 0) yield return "Pokédex #"; + if (string.IsNullOrWhiteSpace(NewPokemon.PokemonName)) yield return "Name"; + if (string.IsNullOrWhiteSpace(NewPokemon.PokemonType)) yield return "Type"; + if (string.IsNullOrWhiteSpace(NewPokemon.SleepType)) yield return "Sleep Type"; + if (string.IsNullOrWhiteSpace(NewPokemon.Speciality)) yield return "Specialty"; + if (NewPokemon.IsVariation && string.IsNullOrWhiteSpace(NewPokemon.VariationName)) yield return "Variation Name"; + } + + private async Task HandleRemove() + { + await RemoveForm.InvokeAsync(); + } + + private async Task SendPokemon() + { + if (!IsComplete) + { + showErrors = true; + StateHasChanged(); + return; + } + + // Optionally send a copy to avoid later mutation by the child + var copy = new Pokemon + { + PokemonId = NewPokemon.PokemonId, + PokemonName = NewPokemon.PokemonName, + PokemonType = NewPokemon.PokemonType, + SleepType = NewPokemon.SleepType, + Speciality = NewPokemon.Speciality, + IsVariation = NewPokemon.IsVariation, + VariationName = NewPokemon.VariationName, + PokemonImageUrl = NewPokemon.PokemonImageUrl, + PokemonShinyImageUrl = NewPokemon.PokemonShinyImageUrl, + FlavorText = NewPokemon.FlavorText + }; + + await OnPokemonReady.InvokeAsync(copy); + } + } +} diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css new file mode 100644 index 0000000..8a32a45 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonAddForm.razor.css @@ -0,0 +1,28 @@ + +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem +); + +.create-container { + position: relative; + width: 100%; + max-width: 390px; /* Prevent it from getting too huge */ + aspect-ratio: 3 / 4; /* Maintains card shape dynamically */ + background-color: var(--bg-color); + border-width: .5rem; + border-style: solid; + border-radius: 5% / 3.5%; + border-color: var(--border-color); + box-shadow: 0 0 10px var(--border-color); +} + +.checkbox-styling { + width: 100px; + height: 100px; + +} \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor index a429c24..1a12d1b 100644 --- a/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor +++ b/Portfolio.WebUI.Server/Components/Layout/MainLayout.razor @@ -3,11 +3,9 @@
-
-
+
@Body
-
@* *@
diff --git a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor index 2ee6201..305bb05 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor @@ -3,6 +3,8 @@ @inject IPokemonService PokemonService @inject NavigationManager Navigation +@inject IJSRuntime JS + @attribute [StreamRendering] @rendermode InteractiveServer @@ -17,119 +19,68 @@ } else { -
+
+
+
+ +
+
+ +
+
+ + + @if(!pokemon2FormView && !pokemon3FormView) + { +
+ +
+ } + + else if (pokemon2FormView && !pokemon3FormView) + { +
+
+ +
+
+
+ +
+ } + + else if (!pokemon2FormView && pokemon3FormView) + { +
+
+ +
+
+
+
+ +
+
+ } -
-
-

Add New Pokémon

+
- - -
- - - - -
-
- - # - - - -
-
- - -
- -
- - - - - - - - - - - - - - - - - - - - - - -
- -
- - - - - - -
- -
- - - - - - - -
-
- - -
-
- -
- - Variation? -
- - -
- -
-
-
- - -
- - -
- -
- - -
- - -
- - -
- - -
- - -
- +
+
+
+
} + 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. +

+
+ + +
+ + + +
-
\ 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. -

-
- - -
- - - -
- - -
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 */ +} +