Update index.html

index.html

@@ -1253,10 +1253,43 @@
         }, duration);
       }
 
+      // Update leaderboard
       // Update leaderboard
       function updateLeaderboard() {
-        // Sort leaderboard by steps (ascending)
-        leaderboard.sort((a, b) => a.steps - b.steps);
+        // First sort by positive vs negative reward, then by steps
+        leaderboard.sort((a, b) => {
+          // First, prioritize positive rewards over negative ones
+          if (
+            (a.reward > 0 && b.reward < 0) ||
+            (a.reward >= 0 && b.reward < 0)
+          ) {
+            return -1;
+          }
+          if (
+            (a.reward < 0 && b.reward > 0) ||
+            (a.reward < 0 && b.reward >= 0)
+          ) {
+            return 1;
+          }
+
+          // If both are positive, higher reward wins
+          if (a.reward > 0 && b.reward > 0) {
+            // If rewards are close, sort by steps
+            if (Math.abs(a.reward - b.reward) < 1) {
+              return a.steps - b.steps;
+            }
+            // Otherwise, higher reward wins
+            return b.reward - a.reward;
+          }
+
+          // If both are negative, less negative reward wins
+          if (a.reward < 0 && b.reward < 0) {
+            return b.reward - a.reward;
+          }
+
+          // If both rewards are exactly the same, sort by steps
+          return a.steps - b.steps;
+        });
 
         // Keep only top 5
         if (leaderboard.length > 5) {
@@ -1292,6 +1325,12 @@
 
             const rewardCell = document.createElement("td");
             rewardCell.textContent = entry.reward.toFixed(1);
+            // Add color to reward based on value
+            if (entry.reward > 0) {
+              rewardCell.style.color = "var(--success)";
+            } else if (entry.reward < 0) {
+              rewardCell.style.color = "var(--danger)";
+            }
             row.appendChild(rewardCell);
 
             leaderboardBody.appendChild(row);
@@ -1341,7 +1380,12 @@
       function getAction(state) {
         // In optimal mode, always choose best action
         if (isOptimalMode) {
-          return qTable[state].indexOf(Math.max(...qTable[state]));
+          const maxQ = Math.max(...qTable[state]);
+          // If all values are 0, take a random action instead
+          if (maxQ === 0 && qTable[state].every((val) => val === 0)) {
+            return Math.floor(Math.random() * numActions);
+          }
+          return qTable[state].indexOf(maxQ);
         }
 
         // Exploration (random action)