step 9.1: done

public/js/game.js

@@ -639,38 +639,69 @@ async function loadExpeditions() {
 
 function renderActiveExpedition(statusEl, defsEl, expeditionData) {
   defsEl.innerHTML = '';
+  statusEl.innerHTML = '';
 
   const { expedition, definition, timeRemaining, isFinished } = expeditionData;
   const elapsed = (definition.durationSec * 1000) - timeRemaining;
   const pct = Math.min(100, Math.max(0, (elapsed / (definition.durationSec * 1000)) * 100));
 
-  let html = `<div class="expedition-active-card">`;
-  html += `<div class="expedition-name">${definition.name}</div>`;
-  html += `<div class="expedition-desc">${definition.description}</div>`;
+  // Card wrapper
+  const card = document.createElement('div');
+  card.className = 'expedition-active-card';
+
+  // Name
+  const nameEl = document.createElement('div');
+  nameEl.className = 'expedition-name';
+  nameEl.textContent = definition.name;
+  card.appendChild(nameEl);
+
+  // Description
+  const descEl = document.createElement('div');
+  descEl.className = 'expedition-desc';
+  descEl.textContent = definition.description;
+  card.appendChild(descEl);
 
   // Progress bar
-  html += `<div class="expedition-progress">`;
-  html += `<div class="expedition-progress-bar">`;
-  html += `<div class="expedition-progress-fill" style="width:${pct}%"></div>`;
-  html += `</div>`;
-  html += `<div class="expedition-progress-text">${formatTimeRemaining(timeRemaining)}</div>`;
-  html += `</div>`;
+  const progressEl = document.createElement('div');
+  progressEl.className = 'expedition-progress';
+
+  const barEl = document.createElement('div');
+  barEl.className = 'expedition-progress-bar';
+
+  const fillEl = document.createElement('div');
+  fillEl.className = 'expedition-progress-fill';
+  fillEl.style.width = `${pct}%`;
+
+  barEl.appendChild(fillEl);
+
+  const textEl = document.createElement('div');
+  textEl.className = 'expedition-progress-text';
+  textEl.textContent = formatTimeRemaining(timeRemaining);
+
+  progressEl.appendChild(barEl);
+  progressEl.appendChild(textEl);
+  card.appendChild(progressEl);
 
   if (isFinished) {
-    html += `<button class="btn btn-expedition btn-claim" data-expedition-id="${expedition.id}">Claim Rewards</button>`;
-    html += `<div class="expedition-rewards-preview">Rewards: ${definition.xpReward} XP, ${definition.goldMin}–${definition.goldMax} Gold</div>`;
-  } else {
-    html += `<div class="expedition-info">Duration: ${formatDuration(definition.durationSec)} · Cost: ${definition.energyCost}⚡</div>`;
-  }
-
-  html += `</div>`;
-  statusEl.innerHTML = html;
-
-  // Attach claim handler
-  const claimBtn = statusEl.querySelector('.btn-claim');
-  if (claimBtn) {
+    const claimBtn = document.createElement('button');
+    claimBtn.className = 'btn btn-expedition btn-claim';
+    claimBtn.dataset.expeditionId = expedition.id;
+    claimBtn.textContent = 'Claim Rewards';
     claimBtn.addEventListener('click', handleClaimExpedition);
+    card.appendChild(claimBtn);
+
+    const rewardsEl = document.createElement('div');
+    rewardsEl.className = 'expedition-rewards-preview';
+    rewardsEl.textContent = `Rewards: ${definition.xpReward} XP, ${definition.goldMin}–${definition.goldMax} Gold`;
+    card.appendChild(rewardsEl);
+  } else {
+    const infoEl = document.createElement('div');
+    infoEl.className = 'expedition-info';
+    infoEl.textContent = `Duration: ${formatDuration(definition.durationSec)} · Cost: ${definition.energyCost}⚡`;
+    card.appendChild(infoEl);
   }
+
+  statusEl.appendChild(card);
 }
 
 function renderExpeditionDefs(container) {

public/js/profile.js

@@ -40,10 +40,17 @@ function renderProfile(data) {
   for (const stat of ['str', 'agi', 'int', 'vit']) {
     const row = document.createElement('div');
     row.className = 'profile-stat-row';
-    row.innerHTML = `
-      <span class="profile-stat-label">${stat}</span>
-      <span class="profile-stat-value">${data[stat]}</span>
-    `;
+
+    const label = document.createElement('span');
+    label.className = 'profile-stat-label';
+    label.textContent = stat;
+
+    const value = document.createElement('span');
+    value.className = 'profile-stat-value';
+    value.textContent = data[stat];
+
+    row.appendChild(label);
+    row.appendChild(value);
     statsList.appendChild(row);
   }