From 536d28a54ba84f31fe80c11b04bb3358564bc222 Mon Sep 17 00:00:00 2001 From: Kira Jiroux Date: Fri, 7 Mar 2025 12:31:34 -0500 Subject: [PATCH] Minor changes in an attempt to make a pokemon sticker background. Will return but will offer no issues. Plus NavMenu3 --- .../Component/PokemonBackground.razor | 80 ++++++++++++++++ .../Component/PokemonBackground.razor.css | 16 ++++ .../Components/Layout/NavMenu3.razor | 16 +++- .../Components/Pages/Home.razor | 1 + .../Components/Pages/PokemonRate.razor | 87 ----------------- .../Components/Pages/PokemonRate.razor.css | 83 +++++++++++++++++ .../Components/Pages/PokemonSleep.razor | 91 +----------------- .../Components/Pages/PokemonSleep.razor.css | 93 +++++++++++++++++++ .../Components/_Imports.razor | 1 + .../Portfolio.WebUI.Server.csproj | 1 + 10 files changed, 292 insertions(+), 177 deletions(-) create mode 100644 Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor create mode 100644 Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.css create mode 100644 Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css create mode 100644 Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.css diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor new file mode 100644 index 0000000..0ed23f0 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor @@ -0,0 +1,80 @@ +@inject NavigationManager NavManager + +
+ @foreach (var image in BackgroundImages) + { + + } +
+ +@code { + private List 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; } + } +} \ No newline at end of file diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.css b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.css new file mode 100644 index 0000000..a2b4cae --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Component/PokemonBackground.razor.css @@ -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 */ +} diff --git a/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor b/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor index c7971e1..f2365a7 100644 --- a/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor +++ b/Portfolio.WebUI.Server/Components/Layout/NavMenu3.razor @@ -24,8 +24,20 @@
    • diff --git a/Portfolio.WebUI.Server/Components/Pages/Home.razor b/Portfolio.WebUI.Server/Components/Pages/Home.razor index 6a63508..0a9e352 100644 --- a/Portfolio.WebUI.Server/Components/Pages/Home.razor +++ b/Portfolio.WebUI.Server/Components/Pages/Home.razor @@ -2,6 +2,7 @@ Home +

    Hello, world!

    Ensuring that git is connected properly.

    diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor index 47df9f1..bb63b9d 100644 --- a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor @@ -11,93 +11,6 @@ Rate Pokémon - - -
    diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css new file mode 100644 index 0000000..1e93a76 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonRate.razor.css @@ -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; +} diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor index 8da8b4f..b7586d9 100644 --- a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor @@ -1,5 +1,6 @@ @page "/pokemonsleep" + @inject IPokemonService PokemonService @inject IJSRuntime JS @@ -8,96 +9,10 @@ Pokémon Sleep - + -
    +
    diff --git a/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.css b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.css new file mode 100644 index 0000000..eb28ea8 --- /dev/null +++ b/Portfolio.WebUI.Server/Components/Pages/PokemonSleep.razor.css @@ -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 */ +} + diff --git a/Portfolio.WebUI.Server/Components/_Imports.razor b/Portfolio.WebUI.Server/Components/_Imports.razor index 399609a..bb6b624 100644 --- a/Portfolio.WebUI.Server/Components/_Imports.razor +++ b/Portfolio.WebUI.Server/Components/_Imports.razor @@ -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 diff --git a/Portfolio.WebUI.Server/Portfolio.WebUI.Server.csproj b/Portfolio.WebUI.Server/Portfolio.WebUI.Server.csproj index d5ebdac..010a727 100644 --- a/Portfolio.WebUI.Server/Portfolio.WebUI.Server.csproj +++ b/Portfolio.WebUI.Server/Portfolio.WebUI.Server.csproj @@ -7,6 +7,7 @@ + all runtime; build; native; contentfiles; analyzers; buildtransitive