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 +204 -23
16 changed files with 204 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4e687e87ee - Show all commits

50
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor Normal file
View File

@@ -0,0 +1,50 @@
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.Shared.Dto
<EditForm EditContext="EditContext">
<div class="game-form">
<div class="container">
<div class="input-game">
<div id="first-label" class="label">@ResourcesKey.Title :</div>
<input type="text" class="title">
</div>
<div class="input-game">
<div class="label">@ResourcesKey.ReleaseDate :</div>
<input type="date" class="date">
</div>
<div class="input-game">
<div class="label">@ResourcesKey.StorageSize :</div>
<input type="text" class="storage">
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Developers :</div>
<MultipleSelectList TItem="DeveloperDto" Theme="SelectListTheme" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Publishers :</div>
<MultipleSelectList TItem="PublisherDto" Theme="SelectListTheme" />
</div>
</div>
<div class="container">
<div class="input-game">
<div class="label">@ResourcesKey.Interest :</div>
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Properties :</div>
<MultipleSelectList TItem="PropertyDto" Theme="SelectListTheme" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Genres :</div>
<MultipleSelectList TItem="TagDto" Theme="SelectListTheme" />
</div>
<div class="input-game">
<div class="label">@ResourcesKey.Platforms :</div>
<MultipleSelectList TItem="PlatformDto" Theme="SelectListTheme" />
</div>
</div>
</div>
<div class="description-container">
<div id="label-description">@ResourcesKey.Description :</div>
<input type="text" class="description" @bind-value=GameDto.Description>
</div>
</EditForm>

28
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs Normal file
View File

@@ -0,0 +1,28 @@
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.JSInterop;
namespace GameIdeas.BlazorApp.Pages.Games.Components;
public partial class GameCreationForm
{
[Inject] private IJSRuntime Js { get; set; } = default!;
private GameDto GameDto = new();
private EditContext? EditContext;
private readonly SelectListTheme SelectListTheme = SelectListTheme.Creation;
protected override void OnInitialized()
{
EditContext = new(GameDto);
base.OnInitialized();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Js.InvokeVoidAsync("addResizeGameFormListener");
await base.OnAfterRenderAsync(firstRender);
}
}

54
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css Normal file
View File

@@ -0,0 +1,54 @@
.game-form {
display: flex;
flex-direction: row;
gap: 20px;
}
.container {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-game {
display: grid;
grid-template-columns: auto 200px;
grid-gap: 8px;
height: 24px;
}
.label {
text-wrap: nowrap;
align-content: center;
font-weight: bold;
grid-column: 1;
}
input {
width: 100%;
background: var(--input-secondary);
border: solid 1px var(--input-selected);
outline: none;
border-radius: var(--small-radius);
grid-column: 2;
box-sizing: border-box;
color: var(--white);
}
.description-container {
margin-top: 8px;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 8px;
}
.description {
min-height: 140px;
}
#label-description {
text-wrap: nowrap;
align-content: center;
font-weight: bold;
height: 24px;
}

10
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.js Normal file
View File

@@ -0,0 +1,10 @@
function resizeFormContent() {
const label = document.getElementById('first-label');
const targetLabel = document.getElementById('label-description');
targetLabel.style.width = window.getComputedStyle(label).getPropertyValue("width");
}
window.addResizeGameFormListener = () => {
resizeFormContent();
window.addEventListener('resize', resizeFormContent);
};

8
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor
View File

@@ -6,14 +6,14 @@
<div class="duplicate">
<MultipleSelectList TItem="string"
Items="Plateforms"
@bind-Values=GameFilterParams!.Plateforms
@bind-Values=GameFilterParams!.Platforms
Placeholder="@ResourcesKey.Platforms"
Theme="SelectListTheme.AdvancedFilter" />
<MultipleSelectList TItem="string"
Items="Genres"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams!.Genres
@bind-Values=GameFilterParams!.Tags
Theme="SelectListTheme.AdvancedFilter" />
</div>
@@ -32,7 +32,7 @@
<MultipleSelectList TItem="string"
Items="StorageSizes"
Placeholder="@ResourcesKey.StorageSizes"
Placeholder="@ResourcesKey.StorageSize"
@bind-Values=GameFilterParams!.StorageSizes
Theme="SelectListTheme.AdvancedFilter" />
@@ -44,7 +44,7 @@
<MultipleSelectList TItem="string"
Items="ReleaseDates"
Placeholder="@ResourcesKey.ReleaseDates"
Placeholder="@ResourcesKey.ReleaseDate"
@bind-Values=GameFilterParams!.ReleaseDates
Theme="SelectListTheme.AdvancedFilter" />

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

@@ -40,7 +40,7 @@
<MultipleSelectList TItem="string"
Items="Plateforms"
Placeholder="@ResourcesKey.Platforms"
@bind-Values=GameFilterParams.Plateforms
@bind-Values=GameFilterParams.Platforms
Theme="SelectListTheme.Filter" />
</div>
@@ -48,7 +48,7 @@
<MultipleSelectList TItem="string"
Items="Genres"
Placeholder="@ResourcesKey.Genres"
@bind-Values=GameFilterParams.Genres
@bind-Values=GameFilterParams.Tags
Theme="SelectListTheme.Filter" />
</div>

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

@@ -8,8 +8,9 @@ public class GameFilterParams
public SortType? SortType { get; set; }
public Func<GameDto?, object?>? SortProperty { get; set; }
public string? SearchName { get; set; }
public IEnumerable<string>? Plateforms { get; set; }
public IEnumerable<string>? Genres { get; set; }
public IEnumerable<string>? Platforms { get; set; }
public IEnumerable<string>? Properties { get; set; }
public IEnumerable<string>? Tags { get; set; }
public IEnumerable<string>? Publishers { get; set; }
public IEnumerable<string>? Developers { get; set; }
public IEnumerable<string>? StorageSizes { get; set; }

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

