From f98c9ed42c5f2eee833dff5f1a84a11dfeca0c97 Mon Sep 17 00:00:00 2001
From: Marcin Badurowicz <m@badurowicz.net>
Date: Mon, 27 May 2024 19:44:58 +0200
Subject: [PATCH 1/2] feat: equipment table on game page as a component

---
 Server/Components/Pages/GamePage.razor    | 35 +----------------
 Server/Components/UI/EquipmentTable.razor | 47 +++++++++++++++++++++++
 Server/wwwroot/css/game.css               |  4 +-
 3 files changed, 50 insertions(+), 36 deletions(-)
 create mode 100644 Server/Components/UI/EquipmentTable.razor

diff --git a/Server/Components/Pages/GamePage.razor b/Server/Components/Pages/GamePage.razor
index edf64de..eff3ecd 100644
--- 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
new file mode 100644
index 0000000..7f8ccb9
--- /dev/null
+++ b/Server/Components/UI/EquipmentTable.razor
@@ -0,0 +1,47 @@
+@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>@Equipment[i].Name</td>
+            }
+            else
+            {
+                <td></td>
+            }
+        }
+    </tr>
+
+    <tr>
+        @for (int i = 3; i < 6; i++)
+        {
+            if (i < Equipment.Count)
+            {
+                <td>@Equipment[i].Name</td>
+            }
+            else
+            {
+                <td></td>
+            }
+        }
+    </tr>
+
+
+</table>
+
+@code {
+    [Parameter] public required ObservableCollection<Item> Equipment { get; set; }
+
+    protected override void OnInitialized()
+    {
+        Equipment.CollectionChanged += (sender, e) => StateHasChanged();
+    }
+}
diff --git a/Server/wwwroot/css/game.css b/Server/wwwroot/css/game.css
index f3f3214..f7739fe 100644
--- 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);
     }
 

From 73f27501d329b5f626e429230afe96cac04e6aea Mon Sep 17 00:00:00 2001
From: Marcin Badurowicz <m@badurowicz.net>
Date: Mon, 27 May 2024 19:59:52 +0200
Subject: [PATCH 2/2] feat: different styles for different prefixes

---
 Server/Components/Layout/GameLayout.razor |  1 +
 Server/Components/UI/EquipmentTable.razor | 10 ++++++++--
 Server/Fracture.Server.csproj             |  3 +++
 Server/wwwroot/css/items.css              | 11 +++++++++++
 4 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 Server/wwwroot/css/items.css

diff --git a/Server/Components/Layout/GameLayout.razor b/Server/Components/Layout/GameLayout.razor
index aac2256..fd8e55f 100644
--- 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/UI/EquipmentTable.razor b/Server/Components/UI/EquipmentTable.razor
index 7f8ccb9..e9a71ea 100644
--- a/Server/Components/UI/EquipmentTable.razor
+++ b/Server/Components/UI/EquipmentTable.razor
@@ -11,7 +11,7 @@
         {
             if (i < Equipment.Count)
             {
-                <td>@Equipment[i].Name</td>
+                <td><div class="@ToCss(Equipment[i].Name)">@Equipment[i].Name</div></td>
             }
             else
             {
@@ -25,7 +25,7 @@
         {
             if (i < Equipment.Count)
             {
-                <td>@Equipment[i].Name</td>
+                <td><div class="@ToCss(Equipment[i].Name)">@Equipment[i].Name</div></td>
             }
             else
             {
@@ -44,4 +44,10 @@
     {
         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
index 6613426..3252b60 100644
--- 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/items.css b/Server/wwwroot/css/items.css
new file mode 100644
index 0000000..690a5b0
--- /dev/null
+++ 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;
+}
\ No newline at end of file