Skip to content

Commit

Permalink
feat: DevPage 新增自動開始遊戲的功能
Browse files Browse the repository at this point in the history
  • Loading branch information
@aa89227
aa89227 committed Sep 12, 2024
1 parent e66fd70 commit 3d8eb00
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 55 deletions.
95 changes: 57 additions & 38 deletions Clients/Monopoly.Clients.Web/Pages/DevPage.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,66 @@
<h1 class="">Development Page</h1>
<div class="dev-content">
<div class="left-panel">
<div class="create-player-form">
<InputText style="padding: 10px; margin-right: 10px; width: 200px; border: 1px solid #ccc; border-radius: 4px;"
@bind-Value="PlayerName" DisplayName="Enter player name"/>
<button @onclick="CreatePlayerAsync">Create Player</button>
</div>
<!-- Tab -->
<button @onclick="() => OpenTab1()">Player Control</button>
<button @onclick="() => OpenTab2()">Room Detail Control</button>

<div class="player-list">
@foreach (var player in _players)
@_tabItem
<!-- Tab Content -->
@switch (_tabItem)
{
case "tab1":
{
var isSelected = SelectedPlayer == player;
var selectCss = isSelected ? "selected" : "";
var isInRoom = SelectedRoom?.Players.Contains(player) ?? false;
var isInRoomCss = isInRoom ? "in-room" : "";
<div class="create-player-form">
<InputText style="padding: 10px; margin-right: 10px; width: 200px; border: 1px solid #ccc; border-radius: 4px;"
@bind-Value="PlayerName" DisplayName="Enter player name"/>
<button @onclick="CreatePlayerAsync">Create Player</button>
</div>
<div class="player-list">
@foreach (var player in _players)
{
var isSelected = SelectedPlayer == player;
var selectCss = isSelected ? "selected" : "";
var isInRoom = SelectedRoom?.Players.Contains(player) ?? false;
var isInRoomCss = isInRoom ? "in-room" : "";

<div class="player-item block-highlight @(selectCss) @(isInRoomCss)" @onclick="() => SelectedPlayer = player">
<div class="player-name">@player.Name</div>
<div class="player-token">@player.Token.GetMonopolyPlayerId()</div>
<div class="player-item block-highlight @selectCss @isInRoomCss" @onclick="() => SelectedPlayer = player">
<div class="player-name">@player.Name</div>
<div class="player-token">@player.Token.GetMonopolyPlayerId()</div>
</div>
}
</div>
}
</div>
<div class="room-setup">
<div class="host-to-create-room block-highlight" @onclick="AddHostToCreateRoom">
@if (HostToCreateRoom is not null)
{
<div class="player-name">@HostToCreateRoom.Name</div>
<div class="player-token">@HostToCreateRoom.Token.GetMonopolyPlayerId()</div>
}
else
{
<div class="player-name">Host</div>
}
</div>
<div class="players-to-create-room block-highlight" @onclick="AddPlayerToCreateRoom">
@foreach (var player in PlayersToCreateRoom)
{
<div class="player-item">
<div class="player-name">@player.Name</div>
<div class="player-token">@player.Token.GetMonopolyPlayerId()</div>
<div class="room-setup">
<div class="host-to-create-room block-highlight" @onclick="AddHostToCreateRoom">
@if (HostToCreateRoom is not null)
{
<div class="player-name">@HostToCreateRoom.Name</div>
<div class="player-token">@HostToCreateRoom.Token.GetMonopolyPlayerId()</div>
}
else
{
<div class="player-name">Host</div>
}
</div>
}
</div>
<button @onclick="CreateRoomAsync">Create Room</button>
</div>
<div class="players-to-create-room block-highlight" @onclick="AddPlayerToCreateRoom">
@foreach (var player in PlayersToCreateRoom)
{
<div class="player-item">
<div class="player-name">@player.Name</div>
<div class="player-token">@player.Token.GetMonopolyPlayerId()</div>
</div>
}
</div>
<button @onclick="CreateRoomAsync">Create Room</button>
</div>
break;
}
case "tab2":
{
<button @onclick="AutoStartGame">自動開始遊戲</button>
break;
}
}
</div>

<div class="right-panel">
Expand Down Expand Up @@ -78,6 +95,8 @@
</div>
</div>
</div>

