Became more of a searchable field with viewable dropdown options, but I'm happy with it.
This commit is contained in:
Kira Jiroux
parent
536d28a54b
commit
2a01c2fae2
|
|
@ -8,7 +8,6 @@
|
||||||
@attribute [StreamRendering]
|
@attribute [StreamRendering]
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
|
|
||||||
<PageTitle>Rate Pokémon</PageTitle>
|
<PageTitle>Rate Pokémon</PageTitle>
|
||||||
|
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||||
|
|
@ -19,333 +18,159 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
||||||
{
|
{
|
||||||
<p>Loading...</p>
|
<p>Loading...</p>
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="w-75 mt-3 m-auto " style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
|
<div class="w-75 mt-3 m-auto" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">
|
||||||
|
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 text-center">
|
<div class="col-12 text-center">
|
||||||
<h2 class="text-info">Pokémon Rater</h2>
|
<h2 class="text-info">Pokémon Rater</h2>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section 1: Pokemon Selection -->
|
|
||||||
<div class="card-body p-4 col-12" >
|
|
||||||
<div class="row pb-3">
|
|
||||||
<div class="col-3">
|
|
||||||
<label for="pokemonSelect">Select Pokémon</label>
|
|
||||||
<select class="form-control form-control-lg" @bind="SelectedPokemonId" placeholder="Choose your Pokémon...">
|
|
||||||
<option value="" disabled selected>Choose your Pokémon...</option>
|
|
||||||
@foreach (var pokemon in PokemonList)
|
|
||||||
{
|
|
||||||
if(pokemon.IsVariation)
|
|
||||||
{
|
|
||||||
<option value="@pokemon.Id">@pokemon.PokemonId @pokemon.VariationName @pokemon.PokemonName</option>
|
|
||||||
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
|
|
||||||
<option value="@pokemon.Id">@pokemon.PokemonId @pokemon.PokemonName</option>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Section 2: Pokemon Rating -->
|
|
||||||
@if (SelectedPokemon != null)
|
|
||||||
{
|
|
||||||
<div class="border rounded p-3 row" >
|
|
||||||
<div class="d-flex align-top col">
|
|
||||||
|
|
||||||
<!-- Pokemon Interface -->
|
|
||||||
<div class="m-1 p-1 col-5" >
|
|
||||||
|
|
||||||
<!-- Image -->
|
|
||||||
@if (SelectedPokemon.IsVariation)
|
|
||||||
{
|
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
|
|
||||||
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
|
|
||||||
<img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
|
|
||||||
|
|
||||||
<img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
|
|
||||||
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
|
|
||||||
<img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
|
|
||||||
|
|
||||||
<img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-7" >
|
|
||||||
<!-- Name -->
|
|
||||||
<div class="row mb-0">
|
|
||||||
@if (SelectedPokemon.IsVariation) // If a Variant
|
|
||||||
{
|
|
||||||
<h2 class="">@SelectedPokemon.VariationName @SelectedPokemon.PokemonName</h2>
|
|
||||||
}
|
|
||||||
else // Otherwise, Base Case
|
|
||||||
{
|
|
||||||
<h3 class="">@SelectedPokemon.PokemonName</h3>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pokedex Number -->
|
|
||||||
<div class="mt-0">
|
|
||||||
<p class="col-4">Pokédex #<strong>@SelectedPokemon.PokemonId</strong></p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Pokemon Sleep Stats-->
|
|
||||||
<div class="col-5 p-1 ">
|
|
||||||
<div class="row d-flex justify-content-between">
|
|
||||||
<div class="m-1 col badge @SelectedPokemon.SleepType.ToLower()"><p class="statText">@SelectedPokemon.SleepType</p></div>
|
|
||||||
|
|
||||||
<div class="m-1 col badge @SelectedPokemon.Speciality.ToLower()"><p class="statText">@SelectedPokemon.Speciality</p></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Nature / Subskill Selection Dropdowns-->
|
|
||||||
<div class="m-1 p-1 col " >
|
|
||||||
<h4 class="mb-3">Select Nature & Subskills</h4>
|
|
||||||
|
|
||||||
<!-- Nature -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-12">
|
|
||||||
<label>Select Nature</label>
|
|
||||||
<select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
|
|
||||||
<option value="" disabled>Choose Nature...</option>
|
|
||||||
@foreach (var nature in NatureList)
|
|
||||||
{
|
|
||||||
<option value="@nature.Id">@nature.Nature</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subskills -->
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-4">
|
|
||||||
<label for="subskillSelect1">Select Level 10 Subskill</label>
|
|
||||||
<select id="subskillSelect1" class="form-control form-control-lg mb-2" @bind="subskillSelect1">
|
|
||||||
<option value="" disabled selected>Choose Subskill...</option>
|
|
||||||
@foreach (var subskill in SubskillList)
|
|
||||||
{
|
|
||||||
<option value="@subskill.Id">@subskill.SubSkill</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-4">
|
|
||||||
<label for="subskillSelect2">Select Level 25 Subskill</label>
|
|
||||||
<select id="subskillSelect2" class="form-control form-control-lg mb-2" @bind="subskillSelect2">
|
|
||||||
<option value="" disabled selected>Choose Subskill...</option>
|
|
||||||
@foreach (var subskill in SubskillList)
|
|
||||||
{
|
|
||||||
<option value="@subskill.Id">@subskill.SubSkill</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="col-4">
|
|
||||||
<label for="subskillSelect3">Select Level 50 Subskill</label>
|
|
||||||
<select id="subskillSelect3" class="form-control form-control-lg mb-2" @bind="subskillSelect3">
|
|
||||||
<option value="" disabled selected>Choose Subskill...</option>
|
|
||||||
@foreach (var subskill in SubskillList)
|
|
||||||
{
|
|
||||||
<option value="@subskill.Id">@subskill.SubSkill</option>
|
|
||||||
}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Calculate -->
|
|
||||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
|
||||||
<button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
|
|
||||||
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
|
||||||
|
|
||||||
|
<div class="card-body p-4 col-12">
|
||||||
|
<!-- Section 1: Pokemon Selection -->
|
||||||
|
<div class="row pb-3">
|
||||||
|
<div class="col-3">
|
||||||
|
<div class="position-relative">
|
||||||
|
<input type="text"
|
||||||
|
class="form-control form-control-lg"
|
||||||
|
@bind="PokemonSearchTerm"
|
||||||
|
placeholder="Search Pokémon..."
|
||||||
|
@oninput="OnSearchTextChanged" />
|
||||||
|
|
||||||
|
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
|
||||||
|
{
|
||||||
|
<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}")
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
@($"{pokemon.PokemonId} {pokemon.PokemonName}")
|
||||||
|
}
|
||||||
|
</li>
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Section 2: Pokemon Rating -->
|
||||||
@code {
|
@if (SelectedPokemon != null)
|
||||||
|
|
||||||
private List<Pokemon> PokemonList;
|
|
||||||
private List<PokemonNature> NatureList;
|
|
||||||
private List<PokemonSubskill> SubskillList;
|
|
||||||
|
|
||||||
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
|
||||||
|
|
||||||
|
|
||||||
private int _selectedPokemonId;
|
|
||||||
private int SelectedPokemonId
|
|
||||||
{
|
|
||||||
get => _selectedPokemonId;
|
|
||||||
set
|
|
||||||
{
|
|
||||||
_selectedPokemonId = value;
|
|
||||||
OnPokemonSelected();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private int SelectedNatureId;
|
|
||||||
private int subskillSelect1;
|
|
||||||
private int subskillSelect2;
|
|
||||||
private int subskillSelect3;
|
|
||||||
|
|
||||||
private int[] SelectedSubskills = new int[3];
|
|
||||||
|
|
||||||
private Pokemon SelectedPokemon;
|
|
||||||
|
|
||||||
private int FinalScore;
|
|
||||||
private string ScoreBackgroundColor;
|
|
||||||
private string ScoreColor;
|
|
||||||
|
|
||||||
private string PokemonImageUrl => SelectedPokemon != null
|
|
||||||
? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
|
|
||||||
: string.Empty;
|
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
|
||||||
{
|
|
||||||
PokemonList = await PokemonService.GetAllPokemonAsync();
|
|
||||||
NatureList = await PokemonNatureService.GetAllPokemonNaturesAsync();
|
|
||||||
SubskillList = await PokemonSubskillService.GetAllPokemonSubskillsAsync();
|
|
||||||
|
|
||||||
if (PokemonList is not null)
|
|
||||||
{
|
|
||||||
|
|
||||||
PokemonList.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
|
|
||||||
|
|
||||||
// Initialize dictionary with false (show base image first)
|
|
||||||
foreach (var pokemon in PokemonList)
|
|
||||||
{
|
{
|
||||||
isShiny[pokemon.Id] = false;
|
<div class="border rounded p-3 row">
|
||||||
|
<div class="d-flex align-top col">
|
||||||
|
<!-- Pokemon Interface -->
|
||||||
|
<div class="m-1 p-1 col-5">
|
||||||
|
<!-- Image and other Pokemon info -->
|
||||||
|
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
|
||||||
|
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
|
||||||
|
<img class="front" src="/pokemon_images/normal/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
|
||||||
|
<img class="back" src="/pokemon_images/shiny/@(SelectedPokemon.IsVariation ? $"{SelectedPokemon.PokemonId}-{SelectedPokemon.VariationName.ToLower()}{SelectedPokemon.PokemonName.ToLower()}" : SelectedPokemon.PokemonId).png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="row mb-0">
|
||||||
|
@if (SelectedPokemon.IsVariation)
|
||||||
|
{
|
||||||
|
<h2>@SelectedPokemon.VariationName @SelectedPokemon.PokemonName</h2>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<h3>@SelectedPokemon.PokemonName</h3>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="mt-0">
|
||||||
|
<p class="col-4">Pokédex #<strong>@SelectedPokemon.PokemonId</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-5 p-1">
|
||||||
|
<div class="row d-flex justify-content-between">
|
||||||
|
<div class="m-1 col badge @SelectedPokemon.SleepType.ToLower()"><p class="statText">@SelectedPokemon.SleepType</p></div>
|
||||||
|
<div class="m-1 col badge @SelectedPokemon.Speciality.ToLower()"><p class="statText">@SelectedPokemon.Speciality</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Nature / Subskill Selection Dropdowns-->
|
||||||
|
<div class="m-1 p-1 col">
|
||||||
|
<h4 class="mb-3">Select Nature & Subskills</h4>
|
||||||
|
|
||||||
|
<!-- Nature -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<label>Select Nature</label>
|
||||||
|
<select class="form-control form-control-lg mb-2" @bind="SelectedNatureId">
|
||||||
|
<option value="" disabled>Choose Nature...</option>
|
||||||
|
@foreach (var nature in NatureList)
|
||||||
|
{
|
||||||
|
<option value="@nature.Id">@nature.Nature</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Subskills -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4">
|
||||||
|
<label for="subskillSelect1">Select Level 10 Subskill</label>
|
||||||
|
<select id="subskillSelect1" class="form-control form-control-lg mb-2" @bind="subskillSelect1">
|
||||||
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
|
@foreach (var subskill in SubskillList)
|
||||||
|
{
|
||||||
|
<option value="@subskill.Id">@subskill.SubSkill</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<label for="subskillSelect2">Select Level 25 Subskill</label>
|
||||||
|
<select id="subskillSelect2" class="form-control form-control-lg mb-2" @bind="subskillSelect2">
|
||||||
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
|
@foreach (var subskill in SubskillList)
|
||||||
|
{
|
||||||
|
<option value="@subskill.Id">@subskill.SubSkill</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="col-4">
|
||||||
|
<label for="subskillSelect3">Select Level 50 Subskill</label>
|
||||||
|
<select id="subskillSelect3" class="form-control form-control-lg mb-2" @bind="subskillSelect3">
|
||||||
|
<option value="" disabled selected>Choose Subskill...</option>
|
||||||
|
@foreach (var subskill in SubskillList)
|
||||||
|
{
|
||||||
|
<option value="@subskill.Id">@subskill.SubSkill</option>
|
||||||
|
}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Calculate -->
|
||||||
|
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||||
|
<button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
|
||||||
|
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
</div>
|
||||||
}
|
</div>
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
private async void OnPokemonSelected()
|
|
||||||
{
|
|
||||||
if (SelectedPokemonId > 0)
|
|
||||||
{
|
|
||||||
SelectedPokemon = await PokemonService.GetPokemonByIdAsync(SelectedPokemonId);
|
|
||||||
StateHasChanged(); // Force UI to refresh
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void ToggleImage(int Id)
|
|
||||||
{
|
|
||||||
if (isShiny.ContainsKey(Id))
|
|
||||||
{
|
|
||||||
isShiny[Id] = !isShiny[Id];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private void CalculateScore()
|
|
||||||
{
|
|
||||||
if (SelectedPokemon == null || SelectedNatureId == 0 || subskillSelect1 == 0 || subskillSelect2 == 0 || subskillSelect3 == 0 )
|
|
||||||
{
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var nature = NatureList.FirstOrDefault(n => n.Id == SelectedNatureId);
|
|
||||||
var subskill1 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect1);
|
|
||||||
var subskill2 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect2);
|
|
||||||
var subskill3 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect3);
|
|
||||||
|
|
||||||
if (nature == null || subskill1 == null || subskill2 == null || subskill3 == null)
|
|
||||||
{
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
FinalScore = SelectedPokemon.Speciality switch
|
|
||||||
{
|
|
||||||
"Berries" => nature.BerryRating + subskill1.BerryRank + subskill2.BerryRank + subskill3.BerryRank,
|
|
||||||
"Ingredients" => nature.IngredientRating + subskill1.IngredientRank + subskill2.IngredientRank + subskill3.IngredientRank,
|
|
||||||
"Skills" => nature.SkillRating + subskill1.SkillRank + subskill2.SkillRank + subskill3.SkillRank,
|
|
||||||
_ => 0
|
|
||||||
};
|
|
||||||
|
|
||||||
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 switch
|
|
||||||
{
|
|
||||||
8 => "#FFFFFF",
|
|
||||||
7 => "#FFFFFF",
|
|
||||||
6 => "#FFFFFF",
|
|
||||||
5 => "#FFFFFF",
|
|
||||||
4 => "#FFFFFF",
|
|
||||||
3 => "#FFFFFF",
|
|
||||||
2 => "#FFFFFF",
|
|
||||||
1 => "#FFFFFF",
|
|
||||||
0 => "#000",
|
|
||||||
-1 => "#FFFFFF",
|
|
||||||
-2 => "#FFFFFF",
|
|
||||||
-3 => "#FFFFFF",
|
|
||||||
-4 => "#FFFFFF",
|
|
||||||
-5 => "#FFFFFF",
|
|
||||||
-6 => "#FFFFFF",
|
|
||||||
-7 => "#FFFFFF",
|
|
||||||
-8 => "#FFFFFF",
|
|
||||||
_ => "#FFFFFF"
|
|
||||||
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
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.Pages
|
||||||
|
{
|
||||||
|
public partial class PokemonRate
|
||||||
|
{
|
||||||
|
private List<Pokemon> PokemonList;
|
||||||
|
private List<PokemonNature> NatureList;
|
||||||
|
private List<PokemonSubskill> SubskillList;
|
||||||
|
|
||||||
|
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
||||||
|
|
||||||
|
private int _selectedPokemonId;
|
||||||
|
private int SelectedPokemonId
|
||||||
|
{
|
||||||
|
get => _selectedPokemonId;
|
||||||
|
set
|
||||||
|
{
|
||||||
|
_selectedPokemonId = value;
|
||||||
|
OnPokemonSelected();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private int SelectedNatureId;
|
||||||
|
private int subskillSelect1;
|
||||||
|
private int subskillSelect2;
|
||||||
|
private int subskillSelect3;
|
||||||
|
|
||||||
|
private int[] SelectedSubskills = new int[3];
|
||||||
|
|
||||||
|
private Pokemon SelectedPokemon;
|
||||||
|
|
||||||
|
private int FinalScore;
|
||||||
|
private string ScoreBackgroundColor;
|
||||||
|
private string ScoreColor;
|
||||||
|
|
||||||
|
private string PokemonImageUrl => SelectedPokemon != null
|
||||||
|
? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
|
||||||
|
: string.Empty;
|
||||||
|
|
||||||
|
private string PokemonSearchTerm = string.Empty;
|
||||||
|
|
||||||
|
// Filter Pokémon based on the search input term
|
||||||
|
private List<Pokemon> FilteredPokemonList => string.IsNullOrWhiteSpace(PokemonSearchTerm)
|
||||||
|
? PokemonList
|
||||||
|
: PokemonList.Where(p => p.PokemonName.Contains(PokemonSearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
|
||||||
|
|
||||||
|
private async Task OnSearchTextChanged(ChangeEventArgs e)
|
||||||
|
{
|
||||||
|
// Trigger filtering as the user types
|
||||||
|
PokemonSearchTerm = e.Value.ToString();
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task SelectPokemon(Pokemon pokemon)
|
||||||
|
{
|
||||||
|
SelectedPokemon = pokemon;
|
||||||
|
PokemonSearchTerm = string.Empty; // Reset search term
|
||||||
|
FilteredPokemonList.Clear(); // Clear the filtered list to hide dropdown
|
||||||
|
}
|
||||||
|
|
||||||
|
private async void OnPokemonSelected()
|
||||||
|
{
|
||||||
|
if (SelectedPokemonId > 0)
|
||||||
|
{
|
||||||
|
SelectedPokemon = await PokemonService.GetPokemonByIdAsync(SelectedPokemonId);
|
||||||
|
StateHasChanged(); // Force UI to refresh
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private void CalculateScore()
|
||||||
|
{
|
||||||
|
if (SelectedPokemon == null || SelectedNatureId == 0 || subskillSelect1 == 0 || subskillSelect2 == 0 || subskillSelect3 == 0)
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var nature = NatureList.FirstOrDefault(n => n.Id == SelectedNatureId);
|
||||||
|
var subskill1 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect1);
|
||||||
|
var subskill2 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect2);
|
||||||
|
var subskill3 = SubskillList.FirstOrDefault(s => s.Id == subskillSelect3);
|
||||||
|
|
||||||
|
if (nature == null || subskill1 == null || subskill2 == null || subskill3 == null)
|
||||||
|
{
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
FinalScore = SelectedPokemon.Speciality switch
|
||||||
|
{
|
||||||
|
"Berries" => nature.BerryRating + subskill1.BerryRank + subskill2.BerryRank + subskill3.BerryRank,
|
||||||
|
"Ingredients" => nature.IngredientRating + subskill1.IngredientRank + subskill2.IngredientRank + subskill3.IngredientRank,
|
||||||
|
"Skills" => nature.SkillRating + subskill1.SkillRank + subskill2.SkillRank + subskill3.SkillRank,
|
||||||
|
_ => 0
|
||||||
|
};
|
||||||
|
|
||||||
|
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 switch
|
||||||
|
{
|
||||||
|
8 => "#FFFFFF",
|
||||||
|
7 => "#FFFFFF",
|
||||||
|
6 => "#FFFFFF",
|
||||||
|
5 => "#FFFFFF",
|
||||||
|
4 => "#FFFFFF",
|
||||||
|
3 => "#FFFFFF",
|
||||||
|
2 => "#FFFFFF",
|
||||||
|
1 => "#FFFFFF",
|
||||||
|
0 => "#000",
|
||||||
|
-1 => "#FFFFFF",
|
||||||
|
-2 => "#FFFFFF",
|
||||||
|
-3 => "#FFFFFF",
|
||||||
|
-4 => "#FFFFFF",
|
||||||
|
-5 => "#FFFFFF",
|
||||||
|
-6 => "#FFFFFF",
|
||||||
|
-7 => "#FFFFFF",
|
||||||
|
-8 => "#FFFFFF",
|
||||||
|
_ => "#FFFFFF"
|
||||||
|
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
protected override async Task OnInitializedAsync()
|
||||||
|
{
|
||||||
|
PokemonList = await PokemonService.GetAllPokemonAsync();
|
||||||
|
NatureList = await PokemonNatureService.GetAllPokemonNaturesAsync();
|
||||||
|
SubskillList = await PokemonSubskillService.GetAllPokemonSubskillsAsync();
|
||||||
|
|
||||||
|
if (PokemonList is not null)
|
||||||
|
{
|
||||||
|
|
||||||
|
PokemonList.Sort((x, y) => x.PokemonId.CompareTo(y.PokemonId));
|
||||||
|
|
||||||
|
// Initialize dictionary with false (show base image first)
|
||||||
|
foreach (var pokemon in PokemonList)
|
||||||
|
{
|
||||||
|
isShiny[pokemon.Id] = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private void ToggleImage(int Id)
|
||||||
|
{
|
||||||
|
if (isShiny.ContainsKey(Id))
|
||||||
|
{
|
||||||
|
isShiny[Id] = !isShiny[Id];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -17,4 +17,3 @@
|
||||||
@using Portfolio.Application.Services.PokemonService
|
@using Portfolio.Application.Services.PokemonService
|
||||||
@using Portfolio.Application.Services.PokemonNatureService
|
@using Portfolio.Application.Services.PokemonNatureService
|
||||||
@using Portfolio.Application.Services.PokemonSubskillService
|
@using Portfolio.Application.Services.PokemonSubskillService
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue