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

Compare commits

base: kira:master
Branches Tags
kira:master
kira:update/responsive-styling
kira:update/pokemon-rate-ui-and-func
kira:feature/temperature-blanket
kira:update/pokemon-card-view
kira:feature/pokemon-view
kira:update/pokemon-entity
kira:update/toggle-sidebar
kira:update/componet-parameter-data-passing
kira:cleanup/move-pokemon-table-to-components
kira:feature/searchable-dropdown
kira:feature/rating-pokemon
kira:feature/add-delete-functionality
kira:feature/toggle-images
kira:extract-from-db
kira:feature/response-handling
kira:feature/infrastructure-layer
kira:add-pokemon_images
kira:feature/clean-architecture
..
compare: kira:update/pokemon-rate-ui-and-func
Branches Tags
kira:update/responsive-styling
kira:master
kira:update/pokemon-rate-ui-and-func
kira:feature/temperature-blanket
kira:update/pokemon-card-view
kira:feature/pokemon-view
kira:update/pokemon-entity
kira:update/toggle-sidebar
kira:update/componet-parameter-data-passing
kira:cleanup/move-pokemon-table-to-components
kira:feature/searchable-dropdown
kira:feature/rating-pokemon
kira:feature/add-delete-functionality
kira:feature/toggle-images
kira:extract-from-db
kira:feature/response-handling
kira:feature/infrastructure-layer
kira:add-pokemon_images
kira:feature/clean-architecture

No commits in common. "master" and "update/pokemon-rate-ui-and-func" have entirely different histories.
master ... update/pok

15 changed files with 86 additions and 239 deletions
Show Stats Expand all files Collapse all files

29
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor
View File

@ -9,27 +9,20 @@
else else
{ {
<h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
<div> <div>
<div class="row"> <h3 class="text-xl font-bold mb-4">Temperature Blanket Reviewer</h3>
<div class="col-10">
<div class="d-flex"> <div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
<div class="temperature-blanket"> @foreach (var day in TemperatureDays)
@foreach (var day in TemperatureDays) {
{ var color = GetColorForTemp(day.AvgTemp);
var color = GetColorForTemp(day.AvgTemp); <div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
<div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;" title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
</div>
}
</div>
</div> </div>
</div> }
<div class="col">
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
</div>
</div> </div>
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
</div> </div>
} }
</div> </div>

2
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.cs
View File

@ -20,7 +20,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Crochet_Components
new() { Min = 35, Max = 42, Color = "#add8e6" }, new() { Min = 35, Max = 42, Color = "#add8e6" },
new() { Min = 42, Max = 49, Color = "#00008b" }, new() { Min = 42, Max = 49, Color = "#00008b" },
new() { Min = 49, Max = 56, Color = "#006400" }, new() { Min = 49, Max = 56, Color = "#006400" },
new() { Min = 56, Max = 63, Color = "#07ed07" }, new() { Min = 56, Max = 63, Color = "#90ee90" },
new() { Min = 63, Max = 70, Color = "#ffff00" }, new() { Min = 63, Max = 70, Color = "#ffff00" },
new() { Min = 70, Max = 77, Color = "#ffa500" }, new() { Min = 70, Max = 77, Color = "#ffa500" },
new() { Min = 77, Max = 84, Color = "#ff0000" }, new() { Min = 77, Max = 84, Color = "#ff0000" },

9
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureBlanketVisualizer.razor.css
View File

@ -1,9 +0,0 @@
body {
}
.temperature-blanket {
display: flex;
overflow-x: auto;
background-color: black;
padding: 10px;
}

75
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor
View File

@ -4,11 +4,11 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @rendermode InteractiveServer
<div class="container" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@ <div class="relative w-full h-24 px-4" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
<!-- Base number line --> <!-- Base number line -->
@* <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div> *@ <div class="absolute top-1/2 left-0 right-0 h-1 bg-gray-300 transform -translate-y-1/2"></div>
@* <!-- Draggable nodes for adjusting range breakpoints --> <!-- Draggable nodes for adjusting range breakpoints -->
@for (int i = 0; i < TempRanges.Count; i++) @for (int i = 0; i < TempRanges.Count; i++)
{ {
var left = i == 0 ? 0 : TempRanges[i - 1].Max; var left = i == 0 ? 0 : TempRanges[i - 1].Max;
@ -19,75 +19,16 @@
@onmousedown="(e) => OnMouseDown(i, e)" @onmousedown="(e) => OnMouseDown(i, e)"
title="@left°F"> title="@left°F">
</div> </div>
} *@ }
<!-- Color pickers for each range --> <!-- Color pickers for each range -->
<div class="card rounded-3"> <div class="flex gap-2 mt-6">
<div class="card-header mb-3 text-center fw-bold">
Temperature Blanket Colors
</div>
@for (int i = 0; i < TempRanges.Count; i++) @for (int i = 0; i < TempRanges.Count; i++)
{ {
var localIndex = i; var localIndex = i;
@* if (i == 0) <input type="color"
{ value="@TempRanges[i].Color"
<div class="row align-items-center mb-2"> @onchange="e => HandleColorChange(e, localIndex)" />
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Max&deg;
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
}
else if (i == 10)
{
<div class="row align-items-center mb-2">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Min&deg; +
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
}
else
{
<div class="row align-items-center mb-2">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
} *@
<div class="row align-items-center mb-2 ms-1">
<div class="col-6 text-end pe-2">
<label class="form-label mb-0">
@TempRanges[i].Min&deg; – @TempRanges[i].Max&deg;
</label>
</div>
<div class="col-6 ps-2">
<input type="color"
value="@TempRanges[i].Color"
@onchange="e => HandleColorChange(e, localIndex)" />
</div>
</div>
} }
</div> </div>
</div> </div>

