kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored the UI and made it possible to switch between pokemon; much better.

This commit is contained in:
Kira Jiroux 2025-06-04 17:52:56 -04:00
parent 6c879038f6
commit 9b9a313411
11 changed files with 455 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBackground.razor.cs
View File

@ -25,38 +25,38 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
private List<PokemonImage> _shinyPokemonImages = new List<PokemonImage>();
private Random random = new Random();
protected override async Task OnInitializedAsync()
{
await LoadPokemonBackgrounds();
}
//protected override async Task OnInitializedAsync()
//{
// await LoadPokemonBackgrounds();
//}
private async Task LoadPokemonBackgrounds()
{
//private async Task LoadPokemonBackgrounds()
//{
foreach (var pokemonimgurl in PokemonImages)
{
Console.WriteLine(pokemonimgurl);
_pokemonImages.Add(new PokemonImage
{
Url = pokemonimgurl, // URL retrieved from the database
Left = random.Next(0, 100),
Top = random.Next(0, 100),
Size = random.Next(50, 130),
Rotation = random.Next(0, 360)
});
}
foreach (var pokemonimgurl in ShinyPokemonImages)
{
_shinyPokemonImages.Add(new PokemonImage
{
Url = pokemonimgurl, // URL retrieved from the database
Left = random.Next(0, 100),
Top = random.Next(0, 100),
Size = random.Next(50, 130),
Rotation = random.Next(0, 360)
});
}
}
// foreach (var pokemonimgurl in PokemonImages)
// {
// Console.WriteLine(pokemonimgurl);
// _pokemonImages.Add(new PokemonImage
// {
// Url = pokemonimgurl, // URL retrieved from the database
// Left = random.Next(0, 100),
// Top = random.Next(0, 100),
// Size = random.Next(50, 130),
// Rotation = random.Next(0, 360)
// });
// }
// foreach (var pokemonimgurl in ShinyPokemonImages)
// {
// _shinyPokemonImages.Add(new PokemonImage
// {
// Url = pokemonimgurl, // URL retrieved from the database
// Left = random.Next(0, 100),
// Top = random.Next(0, 100),
// Size = random.Next(50, 130),
// Rotation = random.Next(0, 360)
// });
// }
//}
}

135
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor Normal file
View File

@ -0,0 +1,135 @@
<div class="pokemon-rating-panel">
<!-- Dropdown Selects -->
<div class="ratings bg-light-subtle">
<h3 class="mb-3">Select Nature & Subskills</h3>
<!-- Nature -->
<div class="d-flex justify-content-between align-items-center">
<div>
<label>Select Nature</label>
<select class="form-control form-control select-width" @bind="SelectedNatureId">
<option value="" disabled selected >Choose Nature...</option>
@foreach (var nature in NatureList)
{
<option value="@nature.Id">@nature.Nature</option>
}
</select>
</div>
<div class="text-center score-width">
<h4 class="mt-4">
<span class="text-muted">@lastnaturescore</span>
</h4>
</div>
</div>
<!-- Subskill 1 -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<label for="subskillSelect1">Select Level 10 Subskill</label>
<select id="subskillSelect1" class="form-control form-control select-width" @bind="Subskill1">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
<div class="text-center score-width">
<h4 class="mt-4">
<span class="text-muted">@lastS1score</span>
</h4>
</div>
</div>
<!-- Subskill 2 -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<label for="subskillSelect2">Select Level 25 Subskill</label>
<select id="subskillSelect2" class="form-control form-control select-width" @bind="Subskill2">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
<div class="text-center score-width">
<h4 class="mt-4">
<span class="text-muted">@lastS2score</span>
</h4>
</div>
</div>
<!-- Subskill 3 -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<label for="subskillSelect3">Select Level 50 Subskill</label>
<select id="subskillSelect3" class="form-control form-control select-width" @bind="Subskill3">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
<div class="text-center score-width">
<h4 class="mt-4">
<span class="text-muted">@lastS3score</span>
</h4>
</div>
</div>
<!-- Subskill 4 Disabled -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<label for="subskillSelect4">Select Level 75 Subskill</label>
<select id="subskillSelect4" disabled class="form-control form-control select-width" @bind="Subskill4">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
<div class="text-center score-width">
<h4 class="mt-4">
<span class="text-muted">0</span>
</h4>
</div>
</div>
<!-- Subskill 5 Disabled -->
<div class="d-flex justify-content-between align-items-center mt-3">
<div>
<label for="subskillSelect5">Select Level 100 Subskill</label>
<select id="subskillSelect5" disabled class="form-control form-control mb-2 select-width" @bind="Subskill5">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
<div class="text-center score-width">
<h4 class="mt-4">
<span class="text-muted">0</span>
</h4>
</div>
</div>
<hr/>
<!-- Score Output -->
<div class="d-flex justify-content-between align-items-center mt-3">
<h3>Final Score:</h3>
<div class="p-2 rounded text-center border score-width"
style="background-color:@ScoreBackgroundColor; color:@ScoreColor; ">
@FinalScore
</div>
</div>
</div>
</div>

