@adatechnology/game-test-room 0.5.0 → 0.6.0

package/dist/index.js

@@ -3158,6 +3158,10 @@ var CSS = `
 .tr-search{width:100%;margin:0 0 6px;padding:5px 8px;border-radius:5px;border:1px solid #3a404c;background:#0f1116;color:#e8eaee;font:inherit}
 .tr-search::placeholder{color:#7d8594}
 .tr-item small{color:#7d8594;margin-left:4px}
+.tr-thumb{display:block;width:100%;height:26px;background:currentColor;-webkit-mask:var(--tr-thumb) center/contain no-repeat;mask:var(--tr-thumb) center/contain no-repeat}
+.tr-item{min-width:0}
+.tr-item .tr-btn.has-thumb{display:flex;flex-direction:column;gap:3px;min-width:0}.tr-item .tr-btn.has-thumb .tr-name{overflow:hidden;text-overflow:ellipsis}
+.tr-insp .tr-thumb{width:140px;height:28px;margin-bottom:3px}
 .tr-empty{color:#9aa3b2;padding:4px 2px;grid-column:1/-1}
 .tr-cross{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px}
 .tr-cross:before,.tr-cross:after{content:"";position:absolute;background:#fff;opacity:.85;box-shadow:0 0 2px #000}
@@ -3223,6 +3227,17 @@ var mk2 = (tag, cls, text) => {
   if (text !== void 0) e.textContent = text;
   return e;
 };
+var thumbSource = (thumbnail) => {
+  const source = thumbnail.trim().startsWith("<") ? `data:image/svg+xml,${encodeURIComponent(thumbnail.trim())}` : thumbnail.trim();
+  return source.replace(/["\\\n\r]/g, (char) => encodeURIComponent(char));
+};
+var thumb = (thumbnail, credit) => {
+  const e = mk2("span", "tr-thumb");
+  if (credit) e.title = credit;
+  else e.setAttribute("aria-hidden", "true");
+  e.style.setProperty("--tr-thumb", `url("${thumbSource(thumbnail)}")`);
+  return e;
+};
 function createUi(o) {
   const { t } = o;
   const style = mk2("style");
@@ -3376,7 +3391,8 @@ function createUi(o) {
     if (!found.length) items.appendChild(mk2("div", "tr-empty", t("ui.no_results")));
     for (const { item: it, group } of found) {
       const wrap = mk2("div", "tr-item");
-      const b = mk2("button", "tr-btn", it.name);
+      const b = mk2("button", it.thumbnail ? "tr-btn has-thumb" : "tr-btn", it.thumbnail ? void 0 : it.name);
+      if (it.thumbnail) b.append(thumb(it.thumbnail), mk2("span", "tr-name", it.name));
       if (searching) b.appendChild(mk2("small", void 0, group));
       b.type = "button";
       b.title = it.note ?? it.name;
@@ -3535,6 +3551,7 @@ function createUi(o) {
       insp.appendChild(mk2("div", void 0, t("ui.aim_at_something")));
       return;
     }
+    if (i.thumbnail) insp.appendChild(thumb(i.thumbnail, i.thumbnailCredit));
     insp.appendChild(mk2("div", "t", `${i.object} \u203A ${i.part}`));
     insp.appendChild(row(t("ins.material"), i.material));
     insp.appendChild(row(t("ins.status"), i.status + (i.burning ? ` \xB7 ${t("ins.burning")}` : "")));
@@ -4906,6 +4923,8 @@ function createTestRoom(options) {
       stress: ext.stress,
       joints,
       note: e?.item?.note,
+      thumbnail: e?.item?.thumbnail,
+      thumbnailCredit: e?.item?.thumbnailCredit,
       distance: r.distance
     };
   };
@@ -5305,7 +5324,9 @@ function createTestRoom(options) {
         fluid: ti.fluid,
         weapon: ti.weapon,
         impl: ti.impl,
-        animations: ti.animations
+        animations: ti.animations,
+        thumbnail: ti.thumbnail,
+        thumbnailCredit: ti.thumbnailCredit
       };
       catalogMap.set(item.id, item);
       const at = catalog.findIndex((c) => c.id === item.id);