Add frontend creation game (#13)

Reviewed-on: #13
This commit was merged in pull request #13.
This commit is contained in:
2025-04-13 17:21:15 +02:00
parent 3ea96186e7
commit 225e8ba140
60 changed files with 913 additions and 231 deletions

View File

@@ -1,13 +1,13 @@
<div class="container">
<div class="slider-track" style="@FillColor()"></div>
<input type="range" id="min-range" style="@StatusColor(Params.ValueMin)" min="@Params.Min" max="@Params.Max"
@bind="@Params.ValueMin" @bind:event="oninput" @bind:after=HandleSlideOnInput />
<input type="range" id="max-range" style="@StatusColor(Params.ValueMax)" min="@Params.Min" max="@Params.Max"
@bind="@Params.ValueMax" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
<input type="range" id="min-range" style="@StatusColor(Min)" min="@Params.Min" max="@Params.Max"
@bind="@Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
<input type="range" id="max-range" style="@StatusColor(Max)" min="@Params.Min" max="@Params.Max"
@bind="@Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
<div class="values">
<span class="value">@Params.ValueMin</span>
<span class="value">@Params.ValueMax</span>
<span class="value">@Min</span>
<span class="value">@Max</span>
</div>
</div>

View File

@@ -13,30 +13,28 @@ public partial class SliderRange
private async Task HandleSlideTwoInput()
{
if (Params.ValueMax - Params.ValueMin <= Params.Gap)
if (Max - Min <= Params.Gap)
{
Params.ValueMin = Params.ValueMax - Params.Gap;
Min = Max - Params.Gap;
}
Max = Params.Max;
await MaxChanged.InvokeAsync(Params.Max);
await MaxChanged.InvokeAsync(Max);
}
private async Task HandleSlideOnInput()
{
if (Params.ValueMax - Params.ValueMin <= Params.Gap)
if (Max - Min <= Params.Gap)
{
Params.ValueMax = Params.ValueMin + Params.Gap;
Max = Min + Params.Gap;
}
Min = Params.Min;
await MinChanged.InvokeAsync(Params.Min);
await MinChanged.InvokeAsync(Min);
}
private string FillColor()
{
var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
var percent1 = (double)(Min - Params.Min) / (Params.Max - Params.Min) * 100;
var percent2 = (double)(Max - Params.Min) / (Params.Max - Params.Min) * 100;
return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
}

View File

@@ -4,7 +4,5 @@ public class SliderRangeParams
{
public int Min{ get; set; }
public int Max { get; set; }
public int ValueMin { get; set; }
public int ValueMax { get; set; }
public int Gap { get; set; } = 0;
}