@axiapps/forge-render 0.1.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@axiapps/forge-render",
+  "version": "0.1.0",
+  "description": "Framework-free AxiForge build/comp card renderers + scoped CSS, shared with AxiVale and AxiBridge",
+  "type": "module",
+  "main": "src/index.js",
+  "files": ["src"],
+  "publishConfig": { "access": "public" },
+  "exports": {
+    ".": "./src/index.js",
+    "./forge-render.css": "./src/forge-render.css"
+  },
+  "scripts": {
+    "test": "cd ../.. && npx jest tests/forge-render --maxWorkers=2"
+  },
+  "license": "MIT",
+  "keywords": [
+    "gw2",
+    "guild-wars-2",
+    "build-card",
+    "axiforge",
+    "axivale"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/darkharasho/axiforge",
+    "directory": "packages/forge-render"
+  },
+  "dependencies": {
+    "@axiapps/gw2-data": "^0.1.2",
+    "gw2-class-icons": "^0.3.0"
+  }
+}

package/src/build-helpers.js

@@ -0,0 +1,81 @@
+// Shared build display helpers — extracted from comp-detail.js for reuse.
+
+import { getProfessionSvg, getProfessionSvgColored } from "./profession-icons.js";
+
+export function getEliteSpecName(build) {
+  if (!build.specializations) return null;
+  for (const s of build.specializations) {
+    if (s.elite && s.name) return s.name;
+  }
+  return null;
+}
+
+export function getSpecIcon(build) {
+  const eliteSpec = getEliteSpecName(build);
+  const name = eliteSpec || build.profession;
+  if (!name) return "";
+  return getProfessionSvg(name) || "";
+}
+
+export function getSpecIconColored(build, color) {
+  const eliteSpec = getEliteSpecName(build);
+  const name = eliteSpec || build.profession;
+  if (!name) return "";
+  return getProfessionSvgColored(name, color) || "";
+}
+
+export function profClass(profession) {
+  const slug = String(profession || "")
+    .toLowerCase()
+    .replace(/[^a-z-]/g, "");
+  if (!slug) return "";
+  return `lib-prof--${slug}`;
+}
+
+export function getDisplayName(build) {
+  const elite = getEliteSpecName(build);
+  return build.title || elite || build.profession || "Untitled";
+}
+
+export function resolveStatPackage(build) {
+  const pkg = build.equipment?.statPackage || "";
+  if (pkg && !/^\d+$/.test(pkg)) return pkg;
+
+  const slots = build.equipment?.slots;
+  if (slots && typeof slots === "object") {
+    const counts = {};
+    for (const v of Object.values(slots)) {
+      if (v && typeof v === "string") counts[v] = (counts[v] || 0) + 1;
+    }
+    let best = "";
+    let bestCount = 0;
+    for (const [label, count] of Object.entries(counts)) {
+      if (count > bestCount) { best = label; bestCount = count; }
+    }
+    if (best) return best;
+  }
+
+  return "";
+}
+
+export function getRuneName(build, upgradeCatalog) {
+  const runes = build.equipment?.runes;
+  if (!runes || typeof runes !== "object") return "";
+  const counts = {};
+  for (const v of Object.values(runes)) {
+    if (v) counts[String(v)] = (counts[String(v)] || 0) + 1;
+  }
+  let bestId = "";
+  let bestCount = 0;
+  for (const [id, count] of Object.entries(counts)) {
+    if (count > bestCount) { bestId = id; bestCount = count; }
+  }
+  if (!bestId) return "";
+
+  const runeDef = upgradeCatalog?.runeById?.get(Number(bestId));
+  if (runeDef?.name) {
+    return runeDef.name.replace(/^(?:Superior|Major|Minor) Rune of (?:the )?/i, "");
+  }
+
+  return /^\d+$/.test(bestId) ? "" : bestId;
+}

package/src/comp-card.js

@@ -0,0 +1,63 @@
+// Comp card — party lines + mini build cards for a squad composition.
+// comp: AxiForge comp record ({ title, partyLines, buildColors, tags }).
+// buildsById: plain object of build records keyed by id.
+// catalog: upgradeCatalog with runeById/relicByName Maps, or null.
+import { escapeHtml } from "./escape.js";
+import { profClass, getDisplayName, getSpecIcon, getSpecIconColored } from "./build-helpers.js";
+import { renderMiniBuildCard, renderMissingMiniBuildCard } from "./mini-build-card.js";
+
+function renderSlot(build, color) {
+  if (!build) return `<div class="comp-slot comp-slot--empty"></div>`;
+  const icon = color && color !== "normal" ? getSpecIconColored(build, color) : getSpecIcon(build);
+  const colorAttr = color && color !== "normal" ? ` data-slot-color="${color}"` : "";
+  return `
+    <div class="comp-slot comp-slot--filled ${profClass(build.profession)}"${colorAttr}
+         title="${escapeHtml(getDisplayName(build))}">
+      <span class="comp-slot__icon">${icon || escapeHtml((build.profession || "?")[0])}</span>
+    </div>`;
+}
+
+function renderPartyLines(comp, buildsById) {
+  const colors = comp.buildColors || {};
+  return (comp.partyLines || []).map((line, idx) => {
+    const slots = line.slots || [];
+    const capacity = line.capacity || 5;
+    const boxes = slots.map((id) => renderSlot(buildsById[id], colors[id] || "normal"));
+    for (let i = slots.length; i < capacity; i++) {
+      boxes.push(`<div class="comp-slot comp-slot--empty"></div>`);
+    }
+    return `
+      <div class="comp-line">
+        <span class="comp-line__label">P${idx + 1}</span>
+        <div class="comp-line__slots">${boxes.join("")}</div>
+        <span class="comp-line__count">${slots.length} / ${capacity}</span>
+      </div>`;
+  }).join("");
+}
+
+export function renderCompCard(comp, buildsById = {}, catalog = null) {
+  const colors = comp.buildColors || {};
+  const referenced = [...new Set((comp.partyLines || []).flatMap((l) => l.slots || []))];
+  const pool = referenced
+    .map((id) =>
+      buildsById[id]
+        ? renderMiniBuildCard(buildsById[id], catalog, {
+            showActions: false,
+            slotColor: colors[id] || null,
+          })
+        : renderMissingMiniBuildCard(id)
+    )
+    .join("");
+  const tags = (comp.tags || [])
+    .map((t) => `<span class="comp-card__tag">${escapeHtml(t)}</span>`)
+    .join("");
+  return `
+    <div class="comp-card">
+      <div class="comp-card__head">
+        <span class="comp-card__name">${escapeHtml(comp.title || "Untitled comp")}</span>
+        ${tags}
+      </div>
+      <div class="comp-card__lines">${renderPartyLines(comp, buildsById)}</div>
+      <div class="comp-card__pool">${pool}</div>
+    </div>`;
+}

package/src/escape.js

@@ -0,0 +1,10 @@
+// HTML escaping for string-template renderers. DOM-free so the package
+// works in Node tests and any bundler.
+export function escapeHtml(s) {
+  return String(s ?? "")
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}