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

Create game from form #15

Merged
Egamorf merged 8 commits from feature/create-game into main 2025-04-15 23:33:02 +02:00
Conversation 0 Commits 8 Files Changed 36 +93 -50
13 changed files with 93 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ab0ab54f61 - Show all commits

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

@@ -1,4 +1,5 @@
@using Blazored.FluentValidation
@using GameIdeas.BlazorApp.Shared.Components.CircleLoader
@using GameIdeas.BlazorApp.Shared.Components.SelectSearch
@using GameIdeas.BlazorApp.Shared.Components.Slider
@using GameIdeas.Shared.Dto
@@ -22,14 +23,14 @@
<div class="input-game">
<div class="label">@ResourcesKey.Developers :</div>
<SelectSearch TItem="DeveloperDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
Items="Categories?.Developers" @bind-Values=GameDto.Developers
AddItem="@(str => new DeveloperDto() { Name = str })" />
Items="Categories?.Developers" @bind-Values=GameDto.Developers
AddItem="@(str => new DeveloperDto() { Name = str })" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Publishers :</div>
<SelectSearch TItem="PublisherDto" Theme="Theme" GetLabel="@(i => i.Name)" QuickAdd=true
Items="Categories?.Publishers" @bind-Values=GameDto.Publishers
AddItem="@(str => new PublisherDto() { Name = str })" />
Items="Categories?.Publishers" @bind-Values=GameDto.Publishers
AddItem="@(str => new PublisherDto() { Name = str })" />
</div>
</div>
<div class="container">
@@ -42,21 +43,21 @@
<div class="input-game">
<div class="label">@ResourcesKey.Properties :</div>
<SelectSearch TItem="PropertyDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
Items="Categories?.Properties" @bind-Values=GameDto.Properties
AddItem="@(str => new PropertyDto() { Label = str })" />
Items="Categories?.Properties" @bind-Values=GameDto.Properties
AddItem="@(str => new PropertyDto() { Label = str })" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Tags :</div>
<SelectSearch TItem="TagDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
Items="Categories?.Tags" @bind-Values=GameDto.Tags
AddItem="@(str => new TagDto() { Label = str })" />
Items="Categories?.Tags" @bind-Values=GameDto.Tags
AddItem="@(str => new TagDto() { Label = str })" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Platforms :</div>
<SelectSearch TItem="PlatformDto" Theme="Theme" GetLabel="@(i => i.Label)" QuickAdd=true
Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
AddItem="@(str => new PlatformDto() { Label = str })" />
Items="Categories?.Platforms" @bind-Values=GameDto.Platforms
AddItem="@(str => new PlatformDto() { Label = str })" />
</div>
@foreach (var platform in GameDto.Platforms ?? [])
@@ -75,13 +76,18 @@
<div class="bottom-container">
<ValidationSummary class="invalid-content" />
<div class="buttons">
<button type="reset" class="cancel" @onclick=HandleOnCancel>
@ResourcesKey.Reset
</button>
<button type="submit" class="submit">
@ResourcesKey.Save
</button>
<div class="buttons">
<button type="reset" class="cancel" @onclick=HandleOnCancel disabled="@IsLoading">
@ResourcesKey.Reset
</button>
<button type="submit" class="submit" disabled="@IsLoading">
@ResourcesKey.Save
</button>
</div>
</div>
</div>
</EditForm>
</EditForm>
@if (IsLoading)
{
<CircleLoader />
}

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

@@ -20,22 +20,18 @@ public partial class GameCreationForm
private EditContext? EditContext;
private readonly SelectTheme Theme = SelectTheme.Creation;
private readonly SliderParams SliderParams = new() { Gap = 1, Min = 1, Max = 5 };
private bool IsLoading = true;
protected override async Task OnInitializedAsync()
{
EditContext = new(GameDto);
if (Popup != null)
{
Popup.StateChanged += async (_, isOpen) => await HandlePopupStateChanged();
}
await base.OnInitializedAsync();
}
private async Task HandlePopupStateChanged()
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Js.InvokeVoidAsync("resizeGameForm");
}
private void HandleOnCancel()
@@ -50,6 +46,10 @@ public partial class GameCreationForm
return;
}
IsLoading = true;
await GameGateway.CreateGame(GameDto);
IsLoading = false;
}
}

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

