Update script.js

script.js

@@ -1,5 +1,54 @@
 const COL_ORDER = [
-    "Model Name",
+  "Model Name",
+  "WorldScore-Static",
+  "WorldScore-Dynamic",
+  "Camera Control",
+  "Object Control",
+  "Content Alignment",
+  "3D Consistency",
+  "Photometric Consistency",
+  "Style Consistency",
+  "Subjective Quality",
+  "Motion Accuracy",
+  "Motion Magnitude",
+  "Motion Smoothness",
+  "Model Type",
+  "Ability",
+  "Sampled by",
+  "Evaluated by",
+  "Accessibility",
+  "Date",
+];
+
+// ==== CSV 解析 ====
+function parseCsv(text) {
+  const lines = text.trim().split(/\r?\n/);
+  const header = lines[0].split(",");
+  const rows = lines
+    .slice(1)
+    .map((line) => {
+      if (!line.trim()) return null;
+      const parts = line.split(",");
+      const obj = {};
+      header.forEach((h, i) => {
+        obj[h.trim()] = (parts[i] || "").trim();
+      });
+      return obj;
+    })
+    .filter(Boolean);
+  return { header, rows };
+}
+
+function parseMarkdownLink(s) {
+  const m = s.match(/^\[(.*?)\]\((.*?)\)$/);
+  if (m) {
+    return { text: m[1], url: m[2] };
+  }
+  return { text: s, url: null };
+}
+
+function isNumericColumn(colName) {
+  const numericCols = new Set([
     "WorldScore-Static",
     "WorldScore-Dynamic",
     "Camera Control",
@@ -12,203 +61,215 @@ const COL_ORDER = [
     "Motion Accuracy",
     "Motion Magnitude",
     "Motion Smoothness",
-    "Model Type",
-    "Ability",
-    "Sampled by",
-    "Evaluated by",
-    "Accessibility",
-    "Date",
-  ];
-  
-  // 简单 CSV 解析（你的数据没有带逗号的字段，这样已经够用）
-  function parseCsv(text) {
-    const lines = text.trim().split(/\r?\n/);
-    const header = lines[0].split(",");
-    const rows = lines.slice(1).map((line) => {
-      if (!line.trim()) return null;
-      const parts = line.split(",");
-      const obj = {};
-      header.forEach((h, i) => {
-        obj[h.trim()] = (parts[i] || "").trim();
-      });
-      return obj;
-    }).filter(Boolean);
-    return { header, rows };
-  }
-  
-  function parseMarkdownLink(s) {
-    const m = s.match(/^\[(.*?)\]\((.*?)\)$/);
-    if (m) {
-      return { text: m[1], url: m[2] };
+  ]);
+  return numericCols.has(colName);
+}
+
+// ==== 给数值单元格加“百分比条”背景 ====
+function styleScoreCell(td, valueStr) {
+  const v = parseFloat(valueStr);
+  if (isNaN(v)) return;
+
+  const pct = Math.max(0, Math.min(100, v));
+  const ratio = pct / 100;
+  const hue = 120 * ratio; // 0=red, 120=green
+  const bgColor = `hsl(${hue}, 80%, 90%)`;
+
+  td.style.backgroundImage = `linear-gradient(to right, ${bgColor} ${pct}%, transparent ${pct}%)`;
+  td.style.backgroundRepeat = "no-repeat";
+  td.style.backgroundOrigin = "content-box";
+}
+
+// ==== 构建表格 + 排序 + top1/top2 标记 ====
+function buildTable(rows) {
+  const container = document.getElementById("table-container");
+  container.innerHTML = "";
+
+  const table = document.createElement("table");
+  table.className = "ws-table";
+
+  const thead = document.createElement("thead");
+  const headRow = document.createElement("tr");
+
+  const firstRow = rows[0] || {};
+  const cols = COL_ORDER.filter((c) => c in firstRow);
+
+  // 表头
+  cols.forEach((col) => {
+    const th = document.createElement("th");
+    th.textContent = col;
+    th.classList.add("sortable");
+    th.dataset.col = col;
+    if (col === "WorldScore-Static") {
+      th.classList.add("desc"); // 默认降序
     }
-    return { text: s, url: null };
-  }
-  
-  function isNumericColumn(colName) {
-    const numericCols = new Set([
-      "WorldScore-Static",
-      "WorldScore-Dynamic",
-      "Camera Control",
-      "Object Control",
-      "Content Alignment",
-      "3D Consistency",
-      "Photometric Consistency",
-      "Style Consistency",
-      "Subjective Quality",
-      "Motion Accuracy",
-      "Motion Magnitude",
-      "Motion Smoothness",
-    ]);
-    return numericCols.has(colName);
-  }
-  
-  function buildTable(rows) {
-    const container = document.getElementById("table-container");
-    container.innerHTML = "";
-  
-    const table = document.createElement("table");
-    table.className = "ws-table";
-  
-    const thead = document.createElement("thead");
-    const headRow = document.createElement("tr");
-  
-    const firstRow = rows[0] || {};
-    const cols = COL_ORDER.filter((c) => c in firstRow);
-  
-    // 表头：全部 sortable
-    cols.forEach((col) => {
-      const th = document.createElement("th");
-      th.textContent = col;
-      th.classList.add("sortable");
-      th.dataset.col = col;
-  
-      // 默认排序列：WorldScore-Static，标记为 desc
-      if (col === "WorldScore-Static") {
-        th.classList.add("desc");
-      }
-      headRow.appendChild(th);
-    });
-  
-    thead.appendChild(headRow);
-    table.appendChild(thead);
-  
-    const tbody = document.createElement("tbody");
-    table.appendChild(tbody);
-    container.appendChild(table);
-  
-    // 内部函数：根据当前 rows 渲染 body
-    function renderBody(data) {
-      tbody.innerHTML = "";
-      data.forEach((row) => {
-        const tr = document.createElement("tr");
-        cols.forEach((col) => {
-          const td = document.createElement("td");
-          const val = row[col] ?? "";
-  
-          if (col === "Model Name") {
-            const { text, url } = parseMarkdownLink(val);
-            if (url) {
-              const a = document.createElement("a");
-              a.href = url;
-              a.target = "_blank";
-              a.rel = "noopener noreferrer";
-              a.textContent = text;
-              td.appendChild(a);
-            } else {
-              td.textContent = text;
-            }
+    headRow.appendChild(th);
+  });
+
+  thead.appendChild(headRow);
+  table.appendChild(thead);
+
+  const tbody = document.createElement("tbody");
+  table.appendChild(tbody);
+  container.appendChild(table);
+
+  /**
+   * 渲染表体，带每列 top1 / top2 信息
+   * topInfo: { [colName]: { max: number|null, second: number|null } }
+   */
+  function renderBody(data, topInfo) {
+    tbody.innerHTML = "";
+    data.forEach((row) => {
+      const tr = document.createElement("tr");
+      cols.forEach((col) => {
+        const td = document.createElement("td");
+        const val = row[col] ?? "";
+
+        if (col === "Model Name") {
+          const { text, url } = parseMarkdownLink(val);
+          if (url) {
+            const a = document.createElement("a");
+            a.href = url;
+            a.target = "_blank";
+            a.rel = "noopener noreferrer";
+            a.textContent = text;
+            td.appendChild(a);
           } else {
-            td.textContent = val;
+            td.textContent = text;
           }
-  
-          tr.appendChild(td);
-        });
-        tbody.appendChild(tr);
-      });
-    }
-  
-    // 当前排序状态
-    let currentSortCol = "WorldScore-Static";
-    let currentAsc = false; // 默认降序
-  
-    // 根据列名和升降序排序，然后渲染
-    function sortAndRender(col, asc) {
-      const sorted = [...rows].sort((a, b) => {
-        const va = a[col] ?? "";
-        const vb = b[col] ?? "";
-  
-        if (isNumericColumn(col)) {
-          const na = parseFloat(va);
-          const nb = parseFloat(vb);
-          if (isNaN(na) && isNaN(nb)) return 0;
-          if (isNaN(na)) return asc ? -1 : 1;
-          if (isNaN(nb)) return asc ? 1 : -1;
-          return asc ? na - nb : nb - na;
         } else {
-          return asc
-            ? String(va).localeCompare(String(vb))
-            : String(vb).localeCompare(String(va));
+          td.textContent = val;
+
+          if (isNumericColumn(col)) {
+            styleScoreCell(td, val);
+
+            const num = parseFloat(val);
+            const info = topInfo[col];
+            if (!isNaN(num) && info) {
+              if (info.max != null && num === info.max) {
+                // 最大值：加粗
+                td.style.fontWeight = "700";
+              } else if (info.second != null && num === info.second) {
+                // 第二大值：下划线
+                td.style.textDecoration = "underline";
+              }
+            }
+          }
         }
+
+        tr.appendChild(td);
       });
-  
-      renderBody(sorted);
-  
-      // 更新箭头 class
-      const headers = Array.from(thead.querySelectorAll("th.sortable"));
-      headers.forEach((h) => {
-        h.classList.remove("asc", "desc");
+      tbody.appendChild(tr);
+    });
+  }
+
+  // 当前排序状态
+  let currentSortCol = "WorldScore-Static";
+  let currentAsc = false; // 默认降序
+
+  function computeTopInfo(data) {
+    const info = {};
+    cols.forEach((col) => {
+      if (!isNumericColumn(col)) return;
+
+      const values = [];
+      data.forEach((row) => {
+        const v = parseFloat(row[col] ?? "");
+        if (!isNaN(v)) values.push(v);
       });
-      const target = headers.find((h) => h.dataset.col === col);
-      if (target) {
-        target.classList.add(asc ? "asc" : "desc");
+
+      if (values.length === 0) {
+        info[col] = { max: null, second: null };
+        return;
       }
-    }
-  
-    // 初始渲染：WorldScore-Static 降序
-    sortAndRender(currentSortCol, currentAsc);
-  
-    // 给所有表头绑定 click 排序
-    const headers = Array.from(thead.querySelectorAll("th.sortable"));
-    headers.forEach((th) => {
-      th.addEventListener("click", () => {
-        const col = th.dataset.col;
-        if (col === currentSortCol) {
-          currentAsc = !currentAsc; // 同一列就翻转方向
-        } else {
-          currentSortCol = col;
-          currentAsc = true; // 新列默认升序
+
+      // 从大到小排序
+      values.sort((a, b) => b - a);
+
+      // 取 unique 前两名
+      const max = values[0];
+      let second = null;
+      for (let i = 1; i < values.length; i++) {
+        if (values[i] !== max) {
+          second = values[i];
+          break;
         }
-        sortAndRender(currentSortCol, currentAsc);
-      });
+      }
+      info[col] = { max, second };
     });
+    return info;
   }
-  
-  // 入口：加载 CSV，默认在 JS 里先按 WorldScore-Static 降序排一次，然后 buildTable
-  fetch("leaderboard.csv")
-    .then((res) => {
-      if (!res.ok) {
-        throw new Error("HTTP " + res.status);
+
+  function sortAndRender(col, asc) {
+    const sorted = [...rows].sort((a, b) => {
+      const va = a[col] ?? "";
+      const vb = b[col] ?? "";
+
+      if (isNumericColumn(col)) {
+        const na = parseFloat(va);
+        const nb = parseFloat(vb);
+        if (isNaN(na) && isNaN(nb)) return 0;
+        if (isNaN(na)) return asc ? -1 : 1;
+        if (isNaN(nb)) return asc ? 1 : -1;
+        return asc ? na - nb : nb - na;
+      } else {
+        return asc
+          ? String(va).localeCompare(String(vb))
+          : String(vb).localeCompare(String(va));
       }
-      return res.text();
-    })
-    .then((text) => {
-      const parsed = parseCsv(text);
-      if (!parsed.rows || parsed.rows.length === 0) {
-        document.getElementById("table-container").innerHTML =
-          "<p>No data rows in leaderboard.csv</p>";
-        return;
+    });
+
+    const topInfo = computeTopInfo(sorted);
+    renderBody(sorted, topInfo);
+
+    // 更新箭头状态
+    const headers = Array.from(thead.querySelectorAll("th.sortable"));
+    headers.forEach((h) => h.classList.remove("asc", "desc"));
+    const target = headers.find((h) => h.dataset.col === col);
+    if (target) {
+      target.classList.add(asc ? "asc" : "desc");
+    }
+  }
+
+  // 初始渲染：WorldScore-Static 降序
+  sortAndRender(currentSortCol, currentAsc);
+
+  // 绑定点击排序
+  const headers = Array.from(thead.querySelectorAll("th.sortable"));
+  headers.forEach((th) => {
+    th.addEventListener("click", () => {
+      const col = th.dataset.col;
+      if (col === currentSortCol) {
+        currentAsc = !currentAsc;
+      } else {
+        currentSortCol = col;
+        currentAsc = true; // 新列默认升序
       }
-  
-      // 这里的 rows 保留原始字符串形式（包括 [Name](url)）
-      const rows = parsed.rows.slice();
-  
-      // 默认排序逻辑放在 buildTable 内部 sortAndRender 已经做了，
-      // 这里不需要再排序一次，直接丢过去
-      buildTable(rows);
-    })
-    .catch((err) => {
-      console.error("Failed to load CSV:", err);
-      document.getElementById("table-container").innerHTML =
-        "<p style='color:#f97316'>Failed to load leaderboard.csv: " + String(err) + "</p>";
+      sortAndRender(currentSortCol, currentAsc);
     });
-  
+  });
+}
+
+// ==== 入口 ====
+fetch("leaderboard.csv")
+  .then((res) => {
+    if (!res.ok) {
+      throw new Error("HTTP " + res.status);
+    }
+    return res.text();
+  })
+  .then((text) => {
+    const parsed = parseCsv(text);
+    if (!parsed.rows || parsed.rows.length === 0) {
+      document.getElementById("table-container").innerHTML =
+        "<p>No data rows in leaderboard.csv</p>";
+      return;
+    }
+    const rows = parsed.rows.slice();
+    buildTable(rows);
+  })
+  .catch((err) => {
+    console.error("Failed to load CSV:", err);
+    document.getElementById("table-container").innerHTML =
+      "<p style='color:#f97316'>Failed to load leaderboard.csv: " + String(err) + "</p>";
+  });