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

Minor changes in an attempt to make a pokemon sticker background. Will return but will offer no issues. Plus NavMenu3

This commit is contained in:
Kira Jiroux 2025-03-07 12:31:34 -05:00
parent 7a3d524f91
commit 536d28a54b
10 changed files with 292 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor Normal file
View File

@ -0,0 +1,80 @@
@inject NavigationManager NavManager
<div class="pokemon-background">
@foreach (var image in BackgroundImages)
{
<img src="@image.Url"
class="pokemon-bg-img"
style="left:@image.Left%; top:@image.Top%; width:@image.Size}px; transform:rotate(@(image.Rotation)deg);" />
}
</div>
@code {
private List<PokemonImage> BackgroundImages = new();
private Random random = new();
// Your specified set of Pokémon numbers
private readonly int[] AllowedPokemonNumbers = new int[]
{
1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 19, 20, 23, 24, 25, 26, 35, 36,
37, 38, 39, 40, 50, 51, 52, 53, 54, 55,
56, 57, 58, 59, 69, 70, 71, 74, 75, 76,
79, 80, 81, 82, 84, 85, 92, 93, 94, 95,
104, 105, 115, 122, 127, 132, 133, 134,
135, 136, 147, 148, 149, 152, 153, 154,
155, 156, 157, 158, 159, 160, 172, 173,
174, 175, 176, 179, 180, 181, 185, 194,
195, 196, 197, 199, 202, 208, 214, 215,
225, 228, 229, 243, 244, 245, 246, 247,
248, 280, 281, 282, 287, 288, 289, 302,
304, 305, 306, 316, 317, 333, 334, 353,
354, 359, 360, 363, 364, 365, 403, 404,
405, 425, 426, 438, 439, 447, 448, 453,
454, 459, 460, 461, 462, 468, 470, 471,
475, 627, 628, 700, 702, 736, 737, 738,
759, 760, 764, 778, 845, 906, 907, 908,
909, 910, 911, 912, 913, 914, 921, 922,
923, 980
};
protected override void OnInitialized()
{
GeneratePokemonBackground();
}
private void GeneratePokemonBackground()
{
var normalPath = $"/pokemon_images/normal/";
var shinyPath = $"/pokemon_images/shiny/";
for (int i = 0; i < 30; i++) // Generate 30 Pokémon images
{
int pokemonNumber = AllowedPokemonNumbers[random.Next(AllowedPokemonNumbers.Length)];
// 10% chance to use a shiny version
bool isShiny = random.NextDouble() < 0.1;
string imageUrl = isShiny
? $"{shinyPath}{pokemonNumber}.png"
: $"{normalPath}{pokemonNumber}.png";
BackgroundImages.Add(new PokemonImage
{
Url = imageUrl,
Left = random.Next(0, 100), // 0-100% of background container width
Top = random.Next(0, 100), // 0-100% of background container height
Size = random.Next(50, 130), // 50px to 130px
Rotation = random.Next(0, 360) // Random rotation
});
}
}
private class PokemonImage
{
public string Url { get; set; } = "";
public int Left { get; set; }
public int Top { get; set; }
public int Size { get; set; }
public int Rotation { get; set; }
}
}

16
Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.css Normal file
View File

@ -0,0 +1,16 @@
.pokemon-background {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #f5f5f5; /* Optional, adjust to match your design */
pointer-events: none; /* So clicks pass through the background */
z-index: 0; /* Sits behind main content */
}
.pokemon-bg-img {
position: absolute;
object-fit: contain;
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.3)); /* Sticker-like shadow */
pointer-events: none; /* Just visual */
}

16
Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor
View File

@ -24,8 +24,20 @@
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown08" data-bs-toggle="dropdown" aria-expanded="false">Pokemon Sleep</a>
<ul class="dropdown-menu" aria-labelledby="dropdown08">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<NavLink class="nav-link" href="pokemonsleep/add-new-pokemon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
</svg> Pokemon Sleep
</NavLink>
</li>
<li>
<NavLink class="nav-link" href="pokemonsleep/rate-pokemon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
</svg> Pokemon Sleep
</NavLink>
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>

1
Portfolio.WebUI.Server/Components/Pages/Home.razor
View File

@ -2,6 +2,7 @@
<PageTitle>Home</PageTitle>
<PokemonBackground />
<h1 class="test">Hello, world!</h1>
<p>Ensuring that git is connected properly.</p>

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

@ -11,93 +11,6 @@
<PageTitle>Rate Pokémon</PageTitle>
<style>
.flip-container {
perspective: 1000px;
display: inline-block;
width: 250px;
height: 250px;
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: 100px;
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;
}
.finalScore {
width: 30px;
height: 30px;
color: white;
padding: 4px 8px;
text-align: center;
vertical-align: middle;
border-radius: 3px;
}
</style>
<div class="card-header bg-secondary bg-gradient ml-0 py-3">
<div class="row">
<div class="col-12 text-center">

83
Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css Normal file
View File

@ -0,0 +1,83 @@

.flip-container {
perspective: 1000px;
display: inline-block;
width: 250px;
height: 250px;
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: 100px;
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;
}
.finalScore {
width: 30px;
height: 30px;
color: white;
padding: 4px 8px;
text-align: center;
vertical-align: middle;
border-radius: 3px;
}

91
Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor
View File

@ -1,5 +1,6 @@
@page "/pokemonsleep"
@inject IPokemonService PokemonService
@inject IJSRuntime JS
@ -8,96 +9,10 @@
<PageTitle>Pokémon Sleep</PageTitle>
<style>
.tableFixHead {
overflow: auto;
height: 600px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
z-index: 10;
}
.flip-container {
perspective: 1000px;
display: inline-block;
width: 90px;
height: 90px;
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: 100px;
height: 30px;
color: white;
padding: 4px 8px;
text-align: center;
vertical-align: middle;
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;
}
</style>
<PokemonBackground />
<!-- Heading + Buttons -->
<div class="top-row bg-secondary bg-gradient ml-0 py-3">
<div class="top-row bg-secondary bg-gradient ml-0 py-3 page-content">
<div class="row">
<div class="col-4"></div>
<div class="col-4 text-center">

93
Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.css Normal file
View File

@ -0,0 +1,93 @@

.tableFixHead {
overflow: auto;
height: 600px;
}
.tableFixHead thead th {
position: sticky;
top: 0;
z-index: 10;
}
.flip-container {
perspective: 1000px;
display: inline-block;
width: 90px;
height: 90px;
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: 100px;
height: 30px;
color: white;
padding: 4px 8px;
text-align: center;
vertical-align: middle;
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;
}
.page-content {
position: relative;
z-index: 1; /* Higher than stickers */
background-color: rgba(255, 255, 255, 0.8); /* Optional translucent bg */
}

1
Portfolio.WebUI.Server/Components/_Imports.razor
View File

@ -8,6 +8,7 @@
@using Microsoft.JSInterop
@using Portfolio.WebUI.Server
@using Portfolio.WebUI.Server.Components
@using Portfolio.WebUI.Server.Components.Component
@using Portfolio.Domain.Features.Articles
@using Portfolio.Domain.Features.Pokemon
@using Portfolio.Domain.Features.Pokemon_Natures

1
Portfolio.WebUI.Server/Portfolio.WebUI.Server.csproj
View File

@ -7,6 +7,7 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazored.Typeahead" Version="4.7.0" />
<PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="9.0.2">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>