143
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.cs Normal file
View File

@ -0,0 +1,143 @@
using Microsoft.AspNetCore.Components;
using Portfolio.Domain.Features.Pokemon;
using Portfolio.Domain.Features.Pokemon_Natures;
using Portfolio.Domain.Features.Pokemon_Subskills;
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
{
partial class PokemonRatingPanel
{
[Parameter] public Pokemon PokemonToRate { get; set; }
[Parameter] public List<PokemonNature> NatureList { get; set; } = new();
[Parameter] public List<PokemonSubskill> SubskillList { get; set; } = new();
private int SelectedNatureId;
private int Subskill1;
private int Subskill2;
private int Subskill3;
private int Subskill4;
private int Subskill5;
private int FinalScore;
private string ScoreBackgroundColor = "#FFFFFF";
private string ScoreColor = "#000000";
private int lastNatureId;
private int lastS1, lastS2, lastS3;
private int lastnaturescore, lastS1score, lastS2score, lastS3score;
protected override void OnAfterRender(bool firstRender)
{
if (SelectedNatureId != lastNatureId ||
Subskill1 != lastS1 || Subskill2 != lastS2 || Subskill3 != lastS3)
{
CalculateScore();
lastNatureId = SelectedNatureId;
lastS1 = Subskill1;
lastS2 = Subskill2;
lastS3 = Subskill3;
StateHasChanged();
}
}
protected override void OnParametersSet()
{
CalculateScore();
}
private void CalculateScore()
{
if (PokemonToRate == null || SelectedNatureId == 0 || lastS1 == 0 || lastS2 == 0 || lastS3 == 0)
{
FinalScore = 0;
ScoreBackgroundColor = "#FFFFFF";
ScoreColor = "#000000";
return;
}
var nature = NatureList.FirstOrDefault(n => n.Id == SelectedNatureId);
var s1 = SubskillList.FirstOrDefault(s => s.Id == Subskill1);
var s2 = SubskillList.FirstOrDefault(s => s.Id == Subskill2);
var s3 = SubskillList.FirstOrDefault(s => s.Id == Subskill3);
if (nature == null || s1 == null || s2 == null || s3 == null)
{
FinalScore = 0;
ScoreBackgroundColor = "#FFFFFF";
ScoreColor = "#000000";
return;
}
lastnaturescore = PokemonToRate.Speciality switch
{
"Berries" => nature.BerryRating,
"Ingredients" => nature.IngredientRating,
"Skills" => nature.SkillRating,
_ => 0
};
lastS1score = PokemonToRate.Speciality switch
{
"Berries" => s1.BerryRank,
"Ingredients" => s1.IngredientRank,
"Skills" => s1.SkillRank,
_ => 0
};
Console.WriteLine(lastS1score);
lastS2score = PokemonToRate.Speciality switch
{
"Berries" => s2.BerryRank,
"Ingredients" => s2.IngredientRank,
"Skills" => s2.SkillRank,
_ => 0
};
lastS3score = PokemonToRate.Speciality switch
{
"Berries" => s3.BerryRank,
"Ingredients" => s3.IngredientRank,
"Skills" => s3.SkillRank,
_ => 0
};
FinalScore = PokemonToRate.Speciality switch
{
"Berries" => nature.BerryRating + s1.BerryRank + s2.BerryRank + s3.BerryRank,
"Ingredients" => nature.IngredientRating + s1.IngredientRank + s2.IngredientRank + s3.IngredientRank,
"Skills" => nature.SkillRating + s1.SkillRank + s2.SkillRank + s3.SkillRank,
_ => 0
};
// Set score background based on value
ScoreBackgroundColor = FinalScore switch
{
8 => "#16C47F",
7 => "#33CB8F",
6 => "#50D39F",
5 => "#6DDAAF",
4 => "#8BE2BF",
3 => "#A8E9CF",
2 => "#C5F0DF",
1 => "#E2F8EF",
0 => "#FFFFFF",
-1 => "#FFE7E7",
-2 => "#FED0D0",
-3 => "#FEB8B8",
-4 => "#FDA0A0",
-5 => "#FD8888",
-6 => "#FC7171",
-7 => "#FC5959",
-8 => "#FB4141",
_ => "#FFFFFF"
};
ScoreColor = FinalScore == 0 ? "#000000" : "#FFFFFF";
}
}
}

