@adatechnology/game-test-room 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -62,6 +62,10 @@ interface InspectInfo {
         progress: number;
     }>;
     note?: string;
+    /** Thumbnail of the aimed item (`TestRoomItem.thumbnail`). */
+    thumbnail?: string;
+    /** Author and licence of the thumbnail (`TestRoomItem.thumbnailCredit`). */
+    thumbnailCredit?: string;
     distance: number;
 }
 interface HudState {
@@ -145,6 +149,10 @@ interface TestRoomItem {
     impl?: (root: THREE_NS.Object3D, id: string) => DestructibleImpl;
     /** Use animations the item brings (see `TestRoom.playAnimation`). Part poses move the child of the built object named after the part id. */
     animations?: AnimationClipSpec[];
+    /** Picture for the catalogue, the search results and the aimed-item label: an image URL or inline `<svg…>` markup (see `TestableItem.thumbnail`). */
+    thumbnail?: string;
+    /** Author and licence of the thumbnail, shown as the tooltip of the picture in the inspector. */
+    thumbnailCredit?: string;
 }
 interface TestRoomOptions {
     THREE: ThreeNamespace;

package/dist/index.global.js

@@ -25576,6 +25576,10 @@ void main() {
 .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}
@@ -25641,6 +25645,17 @@ void main() {
     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");
@@ -25794,7 +25809,8 @@ void main() {
       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;
@@ -25953,6 +25969,7 @@ void main() {
         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")}` : "")));
@@ -27324,6 +27341,8 @@ void main() {
         stress: ext.stress,
         joints,
         note: e?.item?.note,
+        thumbnail: e?.item?.thumbnail,
+        thumbnailCredit: e?.item?.thumbnailCredit,
         distance: r.distance
       };
     };
@@ -27723,7 +27742,9 @@ void main() {
           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);