Merge pull request #69 from pollubnet/equipment-component

Equipment component
pollubnet · May 27, 2024 · b702f20 · b702f20
2 parents 39c4797 + 73f2750
commit b702f20
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 36 deletions.
diff --git a/Server/Components/Layout/GameLayout.razor b/Server/Components/Layout/GameLayout.razor
@@ -2,6 +2,7 @@
 
 <HeadContent>
     <link rel="stylesheet" href="css/game.css">
+    <link rel="stylesheet" href="css/items.css">
 </HeadContent>
 
 @Body

diff --git a/Server/Components/Pages/GamePage.razor b/Server/Components/Pages/GamePage.razor
@@ -40,40 +40,7 @@
                     </div>
                 </div>
             </div>
-            <table class="equipmentTable">
-                <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-
-                </tr>
-                <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                </tr>
-                <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-
-                </tr>
-                <tr>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-                    <td></td>
-
-                </tr>
-
-            </table>
+            <EquipmentTable Equipment="@_equipment" />
         </div>
 
     </div>

diff --git a/Server/Components/UI/EquipmentTable.razor b/Server/Components/UI/EquipmentTable.razor
@@ -0,0 +1,53 @@
+@using Fracture.Server.Components.UI
+@using Fracture.Server.Modules.Items.Models
+@using Fracture.Server.Modules.Items.Services
+@using System.Collections.ObjectModel
+
+@rendermode InteractiveServer
+
+<table class="equipmentTable">
+    <tr>
+        @for (int i = 0; i < 3; i++)
+        {
+            if (i < Equipment.Count)
+            {
+                <td><div class="@ToCss(Equipment[i].Name)">@Equipment[i].Name</div></td>
+            }
+            else
+            {
+                <td></td>
+            }
+        }
+    </tr>
+
+    <tr>
+        @for (int i = 3; i < 6; i++)
+        {
+            if (i < Equipment.Count)
+            {
+                <td><div class="@ToCss(Equipment[i].Name)">@Equipment[i].Name</div></td>
+            }
+            else
+            {
+                <td></td>
+            }
+        }
+    </tr>
+
+
+</table>
+
+@code {
+    [Parameter] public required ObservableCollection<Item> Equipment { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Equipment.CollectionChanged += (sender, e) => StateHasChanged();
+    }
+
+    private string ToCss(string name)
+    {
+        var css = name.Split(' ').Select(x => "item-" + x.ToLower());
+        return string.Join(" ", css);
+    }
+}
diff --git a/Server/Fracture.Server.csproj b/Server/Fracture.Server.csproj
@@ -5,6 +5,9 @@
     <ImplicitUsings>enable</ImplicitUsings>
     <UserSecretsId>16f71bc9-60c6-466f-af95-a2818674e57c</UserSecretsId>
   </PropertyGroup>
+  <ItemGroup>
+    <_ContentIncludedByDefault Remove="wwwroot\css\items.css" />
+  </ItemGroup>
   <ItemGroup>    
     <PackageReference Include="Markov" Version="2.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="8.0.1" />

diff --git a/Server/wwwroot/css/game.css b/Server/wwwroot/css/game.css
@@ -346,8 +346,8 @@ body {
 
     .equipmentTable tr td {
         border: #000 3px solid;
-        width: 60px;
-        height: 60px;
+        width: 100px;
+        height: 100px;
         background-color: rgb(222, 222, 255);
     }
 

diff --git a/Server/wwwroot/css/items.css b/Server/wwwroot/css/items.css
@@ -0,0 +1,11 @@
+.item-reliable {
+    filter: drop-shadow(16px 16px 20px red) invert(75%);
+}
+
+.item-toxic {
+    filter: drop-shadow(16px 16px 20px green);
+}
+
+.item-poisoned {
+    font-family: Webdings;
+}