20
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css Normal file
View File

@ -0,0 +1,20 @@
.pokemon-rating-panel {
gap: 1.5rem;
}
.ratings {
flex: 2;
padding: 1.5rem;
border-radius: 5% / 3.5%;
}
.select-width {
width: 16rem;
}
.score-width {
width: 100px;
}

28
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor Normal file
View File

@ -0,0 +1,28 @@
@using Portfolio.Domain.Features.Pokemon
<!-- Search Input -->
<div class="pokemon-selector p-3 bg-light h-75 mb-5">
<input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
<!-- Scrollable Pokémon Grid -->
<div class="row pokemon-grid" style="max-height: 80vh; overflow-y: auto;">
@foreach (var pokemon in FilteredPokemon)
{
bool isSelected = SelectedPokemon?.Id == pokemon.Id;
<div class="col-6 col-md-3 mb-3">
<div class="card pokemon-card small-card @(isSelected ? "border-primary border-2 shadow" : "border-2 border-white")"
@onclick="() => SelectPokemon(pokemon)">
<img src="@pokemon.PokemonImageUrl" class="card-img-top" style="height: 50px; object-fit: contain;" />
<div class="card-body p-2 text-center">
<small>@pokemon.PokemonId</small>
</div>
</div>
</div>
}
</div>
</div>
<style>
</style>

37
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.cs Normal file
View File

