From b838c52d7895e7d1e3ac206c8ff530a11a3f5789 Mon Sep 17 00:00:00 2001
From: David Gay <david@davidgay.org>
Date: Sun, 6 Jun 2021 00:47:30 -0400
Subject: Improved inventory section for equipped items

---
 CHANGELOG.md                              |  2 +-
 app/views/characters/items/index.html.erb | 38 +++++++++++++++----------------
 2 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ee3152..d0840be 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 ## [Unreleased]
 
 ### UI
-- New inventory view, with items sorted into categories.
+- New inventory view, with items sorted into categories, and a (hopefully) better section for equipped items.
 
 ## [0.1.7.2] - 2021-06-05
 
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|
-- 
cgit v1.2.3