Add QR Code dialog, fix styles

TaikoWebUI/Pages/Cards.razor

@@ -40,6 +40,11 @@
                                 <CardHeaderActions>
                             <MudMenu Icon="@Icons.Material.Filled.MoreVert" Dense="true" AnchorOrigin="Origin.BottomLeft"
                              TransformOrigin="Origin.TopLeft" Size="Size.Small">
+                                        <MudMenuItem Icon="@Icons.Material.Filled.QrCode"
+                                                             OnClick="@(_ => ShowQrCode(user))"
+                                                             IconColor="@Color.Primary">
+                                            Show QR Code
+                                        </MudMenuItem>
                                         <MudMenuItem Icon="@Icons.Material.Filled.Delete"
                                                      OnClick="@(_ => DeleteCard(user))"
                                                      IconColor="@Color.Error">
@@ -50,7 +55,7 @@
                             </MudCardHeader>
                             <MudCardContent>
                                 <MudText Style="font-weight:bold">Access Code</MudText>
-                                <MudText Style="font-family:monospace">@user.AccessCode</MudText>
+                                <MudText Style="font-family:monospace;overflow:hidden;overflow-x:scroll">@user.AccessCode</MudText>
                             </MudCardContent>
                             <MudCardActions>
                                 <MudStack Row="true" Style="width:100%" Spacing="4" Justify="Justify.FlexEnd">
@@ -85,4 +90,4 @@
                 </MudText>
             </MudItem>
     }
-</MudGrid>
+</MudGrid>

TaikoWebUI/Pages/Cards.razor.cs

@@ -30,4 +30,15 @@ public partial class Cards
         response = await Client.GetFromJsonAsync<DashboardResponse>("api/Dashboard");
     }
 
+    private Task ShowQrCode(User user)
+    {
+        var parameters = new DialogParameters
+        {
+            ["user"] = user
+        };
+
+        DialogService.Show<UserQrCodeDialog>("QR Code", parameters);
+
+        return Task.CompletedTask;
+    }
 }

TaikoWebUI/Pages/Dialogs/UserQrCodeDialog.razor

@@ -0,0 +1,39 @@
+@using TaikoWebUI.Shared.Models
+@using System.Collections.Immutable
+@inject IGameDataService GameDataService
+
+<MudDialog>
+    <DialogContent>
+        <MudExtensions.MudBarcode
+        Value="@qrCode"
+        BarcodeFormat="ZXing.BarcodeFormat.QR_CODE"
+        Height="300" 
+        Width="300" 
+        StrokeWidth="0.05" />
+    </DialogContent>
+    <DialogActions>
+        <MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
+    </DialogActions>
+</MudDialog>
+
+@code {
+
+    [CascadingParameter]
+    MudDialogInstance MudDialog { get; set; } = null!;
+
+    [Parameter]
+    public User User { get; set; } = new();
+
+    private string qrCode = string.Empty;
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        qrCode = "BNTTCNID" + User.AccessCode;
+    }
+
+    private void Submit()
+    {
+        MudDialog.Close(DialogResult.Ok(true));
+    }
+}

TaikoWebUI/TaikoWebUI.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
     <PropertyGroup>
         <TargetFramework>net8.0</TargetFramework>
@@ -9,6 +9,7 @@
 
     <ItemGroup>
         <PackageReference Include="Autocomplete.Clients" Version="1.1.0" />
+        <PackageReference Include="CodeBeam.MudBlazor.Extensions" Version="6.5.10" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0-rc.1.23421.29" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0-rc.1.23421.29" PrivateAssets="all" />
         <PackageReference Include="MudBlazor" Version="6.10.0" />