199 lines
10 KiB
Plaintext
199 lines
10 KiB
Plaintext
@page "/pokemonsleep/rate-pokemon"
|
|
|
|
@inject IPokemonService PokemonService
|
|
@inject IPokemonNatureService PokemonNatureService
|
|
@inject IPokemonSubskillService PokemonSubskillService
|
|
@inject NavigationManager Navigation
|
|
|
|
@attribute [StreamRendering]
|
|
@rendermode InteractiveServer
|
|
|
|
<PageTitle>Rate Pokémon</PageTitle>
|
|
|
|
<PokemonHeader />
|
|
|
|
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
|
{
|
|
<p>Loading...</p>
|
|
}
|
|
else
|
|
{
|
|
<div class="w-75 mt-5 m-auto rate-container bg-info">
|
|
|
|
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<h2 class="text-info">Pokémon Rater</h2>
|
|
</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 -->
|
|
@if (SelectedPokemon != null)
|
|
{
|
|
<div class="row">
|
|
<div class="d-flex align-top col mb-3">
|
|
|
|
<!-- Pokemon Interface -->
|
|
<div class=" px-4 col-5 bg-white border rounded">
|
|
<!-- Image and other Pokemon info -->
|
|
<div class="flip-container" @onclick="() => ToggleImage(SelectedPokemon.Id)">
|
|
<div class="flipper @(isShiny[SelectedPokemon.Id] ? "flipped" : "")">
|
|
<img class="front" src="@SelectedPokemon.PokemonImageUrl" />
|
|
<img class="back" src="@SelectedPokemon.PokemonShinyImageUrl" />
|
|
</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-3 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">
|
|
<!-- Subskill 1 -->
|
|
<div class="col-4">
|
|
<label for="subskillSelect1">Select Level 10 Subskill</label>
|
|
<select id="subskillSelect1" class="form-control form-control 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>
|
|
<!-- Subskill 2 -->
|
|
<div class="col-4">
|
|
<label for="subskillSelect2">Select Level 25 Subskill</label>
|
|
<select id="subskillSelect2" class="form-control form-control 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>
|
|
<!-- Subskill 3 -->
|
|
<div class="col-4">
|
|
<label for="subskillSelect3">Select Level 50 Subskill</label>
|
|
<select id="subskillSelect3" class="form-control form-control 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 class="row">
|
|
<!-- Subskill 4 -->
|
|
<div class="col-4">
|
|
<label for="subskillSelect4">Select Level 75 Subskill</label>
|
|
<select id="subskillSelect4" disabled class="form-control form-control 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>
|
|
<!-- Subskill 5 -->
|
|
<div class="col-4">
|
|
<label for="subskillSelect5">Select Level 100 Subskill</label>
|
|
<select id="subskillSelect5" disabled class="form-control form-control 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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Calculate -->
|
|
<div class="d-flex justify-content-between align-items-center mt-3 ">
|
|
<button class="btn btn-primary mx-2" @onclick="CalculateScore">Calculate Final Score</button>
|
|
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|