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 +146 -24
12 changed files with 146 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a1d931836a - Show all commits

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor
View File

@@ -3,22 +3,25 @@
@using GameIdeas.BlazorApp.Pages.Games.Filter
@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.BlazorApp.Shared.Components.Popup
@using GameIdeas.Resources
@layout MainLayout
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<GameHeader>
<GameHeader AddTypeChanged="HandleAddClicked">
<GameFilter @bind-DisplayType=DisplayType
@bind-GameFilterParams=GameFilterParams />
</GameHeader>
<div class="container">
<div class="content">
</div>
<AdvancedGameFilter @bind-GameFilterParams=GameFilterParams />
</div>
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
</Popup>

19
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GameBase.razor.cs
View File

@@ -1,4 +1,5 @@
using GameIdeas.BlazorApp.Pages.Games.Filter;
using GameIdeas.BlazorApp.Shared.Components.Popup;
using GameIdeas.BlazorApp.Shared.Models;
namespace GameIdeas.BlazorApp.Pages.Games;
@@ -7,4 +8,22 @@ public partial class GameBase ()
{
private DisplayType DisplayType = DisplayType.List;
private GameFilterParams GameFilterParams = new();
private Popup? ManualAddPopup;
private void HandleAddClicked(AddType addType)
{
switch (addType)
{
case AddType.Manual:
ManualAddPopup?.Open();
break;
case AddType.Auto:
break;
default:
break;
}
}
private void HandleBackdropManualAddClicked()
{
ManualAddPopup?.Close();
}
}

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
View File

@@ -22,11 +22,9 @@
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<SelectList TItem="AddType"
Items="SelectElements"
<SelectList @ref="SelectListAdd" TItem="AddType" Items="SelectElements"
ValueChanged=HandleAddTypeClickedAsync
Theme="SelectListTheme.Navigation"
AlignRight=true>
Theme="SelectListTheme.Navigation" AlignRight=true>
<div class="second-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" />

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
View File

