Compare commits
4 Commits
d04f9b260b
...
bdd0f2e8bb
| Author | SHA1 | Date |
|---|---|---|
Kira Jiroux
|
bdd0f2e8bb | |
|
Kira Jiroux
|
b881c06b83 | |
|
Kira Jiroux
|
79bda1d0fc | |
|
Kira Jiroux
|
aea7c06819 |
|
|
@ -0,0 +1 @@
|
||||||
|
<div class="m-1 badge @_badgeitem.ToLower() border-0"><p class="statText">@_badgeitem</p></div>
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
using Portfolio.Domain.Features.Pokemon;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
|
{
|
||||||
|
public partial class PokemonBadge
|
||||||
|
{
|
||||||
|
[Parameter]
|
||||||
|
public string BadgeItem { get; set; }
|
||||||
|
|
||||||
|
private string _badgeitem { get; set; }
|
||||||
|
|
||||||
|
protected override void OnParametersSet()
|
||||||
|
{
|
||||||
|
if (BadgeItem != null)
|
||||||
|
{
|
||||||
|
_badgeitem = BadgeItem;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sleep Type Badge Styling */
|
||||||
|
.dozing {
|
||||||
|
background-color: #fcdc5e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.snoozing {
|
||||||
|
background-color: #4ce8ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slumbering {
|
||||||
|
background-color: #4588fb;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Speciality Badge Styling */
|
||||||
|
.berries {
|
||||||
|
background-color: #24d86b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredients {
|
||||||
|
background-color: #fdbe4d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skills {
|
||||||
|
background-color: #47a0fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.all {
|
||||||
|
background-color: #fc7992;
|
||||||
|
}
|
||||||
|
|
@ -45,8 +45,8 @@
|
||||||
<!-- Pokemon Sleep Type and Specialty Badges -->
|
<!-- 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="d-flex justify-content-between">
|
<div class="d-flex justify-content-between">
|
||||||
<div class="m-1 badge @_pokemon.SleepType.ToLower() border-0"><p class="statText">@_pokemon.SleepType</p></div>
|
<PokemonBadge BadgeItem="@_pokemon.SleepType" />
|
||||||
<div class="m-1 badge @_pokemon.Speciality.ToLower() border-0"><p class="statText">@_pokemon.Speciality</p></div>
|
<PokemonBadge BadgeItem="@_pokemon.Speciality" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -133,51 +133,8 @@
|
||||||
transform: rotateY(180deg);
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sleep Type Badge Styling */
|
|
||||||
.dozing {
|
|
||||||
background-color: #fcdc5e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.snoozing {
|
|
||||||
background-color: #4ce8ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slumbering {
|
|
||||||
background-color: #4588fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Speciality Badge Styling */
|
|
||||||
.berries {
|
|
||||||
background-color: #24d86b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredients {
|
|
||||||
background-color: #fdbe4d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills {
|
|
||||||
background-color: #47a0fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Type Card Styling */
|
/* Type Card Styling */
|
||||||
|
|
||||||
/* Type Themes - define vars only */
|
|
||||||
.pokemon-type-grass {
|
.pokemon-type-grass {
|
||||||
--border-color: #45ca24;
|
--border-color: #45ca24;
|
||||||
--bg-color: #e5f8dc;
|
--bg-color: #e5f8dc;
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
<!-- Home -->
|
<!-- Home -->
|
||||||
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/pokemonsleep">
|
<NavLink href="/pokemonsleep">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill mb-1" viewBox="0 0 16 16">
|
||||||
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
|
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
|
||||||
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" />
|
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
<!-- Pokemon Table-->
|
<!-- Pokemon Table-->
|
||||||
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/pokemon">
|
<NavLink href="/pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1" viewBox="0 0 16 16">
|
||||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
||||||
</svg>
|
</svg>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
@ -31,8 +31,8 @@
|
||||||
|
|
||||||
<!-- Rate Pokemon -->
|
<!-- Rate Pokemon -->
|
||||||
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/pokemonsleep/rate-pokemon">
|
<NavLink href="/rate-pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1" viewBox="0 0 16 16">
|
||||||
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
||||||
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
<!-- Add Pokemon (Wrap in Auth) -->
|
<!-- Add Pokemon (Wrap in Auth) -->
|
||||||
<button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/pokemonsleep/add-new-pokemon">
|
<NavLink href="/pokemonsleep/add-new-pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill mb-1" viewBox="0 0 16 16">
|
||||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
||||||
</svg>
|
</svg>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
|
|
|
||||||
|
|
@ -5,141 +5,185 @@
|
||||||
@attribute [StreamRendering]
|
@attribute [StreamRendering]
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
|
<!-- Table A: Desktop View-->
|
||||||
|
<div class="container d-none d-md-block">
|
||||||
|
<!-- Main UI -->
|
||||||
|
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8">
|
||||||
|
<!-- Table Header -->
|
||||||
|
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
|
||||||
|
<div class="flex-row justify-content-between">
|
||||||
|
<div class="text-center position-relative">
|
||||||
|
<h2 class="text-info text-decoration-underline">Available Pokémon</h2>
|
||||||
|
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Main UI -->
|
|
||||||
<div class="card shadow border-0 mt-4 m-auto w-50">
|
<div class="tableFixHead table-responsive row">
|
||||||
|
<table class="table col table-borderless border-0 table-secondary table-striped align-middle">
|
||||||
|
<!-- Table Head -->
|
||||||
|
<thead class="">
|
||||||
|
<tr class="">
|
||||||
|
<th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
|
||||||
|
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
||||||
|
<th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
|
||||||
|
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
||||||
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
|
||||||
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<!-- If/Else Pokemon Loaded-->
|
||||||
|
@if(pokemons == null)
|
||||||
|
{
|
||||||
|
<tbody>
|
||||||
|
<Loading />
|
||||||
|
</tbody>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<!-- Table Body -->
|
||||||
|
<tbody>
|
||||||
|
@foreach (var pokemon in pokemons)
|
||||||
|
{
|
||||||
|
<tr class="flex-row">
|
||||||
|
<!-- Section: Pokemon Image -->
|
||||||
|
@{
|
||||||
|
string baseUrl = pokemon.PokemonImageUrl;
|
||||||
|
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
||||||
|
}
|
||||||
|
<td class="text-center d-none d-md-table-cell">
|
||||||
|
@if (shinyUrl == null)
|
||||||
|
{
|
||||||
|
<div class="flip-container">
|
||||||
|
<div class="flipper">
|
||||||
|
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
||||||
|
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
||||||
|
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
|
||||||
|
<img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Section 2: Pokemon # -->
|
||||||
|
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Section 3: Pokemon Name -->
|
||||||
|
|
||||||
|
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Section 4: Pokemon Type -->
|
||||||
|
<td class="">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Section 5: Sleep Type -->
|
||||||
|
<td class="" style="">
|
||||||
|
<div class="d-flex justify-content-center ">
|
||||||
|
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<!-- Section 6: Speciality -->
|
||||||
|
<td class="" style="">
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
</tbody>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop B: Mobile View -->
|
||||||
|
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
||||||
<!-- Table Header -->
|
<!-- Table Header -->
|
||||||
<div class="card-header bg-secondary bg-gradient ml-0 py-3 border-0">
|
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
|
||||||
<div class="row">
|
<div class="flex-row justify-content-between">
|
||||||
<div class="text-center position-relative">
|
<div class="text-center position-relative">
|
||||||
<h2 class="text-info text-decoration-underline">Available Pokémon</h2>
|
<h2 class="text-white text-decoration-underline">Pokémon</h2>
|
||||||
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
|
<div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count())</p></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Table Body -->
|
||||||
|
<div class="tableFixHead row">
|
||||||
|
<table class="table table-striped border-0">
|
||||||
|
|
||||||
<!-- Table -->
|
|
||||||
<div class="tableFixHead">
|
<tbody>
|
||||||
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
@if (pokemons == null)
|
||||||
|
|
||||||
<!-- Table Head -->
|
|
||||||
<thead class="">
|
|
||||||
<tr class="">
|
|
||||||
<th class="text-white text-bg-info col-2" scope="col"></th>
|
|
||||||
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
|
||||||
<th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
|
|
||||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
|
||||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
|
|
||||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
|
||||||
<!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
@if(pokemons == null)
|
|
||||||
{
|
{
|
||||||
<tbody>
|
<Loading />
|
||||||
<Loading />
|
|
||||||
</tbody>
|
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<!-- Table Body -->
|
|
||||||
<tbody >
|
|
||||||
@foreach (var pokemon in pokemons)
|
|
||||||
{
|
|
||||||
<tr class="">
|
|
||||||
|
|
||||||
<!-- Section: Pokemon Image -->
|
@foreach (var pokemon in pokemons)
|
||||||
@{
|
{
|
||||||
string baseUrl = pokemon.PokemonImageUrl;
|
<tr class="border-0">
|
||||||
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
<div class="d-flex align-items-center">
|
||||||
}
|
|
||||||
<td style="text-align: center;">
|
<!-- Pokemon Image -->
|
||||||
@if (shinyUrl == null)
|
<div class="me-3">
|
||||||
{
|
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
|
||||||
<div class="flip-container">
|
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
|
||||||
<div class="flipper">
|
<img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
|
||||||
<img class="front" src="@baseUrl" />
|
@if (pokemon.PokemonShinyImageUrl != null)
|
||||||
</div>
|
{
|
||||||
|
<img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
||||||
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
||||||
<img class="front" src="@baseUrl" />
|
|
||||||
<img class="back" src="@shinyUrl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
}
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<!-- Section 2: Pokemon # -->
|
|
||||||
<th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Section 3: Pokemon Name -->
|
|
||||||
@if (pokemon.IsVariation) // If a Variant
|
|
||||||
{
|
|
||||||
@if (pokemon.VariationName == "Alolan")
|
|
||||||
{
|
|
||||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
|
|
||||||
}
|
|
||||||
@if (pokemon.VariationName == "Paldean")
|
|
||||||
{
|
|
||||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
else // Otherwise, Base Case
|
|
||||||
{
|
|
||||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Section 4: Pokemon Type -->
|
|
||||||
<td>
|
|
||||||
<div class="d-flex justify-content-center">
|
|
||||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
|
|
||||||
<!-- Section 5: Sleep Type -->
|
<div>
|
||||||
<td style="">
|
<!-- Number and Name -->
|
||||||
<div class="d-flex justify-content-center ">
|
<h5>
|
||||||
|
@pokemon.PokemonId -
|
||||||
|
<span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
|
||||||
|
@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
|
||||||
|
</span>
|
||||||
|
</h5>
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||||
|
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
||||||
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
|
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<!-- Section 6: Speciality -->
|
|
||||||
<td style="">
|
|
||||||
<div class="d-flex justify-content-center">
|
|
||||||
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
|
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</div>
|
||||||
|
|
||||||
<!-- Section 7: Functional Buttons -->
|
</div>
|
||||||
<!--
|
</tr>
|
||||||
<td>
|
}
|
||||||
<div class="d-flex justify-content-end">
|
|
||||||
<PokemonEditButton PokemonId="pokemon.Id" />
|
|
||||||
<button class="btn btn-danger rounded rounded-5 mx-1" @onclick="() => ConfirmDelete(pokemon.Id)">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
-->
|
|
||||||
</tr>
|
|
||||||
}
|
|
||||||
</tbody>
|
|
||||||
}
|
}
|
||||||
|
</tbody>
|
||||||
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -34,6 +34,18 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private bool ToggleVariationName(int Id, int PokemonId)
|
||||||
|
{
|
||||||
|
foreach (var pokemon in pokemons)
|
||||||
|
{
|
||||||
|
if (pokemon.PokemonId == PokemonId && pokemon.Id != Id)
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
private async Task ConfirmDelete(int Id)
|
private async Task ConfirmDelete(int Id)
|
||||||
{
|
{
|
||||||
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
|
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,7 @@
|
||||||
|
|
||||||
.pokemon-name-style {
|
.pokemon-name-style {
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -41,6 +42,41 @@
|
||||||
transform: rotateY(180deg);
|
transform: rotateY(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.flip-container-sm {
|
||||||
|
perspective: 1000px;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper-sm {
|
||||||
|
transition: 0.6s;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper-sm img {
|
||||||
|
backface-visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
width: 64px;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper-sm .front {
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper-sm .back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper-sm.flipped {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.pokeimage {
|
.pokeimage {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
@ -83,28 +119,5 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dozing {
|
|
||||||
background-color: #fcdc5e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.snoozing {
|
|
||||||
background-color: #4ce8ed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slumbering {
|
|
||||||
background-color: #4588fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.berries {
|
|
||||||
background-color: #24d86b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ingredients {
|
|
||||||
background-color: #fdbe4d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skills {
|
|
||||||
background-color: #47a0fc;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
<div class="page" >
|
<div class="page bg-primary-subtle ">
|
||||||
|
|
||||||
<Sidebar/>
|
<Sidebar/>
|
||||||
|
|
||||||
<main class="bg-primary-subtle">
|
<main class="border border-3 border-dark w-100">
|
||||||
<article class="content px-4">
|
<article class="container border border-3 border-black px-4 w-100 m-auto">
|
||||||
@Body
|
@Body
|
||||||
</article>
|
</article>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="w-50 mt-5 m-auto create-container">
|
<div class="w-50 mt-5 m-auto create-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">
|
||||||
|
|
@ -86,6 +86,7 @@ else
|
||||||
<option value="Berries">Berries</option>
|
<option value="Berries">Berries</option>
|
||||||
<option value="Ingredients">Ingredients</option>
|
<option value="Ingredients">Ingredients</option>
|
||||||
<option value="Skills">Skills</option>
|
<option value="Skills">Skills</option>
|
||||||
|
<option value="All">All</option>
|
||||||
</InputSelect>
|
</InputSelect>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@page "/pokemonsleep/rate-pokemon"
|
@page "/rate-pokemon"
|
||||||
|
|
||||||
@inject IPokemonService PokemonService
|
@inject IPokemonService PokemonService
|
||||||
@inject IPokemonNatureService PokemonNatureService
|
@inject IPokemonNatureService PokemonNatureService
|
||||||
|
|
|
||||||
|
|
@ -7,32 +7,67 @@
|
||||||
|
|
||||||
<PageTitle>Pokémon Sleep</PageTitle>
|
<PageTitle>Pokémon Sleep</PageTitle>
|
||||||
|
|
||||||
<div class="w-100">
|
<div class="container">
|
||||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
<div class="row w-100">
|
||||||
<PokemonHeader />
|
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||||
<div class="card shadow border-0 p-3 mt-4 m-auto w-75">
|
<div class="row"><PokemonHeader /></div>
|
||||||
<div class="d-flex flex-row justify-content-around">
|
|
||||||
<div class="card border-0 shadow-sm"><img class="card-img shadow-sm w-auto" style="width: 540px; height: 540px;" src="images/Pokemon_Sleep_ID.jpg" /></div>
|
<!-- Card -->
|
||||||
<div class="border border-warning w-50 p-3">
|
<div class="row card shadow-sm border-0 p-3 pb-4 mt-4 m-auto w-75">
|
||||||
<p class="fw-bold fst-italic fs-3">Pokémon Sleep? Really?</p>
|
<!-- Top Row-->
|
||||||
<p class="fw-normal fs-6 text-start">
|
<div class="row d-flex flex-row">
|
||||||
Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
|
<!-- Image side -->
|
||||||
</p>
|
<div class="col w-50 border-0 ">
|
||||||
<p class="fw-bold fst-italic fs-3">But what do you even do?</p>
|
<div>
|
||||||
<p class="fw-normal fs-6 text-start">
|
|
||||||
That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
|
</div>
|
||||||
</p>
|
<img class="shadow-sm w-100 m-auto img-fluid" src="images/Pokemon_Sleep_ID.jpg" />
|
||||||
|
</div>
|
||||||
|
<!-- Text side -->
|
||||||
|
<div class="col w-50 p-3">
|
||||||
|
<p class="fw-bold fst-italic fs-3">Pokémon Sleep? Really?</p>
|
||||||
|
<p class="fw-normal fs-6 text-start">
|
||||||
|
Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
|
||||||
|
</p>
|
||||||
|
<p class="fw-bold fst-italic fs-3">But what do you even do?</p>
|
||||||
|
<p class="fw-normal fs-6 text-start">
|
||||||
|
That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Second Row -->
|
||||||
|
<div class="row mt-3">
|
||||||
<p class="fw-bold fst-italic fs-3">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
|
<p class="fw-bold fst-italic fs-3">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
|
||||||
<p class="fw-normal fs-6 text-start">
|
<p class="fw-normal fs-6 text-start">
|
||||||
Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
|
Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- Button Row-->
|
||||||
<div class="btn-group d-flex flex-row justify-content-around mt-4">
|
<div class="row btn-group d-flex flex-row justify-content-around mt-4">
|
||||||
<button class="btn btn-info">Available Pokémon</button>
|
<div class="w-auto">
|
||||||
<button class="btn btn-success">Rate Pokémon</button>
|
<button class="btn btn-info">
|
||||||
|
<NavLink href="/pokemon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ps-1">Available Pokémon</span>
|
||||||
|
</NavLink>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="w-auto">
|
||||||
|
<button class="btn btn-success link">
|
||||||
|
<NavLink href="/rate-pokemon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1" viewBox="0 0 16 16">
|
||||||
|
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
||||||
|
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
||||||
|
</svg>
|
||||||
|
<span class="ps-1">Rate Pokémon</span>
|
||||||
|
</NavLink>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue