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
|
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="card-header bg-secondary bg-gradient ml-0 py-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 text-center">
|
<div class="w-100 text-center">
|
||||||
<h2 class="text-info">Pokémon Rater</h2>
|
<h2 class="text-info">Pokémon Rater</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card-body p-4 col-12">
|
<div class="card-body p-4 w-100 row">
|
||||||
<!-- Section 1: Pokemon Selection -->
|
<!-- Section 1: Pokemon Selection -->
|
||||||
<div class="row pb-3">
|
<div class="d-flex row">
|
||||||
<div class="col-3">
|
<div class="col w-50 h-100">
|
||||||
<div class="position-relative">
|
<div class="position-relative pb-3" >
|
||||||
<input type="text"
|
<input type="text"
|
||||||
class="form-control form-control-lg"
|
class="form-control form-control-lg"
|
||||||
@bind="PokemonSearchTerm"
|
@bind="PokemonSearchTerm"
|
||||||
placeholder="Search Pokémon..."
|
placeholder="Search Pokémon..."
|
||||||
@oninput="OnSearchTextChanged" />
|
@oninput="OnSearchTextChanged"
|
||||||
|
style="max-width:50%; min-width:50%;" />
|
||||||
|
|
||||||
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
|
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
|
||||||
{
|
{
|
||||||
|
|
@ -58,141 +59,104 @@ else
|
||||||
</ul>
|
</ul>
|
||||||
}
|
}
|
||||||
</div>
|
</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>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,9 +39,6 @@ namespace Portfolio.WebUI.Server.Components.Pages
|
||||||
private string ScoreBackgroundColor;
|
private string ScoreBackgroundColor;
|
||||||
private string ScoreColor;
|
private string ScoreColor;
|
||||||
|
|
||||||
private string PokemonImageUrl => SelectedPokemon != null
|
|
||||||
? $"https://www.serebii.net/pokemonsleep/pokemon/{SelectedPokemon.Id}.png"
|
|
||||||
: string.Empty;
|
|
||||||
|
|
||||||
private string PokemonSearchTerm = string.Empty;
|
private string PokemonSearchTerm = string.Empty;
|
||||||
|
|
||||||
|
|
@ -54,6 +51,7 @@ namespace Portfolio.WebUI.Server.Components.Pages
|
||||||
{
|
{
|
||||||
// Trigger filtering as the user types
|
// Trigger filtering as the user types
|
||||||
PokemonSearchTerm = e.Value.ToString();
|
PokemonSearchTerm = e.Value.ToString();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task SelectPokemon(Pokemon pokemon)
|
private async Task SelectPokemon(Pokemon pokemon)
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
||||||
0 6px 20px 0 rgba(255,255, 255, 0.19);
|
0 6px 20px 0 rgba(255,255, 255, 0.19);
|
||||||
border-radius: 15px;
|
border-radius: 15px;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container {
|
.flip-container {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue