New inventory view, with items sorted by categories

2 files changed, 56 insertions, 32 deletions

diff --git a/app/views/characters/items/_inventory_section.html.erb b/app/views/characters/items/_inventory_section.html.erb
new file mode 100644
index 0000000..727e3a1
--- /dev/null
+++ b/app/views/characters/items/_inventory_section.html.erb
@@ -0,0 +1,34 @@
+<% if character_items.any? %>
+  <h3 class="text-xl"><%= heading %></h3>
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5
+              border border-gray-500 rounded p-2 my-2">
+    <% character_items.each do |ci| %>
+      <div class="my-1">
+        <div class="flex items-center text-display">
+          <div><%= link_to ci.item.name, item_path(ci.item) %></div>
+          <div class="text-sm border border-gray-500 rounded-lg mx-2 px-1 py-0.5">
+            <%= ci.quantity %>
+          </div>
+        </div>
+        <div>
+          <span class="text-xs italic"><%= truncate(ci.item.description) %></span>
+        </div>
+        <% if ci.item.equipment? %>
+        <div class="text-xs"><%= ci.item.equip_slots.map {|s| s.to_s.humanize}.join(", ") %></div>
+        <% end %>
+        <div class="flex flex-row my-2 text-sm">
+          <% if ci.item.equipment? %>
+            <div class="mr-2">
+              <%= button_to "Equip", character_item_equip_path(item_id: ci.item.id) %>
+            </div>
+          <% end %>
+          <% if ci.item.usable? %>
+            <div class="mr-2">
+              <%= button_to "Use", character_item_use_path(item_id: ci.item.id) %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+<% end %>
diff --git a/app/views/characters/items/index.html.erb b/app/views/characters/items/index.html.erb
index f40e666..140b737 100644
--- a/app/views/characters/items/index.html.erb
+++ b/app/views/characters/items/index.html.erb
@@ -1,6 +1,4 @@
-<h1 class="text-3xl mb-4">Inventory</h1>
-
-<h2 class="text-xl mb-4">Equipment</h2>
+<h2 class="text-xl mb-4">Equipped Items</h2>
 
 <table class="table-auto mb-8">
   <thead>
@@ -23,34 +21,26 @@
   </tbody>
 </table>
 
-<h2 class="text-xl mb-4">Inventory</h2>
+<%= render "characters/items/inventory_section", heading: "Equipment",
+           character_items: @character.character_items.ordered_by_item_name.select { |ci|
+             ci.item.equipment? && ci.item.tags.none? } %>
 
-<table class="table-auto mb-8">
-  <thead>
-  <tr>
-    <th class="table-header-padded">Amount</th>
-    <th class="table-header-padded">Item</th>
-    <th class="table-header-padded">Equip</th>
-    <th class="table-header-padded">Use</th>
-  </tr>
-  </thead>
-  <tbody>
-  <% @character.character_items.ordered_by_item_name.each do |ci| %>
-    <tr>
-      <td class="table-cell-padded text-right"><%= ci.quantity %></td>
-      <td class="table-cell-padded"><%= link_to ci.item.name, item_path(ci.item) %></td>
-      <td class="table-cell-padded">
-        <% if ci.item.equipment? %>
-          <%= button_to "Equip", character_item_equip_path(item_id: ci.item.id) %>
-        <% end %>
-      </td>
-      <td class="table-cell-padded">
-        <% if ci.item.usable? %>
-          <%= button_to "Use", character_item_use_path(item_id: ci.item.id) %>
-        <% end %>
-      </td>
-    </tr>
-  <% end %>
-  </tbody>
-</table>
+<%= render "characters/items/inventory_section", heading: "Tools",
+           character_items: @character.character_items.ordered_by_item_name.select { |ci|
+             ci.item.has_tag?("tool") } %>
+
+<%= render "characters/items/inventory_section", heading: "Consumables",
+           character_items: @character.character_items.ordered_by_item_name.select { |ci|
+             ci.item.usable? } %>
+
+<%= render "characters/items/inventory_section", heading: "Seeds",
+           character_items: @character.character_items.ordered_by_item_name.select { |ci|
+             ci.item.has_tag?("seed") } %>
+
+<%= render "characters/items/inventory_section", heading: "Materials",
+           character_items: @character.character_items.ordered_by_item_name.select { |ci|
+             ci.item.has_tag?("material") } %>
 
+<%= render "characters/items/inventory_section", heading: "Miscellany",
+           character_items: @character.character_items.ordered_by_item_name.select { |ci|
+             !ci.item.equipment? && !ci.item.usable? && ci.item.tags.none? } %>