Spaces:

Reaperxxxx
/

lava

Running

App Files Files Community

Reaperxxxx commited on Aug 25, 2025

Commit

ef8d9f2

verified ·

1 Parent(s): 0320c23

Update docs.html

Browse files

Files changed (1) hide show

docs.html +248 -0

docs.html CHANGED Viewed

@@ -952,6 +952,110 @@
         grid-template-columns: 1fr;
       }
     }
   </style>
 </head>
 <body>
@@ -1108,6 +1212,31 @@
         </div>
         <div id="groupsContainer"></div>
       </div>
     </div>
   </div>
@@ -1365,6 +1494,79 @@
             // Show stats grid
             document.getElementById('statsGrid').style.display = 'grid';
             setTimeout(() => {
               document.getElementById('groupLoading').style.display = 'none';
@@ -1588,6 +1790,52 @@
         loadMoreBtn.style.display = 'none';
       }
     }
   </script>
 </body>
 </html>

         grid-template-columns: 1fr;
       }
     }
+    .progress {
+      width: 100%;
+      height: 8px;
+      background: var(--theme-bg-primary);
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 5px 0;
+      border: 1px solid var(--theme-border);
+    }
+    .bar {
+      height: 100%;
+      background: linear-gradient(90deg, var(--theme-primary), var(--theme-secondary));
+      border-radius: 4px;
+      transition: width 2s ease-in-out;
+      width: 0%;
+    }
+    .progress-text {
+      font-size: 0.75rem;
+      color: var(--theme-text-secondary);
+      text-align: center;
+      margin-top: 3px;
+    }
+    .global-progress-section {
+      background: linear-gradient(135deg, var(--theme-bg-secondary) 0%, var(--theme-bg-tertiary) 100%);
+      border: 2px solid var(--theme-border);
+      border-radius: 12px;
+      padding: 20px;
+      margin-bottom: 20px;
+      box-shadow: 0 4px 15px var(--theme-shadow);
+    }
+    .global-progress-section h3 {
+      color: var(--theme-primary);
+      margin-bottom: 15px;
+      font-size: 1.1rem;
+      border-bottom: 1px solid var(--theme-border);
+      padding-bottom: 8px;
+    }
+    .progress-stats {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      gap: 15px;
+      margin-bottom: 15px;
+    }
+    .progress-stat {
+      text-align: center;
+      padding: 10px;
+      background: var(--theme-bg-primary);
+      border-radius: 8px;
+      border: 1px solid var(--theme-border);
+    }
+    .progress-stat strong {
+      display: block;
+      color: var(--theme-secondary);
+      font-size: 0.8rem;
+      margin-bottom: 5px;
+    }
+    .progress-stat-value {
+      font-size: 1.1rem;
+      font-weight: 700;
+      color: var(--theme-primary);
+    }
+    .individual-group-progress {
+      margin-top: 20px;
+    }
+    .group-progress-item {
+      background: var(--theme-bg-primary);
+      border: 1px solid var(--theme-border);
+      border-radius: 8px;
+      padding: 15px;
+      margin-bottom: 10px;
+    }
+    .group-progress-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+    .group-progress-title {
+      font-weight: 600;
+      color: var(--theme-text-primary);
+      font-size: 0.9rem;
+    }
+    .group-rank-badge {
+      padding: 3px 8px;
+      border-radius: 12px;
+      font-size: 0.7rem;
+      font-weight: 600;
+      background: var(--theme-primary);
+      color: var(--theme-bg-primary);
+    }
   </style>
 </head>
 <body>
         </div>
         <div id="groupsContainer"></div>
       </div>
+      <!-- Added global progress section -->
+      <div class="global-progress-section" id="globalProgressSection" style="display:none;">
+        <h3>🚀 Global Progress</h3>
+        <div class="progress-stats">
+          <div class="progress-stat">
+            <strong>Combined Level</strong>
+            <div class="progress-stat-value" id="combinedLevel">-</div>
+          </div>
+          <div class="progress-stat">
+            <strong>Next Level</strong>
+            <div class="progress-stat-value" id="nextCombinedLevel">-</div>
+          </div>
+          <div class="progress-stat">
+            <strong>Progress</strong>
+            <div class="progress-stat-value" id="globalProgressPercent">-</div>
+          </div>
+          <div class="progress-stat">
+            <strong>XP Needed</strong>
+            <div class="progress-stat-value" id="xpNeeded">-</div>
+          </div>
+        </div>
+        <div id="globalProgressBar"></div>
+        <div class="individual-group-progress" id="individualGroupProgress"></div>
+      </div>
     </div>
   </div>
             // Show stats grid
             document.getElementById('statsGrid').style.display = 'grid';
