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" />

View File

@@ -1,6 +1,6 @@
@using Shogi.Contracts.Types
<div data-upsidedown="@(Piece?.Owner != Perspective)" data-owner="@Piece?.Owner.ToString()">
<div class="game-piece" data-upsidedown="@(Piece?.Owner != Perspective)" data-owner="@Piece?.Owner.ToString()">
@switch (Piece?.WhichPiece)
{
case WhichPiece.Bishop:

View File

@@ -6,3 +6,7 @@
[data-upsidedown] {
transform: rotateZ(180deg);
}
.game-piece {
overflow: hidden; /* Because SVGs have weird sizes. */
}

View File

@@ -63,8 +63,6 @@ static void ConfigureDependencies(IServiceCollection services, IConfiguration co
var serializerOptions = new JsonSerializerOptions
{
DictionaryKeyPolicy = JsonNamingPolicy.CamelCase,
PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
WriteIndented = true
};
services.AddScoped((sp) => serializerOptions);

View File

@@ -29,7 +29,6 @@
void OnModalChange(object? sender, ModalVisibilityChangedEventArgs args)
{
Console.WriteLine("Modal Change");
if (args != null)
{
shouldShow = args.LoginModalIsVisible || args.GuestAccountDescriptionIsVisible;

View File

@@ -38,11 +38,9 @@ public class ShogiSocket : IDisposable
}.ToQueryString().Value;
await socket.ConnectAsync(this.uriBuilder.Uri, cancelToken.Token);
Console.WriteLine("Socket Connected");
// Fire and forget! I'm way too lazy to write my own javascript interop to a web worker. Nooo thanks.
_ = Listen().ContinueWith(async antecedent =>
{
Console.WriteLine($"Socket fault. {antecedent.Exception}");
this.cancelToken.Cancel();
await this.socket.CloseAsync(WebSocketCloseStatus.NormalClosure, "Page was probably closed or refresh.", CancellationToken.None);
if (antecedent.Exception != null)
@@ -59,9 +57,9 @@ public class ShogiSocket : IDisposable
var result = await socket.ReceiveAsync(this.memoryOwner.Memory, cancelToken.Token);
var memory = this.memoryOwner.Memory[..result.Count].ToArray();
var action = JsonDocument
.Parse(memory[..result.Count])
.Parse(memory)
.RootElement
.GetProperty(nameof(ISocketResponse.Action))
.GetProperty(nameof(ISocketMessage.Action))
.Deserialize<SocketAction>();
Console.WriteLine($"Socket action: {action}");
@@ -76,14 +74,14 @@ public class ShogiSocket : IDisposable
case SocketAction.SessionJoined:
if (this.OnSessionJoined is not null)
{
var args = JsonSerializer.Deserialize<SessionJoinedByPlayerSocketMessage>(memory[..result.Count], serializerOptions);
var args = JsonSerializer.Deserialize<SessionJoinedByPlayerSocketMessage>(memory, serializerOptions);
await this.OnSessionJoined(args!);
}
break;
case SocketAction.PieceMoved:
if (this.OnPlayerMoved is not null)
{
var args = JsonSerializer.Deserialize<PlayerHasMovedMessage>(memory[..result.Count], serializerOptions);
var args = JsonSerializer.Deserialize<PlayerHasMovedMessage>(memory, serializerOptions);
await this.OnPlayerMoved(args!);
}
break;