Revised code to load levels from CSV.

index.html

@@ -106,22 +106,29 @@
     </div>
   </div>
 
-  <script>
+<script>
-    const xpThresholds = [
+  let xpThresholds = [];
-      0, 1000, 3000, 6000, 10000, 15000, 21000, 28000, 36000, 45000,
-      55000, 65000, 75000, 85000, 100000, 120000, 140000, 160000, 185000, 210000,
-      260000, 335000, 435000, 560000, 710000, 900000, 1100000, 1350000, 1650000, 2000000,
-      2500000, 3000000, 3750000, 4750000, 6000000, 7500000, 9500000, 12000000, 15000000, 20000000,
-      26000000, 33500000, 42500000, 43500000, 66500000, 82000000, 100000000, 121000000, 146000000, 176000000,
-      206000000, 236000000, 266000000, 296000000, 326000000, 356000000, 386000000, 416000000, 446000000, 476000000,
-      506000000, 536000000, 566000000, 596000000, 626000000, 656000000, 686000000, 716000000, 746000000, 776000000,
-      806000000, 836000000, 866000000, 896000000, 926000000, 956000000, 986000000, 1016000000, 1046000000, 1076000000,
-    ];
-
   let avgXpPerDay = 15000;
   let currentXp = 0;
   let currentLevel = 1;
 
+  async function loadXPThresholds() {
+    try {
+      const response = await fetch('levels.csv');
+      const text = await response.text();
+
+      xpThresholds = text
+        .trim()
+        .split('\n')
+        .map(line => parseInt(line.split(',')[1].replace(/,/g, ''), 10));
+
+      console.log("Loaded XP thresholds:", xpThresholds);
+    } catch (error) {
+      alert("Failed to load levels.csv. Please ensure it's in the same folder as index.html.");
+      console.error(error);
+    }
+  }
+
   function calculateLevel(xp) {
     let level = 1;
     for (let i = 0; i < xpThresholds.length; i++) {
@@ -162,11 +169,20 @@
   }
 
   document.getElementById('calculate-btn').addEventListener('click', () => {
-      let xp = document.getElementById('xp-input').value.replace(/,/g,'').trim();
+    if (xpThresholds.length === 0) {
-      if (!xp || isNaN(xp)) { alert('Please enter a valid number for XP.'); return; }
+      alert('Level data not loaded yet. Please wait a moment and try again.');
-      currentXp = parseInt(xp, 10);
+      return;
+    }
 
+    let xp = document.getElementById('xp-input').value.replace(/,/g, '').trim();
+    if (!xp || isNaN(xp)) {
+      alert('Please enter a valid number for XP.');
+      return;
+    }
+
+    currentXp = parseInt(xp, 10);
     currentLevel = calculateLevel(currentXp);
+
     let nextLevelXp = (currentLevel < xpThresholds.length) ? xpThresholds[currentLevel] : currentXp;
     let currentLevelXp = xpThresholds[currentLevel - 1];
     let progress = (currentXp - currentLevelXp) / (nextLevelXp - currentLevelXp) * 100;
@@ -177,25 +193,21 @@
     document.getElementById('level-right').textContent = (currentLevel < xpThresholds.length) ? currentLevel + 1 : currentLevel;
 
     document.getElementById('result').classList.remove('hidden');
-
     updateExtraInfo();
   });
 
-    document.getElementById('xp-input').addEventListener('input', (e)=>{
+  document.getElementById('xp-input').addEventListener('input', (e) => {
-      e.target.value = e.target.value.replace(/[^0-9,]/g,'');
+    e.target.value = e.target.value.replace(/[^0-9,]/g, '');
   });
 
   const themeToggle = document.getElementById('theme-toggle');
-    const mainCard = document.getElementById('main-card');
   themeToggle.addEventListener('click', () => {
     document.body.classList.toggle('dark-mode');
-      if (document.body.classList.contains('dark-mode')) {
+    themeToggle.textContent = document.body.classList.contains('dark-mode') ? '🌙' : '☀️';
-        themeToggle.textContent = '🌙';
-      } else {
-        themeToggle.textContent = '☀️';
-      }
   });
-  </script>
+
+  window.addEventListener('DOMContentLoaded', loadXPThresholds);
+</script>
 
 </body>
 </html>