Move from the hand.

This commit is contained in:
2023-02-01 22:49:28 -06:00
parent e2eff4f8b5
commit 3bf9aa3ee3
29 changed files with 248 additions and 133 deletions

View File

@@ -59,9 +59,9 @@ else
{
var accountId = Account.User?.Id;
this.perspective = accountId == session.Player2 ? WhichPlayer.Player2 : WhichPlayer.Player1;
this.isSpectating = !(accountId == this.session.Player1 || accountId == this.session.Player2);
Console.WriteLine($"IsSpectating - {isSpectating}. AccountId - {accountId}. Player1 - {this.session.Player1}. Player2 - {this.session.Player2}");
this.perspective = accountId == session.Player1.Id ? WhichPlayer.Player1 : WhichPlayer.Player2;
Console.WriteLine(new { this.perspective, accountId });
this.isSpectating = !(accountId == this.session.Player1.Id || accountId == this.session.Player2?.Id);
}
StateHasChanged();

View File

@@ -1,4 +1,5 @@
@using Shogi.Contracts.Types;
@using System.Text.Json;
@inject PromotePrompt PromotePrompt;
@inject AccountState AccountState;
@@ -70,7 +71,6 @@
<div class="hand">
@if (opponentHand.Any())
{
@foreach (var piece in opponentHand)
{
<div class="tile">
@@ -78,20 +78,29 @@
</div>
}
}
else
{
<i class="place-self-center">Hand is empty.</i>
}
</div>
<p class="text-center">Opponent Hand</p>
</div>
<div class="spacer place-self-center">
<div class="spacer place-self-center text-center">
<p>@opponentName</p>
<p title="It is @(IsMyTurn ? "your" : "their") turn.">
<svg width="32" height="32" fill="currentColor">
@if (IsMyTurn)
{
<use xlink:href="css/bootstrap/bootstrap-icons.svg#chevron-down" />
}
else
{
<use xlink:href="css/bootstrap/bootstrap-icons.svg#chevron-up" />
}
</svg>
</p>
<p>@userName</p>
</div>
<div class="player-area">
@if (Session.Player2 == null && Session.Player1 != AccountState.User?.Id)
@if (Session.Player2 == null && Session.Player1.Id != AccountState.User?.Id)
{
<div class="place-self-center">
<p>Seat is Empty</p>
@@ -100,20 +109,19 @@
}
else
{
<p class="text-center">Hand</p>
<div class="hand">
@if (userHand.Any())
{
@foreach (var piece in userHand)
{
<div class="title" @onclick="OnClickHandInternal(piece)">
<div @onclick="OnClickHandInternal(piece)"
class="tile"
data-selected="@(piece.WhichPiece == SelectedPieceFromHand)">
<GamePiece Piece="piece" Perspective="Perspective" />
</div>
}
}
else
{
<i class="place-self-center">Hand is empty.</i>
}
</div>
}
</div>
@@ -132,10 +140,12 @@
[Parameter] public WhichPlayer Perspective { get; set; }
[Parameter] public Session? Session { get; set; }
[Parameter] public string? SelectedPosition { get; set; }
[Parameter] public WhichPiece? SelectedPieceFromHand { get; set; }
// TODO: Exchange these OnClick actions for events like "SelectionChangedEvent" and "MoveFromBoardEvent" and "MoveFromHandEvent".
[Parameter] public Func<Piece?, string, Task>? OnClickTile { get; set; }
[Parameter] public Func<Piece, Task>? OnClickHand { get; set; }
[Parameter] public Func<Task>? OnClickJoinGame { get; set; }
[Parameter] public bool IsMyTurn { get; set; }
private IReadOnlyCollection<Piece> opponentHand;
private IReadOnlyCollection<Piece> userHand;
@@ -152,7 +162,6 @@
protected override void OnParametersSet()
{
Console.WriteLine("Params changed. SelectedPosition = {0}", SelectedPosition);
base.OnParametersSet();
if (Session == null)
{
@@ -163,6 +172,7 @@
}
else
{
Console.WriteLine(JsonSerializer.Serialize(new { this.Session.Player1, this.Session.Player2, Perspective, this.Session.SessionName }));
opponentHand = Perspective == WhichPlayer.Player1
? this.Session.BoardState.Player2Hand
: this.Session.BoardState.Player1Hand;
@@ -170,11 +180,11 @@
? this.Session.BoardState.Player1Hand
: this.Session.BoardState.Player2Hand;
userName = Perspective == WhichPlayer.Player1
? this.Session.Player1
: this.Session.Player2;
? this.Session.Player1.Name
: this.Session.Player2?.Name ?? "Empty Seat";
opponentName = Perspective == WhichPlayer.Player1
? this.Session.Player2
: this.Session.Player1;
? this.Session.Player2?.Name ?? "Empty Seat"
: this.Session.Player1.Name;
}
}

View File

