kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pokemon Cards made and Pokemon Rate revised (also Pokemon Edit but only cause name field was disabled). Will need to revise Pokemon Rate view to adjust right-side.

This commit is contained in:
Kira Jiroux 2025-04-04 13:17:10 -04:00
parent a8f2bfd2b8
commit 0f235895f4
6 changed files with 232 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
Portfolio.WebUI.Server/Components/Component/PokemonCard.razor
View File

@ -1,72 +1,40 @@
<div class="position-relative w-100 bg-white card border border-5 rounded border-info-subtle shadow-sm " style="height:300px;"> @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"> <div class="z-3">
<div class="">
@if (_pokemon.IsVariation) @if (_pokemon.IsVariation)
{ {
<div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y"> <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
<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 else
{ {
<div class="position-absolute top-0 start-0 pt-1 mt-4 ms-1 translate-middle-y"> <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div>
<p class="fs-1 fw-bold card-title">@_pokemon.PokemonName</p> }
</div> <div class="pokemon-number">
<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> <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
</div> </div>
}
</div>
</div> </div>
<!-- Image and other Pokemon info --> <!-- Pokemon Image -->
<div class="position-absolute top-50 start-50 translate-middle flip-container z-1 card-body" @onclick="() => ToggleImage()"> <div class="flip-container z-1" @onclick="() => ToggleImage()">
<div class="flipper @(isShiny ? "flipped" : "")"> <div class="flipper @(isShiny ? "flipped" : "")">
<img class="card-img front" src="@_pokemon.PokemonImageUrl" /> <img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
<img class="card-img back" src="@_pokemon.PokemonShinyImageUrl" /> <img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
</div> </div>
</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="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
<div class="">
<div class="d-flex justify-content-between"> <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.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 class="m-1 badge @_pokemon.Speciality.ToLower()"><p class="statText">@_pokemon.Speciality</p></div>
</div> </div>
</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();
}
}

30
Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs Normal file
View File

@ -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();
}
}
}

60
Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
View File

