Enh(viewer): Jump to round

Author: klieret

codeclash/viewer/static/css/style.css

@@ -948,3 +948,71 @@ summary:focus {
     align-self: flex-start;
   }
 }
+
+/* Navigation button styles */
+.nav-to-round-btn {
+  background: var(--accent-color);
+  color: white;
+  border: none;
+  padding: 0.5rem 0.75rem;
+  border-radius: 50%;
+  cursor: pointer;
+  font-size: 1rem;
+  transition: all 0.2s;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  min-height: 2rem;
+}
+
+.nav-to-round-btn:hover {
+  background: var(--accent-hover);
+  transform: translateY(1px);
+}
+
+.nav-to-round-btn:active {
+  transform: translateY(2px);
+}
+
+.nav-arrow {
+  font-weight: bold;
+  font-size: 1.1rem;
+}
+
+/* Round anchor positioning */
+.round-anchor {
+  position: relative;
+  top: -80px; /* Offset for fixed header */
+  visibility: hidden;
+}
+
+/* Highlight effect for jumped-to rounds */
+.highlight-round {
+  animation: roundHighlight 2s ease-in-out;
+}
+
+@keyframes roundHighlight {
+  0% {
+    background-color: var(--accent-color);
+    opacity: 0.1;
+  }
+  50% {
+    background-color: var(--accent-color);
+    opacity: 0.2;
+  }
+  100% {
+    background-color: transparent;
+    opacity: 1;
+  }
+}
+
+/* Make table rows clickable-looking on hover */
+.results-table tbody tr:hover {
+  background-color: var(--bg-secondary);
+  cursor: default;
+}
+
+.results-table tbody tr:hover .nav-to-round-btn {
+  transform: scale(1.1);
+}

codeclash/viewer/static/js/app.js

@@ -224,6 +224,29 @@ function collapseTrajectoryMessages(clickedElement) {
   }
 }
 
+// Round navigation functionality
+function scrollToRound(roundNum) {
+  const roundAnchor = document.getElementById(`round-${roundNum}`);
+  if (roundAnchor) {
+    // Smooth scroll to the round section
+    roundAnchor.scrollIntoView({
+      behavior: "smooth",
+      block: "start",
+    });
+
+    // Add a brief highlight effect
+    const roundSection = roundAnchor.nextElementSibling;
+    if (roundSection) {
+      roundSection.classList.add("highlight-round");
+      setTimeout(() => {
+        roundSection.classList.remove("highlight-round");
+      }, 2000);
+    }
+  } else {
+    console.warn(`Round ${roundNum} anchor not found`);
+  }
+}
+
 // Initialize everything when DOM is loaded
 document.addEventListener("DOMContentLoaded", function () {
   initializeTheme();

codeclash/viewer/templates/index.html

@@ -117,6 +117,7 @@ <h2>📊 Overview</h2>
                             {% for trajectory in trajectories_by_round.get(1, []) %}
                                 <th>Player {{ trajectory.player_id }} Steps</th>
                             {% endfor %}
+                            <th>Actions</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -158,6 +159,11 @@ <h2>📊 Overview</h2>
                                         <td><span class="no-result">-</span></td>
                                     {% endfor %}
                                 {% endif %}
+                                <td>
+                                    <button class="nav-to-round-btn" onclick="scrollToRound({{ round_data.round_num }})" title="Jump to Round {{ round_data.round_num }} details">
+                                        <span class="nav-arrow">↓</span>
+                                    </button>
+                                </td>
                             </tr>
                         {% endfor %}
                     </tbody>
@@ -172,6 +178,9 @@ <h2>🎯 Detailed Rounds</h2>
             {% for round_data in metadata.rounds %}
                 {% set round_num = round_data.round_num %}
 
+                <!-- Round Anchor for Navigation -->
+                <div id="round-{{ round_num }}" class="round-anchor"></div>
+
                 <!-- Player Trajectories for this round -->
                 {% if round_num in trajectories_by_round %}
                     {% for trajectory in trajectories_by_round[round_num] %}
@@ -599,7 +608,7 @@ <h3>
                 modes: ['view', 'tree'],
                 name: 'metadata'
             });
-            metadataEditor.set({{ metadata.results | tojson }});
+            metadataEditor.set({{ metadata.results | tojson | safe }});
 
             // Initialize round results JSON editors
             {% for round_data in metadata.rounds %}
@@ -609,7 +618,7 @@ <h3>
                     modes: ['view', 'tree'],
                     name: 'round_{{ round_data.round_num }}_results'
                 });
-                round{{ round_data.round_num }}Editor.set({{ round_data.results | tojson }});
+                round{{ round_data.round_num }}Editor.set({{ round_data.results | tojson | safe }});
                 {% endif %}
             {% endfor %}
         });