Compare commits
7 Commits
update/pok
...
master
| Author | SHA1 | Date |
|---|---|---|
Kira Jiroux
|
0b316a3b4b | |
|
Kira Jiroux
|
da30a2b0d5 | |
|
Kira Jiroux
|
b1a9567d31 | |
|
Kira Jiroux
|
7b3761d6a5 | |
|
Kira Jiroux
|
89f60d8c29 | |
|
Kira Jiroux
|
87be31f2f5 | |
|
Kira Jiroux
|
ef3e432347 |
|
|
@ -9,20 +9,27 @@
|
|||
else
|
||||
{
|
||||
|
||||
<h3 class="text-xl font-bold mb-4">Temperature Blanket Visualizer</h3>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-bold mb-4">Temperature Blanket Reviewer</h3>
|
||||
|
||||
<div style="display: flex; overflow-x: auto; background-color: black; padding: 10px;">
|
||||
@foreach (var day in TemperatureDays)
|
||||
{
|
||||
var color = GetColorForTemp(day.AvgTemp);
|
||||
<div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
|
||||
title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="d-flex">
|
||||
<div class="temperature-blanket">
|
||||
@foreach (var day in TemperatureDays)
|
||||
{
|
||||
var color = GetColorForTemp(day.AvgTemp);
|
||||
<div style="width: 6px; height: 600px; background-color:@color; margin-right: 1px;"
|
||||
title="@day.Date.ToString("MMM dd") - @day.AvgTemp°F (@color)">
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="col">
|
||||
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Crochet_Components
|
|||
new() { Min = 35, Max = 42, Color = "#add8e6" },
|
||||
new() { Min = 42, Max = 49, Color = "#00008b" },
|
||||
new() { Min = 49, Max = 56, Color = "#006400" },
|
||||
new() { Min = 56, Max = 63, Color = "#90ee90" },
|
||||
new() { Min = 56, Max = 63, Color = "#07ed07" },
|
||||
new() { Min = 63, Max = 70, Color = "#ffff00" },
|
||||
new() { Min = 70, Max = 77, Color = "#ffa500" },
|
||||
new() { Min = 77, Max = 84, Color = "#ff0000" },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
body {
|
||||
}
|
||||
|
||||
.temperature-blanket {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -4,11 +4,11 @@
|
|||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<div class="relative w-full h-24 px-4" @onmouseup="OnMouseUp" @onmousemove="OnMouseMove">
|
||||
<div class="container" > @* @onmouseup="OnMouseUp" @onmousemove="OnMouseMove" *@
|
||||
<!-- 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++)
|
||||
{
|
||||
var left = i == 0 ? 0 : TempRanges[i - 1].Max;
|
||||
|
|
@ -19,16 +19,75 @@
|
|||
@onmousedown="(e) => OnMouseDown(i, e)"
|
||||
title="@left°F">
|
||||
</div>
|
||||
}
|
||||
} *@
|
||||
|
||||
<!-- Color pickers for each range -->
|
||||
<div class="flex gap-2 mt-6">
|
||||
<div class="card rounded-3">
|
||||
<div class="card-header mb-3 text-center fw-bold">
|
||||
Temperature Blanket Colors
|
||||
</div>
|
||||
|
||||
@for (int i = 0; i < TempRanges.Count; i++)
|
||||
{
|
||||
var localIndex = i;
|
||||
<input type="color"
|
||||
value="@TempRanges[i].Color"
|
||||
@onchange="e => HandleColorChange(e, localIndex)" />
|
||||
@* if (i == 0)
|
||||
{
|
||||
<div class="row align-items-center mb-2">
|
||||
<div class="col-6 text-end pe-2">
|
||||
<label class="form-label mb-0">
|
||||
@TempRanges[i].Max°
|
||||
</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° +
|
||||
</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° – @TempRanges[i].Max°
|
||||
</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° – @TempRanges[i].Max°
|
||||
</label>
|
||||
</div>
|
||||
<div class="col-6 ps-2">
|
||||
<input type="color"
|
||||
value="@TempRanges[i].Color"
|
||||
@onchange="e => HandleColorChange(e, localIndex)" />
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
input[type="color"] {
|
||||
width: 2.5rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="pokemon-rating-panel container">
|
||||
<div class="pokemon-rating-panel">
|
||||
|
||||
<!-- Dropdown Selects -->
|
||||
<div class="ratings bg-light-subtle col">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
<!-- 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" />
|
||||
|
||||
<!-- Scrollable Pokémon Grid -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.pokemon-selector {
|
||||
height: 66vh;
|
||||
height: 70vh;
|
||||
width: 20vw;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5% / 3.5%;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
@rendermode InteractiveServer
|
||||
|
||||
<!-- Table A: Desktop View-->
|
||||
<div class="container d-none d-md-block ">
|
||||
<div class="container d-none d-md-block " style="height: 70vh;">
|
||||
<!-- Main UI -->
|
||||
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
|
||||
<!-- 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" />
|
||||
|
||||
<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 class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tableFixHead bg-secondary table-responsive row">
|
||||
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary 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-2" scope="col">Pokémon</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>
|
||||
|
|
@ -46,70 +46,84 @@
|
|||
else
|
||||
{
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
<tbody class="">
|
||||
<tr></tr>
|
||||
@foreach (var pokemon in FilteredPokemon)
|
||||
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
||||
{
|
||||
<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>
|
||||
|
||||
|
||||
@foreach (var pokemon in FilteredPokemon)
|
||||
{
|
||||
<tr class="flex-row">
|
||||
<!-- Section: Pokemon Image -->
|
||||
@{
|
||||
string baseUrl = pokemon.PokemonImageUrl;
|
||||
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
||||
}
|
||||
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" />
|
||||
<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>
|
||||
</div>
|
||||
|
||||
}
|
||||
</td>
|
||||
}
|
||||
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>
|
||||
|
||||
<!-- Section 2: Pokemon # -->
|
||||
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
||||
}
|
||||
</td>
|
||||
|
||||
<!-- 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 -->
|
||||
<td class="">
|
||||
<div class="d-flex justify-content-center">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
||||
<!-- 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>
|
||||
}
|
||||
}
|
||||
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>
|
||||
</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>
|
||||
|
|
@ -131,7 +145,7 @@
|
|||
<div class="flex-row justify-content-between">
|
||||
<div class="text-center position-relative">
|
||||
<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())</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()) Pokémon</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -166,7 +180,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="">
|
||||
<!-- Number and Name -->
|
||||
<h5>
|
||||
@pokemon.PokemonId -
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
z-index: 10;
|
||||
}
|
||||
|
||||
.align-top-tbody {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.pokemon-name-style {
|
||||
cursor:pointer;
|
||||
font-size: 1.3rem;
|
||||
|
|
@ -78,7 +82,9 @@
|
|||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
|
||||
.fixed-row-height {
|
||||
height: 90px; /* or any height that suits your card style */
|
||||
}
|
||||
|
||||
|
||||
.pokeimage {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,14 @@
|
|||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<h3 class="text-xl font-bold mb-4">Crochet</h3>
|
||||
<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>
|
||||
<div class="">
|
||||
<TemperatureBlanketVisualizer TemperatureDays="temperatureDays" />
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,20 +9,61 @@ namespace Portfolio.WebUI.Server.Components.Pages.Crochet_Pages
|
|||
public partial class CrochetHome
|
||||
{
|
||||
public List<TemperatureDay> temperatureDays { get; set; }
|
||||
public int YEAR = 2025;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
// Placeholder for loading temperature data
|
||||
// Replace with actual API call
|
||||
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 = 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);
|
||||
double dayOfYearRatio = (2 * Math.PI * i) / daysInYear;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -62,4 +62,5 @@
|
|||
|
||||
}
|
||||
</div>
|
||||
<hr class="mt-5"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,4 +20,7 @@
|
|||
|
||||
<PokemonTable AllPokemon="pokemons"/>
|
||||
|
||||
<hr class="mt-5" />
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue