From 48ab8f7964962d63baae0a9213ba5601763fe8d4 Mon Sep 17 00:00:00 2001 From: Lucas Morgan Date: Sat, 16 Nov 2024 20:02:56 -0600 Subject: [PATCH] style boost --- Shogi.UI/Layout/MainLayout.razor.css | 12 +- Shogi.UI/Layout/NavMenu.razor | 51 +++--- Shogi.UI/Layout/NavMenu.razor.css | 8 +- .../GameBoard/GameBoardPresentation.razor | 151 +++++++++--------- .../GameBoard/GameboardPresentation.razor.css | 105 ++++++------ .../Pages/Play/GameBoard/OpponentName.razor | 38 +++++ .../Play/GameBoard/OpponentName.razor.css | 28 ++++ .../Pages/Play/GameBoard/PlayerName.razor | 25 +-- .../Pages/Play/GameBoard/PlayerName.razor.css | 20 ++- Shogi.UI/Pages/Play/GamePiece.razor.css | 3 +- Shogi.UI/Pages/Play/Pieces/Bishop.razor | 4 +- .../Pages/Play/Pieces/ChallengingKing.razor | 2 +- Shogi.UI/Pages/Play/Pieces/GoldGeneral.razor | 2 +- Shogi.UI/Pages/Play/Pieces/Knight.razor | 4 +- Shogi.UI/Pages/Play/Pieces/Lance.razor | 4 +- Shogi.UI/Pages/Play/Pieces/Pawn.razor | 4 +- Shogi.UI/Pages/Play/Pieces/ReigningKing.razor | 2 +- Shogi.UI/Pages/Play/Pieces/Rook.razor | 4 +- .../Pages/Play/Pieces/SilverGeneral.razor | 4 +- Shogi.UI/Pages/Play/PlayPage.razor | 2 +- Shogi.UI/Program.cs | 1 - Shogi.UI/Shared/Stretch.razor.css | 2 +- Shogi.UI/Shogi.UI.csproj | 2 + Shogi.UI/wwwroot/css/app.css | 3 +- 24 files changed, 278 insertions(+), 203 deletions(-) create mode 100644 Shogi.UI/Pages/Play/GameBoard/OpponentName.razor create mode 100644 Shogi.UI/Pages/Play/GameBoard/OpponentName.razor.css diff --git a/Shogi.UI/Layout/MainLayout.razor.css b/Shogi.UI/Layout/MainLayout.razor.css index 009e47b..d4e7026 100644 --- a/Shogi.UI/Layout/MainLayout.razor.css +++ b/Shogi.UI/Layout/MainLayout.razor.css @@ -1,12 +1,6 @@ .MainLayout { display: grid; - grid-template-columns: auto 1fr; - grid-template-rows: 100vh; + grid-template-rows: auto 1fr; place-items: stretch; -} - -@media all and (max-width: 600px) { - .MainLayout { - grid-template-columns: min-content max-content; - } -} + gap: 5px; +} \ No newline at end of file diff --git a/Shogi.UI/Layout/NavMenu.razor b/Shogi.UI/Layout/NavMenu.razor index 441f068..246c67d 100644 --- a/Shogi.UI/Layout/NavMenu.razor +++ b/Shogi.UI/Layout/NavMenu.razor @@ -1,52 +1,61 @@ @inject NavigationManager navigator @inject ShogiApi Api -
+ @code { async Task CreateSession() + + + { + + + var sessionId = await Api.PostSession(); + + + if (!string.IsNullOrEmpty(sessionId)) + + + { + + + navigator.NavigateTo($"play/{sessionId}"); + + + } + + + } } diff --git a/Shogi.UI/Layout/NavMenu.razor.css b/Shogi.UI/Layout/NavMenu.razor.css index 0704f82..34109ff 100644 --- a/Shogi.UI/Layout/NavMenu.razor.css +++ b/Shogi.UI/Layout/NavMenu.razor.css @@ -1,13 +1,13 @@ .NavMenu { display: flex; - flex-direction: column; + flex-direction: row; border-right: 2px solid #444; + place-items: baseline; + gap: 3px; } .NavMenu > * { - padding: 0 0.5rem; -} -.NavMenu h1 { + padding: 0 0.5rem !important; } .NavMenu .spacer { diff --git a/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor b/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor index 8dbd0b0..9ecf4d7 100644 --- a/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor +++ b/Shogi.UI/Pages/Play/GameBoard/GameBoardPresentation.razor @@ -3,102 +3,105 @@
-
+
@for (var rank = 1; rank < 10; rank++) + { + foreach (var file in Files) + { + var position = $"{file}{rank}"; + var piece = Session?.BoardState.Board[position]; + var isSelected = piece != null && SelectedPosition == position;
@if (piece != null) + { }
} + } -
- 9 - 8 - 7 - 6 - 5 - 4 - 3 - 2 - 1 -
-
- A - B - C - D - E - F - G - H - I -
+
+ 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1 +
+
+ A + B + C + D + E + F + G + H + I +
@if (Session != null && UseSideboard == true) + { -
@@ -119,12 +122,10 @@ [Parameter] public EventCallback OnClickHand { get; set; } [Parameter] public EventCallback OnClickJoinGame { get; set; } [Parameter] public bool UseSideboard { get; set; } = true; - private IReadOnlyCollection opponentHand; private IReadOnlyCollection userHand; private string? userName; private string? opponentName; - public GameBoardPresentation() { opponentHand = Array.Empty(); @@ -136,6 +137,7 @@ protected override void OnParametersSet() { base.OnParametersSet(); + if (Session == null) { opponentHand = Array.Empty(); @@ -161,16 +163,10 @@ } private bool IsMyTurn => Session?.BoardState.WhoseTurn == Perspective; - private bool IsPlayerInCheck => Session?.BoardState.PlayerInCheck == Perspective; - private bool IsOpponentInCheck => Session?.BoardState.PlayerInCheck != null && Session.BoardState.PlayerInCheck != Perspective; - private bool IsPlayerVictor => Session?.BoardState.Victor == Perspective; - - private bool IsOpponentVictor => Session?.BoardState.Victor != null && Session.BoardState.Victor != Perspective; - private Func OnClickTileInternal(string position) => () => { if (IsMyTurn) @@ -179,7 +175,6 @@ } return Task.CompletedTask; }; - private Func OnClickHandInternal(Piece piece) => () => { if (IsMyTurn) diff --git a/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css b/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css index 26133b8..17fc627 100644 --- a/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css +++ b/Shogi.UI/Pages/Play/GameBoard/GameboardPresentation.razor.css @@ -1,47 +1,50 @@ .game-board { --ratio: 0.9; display: grid; - grid-template-columns: min-content repeat(9, minmax(2rem, 4rem)) max-content; - grid-template-rows: repeat(9, 1fr) auto; + grid-template-areas: + "rank board opponent-side-board" + "rank board player-info" + "rank board player-side-board" + ". file ."; + grid-template-columns: auto 1fr auto; + grid-template-rows: repeat(3, 1fr) auto; background-color: #444; - gap: 3px; + gap: 5px; place-self: center; + color: beige; } .board { display: grid; - grid-column: span 10; - grid-row: span 10; grid-template-areas: - "rank A9 B9 C9 D9 E9 F9 G9 H9 I9" - "rank A8 B8 C8 D8 E8 F8 G8 H8 I8" - "rank A7 B7 C7 D7 E7 F7 G7 H7 I7" - "rank A6 B6 C6 D6 E6 F6 G6 H6 I6" - "rank A5 B5 C5 D5 E5 F5 G5 H5 I5" - "rank A4 B4 C4 D4 E4 F4 G4 H4 I4" - "rank A3 B3 C3 D3 E3 F3 G3 H3 I3" - "rank A2 B2 C2 D2 E2 F2 G2 H2 I2" - "rank A1 B1 C1 D1 E1 F1 G1 H1 I1" - ". file file file file file file file file file"; - grid-template-columns: subgrid; - grid-template-rows: subgrid; + "A9 B9 C9 D9 E9 F9 G9 H9 I9" + "A8 B8 C8 D8 E8 F8 G8 H8 I8" + "A7 B7 C7 D7 E7 F7 G7 H7 I7" + "A6 B6 C6 D6 E6 F6 G6 H6 I6" + "A5 B5 C5 D5 E5 F5 G5 H5 I5" + "A4 B4 C4 D4 E4 F4 G4 H4 I4" + "A3 B3 C3 D3 E3 F3 G3 H3 I3" + "A2 B2 C2 D2 E2 F2 G2 H2 I2" + "A1 B1 C1 D1 E1 F1 G1 H1 I1"; + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr); background-color: #444444; - max-height: 100%; + gap: 3px; + max-height: 80vmin; aspect-ratio: var(--ratio); } .board[data-perspective="Player2"] { grid-template-areas: - "rank I1 H1 G1 F1 E1 D1 C1 B1 A1" - "rank I2 H2 G2 F2 E2 D2 C2 B2 A2" - "rank I3 H3 G3 F3 E3 D3 C3 B3 A3" - "rank I4 H4 G4 F4 E4 D4 C4 B4 A4" - "rank I5 H5 G5 F5 E5 D5 C5 B5 A5" - "rank I6 H6 G6 F6 E6 D6 C6 B6 A6" - "rank I7 H7 G7 F7 E7 D7 C7 B7 A7" - "rank I8 H8 G8 F8 E8 D8 C8 B8 A8" - "rank I9 H9 G9 F9 E9 D9 C9 B9 A9" - ". file file file file file file file file file"; + "I1 H1 G1 F1 E1 D1 C1 B1 A1" + "I2 H2 G2 F2 E2 D2 C2 B2 A2" + "I3 H3 G3 F3 E3 D3 C3 B3 A3" + "I4 H4 G4 F4 E4 D4 C4 B4 A4" + "I5 H5 G5 F5 E5 D5 C5 B5 A5" + "I6 H6 G6 F6 E6 D6 C6 B6 A6" + "I7 H7 G7 F7 E7 D7 C7 B7 A7" + "I8 H8 G8 F8 E8 D8 C8 B8 A8" + "I9 H9 G9 F9 E9 D9 C9 B9 A9"; } @@ -77,37 +80,41 @@ } .side-board { - grid-row: span 9; - display: flex; - flex-direction: column; - place-content: space-between; - padding: 1rem; + display: grid; + grid-template-columns: repeat(auto-fill, 3rem); + place-items: end start; + gap: 5px; + padding: 0.25rem; + background: linear-gradient(45deg, beige, white); } - .side-board .player-area { - display: grid; - place-items: stretch; + .side-board.opponent { + place-items: start; } - .side-board .hand { - display: grid; - border: 1px solid #ccc; - grid-template-columns: repeat(auto-fill, 3rem); - grid-template-rows: 3rem; - place-items: center start; - padding: 0.5rem; + .side-board:empty { + content: 'Captured Pieces'; } +.player-info { + display: flex; + flex-direction: column; + justify-content: space-around; + align-content: stretch; +} -@media all and (max-width: 1000px) { +@media all and (max-width: 900px) { .game-board { - grid-template-columns: min-content repeat(9, minmax(2rem, 4rem)); - grid-template-rows: repeat(9, 1fr) auto max-content; + grid-template-areas: + ". opponent-side-board ." + "rank board player-info" + ". file ." + ". player-side-board ."; + grid-template-rows: auto 1fr auto auto; + gap: 1rem; } .side-board { - grid-row: unset; - grid-column: span 10; - flex-direction: row; + min-height: 2rem; } } diff --git a/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor b/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor new file mode 100644 index 0000000..9f80587 --- /dev/null +++ b/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor @@ -0,0 +1,38 @@ +@using Shogi.Contracts.Types +
+ + @if (IsTurn) + { + Turn +   + } + + @if (InCheck) + { + Check +   + } + + @if (IsVictor) + { + Victor +   + } + + @if (string.IsNullOrEmpty(Name)) + { +
Empty Seat
+ } +else + { +
@Name
+ } + +
+ +@code { + [Parameter][EditorRequired] public bool IsTurn { get; set; } + [Parameter][EditorRequired] public bool InCheck { get; set; } + [Parameter][EditorRequired] public bool IsVictor { get; set; } + [Parameter][EditorRequired] public string Name { get; set; } = string.Empty; +} diff --git a/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor.css b/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor.css new file mode 100644 index 0000000..2ebf64f --- /dev/null +++ b/Shogi.UI/Pages/Play/GameBoard/OpponentName.razor.css @@ -0,0 +1,28 @@ +.turn-marker { + display: inline-block; + padding: 2px 5px; + background-color: var(--foregroundColor); + background-color: var(--middlegroundColor); + color: var(--backgroundColor); + font-weight: bold; + font-size: 80%; + border-radius: 8px; +} + +.check-marker { + display: inline-block; + padding: 3px 8px; + background-color: darkred; + color: beige; + font-weight: bold; + font-size: 80%; +} + +.victory-marker { + display: inline-block; + padding: 3px 8px; + background-color: darkgreen; + color: beige; + font-weight: bold; + font-size: 80%; +} diff --git a/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor b/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor index 8eda863..c4abecb 100644 --- a/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor +++ b/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor @@ -1,4 +1,15 @@ -

+@using Shogi.Contracts.Types +

+ + @if (string.IsNullOrEmpty(Name)) + { +
Empty Seat
+ } + else + { +
@Name
+ } + @if (IsTurn) { Turn @@ -16,17 +27,7 @@ Victor   } - - @if (string.IsNullOrEmpty(Name)) - { - Empty Seat - } - else - { - @Name - } - -

+
@code { [Parameter][EditorRequired] public bool IsTurn { get; set; } diff --git a/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor.css b/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor.css index 4b93c20..63001c5 100644 --- a/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor.css +++ b/Shogi.UI/Pages/Play/GameBoard/PlayerName.razor.css @@ -1,26 +1,30 @@ .turn-marker { display: inline-block; - padding: 3px 8px; - background-color: #444; - color: beige; + padding: 2px 5px; + background-color: var(--foregroundColor); + background-color: var(--middlegroundColor); + color: var(--backgroundColor); font-weight: bold; font-size: 80%; + border-radius: 8px; } .check-marker { display: inline-block; - padding: 3px 8px; - background-color: darkred; - color: beige; + padding: 2px 5px; + background-color: #f3a1a1; + color: darkred; font-weight: bold; font-size: 80%; + border-radius: 8px; } .victory-marker { display: inline-block; - padding: 3px 8px; + padding: 2px 5px; background-color: darkgreen; - color: beige; + color: white; font-weight: bold; font-size: 80%; + border-radius: 8px; } diff --git a/Shogi.UI/Pages/Play/GamePiece.razor.css b/Shogi.UI/Pages/Play/GamePiece.razor.css index d9dc99b..1d814cb 100644 --- a/Shogi.UI/Pages/Play/GamePiece.razor.css +++ b/Shogi.UI/Pages/Play/GamePiece.razor.css @@ -1,12 +1,11 @@ ::deep svg { max-width: 100%; - max-height: 100%; + height: auto; } [data-upsidedown] { transform: rotateZ(180deg); } - .game-piece { overflow: hidden; /* Because SVGs have weird sizes. */ } \ No newline at end of file diff --git a/Shogi.UI/Pages/Play/Pieces/Bishop.razor b/Shogi.UI/Pages/Play/Pieces/Bishop.razor index fc6e6a9..f9db4e6 100644 --- a/Shogi.UI/Pages/Play/Pieces/Bishop.razor +++ b/Shogi.UI/Pages/Play/Pieces/Bishop.razor @@ -1,6 +1,6 @@ @if (IsPromoted) { - + image/svg+xml龍馬2007-07-2213xforeverjaryuumaryuumeryumaryume龍馬shougishogi将棋board game @@ -13,7 +13,7 @@ } else { - + image/svg+xml角行2007-07-2213xforeverjakakugyoukakugyo角行shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/ChallengingKing.razor b/Shogi.UI/Pages/Play/Pieces/ChallengingKing.razor index c7af21b..b1b87b3 100644 --- a/Shogi.UI/Pages/Play/Pieces/ChallengingKing.razor +++ b/Shogi.UI/Pages/Play/Pieces/ChallengingKing.razor @@ -1,4 +1,4 @@ - + image/svg+xml玉將2007-07-2213xforeverjagyokushougyokusho玉将shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/GoldGeneral.razor b/Shogi.UI/Pages/Play/Pieces/GoldGeneral.razor index 2aca8c4..1b9640e 100644 --- a/Shogi.UI/Pages/Play/Pieces/GoldGeneral.razor +++ b/Shogi.UI/Pages/Play/Pieces/GoldGeneral.razor @@ -1,4 +1,4 @@ - + image/svg+xml金將2007-07-2213xforeverjakinshoukinsho金将shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/Knight.razor b/Shogi.UI/Pages/Play/Pieces/Knight.razor index 5402a67..fa6b2bd 100644 --- a/Shogi.UI/Pages/Play/Pieces/Knight.razor +++ b/Shogi.UI/Pages/Play/Pieces/Knight.razor @@ -1,6 +1,6 @@ @if (IsPromoted) { - + image/svg+xml成桂2007-07-2213xforeverjanarikei成桂shougishogi将棋board game @@ -13,7 +13,7 @@ } else { - + image/svg+xml桂馬2007-07-2213xforeverjakeima桂馬shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/Lance.razor b/Shogi.UI/Pages/Play/Pieces/Lance.razor index b1b24cb..0c77537 100644 --- a/Shogi.UI/Pages/Play/Pieces/Lance.razor +++ b/Shogi.UI/Pages/Play/Pieces/Lance.razor @@ -1,6 +1,6 @@ @if (IsPromoted) { - + image/svg+xml成香2007-07-2213xforeverjanarikyounarikyo成香shougishogi将棋board game @@ -13,7 +13,7 @@ } else { - + image/svg+xml香車2007-07-2213xforeverjakyoushakyosha香車shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/Pawn.razor b/Shogi.UI/Pages/Play/Pieces/Pawn.razor index 14b9ee4..cc9e02a 100644 --- a/Shogi.UI/Pages/Play/Pieces/Pawn.razor +++ b/Shogi.UI/Pages/Play/Pieces/Pawn.razor @@ -1,6 +1,6 @@ @if (IsPromoted) { - + image/svg+xmlと金2007-07-2213xforeverjatokinと金shougishogi将棋board game @@ -13,7 +13,7 @@ } else { - + image/svg+xml歩兵2007-07-2213xforeverjpfuhyoufuhyo歩兵shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/ReigningKing.razor b/Shogi.UI/Pages/Play/Pieces/ReigningKing.razor index 3fd70bd..82ffea2 100644 --- a/Shogi.UI/Pages/Play/Pieces/ReigningKing.razor +++ b/Shogi.UI/Pages/Play/Pieces/ReigningKing.razor @@ -1,4 +1,4 @@ - + image/svg+xml王將2007-07-2213xforeverjaoushouosho王将shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/Rook.razor b/Shogi.UI/Pages/Play/Pieces/Rook.razor index e678cbd..4bbb4ee 100644 --- a/Shogi.UI/Pages/Play/Pieces/Rook.razor +++ b/Shogi.UI/Pages/Play/Pieces/Rook.razor @@ -1,6 +1,6 @@ @if (IsPromoted) { - + image/svg+xml龍王2007-07-2213xforeverjaryuuouryuo龍王shougishogi将棋board game @@ -13,7 +13,7 @@ } else { - + image/svg+xml飛車2007-07-2213xforeverjahisha飛車shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/Pieces/SilverGeneral.razor b/Shogi.UI/Pages/Play/Pieces/SilverGeneral.razor index 25fb93a..2def1f7 100644 --- a/Shogi.UI/Pages/Play/Pieces/SilverGeneral.razor +++ b/Shogi.UI/Pages/Play/Pieces/SilverGeneral.razor @@ -1,6 +1,6 @@ @if (IsPromoted) { - + image/svg+xml成銀2007-07-2213xforeverjanarigin成銀shougishogi将棋board game @@ -13,7 +13,7 @@ } else { - + image/svg+xml銀将2007-07-2213xforeverjaginshouginsho銀将shougishogi将棋board game diff --git a/Shogi.UI/Pages/Play/PlayPage.razor b/Shogi.UI/Pages/Play/PlayPage.razor index 212553a..848bca3 100644 --- a/Shogi.UI/Pages/Play/PlayPage.razor +++ b/Shogi.UI/Pages/Play/PlayPage.razor @@ -6,7 +6,7 @@ { return; } -
+
diff --git a/Shogi.UI/Program.cs b/Shogi.UI/Program.cs index 790888f..0b92095 100644 --- a/Shogi.UI/Program.cs +++ b/Shogi.UI/Program.cs @@ -5,7 +5,6 @@ using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Microsoft.AspNetCore.ResponseCompression; using Shogi.UI; using Shogi.UI.Identity; -using Shogi.UI.Pages.Play; using Shogi.UI.Shared; using System.Text.Json; diff --git a/Shogi.UI/Shared/Stretch.razor.css b/Shogi.UI/Shared/Stretch.razor.css index 7e39e91..229e3c1 100644 --- a/Shogi.UI/Shared/Stretch.razor.css +++ b/Shogi.UI/Shared/Stretch.razor.css @@ -1,5 +1,5 @@ div { display: grid; place-content: stretch; - height: 100%; + min-height: 100%; } diff --git a/Shogi.UI/Shogi.UI.csproj b/Shogi.UI/Shogi.UI.csproj index 86c2856..1532f13 100644 --- a/Shogi.UI/Shogi.UI.csproj +++ b/Shogi.UI/Shogi.UI.csproj @@ -15,6 +15,7 @@ + @@ -22,6 +23,7 @@ + diff --git a/Shogi.UI/wwwroot/css/app.css b/Shogi.UI/wwwroot/css/app.css index d0ecfde..c3c80e4 100644 --- a/Shogi.UI/wwwroot/css/app.css +++ b/Shogi.UI/wwwroot/css/app.css @@ -1,11 +1,10 @@ html, body, #app { - height: 100vh; + min-height: 100vh; } body { margin: 0; padding: 0; - overflow: hidden; } #app {