Function renderMessages

codeclash/viewer/static/js/trajectory.js:78–117

(
  foldout,
  messages,
  playerName,
  roundNum,
  trajectoryFilePath,
)

}

function renderMessages(
  foldout,
  messages,
  playerName,
  roundNum,
  trajectoryFilePath,
) {
  const messagesContainer = foldout.querySelector(".messages-container");
  const headerInfo = foldout.querySelector(".trajectory-header-info");

  // Clear existing content
  messagesContainer.innerHTML = "";

  // Add header info with file path and buttons
  if (trajectoryFilePath) {
    headerInfo.innerHTML = `
      <div style="display: flex; gap: 0.5rem; align-items: center;">
        <span style="color: var(--muted-text);">${messages.length} messages</span>
        <button class="copy-path-btn-small" data-path="${trajectoryFilePath}" title="Copy trajectory file path">
          <i class="bi bi-clipboard"></i> Copy path
        </button>
        <button class="download-btn-small" data-path="${trajectoryFilePath}" title="Download trajectory file">
          <i class="bi bi-download"></i> Download
        </button>
      </div>
    `;

    // Re-setup copy and download buttons for these new buttons
    setupCopyButtons();
    setupDownloadButtons();
  } else {
    headerInfo.innerHTML = `<span style="color: var(--muted-text);">${messages.length} messages</span>`;
  }

  // Render each message
  messages.forEach((message, index) => {
    const messageBlock = createMessageElement(message, index + 1);
    messagesContainer.appendChild(messageBlock);
  });
}

function createMessageElement(message, index) {
  const messageBlock = document.createElement("div");