From 0fb5f8d682733d1153cb9d6661240bdee5438039 Mon Sep 17 00:00:00 2001
From: Egamorf <maxime.adler76@gmail.com>
Date: Sun, 13 Apr 2025 14:28:44 +0200
Subject: [PATCH] Add slider to form

---
 .../GameIdeas.BlazorApp.csproj                |  2 +-
 .../Layouts/MainLayout.razor                  | 10 +--
 .../Layouts/MainLayout.razor.css              |  5 +-
 .../Games/Components/GameCreationForm.razor   |  4 +
 .../Components/GameCreationForm.razor.cs      |  2 +
 .../Components/GameCreationForm.razor.css     |  5 ++
 .../Pages/Games/Filter/GameFilter.razor       |  4 +-
 .../Pages/Games/Filter/GameFilter.razor.cs    |  2 +-
 .../Pages/Games/Filter/GameFilterParams.cs    |  4 +-
 .../Shared/Components/Slider/Slider.razor     | 11 +++
 .../Shared/Components/Slider/Slider.razor.cs  | 30 +++++++
 .../Shared/Components/Slider/Slider.razor.css | 89 +++++++++++++++++++
 .../Shared/Components/Slider/SliderParams.cs  |  8 ++
 .../Components/SliderRange/SliderRange.razor  | 12 +--
 .../SliderRange/SliderRange.razor.cs          | 18 ++--
 .../SliderRange/SliderRangeParams.cs          |  2 -
 .../GameIdeas.BlazorApp/wwwroot/css/app.css   |  1 -
 src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs |  4 +-
 18 files changed, 179 insertions(+), 34 deletions(-)
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
 create mode 100644 src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/SliderParams.cs

diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj b/src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj
index 0388002..4595e9d 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj
+++ b/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>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
index 81e4bfe..8b1aa4e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
@@ -5,8 +5,8 @@
     @Body
 </div>
 
-<span class="orb red"></span>
-<span class="orb blue"></span>
-<span class="orb green"></span>
-
-<div class="background"></div>
\ No newline at end of file
+<div class="background">
+    <span class="orb red"></span>
+    <span class="orb blue"></span>
+    <span class="orb green"></span>
+</div>
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
index 407f5bd..60ead01 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
@@ -37,10 +37,11 @@
 }
 
 .background {
-    height: 100%;
-    width: 100%;
+    height: 100vh;
+    width: 100vw;
     background: var(--background);
     position: fixed;
+    overflow: hidden;
     top: 0;
     left: 0;
     z-index: var(--index-background);
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
index e755d54..f639a03 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
+++ b/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>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
index edf6d17..4462f53 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
+++ b/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()
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
index 87a6bcd..7e0f33a 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css
@@ -56,4 +56,9 @@ input {
     align-content: center;
     font-weight: bold;
     height: 24px;
+}
+
+.slider {
+    padding: 0 20px;
+    align-content: center;
 }
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
index 25c16a0..48fca5e 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
+++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
@@ -54,8 +54,8 @@
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                        @bind-Max=GameFilterParams.MaxRating
-                        @bind-Min=GameFilterParams.MinRating />
+                     @bind-Max=GameFilterParams.MaxRating
+                     @bind-Min=GameFilterParams.MinRating />
     </div>
 </div>
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
index 49d7461..b97008c 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.cs
+++ b/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()
     {
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
index 5c5a65c..77b9354 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
+++ b/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 MinRating { get; set; }
+    public int MaxRating { get; set; } = 5;
+    public int MinRating { get; set; } = 1;
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor
new file mode 100644
index 0000000..d4db8aa
--- /dev/null
+++ b/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>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs
new file mode 100644
index 0000000..007bf0a
--- /dev/null
+++ b/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"),
+        };
+    }
+}
\ No newline at end of file
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
new file mode 100644
index 0000000..5954b37
--- /dev/null
+++ b/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;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/SliderParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/SliderParams.cs
new file mode 100644
index 0000000..5ba67e0
--- /dev/null
+++ b/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;
+}
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
index f0eb5ab..ca54e27 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
+++ b/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" 
-        @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>
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
index 41841cb..2fee237 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
+++ b/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(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}%)";
     }
 
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
index b82f00b..7b65539 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
+++ b/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;
 }
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
index 54720d9..7580dab 100644
--- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
+++ b/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 {
diff --git a/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs b/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
index 44e685b..7917133 100644
--- a/src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
+++ b/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; }