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

Add header for game list #3

Merged
Egamorf merged 14 commits from feature/add-header-for-games-list into main 2025-02-27 01:09:05 +01:00
Conversation 0 Commits 14 Files Changed 28 +252 -378
17 changed files with 252 additions and 378 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c04b8285d7 - Show all commits

8
src/GameIdeas/Client/GameIdeas.BlazorApp/App.razor
View File

@@ -1,11 +1,13 @@
<Router AppAssembly="@typeof(App).Assembly">
@using GameIdeas.BlazorApp.Layouts
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(GamesBase)" />
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(GamesBase)">
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>

14
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor Normal file
View File

@@ -0,0 +1,14 @@
@using GameIdeas.BlazorApp.Shared.Components
@inherits LayoutComponentBase
<div class="page">
@if (IsLoading) {
<Loader />
}
@Body
<span class="orb red"></span>
<span class="orb blue"></span>
<span class="orb green"></span>
</div>

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs Normal file
View File

@@ -0,0 +1,16 @@
using System.Net.Http.Json;
using GameIdeas.Resources;
namespace GameIdeas.BlazorApp.Layouts
{
public partial class MainLayout
{
public bool IsLoading { get; set; } = true;
protected override void OnInitialized()
{
IsLoading = false;
}
}
}

41
src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css Normal file
View File

@@ -0,0 +1,41 @@
.page {
background: var(--background);
overflow: hidden
}
.orb {
position: absolute;
border-radius: 100%;
}
.green {
position: absolute;
width: 80vh;
height: 80vh;
top: -20vh;
background: #315941;
filter: blur(30vh);
z-index: -999;
}
.blue {
position: absolute;
width: 80vw;
height: 80vw;
left: 10vw;
top: 50vh;
background: #3A4156;
filter: blur(30vh);
z-index: -999;
}
.red {
position: absolute;
width: 100vh;
height: 100vh;
left: 60vw;
top: -30vh;
background: #593533;
filter: blur(30vh);
z-index: -999;
}

13
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor
View File

@@ -1,5 +1,14 @@
@page "/"
@page "/Games"
@using GameIdeas.BlazorApp.Layouts
@using GameIdeas.BlazorApp.Shared.Components
@using GameIdeas.Resources
@inherits LayoutComponentBase
@layout MainLayout
<PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
<HeaderLayout>
<Body>
<div class="temp">Prout</div>
</Body>
</HeaderLayout>

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs
View File

@@ -1,24 +1,5 @@
using Microsoft.AspNetCore.Components;
using System.Net.Http.Json;
using GameIdeas.Resources;
namespace GameIdeas.BlazorApp.Pages.Games;
public partial class GamesBase (
IHttpClientFactory HttpClientFactory,
TranslationService TranslationService,
Translations Translations) : LayoutComponentBase
public partial class GamesBase ()
{
protected override async Task OnInitializedAsync()
{
var client = HttpClientFactory.CreateClient("GameIdeas.WebAPI");
var response = await client.GetAsync("api/Translations");
var dictionary = await response.Content.ReadFromJsonAsync<Dictionary<string, string>>();
if (dictionary != null)
{
TranslationService.Initialize(dictionary);
ResourcesKey.Initialize(Translations);
}
}
}

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs
View File

@@ -1,3 +1,4 @@
using System.Net.Http.Json;
using GameIdeas.BlazorApp;
using GameIdeas.Resources;
using Microsoft.AspNetCore.Components.Web;
@@ -23,4 +24,17 @@ builder.Services.AddHttpClient(
builder.Services.AddSingleton<TranslationService>();
builder.Services.AddSingleton<Translations>();
await builder.Build().RunAsync();
var app = builder.Build();
var client = app.Services.GetService<IHttpClientFactory>()?.CreateClient("GameIdeas.WebAPI") ??
throw new Exception("Http client not found");
var response = await client.GetAsync("api/Translations");
var dictionary = await response.Content.ReadFromJsonAsync<Dictionary<string, string>>();
if (dictionary != null)
{
app.Services.GetService<TranslationService>()!.Initialize(dictionary);
ResourcesKey.Initialize(app.Services.GetService<Translations>()!);
}
await app.RunAsync();

38
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor
View File

@@ -1,38 +0,0 @@
@using GameIdeas.Resources
@inherits ComponentBase
<div class="header-tab">
<div class="header-icon" @onclick="HandleIconClicked">
<img src="icon.png" alt="Game Ideas">
</div>
<div class="header-body">
@Body
</div>
<div class="account-container">
<div class="add-container">
<div class="manual-add button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<div class="more-add button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M1 3H23L12 22" />
</svg>
</div>
<div class="dropdown-more-add">
<div class="drowdown-more-element">
@ResourcesKey.ManualAdd
</div>
<div class="drowdown-more-element">
@ResourcesKey.AutoAdd
</div>
</div>
</div>
<div class="account-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</div>
</div>
</div>

257
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css
View File

@@ -1,257 +0,0 @@
.header-tab {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0px 10px;
height: 40px;
width: 100%;
}
.header-icon {
display: flex;
justify-content: center;
align-items: center;
padding: 4px;
width: 40%;
height: 100%;
}
.header-body {
}
.account-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
.button-icon {
color: var(--white);
}
.account-icon {
}
.add-container {
}
.button {
}
.manual-add {
}
.more-add {
}
.dropdown-more-add {
}
.drowdown-more-element {
}
/* Frame */
/* Auto layout */
padding: 0px;
gap: 40px;
width: 136px;
height: 40px;
/* Inside auto layout */
flex: none;
order: 2;
flex-grow: 0;
/* Frame 9 */
width: 56px;
height: 28px;
/* Violet */
background: #A380D1;
border-radius: 4px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Frame 55 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 10px;
position: absolute;
width: 132px;
height: 56px;
left: 0px;
top: 28px;
/* Violet */
background: #A380D1;
box-shadow:
border-radius: 4px;
/* Frame 56 */
/* Auto layout */
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 4px;
gap: 10px;
width: 132px;
height: 56px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Ajout manuel */
width: 89px;
height: 19px;
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
color: #FFFFFF;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Ajout automatique */
width: 124px;
height: 19px;
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
/* identical to box height */
color: #FFFFFF;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
/* Frame */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
position: absolute;
width: 28px;
height: 28px;
left: 0px;
top: 0px;
/* Frame 10 */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
width: 16px;
height: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Frame */
width: 24px;
height: 24px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Vector */
position: absolute;
left: 20.83%;
right: 20.83%;
top: 20.83%;
bottom: 20.83%;
/* White */
background: #FFFFFF;
/* Line 5 */
position: absolute;
width: 28px;
height: 0px;
left: 28px;
top: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);
transform: rotate(90deg);
/* Frame */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
position: absolute;
width: 28px;
height: 28px;
left: 28px;
top: 0px;
/* Frame 10 */
/* Auto layout */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0px;
width: 16px;
height: 16px;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
/* Polygon 11 */
width: 16px;
height: 10px;
/* White */
background: #FFFFFF;
transform: rotate(-180deg);
/* Inside auto layout */
flex: none;
order: 0;
align-self: stretch;
flex-grow: 0;
/* Icon account */
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 4px;
width: 40px;
height: 40px;
/* Inside auto layout */
flex: none;
order: 1;
flex-grow: 0;
/* Vector */
width: 32px;
height: 32px;
/* Light black */
background: #5C5C5E;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 1;