@@ -1,4 +1,5 @@
using GameIdeas.BlazorApp.Shared.Components.Account;
using GameIdeas.BlazorApp.Shared.Components.Select;
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Models;
using GameIdeas.Resources;
@@ -18,6 +19,7 @@ public partial class GameHeader : ComponentBase
];
private AccountSettings? AccountSettings;
private SelectList<AddType>? SelectListAdd;
private void HandleIconClicked()
{
@@ -26,6 +28,7 @@ public partial class GameHeader : ComponentBase
private async Task HandleAddTypeClickedAsync(AddType value)
{
SelectListAdd?.Close();
await AddTypeChanged.InvokeAsync(value);
}

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/BackdropFilter/BackdropFilter.razor.js
View File

@@ -1,3 +1,3 @@
window.setBodyOverflow = (overflow) => {
document.getElementsByTagName('html')[0].style.overflow = overflow;
document.getElementsByClassName('page')[0].style.overflow = overflow;
}

15
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor Normal file
View File

@@ -0,0 +1,15 @@
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
@using GameIdeas.BlazorApp.Shared.Constants
<div class="popup-wrapper" style="@GetDisplayStyle()">
<div class="popup-content">
@if (Closable)
{
<button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
}
@ChildContent
</div>
</div>
<BackdropFilter @ref="BackdropFilter" OnClick="HandleBackdropFilterClicked" CloseOnClick="@Closable"
AllowBodyScroll="false" Color="BackdropFilterColor.Overlay" />

49
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs Normal file
View File

@@ -0,0 +1,49 @@
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components.Popup;
public partial class Popup
{
[Parameter] public RenderFragment? ChildContent { get; set; }
[Parameter] public bool IsDrawerOpen { get; set; }
[Parameter] public EventCallback BackdropFilterClicked { get; set; }
[Parameter] public bool Closable { get; set; } = true;
private BackdropFilter.BackdropFilter? BackdropFilter;
public bool IsOpen { get; set; }
protected override async Task OnParametersSetAsync()
{
await base.OnParametersSetAsync();
if (BackdropFilter?.IsVisible == true && IsOpen)
{
await BackdropFilter.Hide();
}
if (BackdropFilter?.IsVisible == false && IsOpen)
{
await BackdropFilter.Show();
}
}
public async Task Open()
{
IsOpen = true;
await BackdropFilter?.Show()!;
StateHasChanged();
}
public async Task Close()
{
IsOpen = false;
await BackdropFilter?.Hide()!;
StateHasChanged();
}
private async Task HandleBackdropFilterClicked()
{
await BackdropFilterClicked.InvokeAsync();
}
private string GetDisplayStyle() => IsOpen ? "display: flex;" : "display: none;";
}

27
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css Normal file
View File

@@ -0,0 +1,27 @@
.popup-wrapper {
display: none;
justify-content: center;
align-items: center;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: var(--index-popup);
}
.popup-content {
position: relative;
background-color: var(--dropdown-content);
padding: 10px;
border-radius: var(--big-radius);
box-shadow: var(--drop-shadow);
}
.popup-content button{
top: 10px;
right: 10px;
position: absolute;
background: transparent;
border: none;
outline: none;
}

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor
View File

@@ -1,4 +1,6 @@
@using GameIdeas.Shared.Constants
@using GameIdeas.BlazorApp.Shared.Constants
@using GameIdeas.Shared.Constants
<div class="search-container">
<input @ref=InputText
type="text"
@@ -13,7 +15,7 @@
@if (!string.IsNullOrEmpty(Text))
{
<div class="clear-icon" @onclick=HandleClearClicked>
@ClearIcon
@Icons.Shared.Close;
</div>
}

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs
View File

@@ -1,3 +1,4 @@
using GameIdeas.BlazorApp.Shared.Constants;
using GameIdeas.Shared.Constants;
using Microsoft.AspNetCore.Components;
@@ -14,7 +15,6 @@ public partial class SearchInput
[Parameter] public SearchInputIcon Icon { get; set; }
private ElementReference InputText;
private readonly MarkupString ClearIcon = new(Icons.Search.Clear);
protected override void OnInitialized()
{
@@ -52,8 +52,8 @@ public partial class SearchInput
{
return Icon switch
{
SearchInputIcon.Dropdown => new MarkupString(Icons.Search.Triangle),
SearchInputIcon.Search => new MarkupString(Icons.Search.Glass),
SearchInputIcon.Dropdown => Icons.Search.Triangle,
SearchInputIcon.Search => Icons.Search.Glass,
_ => new MarkupString()
};
}

7
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.cs
View File

@@ -17,10 +17,11 @@ public partial class SelectList<TItem>
private bool IsContentOpen = false;
private void HandleButtonClicked()
{
public void Close() =>
IsContentOpen = false;
private void HandleButtonClicked() =>
IsContentOpen = !IsContentOpen;
}
private void HandleContentClosed()
{

23
src/GameIdeas/GameIdeas.Shared/Constants/Icons.cs → src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Constants/Icons.cs
View File

@@ -1,4 +1,6 @@
namespace GameIdeas.Shared.Constants;
using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Constants;
public static class Icons
{
@@ -8,16 +10,19 @@ public static class Icons
public static class Search
{
public const string Clear = OpenBraket +
"<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
CloseBraket;
public const string Glass = OpenBraket +
public readonly static MarkupString Glass = new(OpenBraket +
"<path d=\"M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z\" />" +
CloseBraket;
CloseBraket);
public const string Triangle = OpenBraket +
public readonly static MarkupString Triangle = new(OpenBraket +
"<path d=\"M1 3H23L12 22\" />" +
CloseBraket;
CloseBraket);
}
public static class Shared
{
public readonly static MarkupString Close = new(OpenBraket +
"<path d=\"M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z\" />" +
CloseBraket);
}
}