@@ -1,7 +1,7 @@
.game-board {
display: grid;
grid-template-areas: "board side-board icons";
grid-template-columns: 3fr minmax(10rem, 1fr) auto;
grid-template-columns: max-content minmax(25rem, 1fr) 2fr;
gap: 0.5rem;
background-color: #444;
position: relative; /* For absolute positioned children. */
@@ -58,17 +58,18 @@
}
.tile {
background-color: beige;
display: grid;
place-content: center;
padding: 0.25rem;
overflow: hidden; /* Because SVGs are shaped weird */
transition: filter linear 0.25s;
}
.tile[data-selected] {
filter: invert(0.8);
}
.board .tile {
background-color: beige;
}
.tile[data-selected] {
filter: invert(0.8);
}
.ruler {
color: beige;
@@ -90,22 +91,32 @@
}
.side-board {
display: grid;
grid-auto-rows: 1fr;
display: flex;
flex-direction: column;
place-content: space-between;
padding: 1rem;
background-color: var(--contrast-color);
}
.side-board .player-area {
display: grid;
place-items: stretch;
}
.side-board .hand {
display: grid;
grid-auto-columns: 1fr;
border: 1px solid #ccc;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 4rem;
place-items: center start;
padding: 0.5rem;
}
.side-board .hand .tile {
max-height: 100%; /* I have no idea why I need to set this here to prevent a height blowout. */
background-color: var(--secondary-color);
}
.promote-prompt {
display: none;
position: absolute;

View File

@@ -9,7 +9,9 @@
Perspective="Perspective"
OnClickHand="OnClickHand"
OnClickTile="OnClickTile"
SelectedPosition="@selectedBoardPosition" />
SelectedPosition="@selectedBoardPosition"
SelectedPieceFromHand="@selectedPieceFromHand"
IsMyTurn="IsMyTurn" />
@code {
[Parameter, EditorRequired]
@@ -23,6 +25,8 @@
protected override void OnParametersSet()
{
base.OnParametersSet();
selectedBoardPosition = null;
selectedPieceFromHand = null;
if (Session == null)
{
throw new ArgumentException($"{nameof(Session)} cannot be null.", nameof(Session));
@@ -42,51 +46,77 @@
return false;
}
async Task OnClickTile(Piece? piece, string position)
async Task OnClickTile(Piece? pieceAtPosition, string position)
{
Console.WriteLine("Is my turn?");
Console.WriteLine(true);
if (!IsMyTurn) return;
if (selectedBoardPosition == null || piece?.Owner == Perspective)
{
// Select a position.
Console.WriteLine("Position {0}", position);
selectedBoardPosition = position;
StateHasChanged();
return;
}
if (selectedBoardPosition == position)
{
// Deselect the selected position.
selectedBoardPosition = null;
StateHasChanged();
return;
}
if (piece == null)
if (selectedBoardPosition == null && pieceAtPosition?.Owner == Perspective)
{
if (ShouldPromptForPromotion(position) || ShouldPromptForPromotion(selectedBoardPosition))
// Select an owned piece.
Console.WriteLine("Selecting piece owned by {0} while I am perspective {1}", pieceAtPosition?.Owner, Perspective);
selectedBoardPosition = position;
// Prevent selecting pieces from the hand and board at the same time.
selectedPieceFromHand = null;
StateHasChanged();
return;
}
if (selectedPieceFromHand is not null)
{
if (pieceAtPosition is null)
{
PromotePrompt.Show(Session.SessionName, new MovePieceCommand
{
From = selectedBoardPosition,
To = position
});
Console.WriteLine("Moving piece from hand.");
// Placing a piece from the hand to an empty space.
// await ShogiApi.Move(
// Session.SessionName,
// new MovePieceCommand(selectedPieceFromHand.Value, position));
}
else
StateHasChanged();
return;
}
if (selectedBoardPosition != null)
{
if (pieceAtPosition == null || pieceAtPosition?.Owner != Perspective)
{
await ShogiApi.Move(Session.SessionName, new MovePieceCommand
{
From = selectedBoardPosition,
IsPromotion = false,
To = position
});
// Moving to an empty space or capturing an opponent's piece.
if (ShouldPromptForPromotion(position) || ShouldPromptForPromotion(selectedBoardPosition))
{
PromotePrompt.Show(
Session.SessionName,
new MovePieceCommand(selectedBoardPosition, position, false));
}
else
{
await ShogiApi.Move(Session.SessionName, new MovePieceCommand(selectedBoardPosition, position, false));
}
StateHasChanged();
return;
}
}
}
async Task OnClickHand(Piece piece)
{
selectedPieceFromHand = piece.WhichPiece;
await Task.CompletedTask;
if (!IsMyTurn) return;
// Prevent selecting from both the hand and the board.
selectedBoardPosition = null;
selectedPieceFromHand = piece.WhichPiece == selectedPieceFromHand
// Deselecting the already-selected piece
? selectedPieceFromHand = null
: selectedPieceFromHand = piece.WhichPiece;
StateHasChanged();
}
}

View File

@@ -3,7 +3,7 @@
@inject IShogiApi ShogiApi;
<GameBoardPresentation IsSpectating="true"
Perspective="WhichPlayer.Player1"
Perspective="WhichPlayer.Player2"
Session="Session"
OnClickJoinGame="OnClickJoinGame" />