6
Portfolio.WebUI.Server/Components/Component/Crochet Components/TemperatureRangeEditor.razor.css
View File

@ -1,6 +0,0 @@
input[type="color"] {
width: 2.5rem;
height: 2rem;
padding: 0;
border: none;
}

2
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor
View File

@ -1,4 +1,4 @@
<div class="pokemon-rating-panel"> <div class="pokemon-rating-panel container">
<!-- Dropdown Selects --> <!-- Dropdown Selects -->
<div class="ratings bg-light-subtle col"> <div class="ratings bg-light-subtle col">

2
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonRatingPanel.razor.css
View File

@ -3,7 +3,7 @@
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
width: 100%; width: 100%;
height: 70vh;
} }

2
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor
View File

@ -1,6 +1,6 @@
 
<!-- Search Input --> <!-- Search Input -->
<div class="pokemon-selector p-3 bg-light"> <div class="pokemon-selector p-3 bg-light ">
<input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" /> <input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
<!-- Scrollable Pokémon Grid --> <!-- Scrollable Pokémon Grid -->

2
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css
View File

@ -1,5 +1,5 @@
.pokemon-selector { .pokemon-selector {
height: 70vh; height: 66vh;
width: 20vw; width: 20vw;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 5% / 3.5%; border-radius: 5% / 3.5%;

126
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
View File

@ -6,7 +6,7 @@
@rendermode InteractiveServer @rendermode InteractiveServer
<!-- Table A: Desktop View--> <!-- Table A: Desktop View-->
<div class="container d-none d-md-block " style="height: 70vh;"> <div class="container d-none d-md-block ">
<!-- Main UI --> <!-- Main UI -->
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable"> <div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
<!-- Table Header --> <!-- Table Header -->
@ -16,20 +16,20 @@
<input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" /> <input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
<h2 class="text-info text-decoration-underline">Available Pokémon</h2> <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()) Pokémon</p></div> <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> </div>
</div> </div>
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row"> <div class="tableFixHead bg-secondary table-responsive row">
<table class="table col table-borderless border-0 table-secondary table-striped align-middle"> <table class="table col table-borderless border-0 table-secondary table-striped align-middle">
<!-- Table Head --> <!-- Table Head -->
<thead class=""> <thead class="">
<tr 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-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-1" scope="col">#</th>
<th class="text-white text-bg-info col-2" scope="col">Pokémon</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-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">Sleep Type</th>
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th> <th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
@ -46,84 +46,70 @@
else else
{ {
<!-- Table Body --> <!-- Table Body -->
<tbody class=""> <tbody>
<tr></tr> <tr></tr>
@if (FilteredPokemon != null && FilteredPokemon.Any()) @foreach (var pokemon in FilteredPokemon)
{ {
<tr class="flex-row">
@foreach (var pokemon in FilteredPokemon) <!-- Section: Pokemon Image -->
{ @{
<tr class="flex-row"> string baseUrl = pokemon.PokemonImageUrl;
<!-- Section: Pokemon Image --> string shinyUrl = pokemon.PokemonShinyImageUrl;
@{ }
string baseUrl = pokemon.PokemonImageUrl; <td class="text-center d-none d-md-table-cell">
string shinyUrl = pokemon.PokemonShinyImageUrl; @if (shinyUrl == null)
{
<div class="flip-container">
<div class="flipper">
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
</div>
</div>
} }
<td class="text-center d-none d-md-table-cell"> else
@if (shinyUrl == null) {
{ <div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
<div class="flip-container"> <div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
<div class="flipper"> <img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" /> <img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
</div>
</div> </div>
</div>
} }
else </td>
{
<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>
} <!-- Section 2: Pokemon # -->
</td> <th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
<!-- Section 2: Pokemon # -->
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
<!-- Section 3: Pokemon Name --> <!-- 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> <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 --> <!-- Section 4: Pokemon Type -->
<td class=""> <td class="">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" /> <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>
}
}
else
{
<tr>
<td colspan="100%">
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<p class="text-muted">Pokémon could not be found.</p>
</div> </div>
</td> </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> </tr>
} }
</tbody> </tbody>
@ -145,7 +131,7 @@
<div class="flex-row justify-content-between"> <div class="flex-row justify-content-between">
<div class="text-center position-relative"> <div class="text-center position-relative">
<h2 class="text-white text-decoration-underline">Pokémon</h2> <h2 class="text-white text-decoration-underline">Pokémon</h2>
<div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</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>
@ -180,7 +166,7 @@
</div> </div>
</div> </div>
<div class=""> <div>
<!-- Number and Name --> <!-- Number and Name -->
<h5> <h5>
@pokemon.PokemonId - @pokemon.PokemonId -

8
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css
View File

@ -20,10 +20,6 @@
z-index: 10; z-index: 10;
} }
.align-top-tbody {
vertical-align: top;
}
.pokemon-name-style { .pokemon-name-style {
cursor:pointer; cursor:pointer;
font-size: 1.3rem; font-size: 1.3rem;
@ -82,9 +78,7 @@
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.fixed-row-height {
height: 90px; /* or any height that suits your card style */
}
.pokeimage { .pokeimage {

9
Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor
View File

@ -3,14 +3,7 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @rendermode InteractiveServer
<PageTitle>Crochet Tools</PageTitle>
<head>
<link rel="stylesheet" href="bootstrap/bootstrap-cosmo.css" /> <!-- app.css -->
</head>
<h3 class="text-xl font-bold mb-4">Crochet</h3> <h3 class="text-xl font-bold mb-4">Crochet</h3>
<div class="">
<TemperatureBlanketVisualizer TemperatureDays="temperatureDays" /> <TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
</div>

49
Portfolio.WebUI.Server/Components/Pages/Crochet Pages/CrochetHome.razor.cs
View File

@ -9,60 +9,19 @@ namespace Portfolio.WebUI.Server.Components.Pages.Crochet_Pages
public partial class CrochetHome public partial class CrochetHome
{ {
public List<TemperatureDay> temperatureDays { get; set; } public List<TemperatureDay> temperatureDays { get; set; }
public int YEAR = 2025;
protected override async Task OnInitializedAsync() protected override async Task OnInitializedAsync()
{ {
// Placeholder for loading temperature data // Placeholder for loading temperature data
// Replace with actual API call // Replace with actual API call
//temperatureDays = Enumerable.Range(0, 365).Select(i => new TemperatureDay temperatureDays = Enumerable.Range(0, 365).Select(i => new TemperatureDay
//{
// Date = new DateTime(DateTime.Now.Year - 1, 1, 1).AddDays(i),
// AvgTemp = Random.Shared.Next(10, 95)
//}).ToList();
temperatureDays = GenerateRealisticTemperatureDays(YEAR);
}
public static List<TemperatureDay> GenerateRealisticTemperatureDays(int year)
{
var temperatureDays = new List<TemperatureDay>();
var startDate = new DateTime(year, 1, 1);
int daysInYear = DateTime.IsLeapYear(year) ? 366 : 365;
// Adjusted parameters for desired range
double minAvgTemp = 20.0;
double maxAvgTemp = 84.0;
double amplitude = (maxAvgTemp - minAvgTemp) / 2.0; // 32.5
double avgAnnualTemp = (maxAvgTemp + minAvgTemp) / 2.0; // 52.5
double noiseMax = 3.0; // Small daily variation
for (int i = 0; i < daysInYear; i++)
{ {
var date = startDate.AddDays(i); Date = new DateTime(DateTime.Now.Year - 1, 1, 1).AddDays(i),
double dayOfYearRatio = (2 * Math.PI * i) / daysInYear; AvgTemp = Random.Shared.Next(10, 95)
}).ToList();
// Peak is mid-summer, trough is mid-winter
double seasonalTemp = avgAnnualTemp + amplitude * Math.Sin(dayOfYearRatio - Math.PI / 2);
// Add gentle noise
double dailyNoise = Random.Shared.NextDouble() * noiseMax * 2 - noiseMax;
// Final temperature, clamped to min/max
double finalTemp = Math.Round(seasonalTemp + dailyNoise, 1);
finalTemp = Math.Clamp(finalTemp, minAvgTemp, maxAvgTemp);
temperatureDays.Add(new TemperatureDay
{
Date = date,
AvgTemp = finalTemp
});
}
return temperatureDays;
} }
} }

1
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor
View File

@ -62,5 +62,4 @@
} }
</div> </div>
<hr class="mt-5"/>
</div> </div>

3
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonSleep.razor
View File

@ -20,7 +20,4 @@
<PokemonTable AllPokemon="pokemons"/> <PokemonTable AllPokemon="pokemons"/>
<hr class="mt-5" />
</div> </div>