diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/App.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/App.razor index 3cfa54f..cc3223e 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/App.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/App.razor @@ -1,11 +1,13 @@ - +@using GameIdeas.BlazorApp.Layouts + + - + Not found - +

Sorry, there's nothing at this address.

 diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor new file mode 100644 index 0000000..f9b7cd3 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor @@ -0,0 +1,14 @@ +@using GameIdeas.BlazorApp.Shared.Components +@inherits LayoutComponentBase + +
+ @if (IsLoading) { + + } + + @Body + + + + +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs new file mode 100644 index 0000000..bb4f4af --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.cs @@ -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; + } + } +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css new file mode 100644 index 0000000..982fdd4 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css @@ -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; +} diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor index 9591ca2..2e117ad 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor @@ -1,5 +1,14 @@ -@page "/" +@page "/Games" +@using GameIdeas.BlazorApp.Layouts +@using GameIdeas.BlazorApp.Shared.Components +@using GameIdeas.Resources -@inherits LayoutComponentBase +@layout MainLayout +@ResourcesKey.GamesIdeas + + +
Prout
+ + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs index 087075f..cde8f1f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.cs @@ -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>(); - if (dictionary != null) - { - TranslationService.Initialize(dictionary); - ResourcesKey.Initialize(Translations); - } - - } } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs index bf5571b..d68b7f2 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs @@ -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(); builder.Services.AddSingleton(); -await builder.Build().RunAsync(); \ No newline at end of file +var app = builder.Build(); + +var client = app.Services.GetService()?.CreateClient("GameIdeas.WebAPI") ?? + throw new Exception("Http client not found"); +var response = await client.GetAsync("api/Translations"); +var dictionary = await response.Content.ReadFromJsonAsync>(); + +if (dictionary != null) +{ + app.Services.GetService()!.Initialize(dictionary); + ResourcesKey.Initialize(app.Services.GetService()!); +} + +await app.RunAsync(); \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor deleted file mode 100644 index 347d232..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor +++ /dev/null @@ -1,38 +0,0 @@ -@using GameIdeas.Resources -@inherits ComponentBase - -
-
- Game Ideas -
-
- @Body -
- -
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css deleted file mode 100644 index f9a0ebd..0000000 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.css +++ /dev/null @@ -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; diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor new file mode 100644 index 0000000..e857a73 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor @@ -0,0 +1,41 @@ +@using GameIdeas.Resources +@inherits LayoutComponentBase + +
+
+ Game Ideas +
+ + @Body + + +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs similarity index 68% rename from src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs rename to src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs index 6587063..8879ccd 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs @@ -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(); diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css new file mode 100644 index 0000000..43fa775 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css @@ -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%; +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor new file mode 100644 index 0000000..d8b5aa6 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor @@ -0,0 +1 @@ +
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor.css new file mode 100644 index 0000000..4814a07 --- /dev/null +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Loader.razor.css @@ -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); + } +} \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/_Imports.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/_Imports.razor index 8956baf..d37285f 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/_Imports.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/_Imports.razor @@ -6,4 +6,3 @@ @using Microsoft.AspNetCore.Components.Web.Virtualization @using Microsoft.AspNetCore.Components.WebAssembly.Http @using Microsoft.JSInterop -@using GameIdeas.BlazorApp.Pages.Games diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css index 7b0ac83..42733a1 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css @@ -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 { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html index 4d324bb..0c6c62d 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/index.html @@ -5,7 +5,7 @@ Game Ideas - +