@ -0,0 +1,37 @@
using Microsoft.AspNetCore.Components;
using Portfolio.Domain.Features.Pokemon;
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
{
partial class PokemonSelector
{
[Parameter]
public List<Pokemon> PokemonList { get; set; } = new();
[Parameter]
public Pokemon? SelectedPokemon { get; set; }
[Parameter]
public EventCallback<Pokemon> OnPokemonSelected { get; set; }
private string SearchTerm { get; set; } = string.Empty;
private List<Pokemon> FilteredPokemon =>
string.IsNullOrWhiteSpace(SearchTerm)
? PokemonList
: PokemonList.Where(p =>
p.PokemonName.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
private async Task HandleSearch(ChangeEventArgs e)
{
SearchTerm = e?.Value?.ToString() ?? "";
}
private async Task SelectPokemon(Pokemon pokemon)
{
await OnPokemonSelected.InvokeAsync(pokemon);
}
}
}

23
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css Normal file
View File

@ -0,0 +1,23 @@
.pokemon-card {
cursor: pointer;
transition: transform 0.15s ease-in-out;
}
.pokemon-card:hover {
transform: scale(1.05);
}
.small-card {
font-size: 0.75rem;
}
.pokemon-selector {
height:100%;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 5% / 3.5%;
}
.pokemon-grid {
height: 90%;
}

2
Portfolio.WebUI.Server/Components/Layout/MainLayout.razor
View File

@ -3,7 +3,7 @@
<div class="page bg-primary-subtle">
<main class="h-100 w-100">
<NavMenu3 />
<article class="container w-100 m-auto">
<article class="container m-auto">
@Body
</article>
</main>

172
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor
View File

@ -3,7 +3,7 @@
@inject IPokemonService PokemonService
@inject IPokemonNatureService PokemonNatureService
@inject IPokemonSubskillService PokemonSubskillService
@inject NavigationManager Navigation
@attribute [StreamRendering]
@rendermode InteractiveServer
@ -14,170 +14,42 @@
@if (PokemonList == null || NatureList == null || SubskillList == null)
{
<p>Loading...</p>
<Loading />
}
else
{
<!-- Total Component -->
<div class="w-75 mt-3 m-auto rate-container bg-info ">
<!-- Header -->
<div class="card-header bg-secondary ml-0 py-3 w-100 ">
<div class="mt-4">
<div class="row">
<div class=" text-center">
<h2 class="text-info">Pokémon Rater</h2>
</div>
</div>
<!-- Left Panel: Selector -->
<div class="col-md-4">
<PokemonSelector
PokemonList="PokemonList"
SelectedPokemon="SelectedPokemon"
OnPokemonSelected="SelectPokemon" />
</div>
<!-- Body -->
<div class="p-3 w-100 flex-column ">
<!-- Section 1: Top - Pokemon Selection -->
<div class="row flex-row justify-content-end">
<div class="pokemon-search col">
<div class="position-relative pb-3" >
<!-- Pokemon Selection -->
<input type="text"
class="form-control form-control"
@bind="PokemonSearchTerm"
placeholder="Search Pokémon..."
@oninput="OnSearchTextChanged"
/>
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
<!-- Center Panel: Pokemon View -->
<div class="col">
@if (SelectedPokemon != null)
{
<ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
@foreach (var pokemon in FilteredPokemonList)
{
<li class="list-group-item list-group-item-action" @onclick="() => SelectPokemon(pokemon)">
@if (pokemon.IsVariation)
{
@($"{pokemon.PokemonId} {pokemon.VariationName} {pokemon.PokemonName}")
<PokemonCard Pokemon="SelectedPokemon" />
}
else
{
@($"{pokemon.PokemonId} {pokemon.PokemonName}")
<p class="text-muted">Please select a Pokémon to rate.</p>
}
</li>
}
</ul>
}
</div>
</div>
<div class="col-2">
<button class="btn btn-danger">Clear</button>
</div>
</div>
<!-- Section 2: Bottom - Pokemon -->
@if (SelectedPokemon != null)
{
<div class="row w-100">
<!-- Section 2A: Left Side - Pokemon Card View -->
<div class="col">
<div class="position-relative d-flex justify-content-center">
<PokemonCard Pokemon="SelectedPokemon" />
</div>
</div>
<!-- Section 2B: Right Side - Stat Selection + Form Submission -->
<div class="col">
<h4 class="mb-3">Select Nature & Subskills</h4>
<!-- Nature -->
<div class="">
<div class="">
<label>Select Nature</label>
<select class="form-control form-control-sm 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>
<!-- Subskill 1 -->
<div class="">
<div class="">
<label for="subskillSelect1">Select Level 10 Subskill</label>
<select id="subskillSelect1" class="form-control form-control-sm 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>
<!-- Subskill 2 -->
<div class="">
<div class="">
<label for="subskillSelect2">Select Level 25 Subskill</label>
<select id="subskillSelect2" class="form-control form-control-sm 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>
<!-- Subskill 3 -->
<div class="">
<div class="">
<label for="subskillSelect3">Select Level 50 Subskill</label>
<select id="subskillSelect3" class="form-control form-control-sm 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>
<!-- Subskill 4 Disabled -->
<div class="">
<div class="">
<label for="subskillSelect4">Select Level 75 Subskill</label>
<select id="subskillSelect4" disabled class="form-control form-control-sm mb-2" @bind="subskillSelect4">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
</div>
<!-- Subskill 5 Disabled -->
<div class="">
<div class="">
<label for="subskillSelect5">Select Level 100 Subskill</label>
<select id="subskillSelect5" disabled class="form-control form-control-sm mb-2" @bind="subskillSelect5">
<option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList)
{
<option value="@subskill.Id">@subskill.SubSkill</option>
}
</select>
</div>
</div>
<!-- Calculate Score -->
<div class="">
<div class="d-flex justify-content-between align-items-center mt-3">
<button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
<h4 class="bg-white border border-1 rounded p-2 m-2">
<span class="finalScore rounded" style="background-color: @ScoreBackgroundColor">@FinalScore</span>
</h4>
</div>
</div>
</div>
<!-- Right Panel: Rating View -->
<div class="col-md-4 col-4">
<PokemonRatingPanel
PokemonToRate="SelectedPokemon"
NatureList="NatureList"
SubskillList="SubskillList"
/>
</div>
}
</div>

3
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.cs
View File

@ -58,7 +58,8 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
{
SelectedPokemon = pokemon;
PokemonSearchTerm = string.Empty; // Reset search term
FilteredPokemonList.Clear(); // Clear the filtered list to hide dropdown
StateHasChanged();
//FilteredPokemonList.Clear(); // Clear the filtered list to hide dropdown
}
private async void OnPokemonSelected()

91
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor.css
View File

@ -1,92 +1 @@

.rate-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;
}
.pokemon-search {
width: 95%;
}
.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: 90px;
height: 30px;
color: white;
padding: 4px 8px;
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;
}
.finalScore {
color: white;
padding: 4px 8px;
text-align: center;
vertical-align: middle;
border-radius: 3px;
}