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">
|
||||
<span for="PokemonId" class="input-group-text">#</span>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,27 +18,31 @@
|
|||
}
|
||||
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="col-12 text-center">
|
||||
<div class=" 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">
|
||||
<!-- Body -->
|
||||
<div class="p-3 w-100 flex-column ">
|
||||
<!-- Section 1: Top - Pokemon Selection -->
|
||||
<div class="row flex-row justify-content-end">
|
||||
<div class="pokemon-search col">
|
||||
<div class="position-relative pb-3" >
|
||||
<!-- Pokemon Selection -->
|
||||
<input type="text"
|
||||
class="form-control form-control-lg"
|
||||
class="form-control form-control"
|
||||
@bind="PokemonSearchTerm"
|
||||
placeholder="Search Pokémon..."
|
||||
@oninput="OnSearchTextChanged" />
|
||||
|
||||
@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;">
|
||||
|
|
@ -59,137 +63,120 @@ else
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<button class="btn btn-danger">Clear</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Section 2: Pokemon Rating -->
|
||||
<!-- Section 2: Bottom - Pokemon -->
|
||||
@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 class="row w-100">
|
||||
<!-- Section 2A: Left Side - Pokemon Card View -->
|
||||
<div class="col">
|
||||
<div class="position-relative d-flex justify-content-center">
|
||||
<PokemonCard Pokemon="SelectedPokemon" />
|
||||
</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>
|
||||
<!-- Section 2B: Right Side - Stat Selection + Form Submission -->
|
||||
<div class="col">
|
||||
<h4 class="mb-3">Select Nature & Subskills</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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,11 @@
|
|||
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;
|
||||
|
||||
}
|
||||
|
||||
.pokemon-search {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.flip-container {
|
||||
|
|
@ -79,8 +84,6 @@
|
|||
}
|
||||
|
||||
.finalScore {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: white;
|
||||
padding: 4px 8px;
|
||||
text-align: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue