PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add frontend creation game #13

Merged
Egamorf merged 5 commits from feature/frontend-creation-game into main 2025-04-13 17:21:15 +02:00
Conversation 0 Commits 5 Files Changed 60 +179 -34
18 changed files with 179 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0fb5f8d682 - Show all commits

2
src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj
View File

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

10
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor
View File

@@ -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>
<div class="background">
<span class="orb red"></span>
<span class="orb blue"></span>
<span class="orb green"></span>
</div>

5
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css
View File

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

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor
View File

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

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

@@ -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()
{

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

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

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor
View File

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

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

@@ -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()
{

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs
View File

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

11
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor Normal file
View File

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

30
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.cs Normal file
View File

@@ -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"),
};
}
}

89
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css Normal file
View File

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

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/SliderParams.cs Normal file
View File

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

12
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor
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>

18
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs
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}%)";
}

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRangeParams.cs
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;
}

1
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

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

4
src/GameIdeas/GameIdeas.Shared/Dto/GameDto.cs
View File

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