From 9f0e94ab8a7a1e47f25e6a08fe89b34740f76e6c Mon Sep 17 00:00:00 2001
From: Daniel Arroyo <darroylat@gmail.com>
Date: Mon, 24 Aug 2026 10:49:57 -0400
Subject: [PATCH] fix(personajes): flatten capacity table iteration to prevent
 reverse render order from nested x-for in tbody

---
 .../templates/PageResource/personajes.html    | 38 +++++++++++--------
 1 file changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/main/resources/templates/PageResource/personajes.html b/src/main/resources/templates/PageResource/personajes.html
index 2abad83..a248b67 100644
--- a/src/main/resources/templates/PageResource/personajes.html
+++ b/src/main/resources/templates/PageResource/personajes.html
@@ -176,21 +176,19 @@
             </tr>
           </thead>
           <tbody>
-            <template x-for="g in shots.GRADOS" :key="'block-' + g">
-              <template x-for="t in shots.TIPOS" :key="'row-' + t + '-' + g">
-                <tr :class="g !== shots.GRADOS[0] && t === shots.TIPOS[0] ? 'cap-block-divider' : ''">
-                  <td class="text-bold" x-text="t"></td>
-                  <template x-if="t === shots.TIPOS[0]">
-                    <td :rowspan="shots.TIPOS.length" class="text-center" style="vertical-align: middle;">
-                      <span class="grade-badge" x-text="g"></span>
-                    </td>
-                  </template>
-                  <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 0))"></td>
-                  <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 1))"></td>
-                  <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 2))"></td>
-                  <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(t, g, 3))"></td>
-                </tr>
-              </template>
+            <template x-for="(row, idx) in capRows()" :key="row.tipo + '-' + row.grado">
+              <tr :class="idx > 0 && (idx % shots.TIPOS.length) === 0 ? 'cap-block-divider' : ''">
+                <td class="text-bold" x-text="row.tipo"></td>
+                <template x-if="(idx % shots.TIPOS.length) === 0">
+                  <td :rowspan="shots.TIPOS.length" class="text-center" style="vertical-align: middle;">
+                    <span class="grade-badge" x-text="row.grado"></span>
+                  </td>
+                </template>
+                <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(row.tipo, row.grado, 0))"></td>
+                <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(row.tipo, row.grado, 1))"></td>
+                <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(row.tipo, row.grado, 2))"></td>
+                <td class="text-right text-mono" x-text="fmtAdena(shots.referenceCapacity(row.tipo, row.grado, 3))"></td>
+              </tr>
             </template>
           </tbody>
         </table>
@@ -240,6 +238,16 @@
           return Math.round(n).toLocaleString('es-CL');
         },
 
+        capRows() {
+          const rows = [];
+          for (const g of window.shots.GRADOS) {
+            for (const t of window.shots.TIPOS) {
+              rows.push({ tipo: t, grado: g });
+            }
+          }
+          return rows;
+        },
+
         async loadCharacters() {
           try {
             this.characters = await window.api.listCharacters();