From 6b5bb96de7c9e18932a6f2a375d4435581ae92fd Mon Sep 17 00:00:00 2001 From: Lucas Morgan Date: Sat, 7 Sep 2024 22:26:38 -0500 Subject: [PATCH] Allow UI to delete sessions --- Shogi.Api/Controllers/SessionsController.cs | 4 +- Shogi.UI/Pages/Play/GameBrowser.razor | 19 ++--- Shogi.UI/Pages/Play/GameBrowser.razor.css | 21 +++++- Shogi.UI/Pages/Play/GameBrowserEntry.razor | 75 +++++++++++++++++++ .../Pages/Play/GameBrowserEntry.razor.css | 17 +++++ Shogi.UI/Shared/IconButton.razor | 12 +++ Shogi.UI/Shared/IconButton.razor.css | 6 ++ Shogi.UI/Shared/Icons/TrashCanIcon.razor | 12 +++ Shogi.UI/Shared/ShogiApi.cs | 5 ++ Shogi.UI/Shogi.UI.csproj | 2 + Shogi.UI/wwwroot/css/themes.css | 10 +++ 11 files changed, 162 insertions(+), 21 deletions(-) create mode 100644 Shogi.UI/Pages/Play/GameBrowserEntry.razor create mode 100644 Shogi.UI/Pages/Play/GameBrowserEntry.razor.css create mode 100644 Shogi.UI/Shared/IconButton.razor create mode 100644 Shogi.UI/Shared/IconButton.razor.css create mode 100644 Shogi.UI/Shared/Icons/TrashCanIcon.razor diff --git a/Shogi.Api/Controllers/SessionsController.cs b/Shogi.Api/Controllers/SessionsController.cs index 0f929f5..5d640dc 100644 --- a/Shogi.Api/Controllers/SessionsController.cs +++ b/Shogi.Api/Controllers/SessionsController.cs @@ -16,9 +16,7 @@ namespace Shogi.Api.Controllers; [Route("[controller]")] public class SessionsController( SessionRepository sessionRepository, - ShogiApplication application, - SignInManager signInManager, - UserManager userManager) : ControllerBase + ShogiApplication application) : ControllerBase { [HttpPost] diff --git a/Shogi.UI/Pages/Play/GameBrowser.razor b/Shogi.UI/Pages/Play/GameBrowser.razor index ba9602d..312f872 100644 --- a/Shogi.UI/Pages/Play/GameBrowser.razor +++ b/Shogi.UI/Pages/Play/GameBrowser.razor @@ -10,31 +10,22 @@ Creator Seats +
@foreach (var session in allSessions) { - - - @if (string.IsNullOrEmpty(session.Player2)) - { - 1 / 2 - } - else - { - Full - } - + + + } @if (allSessions.Length == 0) { -

There are no games being played.

+

There are no games being played.

} diff --git a/Shogi.UI/Pages/Play/GameBrowser.razor.css b/Shogi.UI/Pages/Play/GameBrowser.razor.css index ae98c8f..573b651 100644 --- a/Shogi.UI/Pages/Play/GameBrowser.razor.css +++ b/Shogi.UI/Pages/Play/GameBrowser.razor.css @@ -1,5 +1,18 @@ -row { - display: grid; - grid-template-columns: 18rem 5rem; - padding-left: 5px; /* Matches box shadow on hover */ +.GameBrowser { } + + .GameBrowser row { + display: block; + width: max-content; + } + + .GameBrowser row.header { + display: grid; + grid-template-columns: 18rem 5rem 5rem; + gap: 1rem; + margin-bottom: 0 !important; + } + + .GameBrowser row:not(:last-of-type) { + margin-bottom: 1rem; + } diff --git a/Shogi.UI/Pages/Play/GameBrowserEntry.razor b/Shogi.UI/Pages/Play/GameBrowserEntry.razor new file mode 100644 index 0000000..5e104fa --- /dev/null +++ b/Shogi.UI/Pages/Play/GameBrowserEntry.razor @@ -0,0 +1,75 @@ +@using Shogi.Contracts.Types + +@inject ShogiApi Api + + + + @if (showDeletePrompt) + { + +
+ @if (showDeleteError) + { +

An error occurred.

+
+ + } + else + { +

Do you wish to delete this session?

+
+ + + } +
+ + } + + + @if (string.IsNullOrEmpty(Session.Player2)) + { + 1 / 2 + } + else + { + Full + } + @if (context.User.Identity?.Name == Session.Player1) + { + + + + } + + + +@code { + [Parameter][EditorRequired] public SessionMetadata Session { get; set; } = default!; + [Parameter][EditorRequired] public EventCallback OnSessionDeleted { get; set; } + private bool showDeletePrompt = false; + private bool showDeleteError = false; + + + void HideModal() + { + showDeletePrompt = showDeleteError = false; + } + + async Task DeleteSession() + { + var response = await Api.DeleteSession(Session.SessionId); + if (response.IsSuccessStatusCode) + { + showDeletePrompt = false; + showDeleteError = false; + await OnSessionDeleted.InvokeAsync(); + } + else + { + showDeletePrompt = true; + showDeleteError = true; + } + } +} diff --git a/Shogi.UI/Pages/Play/GameBrowserEntry.razor.css b/Shogi.UI/Pages/Play/GameBrowserEntry.razor.css new file mode 100644 index 0000000..9c18c06 --- /dev/null +++ b/Shogi.UI/Pages/Play/GameBrowserEntry.razor.css @@ -0,0 +1,17 @@ +gameBrowserEntry { + position: relative; + display: grid; + grid-template-columns: 18rem 5rem 5rem; + padding-left: 5px; /* Matches box shadow on hover */ + gap: 1rem; + place-items: center start; +} + +modal { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + diff --git a/Shogi.UI/Shared/IconButton.razor b/Shogi.UI/Shared/IconButton.razor new file mode 100644 index 0000000..49d91eb --- /dev/null +++ b/Shogi.UI/Shared/IconButton.razor @@ -0,0 +1,12 @@ + + +@code { + [Parameter][EditorRequired] public RenderFragment ChildContent { get; set; } = default!; + [Parameter][EditorRequired] public EventCallback OnClick { get; set; } + [Parameter] public string CssWidth { get; set; } = "32px"; + [Parameter] public string CssHeight { get; set; } = "32px"; + + private string style => $"width: {CssWidth}; height: {CssHeight};"; +} diff --git a/Shogi.UI/Shared/IconButton.razor.css b/Shogi.UI/Shared/IconButton.razor.css new file mode 100644 index 0000000..4108e2c --- /dev/null +++ b/Shogi.UI/Shared/IconButton.razor.css @@ -0,0 +1,6 @@ +button { + padding: 0.2rem; + background: none; + border: 1px solid #444; + display: grid; +} \ No newline at end of file diff --git a/Shogi.UI/Shared/Icons/TrashCanIcon.razor b/Shogi.UI/Shared/Icons/TrashCanIcon.razor new file mode 100644 index 0000000..fa18d93 --- /dev/null +++ b/Shogi.UI/Shared/Icons/TrashCanIcon.razor @@ -0,0 +1,12 @@ + + + + + + +@code { + +} diff --git a/Shogi.UI/Shared/ShogiApi.cs b/Shogi.UI/Shared/ShogiApi.cs index 69a0fbe..e4a5cf3 100644 --- a/Shogi.UI/Shared/ShogiApi.cs +++ b/Shogi.UI/Shared/ShogiApi.cs @@ -70,5 +70,10 @@ public class ShogiApi(HttpClient httpClient) return httpClient.PatchAsync(Relative($"Sessions/{name}/Join"), null); } + public Task DeleteSession(Guid sessionId) + { + return httpClient.DeleteAsync(Relative($"Sessions/{sessionId}")); + } + private static Uri Relative(string path) => new(path, UriKind.Relative); } diff --git a/Shogi.UI/Shogi.UI.csproj b/Shogi.UI/Shogi.UI.csproj index f8b2373..a2cdee1 100644 --- a/Shogi.UI/Shogi.UI.csproj +++ b/Shogi.UI/Shogi.UI.csproj @@ -15,11 +15,13 @@ + + diff --git a/Shogi.UI/wwwroot/css/themes.css b/Shogi.UI/wwwroot/css/themes.css index ae8c386..56a5bb0 100644 --- a/Shogi.UI/wwwroot/css/themes.css +++ b/Shogi.UI/wwwroot/css/themes.css @@ -1,5 +1,6 @@ .PrimaryTheme { --backgroundColor: #444444; + --middlegroundColor: #D1D1D1; --foregroundColor: #eaeaea; --hrefColor: #99c3ff; --uniformBottomMargin: 0.5rem; @@ -29,6 +30,14 @@ font-size: 85%; } + .PrimaryTheme button:hover { + box-shadow: 0px 0px 1px 1px var(--middlegroundColor) + } + + .PrimaryTheme button:active { + box-shadow: 0px 0px 1px 1px var(--middlegroundColor), 0px 1px 1px 3px var(--middlegroundColor); + } + .PrimaryTheme button.href { border: 0; background: unset; @@ -64,5 +73,6 @@ .PrimaryTheme .ThemeVariant--Contrast { --backgroundColor: #eaeaea; --foregroundColor: #444444; + --middlegroundColor: #5e5e5e; --hrefColor: #0065be; }