41
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor Normal file
View File

@@ -0,0 +1,41 @@
@using GameIdeas.Resources
@inherits LayoutComponentBase
<div class="header-tab">
<div class="icon-container" @onclick="HandleIconClicked">
<img src="icon.png" alt="Game Ideas">
</div>
@Body
<div class="account-add-container">
<div class="add-container">
<div class="add-buttons">
<div class="first-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<div class="button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14">
<path d="M1 3H23L12 22" />
</svg>
</div>
</div>
<div class="dropdown-more-add">
<div class="drowdown-more-element">
@ResourcesKey.ManualAdd
</div>
<div class="drowdown-more-element">
@ResourcesKey.AutoAdd
</div>
</div>
</div>
<div class="icon-container">
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</div>
</div>
</div>

4
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs → src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs
View File

@@ -2,10 +2,8 @@ using Microsoft.AspNetCore.Components;
namespace GameIdeas.BlazorApp.Shared.Components;
public partial class Header
public partial class HeaderLayout : LayoutComponentBase
{
[Parameter] public RenderFragment? Body { get; set; }
private Task HandleIconClicked()
{
throw new NotImplementedException();

66
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css Normal file
View File

@@ -0,0 +1,66 @@
.header-tab {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
padding: 0px 10px;
height: 40px;
width: 100%;
}
.icon-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 40px;
height: 100%;
}
.account-add-container {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
}
.add-container {
overflow: visible;
}
.add-buttons {
display: flex;
flex-direction: row;
background: var(--violet);
border-radius: var(--small-radius);
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
}
.first-button {
border-right: 1px solid var(--line-black);
}
.button-icon {
color: var(--white);
}
.account-icon {
color: var(--light-grey);
}
.dropdown-more-add {
background: var(--violet);
box-shadow: var(--drop-shadow);
border-radius: var(--small-radius);
}
.drowdown-more-element {
width: 100%;
}

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor Normal file
View File

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

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

@@ -0,0 +1,31 @@
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--semi-black);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.loader {
border: 8px solid var(--white);
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);
}
}

1
src/GameIdeas/Client/GameIdeas.BlazorApp/_Imports.razor
View File

@@ -6,4 +6,3 @@
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using GameIdeas.BlazorApp.Pages.Games

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

@@ -10,66 +10,22 @@
--black: rgba(44, 43, 46, 0.8);
--white: #fff;
--semi-black: rgba(0, 0, 0, 0.5);
--line-black: rgba(0, 0, 0, 0.2);
--small-radius: 4px;
--radius: 6px;
--drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
}
html, body {
html {
font-family: 'Noto Sans', sans-serif;
font-size: 12px
}
html, body, .app {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Noto Sans', sans-serif;
font-size: 12rem
}
body {
background: var(--background);
overflow: hidden
}
html::before,
body::before,
body::after {
content: "";
position: absolute;
border-radius: 100%;
}
html::before {
/*Green orb*/
position: absolute;
width: 80vh;
height: 80vh;
top: -20vh;
background: #315941;
filter: blur(30vh);
z-index: -999;
}
body::before {
/*Blue orb*/
position: absolute;
width: 80vw;
height: 80vw;
left: 10vw;
top: 50vh;
background: #3A4156;
filter: blur(30vh);
z-index: -999;
}
body::after {
/*Reb orb*/
position: absolute;
width: 100vh;
height: 100vh;
left: 60vw;
top: -30vh;
background: #593533;
filter: blur(30vh);
z-index: -999;
overflow: hidden;
}
h1:focus {

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

@@ -5,7 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Game Ideas</title>
<base href="/" />
<base href="/Games" />
<link rel="stylesheet" href="css/app.css" />
<link rel="icon" type="image/png" href="icon.png" />
<link href="GameIdeas.BlazorApp.styles.css" rel="stylesheet" />