+            const globalProgress = calculateGlobalProgress(infoData.groups);
+            const combinedLevel = infoData.groups.reduce((sum, group) => sum + group.level, 0);
+            // Display global progress stats
+            document.getElementById('combinedLevel').textContent = combinedLevel;
+            document.getElementById('nextCombinedLevel').textContent = globalProgress.nextCombinedLevel;
+            document.getElementById('globalProgressPercent').textContent = `${globalProgress.progressPercentage.toFixed(1)}%`;
+            document.getElementById('xpNeeded').textContent = (globalProgress.neededProgress - globalProgress.currentProgress).toLocaleString();
+            // Create global progress bar
+            const globalProgressBar = document.getElementById('globalProgressBar');
+            globalProgressBar.innerHTML = `
+              <div class="progress">
+                <div class="bar" style="width: 0%" data-target="${globalProgress.progressPercentage.toFixed(1)}%"></div>
+              </div>
+              <div class="progress-text">${globalProgress.currentProgress.toLocaleString()} / ${globalProgress.neededProgress.toLocaleString()} XP to next combined level</div>
+            `;
+            const individualProgress = document.getElementById('individualGroupProgress');
+            const uniqueGroups = {};
+            // Group by groupId and calculate progress for each
+            for (const group of infoData.groups) {
+              const groupId = group.groupId || group.id || 'unknown';
+              if (!uniqueGroups[groupId]) {
+                uniqueGroups[groupId] = {
+                  groupId: groupId,
+                  level: group.level,
+                  xp: group.xp,
+                  totalLevel: group.level,
+                  totalXP: group.xp
+                };
+              } else {
+                uniqueGroups[groupId].totalLevel += group.level;
+                uniqueGroups[groupId].totalXP += group.xp;
+              }
+            }
+            let groupProgressHTML = '<h4 style="color: var(--theme-secondary); margin-bottom: 15px;">📊 Individual Group Progress</h4>';
+            for (const groupId in uniqueGroups) {
+              const group = uniqueGroups[groupId];
+              const groupRank = getGroupRank(group.totalLevel);
+              const progressBar = createProgressBar(group.totalXP, group.totalLevel);
+              groupProgressHTML += `
+                <div class="group-progress-item">
+                  <div class="group-progress-header">
+                    <span class="group-progress-title">Group ${groupId}</span>
+                    <span class="group-rank-badge">${groupRank.emoji} ${groupRank.rank}</span>
+                  </div>
+                  <div style="font-size: 0.8rem; color: var(--theme-text-secondary); margin-bottom: 8px;">
+                    Level ${group.totalLevel} • ${group.totalXP.toLocaleString()} XP
+                  </div>
+                  ${progressBar}
+                </div>
+              `;
+            }
+            individualProgress.innerHTML = groupProgressHTML;
+            // Show global progress section
+            document.getElementById('globalProgressSection').style.display = 'block';
+            setTimeout(() => {
+              const progressBars = document.querySelectorAll('.bar[data-target]');
+              progressBars.forEach(bar => {
+                const target = bar.getAttribute('data-target');
+                bar.style.width = target;
+              });
+            }, 500);
             setTimeout(() => {
               document.getElementById('groupLoading').style.display = 'none';
         loadMoreBtn.style.display = 'none';
       }
     }
+    function calculateGlobalProgress(groups) {
+      let currentProgress = 0;
+      let neededProgress = 0;
+      let nextCombinedLevel = 0;
+      if (groups && groups.length > 0) {
+        const combinedLevel = groups.reduce((sum, group) => sum + group.level, 0);
+        nextCombinedLevel = combinedLevel + 1;
+        currentProgress = groups.reduce((sum, group) => sum + group.xp, 0);
+        neededProgress = getXpForLevel(nextCombinedLevel);
+      } else {
+        nextCombinedLevel = 1;
+        neededProgress = getXpForLevel(1);
+      }
+      const progressPercentage = (currentProgress / neededProgress) * 100;
+      return {
+        currentProgress: currentProgress,
+        neededProgress: neededProgress,
+        progressPercentage: progressPercentage,
+        nextCombinedLevel: nextCombinedLevel
+      };
+    }
+    function getGroupRank(level) {
+      if (level >= 100) return { rank: 'Legendary', emoji: '👑' };
+      if (level >= 75) return { rank: 'Epic', emoji: '🌟' };
+      if (level >= 50) return { rank: 'Rare', emoji: '💎' };
+      if (level >= 25) return { rank: 'Uncommon', emoji: '🌿' };
+      return { rank: 'Common', emoji: '⚙️' };
+    }
+    function createProgressBar(currentXP, level) {
+      const neededXP = getXpForLevel(level + 1);
+      const progress = (currentXP / neededXP) * 100;
+      return `
+        <div class="progress">
+          <div class="bar" style="width: ${progress}%"></div>
+        </div>
+        <div class="progress-text">${currentXP.toLocaleString()} / ${neededXP.toLocaleString()} XP to next level</div>
+      `;
+    }
   </script>
 </body>
 </html>