@@ -78,7 +78,6 @@
height: 28px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
@@ -98,6 +97,7 @@
}
.buttons {
margin-left: auto;
height: 100%;
display: flex;
flex-direction: row;
@@ -112,4 +112,9 @@
color: var(--white);
font-weight: bold;
padding: 0 10px;
cursor: pointer;
}
.buttons button:hover {
background: var(--violet-selected);
}

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

@@ -24,6 +24,6 @@
<AdvancedGameFilter @bind-GameFilter=GameFilter Categories="Categories" />
</div>
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked" Closable=false>
<GameCreationForm Categories="Categories" />
</Popup>

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

@@ -1,5 +1,5 @@
.backdrop-filter {
position: absolute;
position: fixed;
top: 0;
left: 0;
width: 100%;

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor Normal file
View File

@@ -0,0 +1,3 @@
<div class="overlay"> <div class="loader"></div> </div>

31
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/CircleLoader/CircleLoader.razor.css Normal file
View File

@@ -0,0 +1,31 @@
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--overlay);
}
.loader {
border: 8px solid var(--violet-selected);
border-top: 8px solid var(--violet);
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

19
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor
View File

@@ -2,15 +2,18 @@
@using GameIdeas.BlazorApp.Shared.Constants
<CascadingValue Value="this">
<div class="popup-wrapper" style="@GetDisplayStyle()">
<div class="popup-content">
@if (Closable)
{
<button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
}
@ChildContent
@if (IsOpen)
{
<div class="popup-wrapper">
<div class="popup-content">
@if (Closable)
{
<button @onclick="HandleBackdropFilterClicked">@Icons.Shared.Close</button>
}
@ChildContent
</div>
</div>
</div>
}
</CascadingValue>

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.cs
View File

@@ -5,11 +5,9 @@ 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;
public bool IsOpen { get; set; }
public EventHandler<bool>? StateChanged { get; set; }
private BackdropFilter.BackdropFilter? BackdropFilter;
@@ -32,8 +30,6 @@ public partial class Popup
IsOpen = true;
await BackdropFilter?.Show()!;
StateHasChanged();
StateChanged?.Invoke(null, IsOpen);
}
public async Task Close()
@@ -41,14 +37,10 @@ public partial class Popup
IsOpen = false;
await BackdropFilter?.Hide()!;
StateHasChanged();
StateChanged?.Invoke(null, IsOpen);
}
private async Task HandleBackdropFilterClicked()
{
await BackdropFilterClicked.InvokeAsync();
}
private string GetDisplayStyle() => IsOpen ? "display: flex;" : "display: none;";
}

6
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Popup/Popup.razor.css
View File

@@ -1,12 +1,14 @@
.popup-wrapper {
display: none;
display: flex;
justify-self: anchor-center;
align-self: anchor-center;
position: fixed;
position: absolute;
z-index: var(--index-popup);
}
.popup-content {
overflow: hidden;
position: relative;
background-color: var(--dropdown-content);
padding: 10px;
border-radius: var(--big-radius);

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css
View File

@@ -1,7 +1,7 @@
.container {
position: relative;
width: 100%;
z-index: var(--index-component)
z-index: 0
}
input[type="range"] {

2
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css
View File

@@ -1,7 +1,7 @@
.container {
position: relative;
width: 100%;
z-index: var(--index-component)
z-index: 0
}
input[type="range"] {

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

@@ -27,6 +27,7 @@
--index-backdrop: 700;
--index-dropdown: 900;
--index-popup: 1000;
--index-overlay: 1100;
}
html {
@@ -61,7 +62,7 @@ html, body, #app {
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
z-index: 10000;
}
#blazor-error-ui .dismiss {