Card created, Pokemon Rater page adjusted. But when running with debugger it doesn't come up right, does without the debugger tho. Idk.
This commit is contained in:
Kira Jiroux
parent
6c8119d83c
commit
a8f2bfd2b8
|
|
@ -0,0 +1,72 @@
|
|||
<div class="position-relative w-100 bg-white card border border-5 rounded border-info-subtle shadow-sm " style="height:300px;">
|
||||
|
||||
<div class=" z-3">
|
||||
<div class="">
|
||||
@if (_pokemon.IsVariation)
|
||||
{
|
||||
<div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y">
|
||||
<p class="fs-2 fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p>
|
||||
</div>
|
||||
<div class="position-absolute top-0 start-0 pt-1 ms-3 mt-4">
|
||||
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y">
|
||||
<p class="fs-1 fw-bold card-title">@_pokemon.PokemonName</p>
|
||||
</div>
|
||||
<div class="position-absolute top-0 start-0 pt-2 ms-3 mt-4">
|
||||
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Image and other Pokemon info -->
|
||||
<div class="position-absolute top-50 start-50 translate-middle flip-container z-1 card-body" @onclick="() => ToggleImage()">
|
||||
<div class="flipper @(isShiny ? "flipped" : "")">
|
||||
<img class="card-img front" src="@_pokemon.PokemonImageUrl" />
|
||||
<img class="card-img back" src="@_pokemon.PokemonShinyImageUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
|
||||
<div class="">
|
||||
<div class="d-flex justify-content-between">
|
||||
<div class="m-1 badge @_pokemon.SleepType.ToLower()"><p class="statText">@_pokemon.SleepType</p></div>
|
||||
<div class="m-1 badge @_pokemon.Speciality.ToLower()"><p class="statText">@_pokemon.Speciality</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter]
|
||||
public Pokemon Pokemon { get; set; }
|
||||
|
||||
private Pokemon _pokemon { get; set; }
|
||||
|
||||
private bool isShiny = false;
|
||||
|
||||
protected override void OnParametersSet()
|
||||
{
|
||||
if(Pokemon != null)
|
||||
{
|
||||
_pokemon = Pokemon;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private void ToggleImage()
|
||||
{
|
||||
isShiny = !isShiny;
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
.flip-container {
|
||||
perspective: 1000px;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
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;
|
||||
}
|
||||
|
|
@ -18,26 +18,27 @@
|
|||
}
|
||||
else
|
||||
{
|
||||
<div class="w-75 mt-5 m-auto rate-container bg-info">
|
||||
<div class="w-50 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">
|
||||
<div class="w-100 text-center">
|
||||
<h2 class="text-info">Pokémon Rater</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body p-4 col-12">
|
||||
<div class="card-body p-4 w-100 row">
|
||||
<!-- Section 1: Pokemon Selection -->
|
||||
<div class="row pb-3">
|
||||
<div class="col-3">
|
||||
<div class="position-relative">
|
||||
<div class="d-flex row">
|
||||
<div class="col w-50 h-100">
|
||||
<div class="position-relative pb-3" >
|
||||
<input type="text"
|
||||
class="form-control form-control-lg"
|
||||
@bind="PokemonSearchTerm"
|
||||
placeholder="Search Pokémon..."
|
||||
@oninput="OnSearchTextChanged" />
|
||||
@oninput="OnSearchTextChanged"
|
||||
style="max-width:50%; min-width:50%;" />
|
||||
|
||||
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
|
||||
{
|
||||
|
|
@ -58,141 +59,104 @@ else
|
|||
</ul>
|
||||
}
|
||||
</div>
|
||||
@if(SelectedPokemon != null)
|
||||
{
|
||||
<PokemonCard Pokemon="SelectedPokemon" />
|
||||
}
|
||||
</div>
|
||||
@if(SelectedPokemon != null)
|
||||
{
|
||||
<div class="col w-75 h-100">
|
||||
<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>
|
||||
@if(SelectedPokemon != null)
|
||||
{
|
||||
<div class="row">
|
||||
<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>
|
||||
|
||||
<!-- 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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,9 +39,6 @@ namespace Portfolio.WebUI.Server.Components.Pages
|
|||
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;
|
||||
|
||||
|
|
@ -54,6 +51,7 @@ namespace Portfolio.WebUI.Server.Components.Pages
|
|||
{
|
||||
// Trigger filtering as the user types
|
||||
PokemonSearchTerm = e.Value.ToString();
|
||||
|
||||
}
|
||||
|
||||
private async Task SelectPokemon(Pokemon pokemon)
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
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;
|
||||
|
||||
}
|
||||
|
||||
.flip-container {
|
||||
|
|
|
|||
Loading…
Reference in New Issue