@@ -1,5 +1,6 @@
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Pages.Games.Components
@using GameIdeas.BlazorApp.Pages.Games.Filter
@using GameIdeas.BlazorApp.Pages.Games.Header
@using GameIdeas.BlazorApp.Shared.Components
@@ -23,5 +24,5 @@
</div>
<Popup @ref=ManualAddPopup BackdropFilterClicked="HandleBackdropManualAddClicked">
<GameCreationForm />
</Popup>

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

@@ -5,7 +5,7 @@
}
.backdrop-filter.overlay {
background-color: var(--grey-filter);
background-color: rgba(0, 0, 0, 0.2);
}
.backdrop-filter.transparent {

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

@@ -17,11 +17,25 @@
box-shadow: var(--drop-shadow);
}
.popup-content button{
top: 10px;
right: 10px;
.popup-content button {
top: 4px;
right: 4px;
position: absolute;
background: transparent;
border: none;
outline: none;
padding: 0;
height: 20px;
width: 20px;
}
.popup-content button svg {
height: 18px;
fill: var(--white);
}
.popup-content button:hover {
cursor: pointer;
background: var(--input-selected);
border-radius: var(--small-radius);
}

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

@@ -24,6 +24,7 @@
background: none !important;
color: var(--white);
height: 100%;
width: 100%;
padding: 0;
min-width: 0;
}

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Models/SelectTheme.cs
View File

@@ -5,5 +5,6 @@ public enum SelectListTheme
Navigation,
Sort,
Filter,
AdvancedFilter
AdvancedFilter,
Creation
}

14
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css
View File

@@ -30,14 +30,22 @@
margin: 2px 6px;
border-bottom: 2px solid var(--input-selected);
}
/* Advanced filter */
::deep .select-button.advancedfilter .search-container {
height: 24px;
background: var(--input-secondary);
}
::deep .select-button.advancedfilter .search-container input::placeholder {
color: #bbb;
::deep .select-button.advancedfilter .search-container input::placeholder {
color: #bbb;
}
/* Creation */
::deep .select-button.creation .search-container {
height: 24px;
background: var(--input-secondary);
border: solid 1px var(--input-selected);
box-sizing: border-box;
}
/* width */

1
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html
View File

@@ -28,6 +28,7 @@
<script src="_framework/blazor.webassembly.js"></script>
<script src="Shared/Components/BackdropFilter/BackdropFilter.razor.js"></script>
<script src="Shared/Components/Select/MultipleSelectList.razor.js"></script>
<script src="Pages/Games/Components/GameCreationForm.razor.js"></script>
</body>
</html>

16
src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
View File

@@ -18,9 +18,13 @@ public class Translations (TranslationService translationService)
public string Genres => translationService.Translate(nameof(Genres));
public string Publishers => translationService.Translate(nameof(Publishers));
public string Developers => translationService.Translate(nameof(Developers));
public string StorageSizes => translationService.Translate(nameof(StorageSizes));
public string StorageSize => translationService.Translate(nameof(StorageSize));
public string LastModification => translationService.Translate(nameof(LastModification));
public string ReleaseDates => translationService.Translate(nameof(ReleaseDates));
public string ReleaseDate => translationService.Translate(nameof(ReleaseDate));
public string Title => translationService.Translate(nameof(Title));
public string Interest => translationService.Translate(nameof(Interest));
public string Properties => translationService.Translate(nameof(Properties));
public string Description => translationService.Translate(nameof(Description));
}
public static class ResourcesKey
@@ -47,7 +51,11 @@ public static class ResourcesKey
public static string Genres => _instance?.Genres ?? throw new InvalidOperationException("ResourcesKey.Genres is not initialized.");
public static string Publishers => _instance?.Publishers ?? throw new InvalidOperationException("ResourcesKey.Publishers is not initialized.");
public static string Developers => _instance?.Developers ?? throw new InvalidOperationException("ResourcesKey.Developers is not initialized.");
public static string StorageSizes => _instance?.StorageSizes ?? throw new InvalidOperationException("ResourcesKey.StorageSizes is not initialized.");
public static string StorageSize => _instance?.StorageSize ?? throw new InvalidOperationException("ResourcesKey.StorageSize is not initialized.");
public static string LastModification => _instance?.LastModification ?? throw new InvalidOperationException("ResourcesKey.LastModification is not initialized.");
public static string ReleaseDates => _instance?.ReleaseDates ?? throw new InvalidOperationException("ResourcesKey.ReleaseDates is not initialized.");
public static string ReleaseDate => _instance?.ReleaseDate ?? throw new InvalidOperationException("ResourcesKey.ReleaseDate is not initialized.");
public static string Title => _instance?.Title ?? throw new InvalidOperationException("ResourcesKey.Title is not initialized.");
public static string Interest => _instance?.Interest ?? throw new InvalidOperationException("ResourcesKey.Interest is not initialized.");
public static string Properties => _instance?.Properties ?? throw new InvalidOperationException("ResourcesKey.Properties is not initialized.");
public static string Description => _instance?.Description ?? throw new InvalidOperationException("ResourcesKey.Description is not initialized.");
}

8
src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
View File

@@ -14,7 +14,11 @@
"Genres": "Genres",
"Publishers": "Editeurs",
"Developers": "Développeurs",
"StorageSizes": "Taille d'espace",
"StorageSize": "Taille d'espace",
"LastModification": "Dernière modifications",
"ReleaseDates": "Dates de parution"
"ReleaseDate": "Date de parution",
"Title": "Titre",
"Interest": "Intérêt",
"Properties": "Propriétés",
"Description": "Description"
}