<h2 class="">Rooms (Iframe)</h2>
@if (RoomToOpen is not null)
{
<button @onclick="() => RoomToOpen = null">Clear</button>
Expand Down
74 changes: 57 additions & 17 deletions Clients/Monopoly.Clients.Web/Pages/DevPage.razor.cs
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,24 @@
using System.Collections.Immutable;
using System.IdentityModel.Tokens.Jwt;
using Client.HttpClients;
using Client.Options;
using Client.Pages.Enums;
using Client.Pages.Ready;
using Client.Pages.Ready.Components;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.SignalR.Client;
using Microsoft.Extensions.Options;

namespace Client.Pages;

public partial class DevPage
{
private string _tabItem = "tab1";

private void OpenTab1() => _tabItem = "tab1";

private void OpenTab2() => _tabItem = "tab2";

private readonly List<DevPlayer> _players = [];
private readonly List<DevRoom> _rooms = [];
private string PlayerName { get; set; } = Guid.NewGuid().ToString();
Expand Down Expand Up @@ -34,7 +47,7 @@ async Task CreateRoomWithPlayerCountAsync(int playerCount)
{
// Randomly set player to host
HostToCreateRoom = _players.First();

var skipCount = playerCount == 4 ? 1 : 0;

// Add other players to create room
Expand Down Expand Up @@ -62,19 +75,17 @@ private async Task CreateRoomAsync()
return;
}

var hostToken = HostToCreateRoom.Token;
var playerIds = PlayersToCreateRoom.Select(p => p.Token.GetMonopolyPlayerId()).ToArray();
var roomUrl = await MonopolyDevelopmentApiClient.CreateRoomAsync(hostToken, playerIds);
var roomUrl = await MonopolyDevelopmentApiClient.CreateRoomAsync(HostToCreateRoom.Token, playerIds);
var players = playerIds.Select(id => _players.Single(p => p.Token.GetMonopolyPlayerId() == id))
.ToImmutableArray();
_rooms.Add(new DevRoom(roomUrl, hostToken, players));
_rooms.Add(new DevRoom(roomUrl, HostToCreateRoom, players));
HostToCreateRoom = null;
PlayersToCreateRoom.Clear();
}

private static string ReadyRoomUrl(DevPlayer devPlayer, DevRoom devRoom)
{
// navigate to {devRoom.Url}?token={devPlayer.Token.RowData}
return $"{devRoom.Url}?token={devPlayer.Token.RawData}";
}

Expand All @@ -91,20 +102,12 @@ private void AddHostToCreateRoom()

private void AddPlayerToCreateRoom()
{
if (SelectedPlayer is null)
{
return;
}

if (PlayersToCreateRoom.Count == 4)
{
if (SelectedPlayer is null
&& PlayersToCreateRoom.Count is 4)
return;
}

if (PlayersToCreateRoom.Contains(SelectedPlayer))
{
if (SelectedPlayer is null || PlayersToCreateRoom.Contains(SelectedPlayer))
return;
}

PlayersToCreateRoom.Add(SelectedPlayer);

Expand All @@ -113,11 +116,48 @@ private void AddPlayerToCreateRoom()

private record DevPlayer(string Name, JwtSecurityToken Token);

private record DevRoom(string Url, JwtSecurityToken HostToken, ImmutableArray<DevPlayer> Players);
private record DevRoom(string Url, DevPlayer Host, ImmutableArray<DevPlayer> Players);

private Task OpenBelow(DevRoom room)
{
RoomToOpen = room;
return Task.CompletedTask;
}

[Inject] private IOptions<MonopolyApiOptions> BackendApiOptions { get; set; } = default!;

private async Task AutoStartGame()
{
if (SelectedRoom is null)
{
return;
}

for (var index = 0; index < SelectedRoom.Players.Length; index++)
{
var player = SelectedRoom.Players[index];
var connection = await CreateReadyRoomHubConnection(player, SelectedRoom.Url.Split("/")[^1]);
var role = Enum.GetValues<RoleEnum>()[index + 1].ToString();
await connection.SelectRole(role);
var color = Enum.GetValues<ColorEnum>()[index + 1];
await connection.SelectLocation(color.ToLocationEnum());
await connection.PlayerReady();
}

var hostConnection = await CreateReadyRoomHubConnection(SelectedRoom.Host, SelectedRoom.Url.Split("/")[^1]);
await hostConnection.StartGame();
}

private async Task<ReadyRoomHubConnection> CreateReadyRoomHubConnection(DevPlayer player, string gameId)
{
var baseUri = new Uri(BackendApiOptions.Value.BaseUrl);
var url = new Uri(baseUri, $"/ready-room?gameid={gameId}");
var client = new HubConnectionBuilder()
.WithUrl(url,
options => { options.AccessTokenProvider = async () => await Task.FromResult(player.Token.RawData); })
.Build();
var connection = new ReadyRoomHubConnection(client);
await client.StartAsync();
return connection;
}
}

0 comments on commit 3d8eb00

Please sign in to comment.