Update image preloading to handle external links

html/js/invScript.js

@@ -1,12 +1,46 @@
 let imageCache = {};
 
+const HUD_POS_KEY = "vorp_inventory_hud_pos";
+
+function saveHudPos() {
+    const hud = document.getElementById("inventoryHud");
+    if (!hud) return;
+
+    const pos = {
+        left: hud.style.left || "",
+        top: hud.style.top || ""
+    };
+
+    localStorage.setItem(HUD_POS_KEY, JSON.stringify(pos));
+}
+
+function applyHudPos() {
+    const hud = document.getElementById("inventoryHud");
+    if (!hud) return;
+
+    const raw = localStorage.getItem(HUD_POS_KEY);
+    if (!raw) return;
+
+    try {
+        const pos = JSON.parse(raw);
+        if (pos.left) hud.style.left = pos.left;
+        if (pos.top) hud.style.top = pos.top;
+    } catch (e) {
+        console.warn("Invalid HUD pos in storage:", e);
+    }
+}
+
 /**
  * Preload images
  * @param {Array} images - The array of images to preload so we can choose to display placeholder or not
  */
 function preloadImages(images) {
 
     $.each(images, function (_, image) {
+        if (typeof image === "string" && (image.startsWith("http://") || image.startsWith("https://"))) {
+            imageCache[image] = `url("${image}");`;
+            return;
+        }
         const img = new Image();
         img.onload = () => {
             imageCache[image] = `url("img/items/${image}.png");`;
@@ -16,17 +50,16 @@ function preloadImages(images) {
         };
         img.src = `img/items/${image}.png`;
     });
-
 }
 
-/* DROP DOWN BUTTONS MAIN AND SECONDARY INVENTORY */
 document.addEventListener('DOMContentLoaded', () => {
+    applyHudPos();
+
     document.querySelectorAll('.dropdownButton[data-type="clothing"], .dropdownButton1[data-type="clothing"]').forEach(button => {
         button.classList.add('active');
     });
 });
 
-
 function bindButtonEventListeners() {
     document.querySelectorAll('.dropdownButton[data-type="itemtype"]').forEach(button => {
         button.addEventListener('mouseenter', function () {
@@ -277,16 +310,18 @@ $(document).ready(function () {
 });
 
 function moveInventory(inv) {
+    if (localStorage.getItem(HUD_POS_KEY)) return;
+
     const inventoryHud = document.getElementById('inventoryHud');
+    if (!inventoryHud) return;
+
     if (inv === 'main') {
         inventoryHud.style.left = '25%';
     } else if (inv === 'second') {
         inventoryHud.style.left = '1%';
     }
 }
 
-
-
 function addData(index, item) {
 
     $("#item-" + index).data("item", item);
@@ -457,8 +492,8 @@ function getDegradationMain(item) {
     const degradationPercentage = getItemDegradationPercentage(item);
     const color = getColorForDegradation(degradationPercentage);
 
-    return `<br>${LANGUAGE.labels.decay}<span style="color: ${color}">${degradationPercentage.toFixed(0)}%</span>`;
-
+    const decayLabel = (LANGUAGE?.labels?.decay) ?? "Verfall ";
+    return `<br>${decayLabel}<span style="color: ${color}">${degradationPercentage.toFixed(0)}%</span>`;
 }
 
 /**
@@ -497,17 +532,23 @@ function loadInventoryItems(item, index, group, count, limit) {
 function loadInventoryWeapons(item, index, group) {
     if (item.type != "item_weapon") return;
 
-    const weight = getItemWeight(item.weight, 1);
-    const info = item.serial_number ? "<br>" + (LANGUAGE.labels?.ammo ?? "Ammo") + item.count + "<br>" + (LANGUAGE.labels?.serial ?? "Serial") + item.serial_number : "";
-    const url = imageCache[item.name]
+    // NEU: Wir entfernen das störende "<br>" am Anfang mit .replace()
+    let weight = getItemWeight(item.weight, 1).replace('<br>', '');
+
+    const info = item.serial_number ? "<br>" + (LANGUAGE.labels?.ammo ?? "Ammo") + " " + item.count + "<br>" + (LANGUAGE.labels?.serial ?? "Serial") + " " + item.serial_number : "";
+    const url = imageCache[item.name];
     const label = item.custom_label ? item.custom_label : item.label;
 
-    $("#inventoryElement").append(`<div data-label='${label}' data-group='${group}' style='background-image: ${url} background-size: 4.5vw 7.7vh; background-repeat: no-repeat; background-position: center;' id='item-${index}' class='item' data-tooltip="${weight + info}">
+    const groupKey = getGroupKey(group);
+    const groupImg = groupKey ? window.Actions[groupKey].img : 'satchel_nav_all.png';
+
+    const tooltipWithIcon = `<img src="img/itemtypes/${groupImg}"> ${weight}${info}`;
+
+    $("#inventoryElement").append(`<div data-label='${label}' data-group='${group}' style='background-image: ${url} background-size: 4.5vw 7.7vh; background-repeat: no-repeat; background-position: center;' id='item-${index}' class='item' data-tooltip='${tooltipWithIcon}'>
         <div class='equipped-icon' style='display: ${!item.used && !item.used2 ? "none" : "block"};'></div>
     </div> `);
 }
 
-
 /**
  * Load fixed items in the main inventory
  * @param {string} label - The label of the item

html/js/utils.js

@@ -85,8 +85,7 @@ function cacheImage(item) {
 
 /**
  * replaces default data with custom data
- * 
- * reserved key words for metdata: weight, label, image, tooltip, degradation ,description
+ * * reserved key words for metdata: weight, label, image, tooltip, degradation ,description
  * @param {object} item
  * @returns {{ tooltipData: string, degradation: string, image: string, label: string, weight: number, description: string}}
  */
@@ -121,8 +120,7 @@ function getItemMetadataInfo(item, isCustom) {
  * @param {object} item 
  * @param {number} count
  * @returns {string}
- * 
- */
+ * */
 function getItemWeight(weight, count) {
     return weight != null ? `<br>${LANGUAGE.labels?.weight} ${(weight * count).toFixed(2)} ${Config.WeightMeasure}` : `<br>${LANGUAGE.labels?.weight} ${(count / 4).toFixed(2)} ${Config.WeightMeasure}`;
 }
@@ -141,12 +139,20 @@ function getItemWeight(weight, count) {
 function getItemTooltipContent(image, groupKey, group, limit, weight, degradation, tooltipData) {
     const groupImg = groupKey ? window.Actions[groupKey].img : 'satchel_nav_all.png';
     const limitLabel = limit ? (LANGUAGE.labels?.limit || "Kg") + limit : "";
-    const tooltipContent = group > 1 ? `<img src="img/itemtypes/${groupImg}"> ${limitLabel + weight + degradation + tooltipData}` : `${limitLabel}${weight}${degradation}${tooltipData}`;
-    const url = imageCache[image]
+    const tooltipContent = `<img src="img/itemtypes/${groupImg}"> ${limitLabel}${weight}${degradation}${tooltipData}`;
+
+    let url;
+    if (typeof image === "string" && (image.startsWith("http://") || image.startsWith("https://"))) {
+        url = `url("${image}");`;
+    } else {
+        url = imageCache[image];
+        if (!url || url === "undefined") {
+            url = `url("img/items/${image}.png");`;
+        }
+    }
     return { tooltipContent, url };
 }
 
-
 function initiateSecondaryInventory(title, capacity, weight) {
 
     $("#secondInventoryHud").append(
@@ -493,6 +499,7 @@ function giveGetHowManyGold() {
 }
 
 function closeInventory() {
+    if (typeof saveHudPos === "function") saveHudPos();  
     $('.tooltip').remove();
     $.post(`https://${GetParentResourceName()}/NUIFocusOff`, JSON.stringify({}));
     isOpen = false;