From 27b41d33abd09db52c0ac1113913d3479c3adfdc Mon Sep 17 00:00:00 2001
From: Pat Hartl <pat@pathar.tl>
Date: Sun, 5 Feb 2023 16:11:59 -0600
Subject: [PATCH] Multiplayer mode editor component update

---
 .../Components/MultiplayerModeEditor.razor    | 103 ++++++------------
 LANCommander/Pages/Games/Edit.razor           |   2 +
 LANCommander/Pages/_Layout.cshtml             |   1 +
 LANCommander/wwwroot/css/site.css             |  20 +---
 4 files changed, 41 insertions(+), 85 deletions(-)

diff --git a/LANCommander/Components/MultiplayerModeEditor.razor b/LANCommander/Components/MultiplayerModeEditor.razor
index 49120e8..0578060 100644
--- a/LANCommander/Components/MultiplayerModeEditor.razor
+++ b/LANCommander/Components/MultiplayerModeEditor.razor
@@ -1,85 +1,52 @@
 @using LANCommander.Data.Enums
 @using LANCommander.Data.Models
 
-@{
-    int i = 0;
-}
-<div class="table-responsive">
-    <table class="table mb-0">
-        <thead>
-            <tr>
-                <th>Type</th>
-                <th>Min Players</th>
-                <th>Max Players</th>
-                <th>Description</th>
-                <th></th>
-            </tr>
-        </thead>
+<MudText Typo="Typo.h6">Multiplayer Modes</MudText>
 
-        <tbody>
-            @if (MultiplayerModes.Count == 0)
-            {
-                <tr><td colspan="5">If the game has any multiplayer modes you can add them here to provide metadata to clients.</td></tr>
-            }
+<MudTable Items="@Game.MultiplayerModes" Elevation="0" Dense="true">
+    <HeaderContent>
+        <MudTh>Type</MudTh>
+        <MudTh>Min Players</MudTh>
+        <MudTh>Max Players</MudTh>
+        <MudTh>Description</MudTh>
+        <MudTh></MudTh>
+    </HeaderContent>
 
-            @foreach (var multiplayerMode in MultiplayerModes)
-            {
-                var index = i;
+    <RowTemplate>
+        <MudTd>
+            <MudSelect @bind-Value="context.Type" Margin="0">
+                @foreach (MultiplayerType type in Enum.GetValues(typeof(MultiplayerType)))
+                {
+                    <MudSelectItem Value="@((MultiplayerType)type)">@type</MudSelectItem>
+                }
+            </MudSelect>
+        </MudTd>
+        <MudTd><MudNumericField @bind-Value="context.MinPlayers" Margin="0" /></MudTd>
+        <MudTd><MudNumericField @bind-Value="context.MaxPlayers" Margin="0" /></MudTd>
+        <MudTd><MudTextField @bind-Value="context.Description" Margin="0" /></MudTd>
+        <MudTd Class="d-flex justify-end">
+            <MudIconButton Color="Color.Error" OnClick="() => RemoveMode(context)" Icon="@Icons.Material.Filled.Close"></MudIconButton>
+        </MudTd>
+    </RowTemplate>
+</MudTable>
 
-                <tr>
-                    <td>
-                        <select @bind="multiplayerMode.Type" name="Game.MultiplayerModes[@i].Type" class="form-control">
-                            @foreach (var type in Enum.GetValues(typeof(MultiplayerType)))
-                            {
-                                <option value="@type">@type</option>
-                            }
-                        </select>
-                    </td>
-                    <td><input @bind="multiplayerMode.MinPlayers" name="Game.MultiplayerModes[@i].MinPlayers" class="form-control" /></td>
-                    <td><input @bind="multiplayerMode.MaxPlayers" name="Game.MultiplayerModes[@i].MaxPlayers" class="form-control" /></td>
-                    <td><input @bind="multiplayerMode.Description" name="Game.MultiplayerModes[@i].Description" class="form-control" /></td>
-                    <td>
-                        <input name="Game.MultiplayerModes[@i].GameId" type="hidden" value="@GameId" />
-
-                        <div class="btn-list flex-nowrap justify-content-end">
-                            <button class="btn btn-ghost-danger btn-icon" @onclick="() => RemoveMode(index)" type="button">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                    <line x1="18" y1="6" x2="6" y2="18"></line>
-                                    <line x1="6" y1="6" x2="18" y2="18"></line>
-                                </svg>
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-
-                i++;
-            }
-            <tr>
-                <td colspan="5">
-                    <div class="btn-list flex-nowrap justify-content-end">
-                        <button class="btn btn-ghost-primary" @onclick="AddMode" type="button">Add Mode</button>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-</div>
+<MudPaper Elevation="0" Class="d-flex justify-end mt-3">
+    <MudButton Variant="Variant.Filled" Color="Color.Primary" StartIcon="@Icons.Material.Filled.Add" OnClick="AddMode">Add</MudButton>
+</MudPaper>
 
 @code {
-    [Parameter] public ICollection<MultiplayerMode> MultiplayerModes { get; set; }
-    [Parameter] public Guid GameId { get; set; }
+    [Parameter] public Game Game { get; set; }
 
     private void AddMode()
     {
-        if (MultiplayerModes == null)
-            MultiplayerModes = new List<MultiplayerMode>();
+        if (Game.MultiplayerModes == null)
+            Game.MultiplayerModes = new List<MultiplayerMode>();
 
-        MultiplayerModes.Add(new MultiplayerMode());
+        Game.MultiplayerModes.Add(new MultiplayerMode());
     }
 
-    private void RemoveMode(int index)
+    private void RemoveMode(MultiplayerMode mode)
     {
-        MultiplayerModes.Remove(MultiplayerModes.ElementAt(index));
+        Game.MultiplayerModes.Remove(mode);
     }
 }
diff --git a/LANCommander/Pages/Games/Edit.razor b/LANCommander/Pages/Games/Edit.razor
index f3d240f..05cc2cf 100644
--- a/LANCommander/Pages/Games/Edit.razor
+++ b/LANCommander/Pages/Games/Edit.razor
@@ -42,6 +42,8 @@
                     }
                 </MudChipSet>
 
+                <MultiplayerModeEditor Game="Game" />
+
                 <div class="d-flex align-center justify-space-between">
                     <MudButton Variant="Variant.Filled" Color="Color.Primary" Disabled="@(!Success)" OnClick="Save">Save</MudButton>
                 </div>
diff --git a/LANCommander/Pages/_Layout.cshtml b/LANCommander/Pages/_Layout.cshtml
index 291ef7f..d82ac1f 100644
--- a/LANCommander/Pages/_Layout.cshtml
+++ b/LANCommander/Pages/_Layout.cshtml
@@ -11,6 +11,7 @@
         <base href="~/" />
         <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
         <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
+        <link href="~/css/site.css" rel="stylesheet" />
     </head>
     <body>
         
diff --git a/LANCommander/wwwroot/css/site.css b/LANCommander/wwwroot/css/site.css
index f27e5ad..2aa7083 100644
--- a/LANCommander/wwwroot/css/site.css
+++ b/LANCommander/wwwroot/css/site.css
@@ -1,18 +1,4 @@
-html {
-  font-size: 14px;
-}
-
-@media (min-width: 768px) {
-  html {
-    font-size: 16px;
-  }
-}
-
-html {
-  position: relative;
-  min-height: 100%;
-}
-
-body {
-  margin-bottom: 60px;
+.mud-table-cell .mud-input-control > .mud-input-control-input-container > div.mud-input.mud-input-text,
+.mud-table-cell .mud-input-control {
+    margin-top: 0;
 }
\ No newline at end of file