step 8.3: done

2026-10-21 08:16:07 +11:00
parent b8fef0629b
commit 11f7829946
6 changed files with 472 additions and 19 deletions
@@ -0,0 +1,119 @@
+// Profile page: public hero profile lookup via ?name= query param.
+
+const ITEM_EMOJI = { weapon: '⚔️', armor: '🛡️', trinket: '💍', consumable: '🧪', material: '📦' };
+
+// ─── API helper (no auth needed) ──────────────────────────────────────────
+
+async function apiGet(path) {
+  const res = await fetch(path);
+  return res.json();
+}
+
+// ─── Display helpers ──────────────────────────────────────────────────────
+
+function formatKd(kills, deaths) {
+  if (deaths === 0) return kills > 0 ? `${kills}.00` : '—';
+  return (kills / deaths).toFixed(2);
+}
+
+// ─── Render: profile ─────────────────────────────────────────────────────
+
+function renderProfile(data) {
+  document.getElementById('profile-loading').style.display = 'none';
+  document.getElementById('profile-content').style.display = '';
+
+  document.getElementById('profile-name').textContent = data.name;
+
+  const classEl = document.getElementById('profile-class');
+  classEl.textContent = data.class;
+  classEl.className = `profile-class-badge rarity-${data.class}`;
+
+  document.getElementById('profile-level').textContent = `Lv.${data.level}`;
+  document.getElementById('profile-gold').textContent = `💰 ${data.gold.toLocaleString()}`;
+  document.getElementById('profile-kills').textContent = data.kills;
+  document.getElementById('profile-deaths').textContent = data.deaths;
+  document.getElementById('profile-kd').textContent = formatKd(data.kills, data.deaths);
+
+  // Stats
+  const statsList = document.getElementById('profile-stats-list');
+  statsList.innerHTML = '';
+  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>
+    `;
+    statsList.appendChild(row);
+  }
+
+  // Equipment
+  const equipList = document.getElementById('profile-equipment-list');
+  equipList.innerHTML = '';
+  for (const slot of ['weapon', 'armor', 'trinket']) {
+    const slotEl = document.createElement('div');
+    slotEl.className = 'profile-equip-slot';
+
+    const label = document.createElement('span');
+    label.className = 'profile-slot-label';
+    label.textContent = slot;
+    slotEl.appendChild(label);
+
+    const item = data.equipment[slot];
+    if (item) {
+      const value = document.createElement('span');
+      value.className = `profile-slot-item rarity-${getRarityForSlot(slot, data)}`;
+      value.textContent = `${ITEM_EMOJI[slot] || ''} ${item}`;
+      slotEl.appendChild(value);
+    } else {
+      const empty = document.createElement('span');
+      empty.className = 'profile-slot-empty';
+      empty.textContent = 'Empty';
+      slotEl.appendChild(empty);
+    }
+
+    equipList.appendChild(slotEl);
+  }
+}
+
+function getRarityForSlot(slot, data) {
+  // Fallback: use class name for colour when item name is present but we don't have rarity info.
+  return data.class || 'common';
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────────
+
+async function init() {
+  const params = new URLSearchParams(window.location.search);
+  const name = params.get('name');
+
+  if (!name) {
+    document.getElementById('profile-loading').style.display = 'none';
+    document.getElementById('profile-error').style.display = '';
+    document.getElementById('profile-error').textContent = 'No hero name provided. Use ?name=HeroName.';
+    return;
+  }
+
+  try {
+    const data = await apiGet(`/api/heroes/${encodeURIComponent(name)}`);
+    if (!data) {
+      throw new Error('Empty response');
+    }
+    if (!data.ok) {
+      if (data.error?.code === 'NOT_FOUND') {
+        document.getElementById('profile-loading').style.display = 'none';
+        document.getElementById('profile-notfound').style.display = '';
+      } else {
+        throw new Error(data.error?.message || 'Failed to load profile.');
+      }
+      return;
+    }
+    renderProfile(data.data);
+  } catch (err) {
+    document.getElementById('profile-loading').style.display = 'none';
+    document.getElementById('profile-error').style.display = '';
+    document.getElementById('profile-error').textContent = err.message || 'Failed to load profile.';
+  }
+}
+
+document.addEventListener('DOMContentLoaded', init);