Compare commits
2 Commits
6c8119d83c
...
0f235895f4
| Author | SHA1 | Date |
|---|---|---|
Kira Jiroux
|
0f235895f4 | |
|
Kira Jiroux
|
a8f2bfd2b8 |
|
|
@ -0,0 +1,40 @@
|
||||||
|
@attribute [StreamRendering]
|
||||||
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
|
<div class="position-relative bg-white pokemon-card border border-5 border-info-subtle shadow-sm ">
|
||||||
|
<!-- Pokemon Name and Number -->
|
||||||
|
<div class="z-3">
|
||||||
|
@if (_pokemon.IsVariation)
|
||||||
|
{
|
||||||
|
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div>
|
||||||
|
}
|
||||||
|
<div class="pokemon-number">
|
||||||
|
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pokemon Image -->
|
||||||
|
<div class="flip-container z-1" @onclick="() => ToggleImage()">
|
||||||
|
<div class="flipper @(isShiny ? "flipped" : "")">
|
||||||
|
<img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
|
||||||
|
<img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-info-subtle border rounded border-2 border-info pokemon-flavor-text">
|
||||||
|
<p class="">[ Pokemon Flavor Text Placeholder ]</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pokemon Sleep Type and Specialty Badges -->
|
||||||
|
<div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
|
||||||
|
<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>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Portfolio.Domain.Features.Pokemon;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component
|
||||||
|
{
|
||||||
|
public partial class PokemonCard
|
||||||
|
{
|
||||||
|
[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,125 @@
|
||||||
|
.pokemon-card {
|
||||||
|
position: relative;
|
||||||
|
width: 24rem;
|
||||||
|
height: 32rem;
|
||||||
|
max-width: 24rem;
|
||||||
|
max-height: 32rem;
|
||||||
|
border-radius: 5% / 3.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-name {
|
||||||
|
position: absolute;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
margin-top: 1.5rem !important;
|
||||||
|
margin-left: 0.5rem !important;
|
||||||
|
transform: translateY(-50%) !important;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
margin-top: 3rem !important;
|
||||||
|
margin-left: 1.5rem !important;
|
||||||
|
transform: translateY(-50%) !important;
|
||||||
|
font-size: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-image {
|
||||||
|
width: 100%; /* Look to flip-container for the width/height of image */
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-flavor-text {
|
||||||
|
position: absolute;
|
||||||
|
top: 60% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
width: 90%;
|
||||||
|
height: 20%;
|
||||||
|
padding: 0.5rem;
|
||||||
|
margin-top: 3rem !important;
|
||||||
|
transform: translateX(-50%) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container {
|
||||||
|
position: absolute !important;
|
||||||
|
top: 40% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
perspective: 1000px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 20rem;
|
||||||
|
height: 20rem;
|
||||||
|
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: .8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dozing {
|
||||||
|
background-color: #fcdc5e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snoozing {
|
||||||
|
background-color: #4ce8ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slumbering {
|
||||||
|
background-color: #4588fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.berries {
|
||||||
|
background-color: #24d86b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients {
|
||||||
|
background-color: #fdbe4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills {
|
||||||
|
background-color: #47a0fc;
|
||||||
|
}
|
||||||
|
|
@ -31,7 +31,7 @@ else
|
||||||
<div class="col-sm-3 input-group mb-3">
|
<div class="col-sm-3 input-group mb-3">
|
||||||
<span for="PokemonId" class="input-group-text">#</span>
|
<span for="PokemonId" class="input-group-text">#</span>
|
||||||
<InputNumber min="0" id="PokemonId" @bind-Value="pokemon.PokemonId" class="form-control" required disabled />
|
<InputNumber min="0" id="PokemonId" @bind-Value="pokemon.PokemonId" class="form-control" required disabled />
|
||||||
<InputText id="PokemonName" @bind-Value="pokemon.PokemonName" class="form-control w-75" required disabled />
|
<InputText id="PokemonName" @bind-Value="pokemon.PokemonName" class="form-control w-75" required />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -18,27 +18,31 @@
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="w-75 mt-5 m-auto rate-container bg-info">
|
<!-- Total Component -->
|
||||||
|
<div class="w-75 mt-3 m-auto rate-container bg-info ">
|
||||||
|
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
|
<!-- Header -->
|
||||||
|
<div class="card-header bg-secondary ml-0 py-3 w-100 ">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12 text-center">
|
<div class=" 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">
|
<!-- Body -->
|
||||||
<!-- Section 1: Pokemon Selection -->
|
<div class="p-3 w-100 flex-column ">
|
||||||
<div class="row pb-3">
|
<!-- Section 1: Top - Pokemon Selection -->
|
||||||
<div class="col-3">
|
<div class="row flex-row justify-content-end">
|
||||||
<div class="position-relative">
|
<div class="pokemon-search col">
|
||||||
|
<div class="position-relative pb-3" >
|
||||||
|
<!-- Pokemon Selection -->
|
||||||
<input type="text"
|
<input type="text"
|
||||||
class="form-control form-control-lg"
|
class="form-control form-control"
|
||||||
@bind="PokemonSearchTerm"
|
@bind="PokemonSearchTerm"
|
||||||
placeholder="Search Pokémon..."
|
placeholder="Search Pokémon..."
|
||||||
@oninput="OnSearchTextChanged" />
|
@oninput="OnSearchTextChanged"
|
||||||
|
/>
|
||||||
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
|
@if (FilteredPokemonList.Any() && !string.IsNullOrWhiteSpace(PokemonSearchTerm))
|
||||||
{
|
{
|
||||||
<ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
|
<ul class="list-group position-absolute w-100" style="z-index: 1000; max-height: 200px; overflow-y: auto;">
|
||||||
|
|
@ -59,137 +63,120 @@ else
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<button class="btn btn-danger">Clear</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section 2: Pokemon Rating -->
|
<!-- Section 2: Bottom - Pokemon -->
|
||||||
@if (SelectedPokemon != null)
|
@if (SelectedPokemon != null)
|
||||||
{
|
{
|
||||||
<div class="row">
|
<div class="row w-100">
|
||||||
<div class="d-flex align-top col mb-3">
|
<!-- Section 2A: Left Side - Pokemon Card View -->
|
||||||
|
<div class="col">
|
||||||
<!-- Pokemon Interface -->
|
<div class="position-relative d-flex justify-content-center">
|
||||||
<div class=" px-4 col-5 bg-white border rounded">
|
<PokemonCard Pokemon="SelectedPokemon" />
|
||||||
<!-- 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>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Calculate -->
|
<!-- Section 2B: Right Side - Stat Selection + Form Submission -->
|
||||||
<div class="d-flex justify-content-between align-items-center mt-3 ">
|
<div class="col">
|
||||||
<button class="btn btn-primary mx-2" @onclick="CalculateScore">Calculate Final Score</button>
|
<h4 class="mb-3">Select Nature & Subskills</h4>
|
||||||
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></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>
|
</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,11 @@
|
||||||
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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-search {
|
||||||
|
width: 95%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container {
|
.flip-container {
|
||||||
|
|
@ -79,8 +84,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.finalScore {
|
.finalScore {
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
color: white;
|
color: white;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue