Change(viewer): sim win rate -> score; move to top of table

Author: klieret

codeclash/viewer/app.py

@@ -496,10 +496,11 @@ def analyze_line_counts(self) -> dict[str, Any]:
         return {"all_files": all_files_list, "line_counts_by_round": line_counts_by_round}
 
     def analyze_sim_wins_per_round(self) -> dict[str, Any]:
-        """Analyze number of simulations won per round for each competitor from round_stats in metadata.json"""
+        """Analyze scores per round for each competitor from round_stats in metadata.json.
+        Scores are calculated as wins + 0.5*ties, same as in the table."""
         metadata = load_metadata(self.log_dir)
         if not metadata:
-            return {"players": [], "rounds": [], "wins_by_player": {}}
+            return {"players": [], "rounds": [], "scores_by_player": {}}
 
         round_stats = metadata.get("round_stats", {})
         # Collect all player names from all rounds
@@ -512,18 +513,28 @@ def analyze_sim_wins_per_round(self) -> dict[str, Any]:
         # Collect all round numbers (sorted)
         round_nums = sorted([int(k) for k in round_stats.keys()])
 
-        # Build wins_by_player: {player: [wins_per_round]}
-        wins_by_player = {p: [] for p in player_names}
+        # Build scores_by_player: {player: [scores_per_round]}
+        # Scores = (wins + 0.5*ties) / total_games * 100 (percentage, same as in process_round_results)
+        scores_by_player = {p: [] for p in player_names}
         for round_num in round_nums:
             round_data = round_stats.get(str(round_num), {})
             scores = round_data.get("scores", {})
+            ties = scores.get("Tie", 0)
+            total_games = sum(scores.values())
+
             for p in player_names:
-                wins_by_player[p].append(scores.get(p, 0))
+                wins = scores.get(p, 0)
+                if total_games > 0:
+                    # Calculate score as percentage: (wins + 0.5*ties) / total_games * 100
+                    player_score = ((wins + 0.5 * ties) / total_games) * 100
+                else:
+                    player_score = 0
+                scores_by_player[p].append(round(player_score, 1))
 
         return {
             "players": player_names,
             "rounds": round_nums,
-            "wins_by_player": wins_by_player,
+            "scores_by_player": scores_by_player,
         }
 
     def load_matrix_analysis(self) -> dict[str, Any] | None:

codeclash/viewer/static/css/style.css

@@ -1649,6 +1649,22 @@ summary:focus {
   max-height: 100%;
 }
 
+/* Scores per round container in overview */
+.scores-per-round-container {
+  margin: 2rem 0;
+  padding: 1.5rem;
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+}
+
+.scores-per-round-container h3 {
+  color: var(--text-primary);
+  margin-bottom: 1rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
 /* Responsive design for analysis */
 @media (max-width: 768px) {
   .file-selector {

codeclash/viewer/static/js/analysis.js

@@ -184,34 +184,37 @@ function prepareChartData(fileName) {
 }
 
 // Initialize when DOM is loaded
-// --- Sim Wins Per Round Chart ---
-let simWinsChart = null;
-let simWinsData = null;
 
-function initializeSimWinsChart() {
-  const simWinsDataElement = document.getElementById("sim-wins-data");
-  if (!simWinsDataElement) return;
+// --- Overview Scores Chart ---
+let overviewScoresChart = null;
+let overviewScoresData = null;
+
+function initializeOverviewScoresChart() {
+  const overviewScoresDataElement = document.getElementById(
+    "overview-scores-data",
+  );
+  if (!overviewScoresDataElement) return;
   try {
-    simWinsData = JSON.parse(simWinsDataElement.textContent);
+    overviewScoresData = JSON.parse(overviewScoresDataElement.textContent);
     if (
-      simWinsData &&
-      simWinsData.players &&
-      simWinsData.players.length > 0 &&
-      simWinsData.rounds &&
-      simWinsData.rounds.length > 0
+      overviewScoresData &&
+      overviewScoresData.players &&
+      overviewScoresData.players.length > 0 &&
+      overviewScoresData.rounds &&
+      overviewScoresData.rounds.length > 0
     ) {
-      createSimWinsChart();
+      createOverviewScoresChart();
     }
   } catch (error) {
-    console.error("Error parsing sim wins data:", error);
+    console.error("Error parsing overview scores data:", error);
   }
 }
 
-function createSimWinsChart() {
-  const canvas = document.getElementById("sim-wins-chart");
-  if (!canvas || !simWinsData) return;
+function createOverviewScoresChart() {
+  const canvas = document.getElementById("overview-scores-chart");
+  if (!canvas || !overviewScoresData) return;
   const ctx = canvas.getContext("2d");
-  if (simWinsChart) simWinsChart.destroy();
+  if (overviewScoresChart) overviewScoresChart.destroy();
 
   // Prepare datasets
   const colors = [
@@ -226,8 +229,11 @@ function createSimWinsChart() {
     "#FF6384",
   ];
   let colorIndex = 0;
-  const datasets = simWinsData.players.map((player) => {
-    const data = simWinsData.rounds.map((round, i) => ({ x: round, y: simWinsData.wins_by_player[player][i] }));
+  const datasets = overviewScoresData.players.map((player) => {
+    const data = overviewScoresData.rounds.map((round, i) => ({
+      x: round,
+      y: overviewScoresData.scores_by_player[player][i],
+    }));
     const color = colors[colorIndex % colors.length];
     colorIndex++;
     return {
@@ -241,7 +247,7 @@ function createSimWinsChart() {
     };
   });
 
-  simWinsChart = new Chart(ctx, {
+  overviewScoresChart = new Chart(ctx, {
     type: "line",
     data: { datasets },
     options: {
@@ -250,7 +256,7 @@ function createSimWinsChart() {
       plugins: {
         title: {
           display: true,
-          text: `Simulations Won Per Round`,
+          text: `Scores Per Round`,
         },
         legend: {
           display: true,
@@ -264,17 +270,18 @@ function createSimWinsChart() {
           position: "bottom",
         },
         y: {
-          title: { display: true, text: "Simulations Won" },
+          title: { display: true, text: "Score %" },
           beginAtZero: true,
+          max: 100,
         },
       },
       interaction: { intersect: false, mode: "index" },
     },
   });
 }
 
-// Initialize both analyses when DOM is loaded
+// Initialize all analyses when DOM is loaded
 document.addEventListener("DOMContentLoaded", function () {
   initializeAnalysis();
-  initializeSimWinsChart();
+  initializeOverviewScoresChart();
 });

codeclash/viewer/templates/includes/analysis.html

@@ -2,23 +2,6 @@
 <section class="analysis-section">
     <h2><i class="bi bi-graph-up"></i> Analysis</h2>
 
-    <!-- Sim Wins Per Round Analysis -->
-    <details class="foldout">
-        <summary><i class="bi bi-bar-chart-line"></i> Sim Wins Per Round</summary>
-        <div class="log-content-container">
-            {% if sim_wins_data and sim_wins_data.players and sim_wins_data.rounds %}
-                <div class="sim-wins-analysis-container">
-                    <div class="chart-container">
-                        <canvas id="sim-wins-chart" width="800" height="400"></canvas>
-                    </div>
-                    <script type="application/json" id="sim-wins-data">{{ sim_wins_data | tojson }}</script>
-                </div>
-            {% else %}
-                <p>No simulation win data available. This analysis requires games with round stats.</p>
-            {% endif %}
-        </div>
-    </details>
-
     <!-- Line Counting Analysis -->
     <details class="foldout">
         <summary><i class="bi bi-graph-up-arrow"></i> Line Counting Analysis</summary>

codeclash/viewer/templates/includes/overview.html

@@ -2,6 +2,14 @@
 <section class="overview-section">
     <h2><i class="bi bi-bar-chart"></i> Overview</h2>
 
+    <!-- Scores Per Round Chart -->
+    {% if sim_wins_data and sim_wins_data.players and sim_wins_data.rounds %}
+        <div class="chart-container">
+            <canvas id="overview-scores-chart" width="800" height="400"></canvas>
+        </div>
+        <script type="application/json" id="overview-scores-data">{{ sim_wins_data | tojson }}</script>
+    {% endif %}
+
     <div class="overview-summary">
         <table class="table table-striped table-hover results-table">
             <thead>