selector and web

2026-06-07 00:35:18 +02:00
parent 211779785d
commit 836499d10d
18 changed files with 1189 additions and 25 deletions
@@ -0,0 +1,99 @@
+<section class="panel inventory-panel<%= typeof embedded !== 'undefined' && embedded ? ' inventory-panel-embedded' : '' %>">
+  <% if (typeof embedded === 'undefined' || !embedded) { %>
+  <div class="panel-header">
+    <h2><%= typeof panelTitle !== 'undefined' && panelTitle ? panelTitle : 'Inventaire' %></h2>
+    <% if (!playerInventory.isEmpty) { %>
+      <span class="badge"><%= playerInventory.totalItems %> objet(s)</span>
+    <% } %>
+  </div>
+  <% } else if (!playerInventory.isEmpty) { %>
+    <div class="inventory-embedded-meta">
+      <span class="badge"><%= playerInventory.totalItems %> objet(s)</span>
+    </div>
+  <% } %>
+
+  <% if (!db.hasInventoryTable()) { %>
+    <p class="empty">Table inventaire absente. Redémarrez le serveur Hytale pour appliquer la migration personnages.</p>
+  <% } else if (playerInventory.isEmpty) { %>
+    <p class="empty">Inventaire vide. Les objets sont enregistrés à la déconnexion du personnage en jeu.</p>
+  <% } else { %>
+    <div class="inventory-sections">
+      <% playerInventory.sections.forEach(function(section) { %>
+        <div class="inventory-section inventory-section--<%= section.key %>">
+          <div class="inventory-section-head">
+            <h3><%= section.label %></h3>
+            <span class="muted"><%= section.used %> / <%= section.capacity %></span>
+          </div>
+          <div class="inventory-grid cols-<%= section.cols %>">
+            <% section.cells.forEach(function(item) { %>
+              <% if (item) { %>
+                <div class="inventory-slot filled" title="<%= item.name %> · <%= item.itemId %>">
+                  <img
+                    class="slot-icon"
+                    src="<%= item.iconUrl %>"
+                    alt="<%= item.name %>"
+                    loading="lazy"
+                    onerror="this.onerror=null;this.src='/icons/unknown.svg';"
+                  >
+                  <span class="slot-name"><%= item.name %></span>
+                  <% if (item.quantity > 1) { %>
+                    <span class="slot-qty">×<%= item.quantity %></span>
+                  <% } %>
+                  <% if (item.durability) { %>
+                    <span class="slot-dur"><%= item.durability %></span>
+                  <% } %>
+                </div>
+              <% } else { %>
+                <div class="inventory-slot empty" aria-hidden="true"></div>
+              <% } %>
+            <% }); %>
+          </div>
+        </div>
+      <% }); %>
+    </div>
+
+    <details class="inventory-list">
+      <summary>Liste détaillée</summary>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Section</th>
+            <th>Emplacement</th>
+            <th>Objet</th>
+            <th>Qté</th>
+            <th>Durabilité</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% playerInventory.sections.forEach(function(section) { %>
+            <% section.cells.forEach(function(item, index) { %>
+              <% if (item) { %>
+                <tr>
+                  <td><%= section.label %></td>
+                  <td><%= index + 1 %></td>
+                  <td>
+                    <div class="item-row">
+                      <img
+                        class="item-row-icon"
+                        src="<%= item.iconUrl %>"
+                        alt=""
+                        loading="lazy"
+                        onerror="this.onerror=null;this.src='/icons/unknown.svg';"
+                      >
+                      <div>
+                        <span class="player-name"><%= item.name %></span>
+                        <small class="muted"><%= item.itemId %></small>
+                      </div>
+                    </div>
+                  </td>
+                  <td><%= item.quantity %></td>
+                  <td><%= item.durability || '—' %></td>
+                </tr>
+              <% } %>
+            <% }); %>
+          <% }); %>
+        </tbody>
+      </table>
+    </details>
+  <% } %>
+</section>