Client新增Appsetting把Url變成設定

Client/Components/Map.razor

@@ -1,15 +1,17 @@
-
-<svg width="100%" height="100%" viewBox="0 0 @Data.TotalWidth @Data.TotalHeight" version="1.1"
-     xmlns="http://www.w3.org/2000/svg">
-    @foreach (var (row, row_index) in Data.Blocks.Select((item, index) => (item, index)))
-     {
-        @foreach (var (block, index) in row.Select((item, index) => (item, index)))
+@if (Data is not null)
+{
+    <svg width="@Width" height="@Height" viewBox="0 0 @Data.TotalWidth @Data.TotalHeight" version="1.1"
+         xmlns="http://www.w3.org/2000/svg">
+        @foreach (var (row, row_index) in Data.Blocks.Select((item, index) => (item, index)))
          {
-            if (block is null)
-            {
-                continue;
-            }
-            <SvgBlock Block="@block" Width="@Data.BlockWidth" Height="@Data.BlockHeight" />
+            @foreach (var (block, index) in row.Select((item, index) => (item, index)))
+             {
+                if (block is null)
+                {
+                    continue;
+                }
+                <SvgBlock Block="@block" Width="@Data.BlockWidth" Height="@Data.BlockHeight" />
+             }
          }
-     }
-</svg>
+    </svg>
+}

Client/Components/Map.razor.cs

@@ -5,4 +5,9 @@ public partial class Map : ComponentBase
 {
     [Parameter, EditorRequired]
     public BlazorMap Data { get; set; } = default!;
+
+    [Parameter]
+    public string Width { get; set; } = "100%";
+    [Parameter]
+    public string Height { get; set; } = "100%";
 }

Client/Options/BackendApiOptions.cs

@@ -0,0 +1,6 @@
+namespace Client.Options;
+
+public class BackendApiOptions
+{
+    public string BaseUrl { get; set; } = default!;
+}

Client/Pages/Game.razor

@@ -1,6 +1,10 @@
 @page "/{id}"
 @using Client.Components
-@if (blazorMap is not null)
-{
-    <Map Data="@blazorMap" />
-}
+<svg width="100%" height="100vh"
+     version="1.1"
+     xmlns="http://www.w3.org/2000/svg">
+
+    <Map Data="@blazorMap" Height="80%" />
+
+</svg>
+

Client/Pages/Game.razor.cs

@@ -1,6 +1,8 @@
 using Client.Components;
+using Client.Options;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.SignalR.Client;
+using Microsoft.Extensions.Options;
 using MudBlazor;
 using SharedLibrary;
 using System.Net.Http.Json;
@@ -15,6 +17,7 @@ public partial class Game
     public string AccessToken { get; set; } = default!;
 
     [Inject] private ISnackbar Snackbar { get; set; } = default!;
+    [Inject] private IOptions<BackendApiOptions> BackendApiOptions { get; set; } = default!;
 
     private HubConnection hubConnection = default!;
     private readonly List<string> messages = new();
@@ -23,8 +26,9 @@ public partial class Game
 
     protected override async Task OnInitializedAsync()
     {
+        var url = new Uri(new Uri(BackendApiOptions.Value.BaseUrl), $"/monopoly?gameid={Id}");
         hubConnection = new HubConnectionBuilder()
-            .WithUrl($"https://localhost:3826/monopoly?gameid={Id}", options =>
+            .WithUrl(url, options =>
             {
                 options.AccessTokenProvider = async () => await Task.FromResult(AccessToken);
             })
@@ -44,9 +48,9 @@ protected override async Task OnInitializedAsync()
 
     private async Task GetMapFromApiAsync(string id)
     {
+        var url = new Uri(new Uri(BackendApiOptions.Value.BaseUrl), $"/map?mapid={id}");
         // map 從 Server 取得
-        var httpclient = new HttpClient();
-        var response = await httpclient.GetAsync($"https://localhost:3826/map?mapid={id}");
+        var response = await new HttpClient().GetAsync(url);
         if (!response.IsSuccessStatusCode)
         {
             Snackbar.Add($"取得地圖失敗: {response.StatusCode}", Severity.Error);

Client/Pages/Index.razor

@@ -1,7 +1,9 @@
 @page "/"
+@using Client.Options;
 @using Microsoft.AspNetCore.SignalR.Client;
 @using System.Security.Claims;
 @using System.Net.Http.Headers;
+@using Microsoft.Extensions.Options;
 <MudStack>
     @foreach (var item in Users)
     {
@@ -26,18 +28,19 @@
 </MudStack>
 
 @code {
-    private string Token { get; set; } = string.Empty;
+    private string Token { get; set; } = "";
     private List<string> Messages { get; set; } = new();
     private List<User> Users { get; set; } = new();
     private string UserId { get; set; } = string.Empty;
     private string GameId { get; set; } = string.Empty;
     private List<GameData> games = new();
     [Inject] private ISnackbar Snackbar { get; set; } = default!;
+    [Inject] private IOptions<BackendApiOptions> BackendApiOptions { get; set; } = default!;
 
     private async void CreateGame()
     {
         CreateGameBodyPayload bodyPayload = new(Users.Select(user => new Player(user.Id)).ToArray());
-        var url = "https://localhost:3826";
+        var url = new Uri(new Uri(BackendApiOptions.Value.BaseUrl), "/create-game");
         var httpClient = new HttpClient();
         var host = Users.FirstOrDefault();
         if (host is null)
@@ -46,7 +49,7 @@
             return;
         }
         httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", host.Token);
-        var response = await httpClient.PostAsJsonAsync($"{url}/create-game", bodyPayload);
+        var response = await httpClient.PostAsJsonAsync(url, bodyPayload);
         if (response.IsSuccessStatusCode)
         {
             var content = await response.Content.ReadAsStringAsync();
@@ -60,9 +63,10 @@
 
     private async void AddUser()
     {
+        var url = new Uri(new Uri(BackendApiOptions.Value.BaseUrl), "/whoami");
         HubConnection hubConnection = new HubConnectionBuilder()
             .WithAutomaticReconnect()
-            .WithUrl("https://localhost:3826/whoami", opt =>
+            .WithUrl(url, opt =>
             {
                 opt.AccessTokenProvider = () => Task.FromResult<string?>(Token);
             })

Client/Program.cs

@@ -1,4 +1,5 @@
 using Client;
+using Client.Options;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 using MudBlazor.Services;
@@ -7,6 +8,10 @@
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
+builder.Services.Configure<BackendApiOptions>(options =>
+{
+    builder.Configuration.Bind(nameof(BackendApiOptions), options);
+});
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 builder.Services.AddMudServices();
 

Client/Properties/launchSettings.json

@@ -22,7 +22,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "https://localhost:7047;http://localhost:5184",
-      "launchUrl": "https://localhost:7047/1",
+      "launchUrl": "https://localhost:7047/",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

Client/appsettings.Development.json

@@ -0,0 +1,5 @@
+{
+  "BackendApiOptions": {
+    "BaseUrl": "https://localhost:3826/"
+  }
+}

Client/appsettings.json

@@ -0,0 +1 @@
+{}