Add slider to form

src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
     <TargetFramework>net9.0</TargetFramework>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor

@@ -5,8 +5,8 @@
     @Body
 </div>
 
-<span class="orb red"></span>
+<div class="background">
-<span class="orb blue"></span>
+    <span class="orb red"></span>
-<span class="orb green"></span>
+    <span class="orb blue"></span>
-
+    <span class="orb green"></span>
-<div class="background"></div>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -37,10 +37,11 @@
 }
 
 .background {
-    height: 100%;
+    height: 100vh;
-    width: 100%;
+    width: 100vw;
     background: var(--background);
     position: fixed;
+    overflow: hidden;
     top: 0;
     left: 0;
     z-index: var(--index-background);

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor

@@ -1,4 +1,5 @@
 @using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Slider
 @using GameIdeas.Shared.Dto
 
 <EditForm EditContext="EditContext">
@@ -28,6 +29,9 @@
         <div class="container">
             <div class="input-game">
                 <div class="label">@ResourcesKey.Interest :</div>
+                <div class="slider">
+                    <Slider Params="SliderParams" @bind-Value="GameDto.Interest" />
+                </div>
             </div>
             <div class="input-game">
                 <div class="label">@ResourcesKey.Properties :</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs

@@ -1,5 +1,6 @@
 using GameIdeas.BlazorApp.Shared.Components.Popup;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.Slider;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
@@ -15,6 +16,7 @@ public partial class GameCreationForm
     private GameDto GameDto = new();
     private EditContext? EditContext;
     private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation;
+    private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
 
     protected override void OnInitialized()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css

@@ -57,3 +57,8 @@ input {
     font-weight: bold;
     height: 24px;
 }
+
+.slider {
+    padding: 0 20px;
+    align-content: center;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs

@@ -41,7 +41,7 @@ public partial class GameFilter
 
     private EditContext? EditContext;
     private readonly SliderRangeParams SliderRangeParams =
-        new() { Min = 1, ValueMin = 1, ValueMax = 5, Max = 5 };
+        new() { Min = 1, Max = 5 };
 
     protected override void OnInitialized()
     {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -16,6 +16,6 @@ public class GameFilterParams
     public IEnumerable<string>? StorageSizes { get; set; }
     public IEnumerable<string>? LastModification { get; set; }
     public IEnumerable<string>? ReleaseDates { get; set; }
-    public int MaxRating { get; set; }
+    public int MaxRating { get; set; } = 5;
-    public int MinRating { get; set; }
+    public int MinRating { get; set; } = 1;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor

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

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs

@@ -0,0 +1,30 @@
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Slider;
+
+public partial class Slider
+{
+    [Parameter] public SliderParams Params { get; set; } = new();
+    [Parameter] public int Value { get; set; }
+    [Parameter] public EventCallback<int> ValueChanged { get; set; }
+
+    private async Task HandleSlideOnInput()
+    {
+        await ValueChanged.InvokeAsync(Value);
+    }
+
+    private string StatusColor(int value)
+    {
+        string str = "--thumb-color: var({0});";
+
+        int firstTier = (int)Math.Floor(0.33 * Params.Max);
+        int secondTier = (int)Math.Ceiling(0.66 * Params.Max);
+
+        return value switch
+        {
+            int x when x <= firstTier => string.Format(str, "--red"),
+            int x when x >= secondTier => string.Format(str, "--green"),
+            _ => string.Format(str, "--yellow"),
+        };
+    }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css

@@ -0,0 +1,89 @@
+.container {
+    position: relative;
+    width: 100%;
+    z-index: var(--index-component)
+}
+
+input[type="range"] {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    outline: none;
+    margin: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: transparent;
+    pointer-events: none;
+}
+
+.slider-track {
+    width: 100%;
+    height: 2px;
+    margin: auto;
+    border-radius: 2px;
+    background: var(--input-primary);
+    
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-moz-range-track {
+    -moz-appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-ms-track {
+    appearance: none;
+    height: 2px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    background-color: var(--thumb-color);
+    cursor: pointer;
+    margin-top: -6px;
+    pointer-events: auto;
+    border-radius: 50%;
+}
+
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 1em;
+    width: 1em;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    pointer-events: auto;
+    border: none;
+}
+
+input[type="range"]::-ms-thumb {
+    appearance: none;
+    height: 1em;
+    width: 1em;
+    cursor: pointer;
+    border-radius: 50%;
+    background-color: var(--thumb-color);
+    pointer-events: auto;
+}
+
+.values {
+    display: flex;
+    position: absolute;
+    margin-top: 2px;
+    width: 100%;
+    font-weight: bold;
+    justify-content: space-between;
+}
+
+.value {
+    width: 1em;
+    text-align:center;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/SliderParams.cs

@@ -0,0 +1,8 @@
+namespace GameIdeas.BlazorApp.Shared.Components.Slider;
+
+public class SliderParams
+{
+    public int Min{ get; set; }
+    public int Max { get; set; }
+    public int Gap { get; set; } = 0;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor

@@ -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" 
+    <input type="range" id="min-range" style="@StatusColor(Min)" min="@Params.Min" max="@Params.Max" 
-        @bind="@Params.ValueMin" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+        @bind="@Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
-    <input type="range" id="max-range" style="@StatusColor(Params.ValueMax)" min="@Params.Min" max="@Params.Max" 
+    <input type="range" id="max-range" style="@StatusColor(Max)" min="@Params.Min" max="@Params.Max" 
-        @bind="@Params.ValueMax" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
+        @bind="@Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
 
     <div class="values">
-        <span class="value">@Params.ValueMin</span>
+        <span class="value">@Min</span>
-        <span class="value">@Params.ValueMax</span>
+        <span class="value">@Max</span>
     </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs

@@ -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(Max);
-        await MaxChanged.InvokeAsync(Params.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(Min);
-        await MinChanged.InvokeAsync(Params.Min);
     }
 
     private string FillColor()
     {
-        var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent1 = (double)(Min - Params.Min) / (Params.Max - Params.Min) * 100;
-        var percent2 = (double)(Params.ValueMax - 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}%)";
     }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs

@@ -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;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -33,7 +33,6 @@ html {
     font-family: 'Noto Sans', sans-serif;
     font-size: 12px;
     color: var(--white);
-    overflow: hidden;
 }
 
 html, body, #app {

src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs

@@ -7,13 +7,13 @@ public class GameDto
     public DateTime? ReleaseDate { get; set; }
     public DateTime? CreationDate { get; set; }
     public UserDto? CreationUser { get; set; }
-    public int? CreationUserId { get; set; }
+    public int CreationUserId { get; set; }
     public DateTime? ModificationDate { get; set; }
     public UserDto? ModificationUser { get; set; }
     public int? ModificationUserId { get; set; }
     public double? StorageSpace { get; set; }
     public string? Description { get; set; }
-    public int? Interest { get; set; }
+    public int Interest { get; set; } = 3;
     public IEnumerable<PlatformDto>? Platforms { get; set; }
     public IEnumerable<PropertyDto>? Properties { get; set; }
     public IEnumerable<TagDto>? Tags { get; set; }