@ -1,9 +1,60 @@
 .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 { .flip-container {
position: absolute !important;
top: 40% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
perspective: 1000px; perspective: 1000px;
display: inline-block; display: inline-block;
width: 100%; width: 20rem;
height: 100%; height: 20rem;
cursor: pointer; cursor: pointer;
} }
@ -19,6 +70,7 @@
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.front, .back { .front, .back {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -45,7 +97,7 @@
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 13px; font-size: .8rem;
} }
.dozing { .dozing {

2
Portfolio.WebUI.Server/Components/Pages/PokemonEdit.razor
View File

@ -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>

109
Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor
View File

@ -18,28 +18,31 @@
} }
else else
{ {
<div class="w-50 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="w-100 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 w-100 row"> <!-- Body -->
<!-- Section 1: Pokemon Selection --> <div class="p-3 w-100 flex-column ">
<div class="d-flex row"> <!-- Section 1: Top - Pokemon Selection -->
<div class="col w-50 h-100"> <div class="row flex-row justify-content-end">
<div class="pokemon-search col">
<div class="position-relative pb-3" > <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"
style="max-width:50%; min-width:50%;" /> />
@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,21 +62,32 @@ else
</ul> </ul>
} }
</div> </div>
@if(SelectedPokemon != null)
{
<PokemonCard Pokemon="SelectedPokemon" />
}
</div> </div>
<div class="col-2">
<button class="btn btn-danger">Clear</button>
</div>
</div>
<!-- Section 2: Bottom - Pokemon -->
@if (SelectedPokemon != null) @if (SelectedPokemon != null)
{ {
<div class="col w-75 h-100"> <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>
</div>
<!-- Section 2B: Right Side - Stat Selection + Form Submission -->
<div class="col">
<h4 class="mb-3">Select Nature & Subskills</h4> <h4 class="mb-3">Select Nature & Subskills</h4>
<!-- Nature --> <!-- Nature -->
<div class="row"> <div class="">
<div class="col-12"> <div class="">
<label>Select Nature</label> <label>Select Nature</label>
<select class="form-control form-control-lg mb-2" @bind="SelectedNatureId"> <select class="form-control form-control-sm mb-2" @bind="SelectedNatureId">
<option value="" disabled>Choose Nature...</option> <option value="" disabled>Choose Nature...</option>
@foreach (var nature in NatureList) @foreach (var nature in NatureList)
{ {
@ -82,12 +96,12 @@ else
</select> </select>
</div> </div>
</div> </div>
<!-- Subskills -->
<div class="row">
<!-- Subskill 1 --> <!-- Subskill 1 -->
<div class="col-4"> <div class="">
<div class="">
<label for="subskillSelect1">Select Level 10 Subskill</label> <label for="subskillSelect1">Select Level 10 Subskill</label>
<select id="subskillSelect1" class="form-control form-control mb-2" @bind="subskillSelect1"> <select id="subskillSelect1" class="form-control form-control-sm mb-2" @bind="subskillSelect1">
<option value="" disabled selected>Choose Subskill...</option> <option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList) @foreach (var subskill in SubskillList)
{ {
@ -95,10 +109,13 @@ else
} }
</select> </select>
</div> </div>
</div>
<!-- Subskill 2 --> <!-- Subskill 2 -->
<div class="col-4"> <div class="">
<div class="">
<label for="subskillSelect2">Select Level 25 Subskill</label> <label for="subskillSelect2">Select Level 25 Subskill</label>
<select id="subskillSelect2" class="form-control form-control mb-2" @bind="subskillSelect2"> <select id="subskillSelect2" class="form-control form-control-sm mb-2" @bind="subskillSelect2">
<option value="" disabled selected>Choose Subskill...</option> <option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList) @foreach (var subskill in SubskillList)
{ {
@ -106,10 +123,13 @@ else
} }
</select> </select>
</div> </div>
</div>
<!-- Subskill 3 --> <!-- Subskill 3 -->
<div class="col-4"> <div class="">
<div class="">
<label for="subskillSelect3">Select Level 50 Subskill</label> <label for="subskillSelect3">Select Level 50 Subskill</label>
<select id="subskillSelect3" class="form-control form-control mb-2" @bind="subskillSelect3"> <select id="subskillSelect3" class="form-control form-control-sm mb-2" @bind="subskillSelect3">
<option value="" disabled selected>Choose Subskill...</option> <option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList) @foreach (var subskill in SubskillList)
{ {
@ -118,11 +138,12 @@ else
</select> </select>
</div> </div>
</div> </div>
<div class="row">
<!-- Subskill 4 --> <!-- Subskill 4 Disabled -->
<div class="col-4"> <div class="">
<div class="">
<label for="subskillSelect4">Select Level 75 Subskill</label> <label for="subskillSelect4">Select Level 75 Subskill</label>
<select id="subskillSelect4" disabled class="form-control form-control mb-2" @bind="subskillSelect4"> <select id="subskillSelect4" disabled class="form-control form-control-sm mb-2" @bind="subskillSelect4">
<option value="" disabled selected>Choose Subskill...</option> <option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList) @foreach (var subskill in SubskillList)
{ {
@ -130,10 +151,13 @@ else
} }
</select> </select>
</div> </div>
<!-- Subskill 5 --> </div>
<div class="col-4">
<!-- Subskill 5 Disabled -->
<div class="">
<div class="">
<label for="subskillSelect5">Select Level 100 Subskill</label> <label for="subskillSelect5">Select Level 100 Subskill</label>
<select id="subskillSelect5" disabled class="form-control form-control mb-2" @bind="subskillSelect5"> <select id="subskillSelect5" disabled class="form-control form-control-sm mb-2" @bind="subskillSelect5">
<option value="" disabled selected>Choose Subskill...</option> <option value="" disabled selected>Choose Subskill...</option>
@foreach (var subskill in SubskillList) @foreach (var subskill in SubskillList)
{ {
@ -143,20 +167,19 @@ else
</div> </div>
</div> </div>
</div> <!-- Calculate Score -->
} <div class="">
</div>
@if(SelectedPokemon != null)
{
<div class="row">
<div class="d-flex justify-content-between align-items-center mt-3"> <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> <button class="btn btn-primary" @onclick="CalculateScore">Calculate Final Score</button>
<h4>Final Score: <span class="finalScore" style="background-color: @ScoreBackgroundColor">@FinalScore</span></h4> <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>
</div> </div>
} }
</div>
</div>
}

6
Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css
View File

@ -6,6 +6,10 @@
} }
.pokemon-search {
width: 95%;
}
.flip-container { .flip-container {
perspective: 1000px; perspective: 1000px;
display: inline-block; display: inline-block;
@ -80,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;