Improved inventory section for equipped items

1 files changed, 18 insertions, 20 deletions

diff --git a/app/views/characters/items/index.html.erb b/app/views/characters/items/index.html.erb
index 140b737..8d0220b 100644
--- a/app/views/characters/items/index.html.erb
+++ b/app/views/characters/items/index.html.erb
@@ -1,25 +1,23 @@
-<h2 class="text-xl mb-4">Equipped Items</h2>
+<h2 class="text-xl">Equipped Items</h2>
 
-<table class="table-auto mb-8">
-  <thead>
-  <tr>
-    <th class="table-header-padded">Slot</th>
-    <th class="table-header-padded">Item</th>
-    <th class="table-header-padded">Unequip</th>
-  </tr>
-  </thead>
-  <tbody>
-  <% @character.equipment.order(:slot).each do |eq| %>
-    <tr>
-      <td class="table-cell-padded"><%= eq.slot.to_s.humanize %></td>
-      <td class="table-cell-padded"><%= eq.item.name %></td>
-      <td class="table-cell-padded">
-        <%= button_to "Unequip", character_item_unequip_path(slot: eq.slot ) %>
-      </td>
-    </tr>
+<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
+  <% Equipment.slots.each do |slot| %>
+    <div class="my-2">
+      <div class="text-xs text-gray-500"><%= slot[0].to_s.humanize %></div>
+      <% eq = @character.equipment.find_by(slot: slot)%>
+      <% if eq.present? %>
+        <div class="text-display"><%= eq.item.name %></div>
+      <% else %>
+        <div class="text-gray-500 italic">–</div>
+      <% end %>
+      <% if eq.present? %>
+        <div class="text-sm">
+          <%= button_to "Unequip", character_item_unequip_path(slot: eq.slot ) %>
+        </div>
+      <% end %>
+    </div>
   <% end %>
-  </tbody>
-</table>
+</div>
 
 <%= render "characters/items/inventory_section", heading: "Equipment",
            character_items: @character.character_items.ordered_by_item_name.select { |ci|