From 286af6204d89cd2ce9f641e1f3f692f3020d56fd Mon Sep 17 00:00:00 2001 From: Hobbs <101003021+DerHobbs@users.noreply.github.com> Date: Sat, 7 Mar 2026 22:30:36 +0100 Subject: [PATCH 1/4] Update image preloading to handle external links --- html/js/invScript.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/html/js/invScript.js b/html/js/invScript.js index 85f3f4e2..4ce14e64 100644 --- a/html/js/invScript.js +++ b/html/js/invScript.js @@ -5,18 +5,21 @@ let imageCache = {}; * @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) { const img = new Image(); + + let isExternalLink = image.startsWith("http://") || image.startsWith("https://"); + + let srcPath = isExternalLink ? image : `img/items/${image}.png`; + img.onload = () => { - imageCache[image] = `url("img/items/${image}.png");`; + imageCache[image] = `url("${srcPath}");`; }; img.onerror = () => { imageCache[image] = `url("img/items/placeholder.png");`; }; - img.src = `img/items/${image}.png`; + img.src = srcPath; }); - } /* DROP DOWN BUTTONS MAIN AND SECONDARY INVENTORY */ From 424e725e0cebe3074a130701220ff1c84c175373 Mon Sep 17 00:00:00 2001 From: Hobbs <101003021+DerHobbs@users.noreply.github.com> Date: Sun, 8 Mar 2026 07:55:59 +0100 Subject: [PATCH 2/4] Implement HUD position saving and loading Added functions to save and apply HUD position using localStorage. Updated image preloading and modified inventory item loading logic. --- html/js/invScript.js | 89 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 71 insertions(+), 18 deletions(-) diff --git a/html/js/invScript.js b/html/js/invScript.js index 4ce14e64..7727940f 100644 --- a/html/js/invScript.js +++ b/html/js/invScript.js @@ -1,34 +1,76 @@ let imageCache = {}; +// Custom Start +// --- HUD Position speichern/laden --- +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); + } +} +// Custom End + /** * 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(); - - let isExternalLink = image.startsWith("http://") || image.startsWith("https://"); - - let srcPath = isExternalLink ? image : `img/items/${image}.png`; - img.onload = () => { - imageCache[image] = `url("${srcPath}");`; + imageCache[image] = `url("img/items/${image}.png");`; }; img.onerror = () => { imageCache[image] = `url("img/items/placeholder.png");`; }; - img.src = srcPath; + img.src = `img/items/${image}.png`; }); } -/* DROP DOWN BUTTONS MAIN AND SECONDARY INVENTORY */ +/* DROP DOWN BUTTONS MAIN AND SECONDARY INVENTORY document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.dropdownButton[data-type="clothing"], .dropdownButton1[data-type="clothing"]').forEach(button => { button.classList.add('active'); }); -}); +});*/ +// Custom Start +document.addEventListener('DOMContentLoaded', () => { + applyHudPos(); // <- HIER EINFÜGEN + + document.querySelectorAll('.dropdownButton[data-type="clothing"], .dropdownButton1[data-type="clothing"]').forEach(button => { + button.classList.add('active'); + }); +}); +// Custom End function bindButtonEventListeners() { document.querySelectorAll('.dropdownButton[data-type="itemtype"]').forEach(button => { @@ -279,16 +321,21 @@ $(document).ready(function () { }); }); +// Custom Start function moveInventory(inv) { + // Wenn schon eine gespeicherte Position existiert -> NICHT überschreiben + 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%'; } } - - +// Custom End function addData(index, item) { @@ -460,8 +507,8 @@ function getDegradationMain(item) { const degradationPercentage = getItemDegradationPercentage(item); const color = getColorForDegradation(degradationPercentage); - return `
${LANGUAGE.labels.decay}${degradationPercentage.toFixed(0)}%`; - + const decayLabel = (LANGUAGE?.labels?.decay) ?? "Verfall "; + return `
${decayLabel}${degradationPercentage.toFixed(0)}%`; } /** @@ -500,17 +547,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 ? "
" + (LANGUAGE.labels?.ammo ?? "Ammo") + item.count + "
" + (LANGUAGE.labels?.serial ?? "Serial") + item.serial_number : ""; - const url = imageCache[item.name] + // NEU: Wir entfernen das störende "
" am Anfang mit .replace() + let weight = getItemWeight(item.weight, 1).replace('
', ''); + + const info = item.serial_number ? "
" + (LANGUAGE.labels?.ammo ?? "Ammo") + " " + item.count + "
" + (LANGUAGE.labels?.serial ?? "Serial") + " " + item.serial_number : ""; + const url = imageCache[item.name]; const label = item.custom_label ? item.custom_label : item.label; - $("#inventoryElement").append(`
+ const groupKey = getGroupKey(group); + const groupImg = groupKey ? window.Actions[groupKey].img : 'satchel_nav_all.png'; + + const tooltipWithIcon = ` ${weight}${info}`; + + $("#inventoryElement").append(`
`); } - /** * Load fixed items in the main inventory * @param {string} label - The label of the item From 56fb5a992434ad522b17af259825654dc7093547 Mon Sep 17 00:00:00 2001 From: Hobbs <101003021+DerHobbs@users.noreply.github.com> Date: Sun, 8 Mar 2026 07:56:49 +0100 Subject: [PATCH 3/4] Refactor tooltip content and update metadata comments Refactor tooltip content generation and improve metadata documentation. --- html/js/utils.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/html/js/utils.js b/html/js/utils.js index 25a22512..9a990dc4 100644 --- a/html/js/utils.js +++ b/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 ? `
${LANGUAGE.labels?.weight} ${(weight * count).toFixed(2)} ${Config.WeightMeasure}` : `
${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 ? ` ${limitLabel + weight + degradation + tooltipData}` : `${limitLabel}${weight}${degradation}${tooltipData}`; - const url = imageCache[image] + const tooltipContent = ` ${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; From fbbbd1e9ef8c80fe97ee9d92dc7d021ad317c16d Mon Sep 17 00:00:00 2001 From: Hobbs <101003021+DerHobbs@users.noreply.github.com> Date: Sun, 8 Mar 2026 07:59:22 +0100 Subject: [PATCH 4/4] Refactor HUD position handling and clean up code Removed custom comments and reorganized HUD position application. --- html/js/invScript.js | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/html/js/invScript.js b/html/js/invScript.js index 7727940f..38f3e25c 100644 --- a/html/js/invScript.js +++ b/html/js/invScript.js @@ -1,7 +1,5 @@ let imageCache = {}; -// Custom Start -// --- HUD Position speichern/laden --- const HUD_POS_KEY = "vorp_inventory_hud_pos"; function saveHudPos() { @@ -31,7 +29,6 @@ function applyHudPos() { console.warn("Invalid HUD pos in storage:", e); } } -// Custom End /** * Preload images @@ -55,22 +52,13 @@ function preloadImages(images) { }); } -/* DROP DOWN BUTTONS MAIN AND SECONDARY INVENTORY document.addEventListener('DOMContentLoaded', () => { - document.querySelectorAll('.dropdownButton[data-type="clothing"], .dropdownButton1[data-type="clothing"]').forEach(button => { - button.classList.add('active'); - }); -});*/ - -// Custom Start -document.addEventListener('DOMContentLoaded', () => { - applyHudPos(); // <- HIER EINFÜGEN + applyHudPos(); document.querySelectorAll('.dropdownButton[data-type="clothing"], .dropdownButton1[data-type="clothing"]').forEach(button => { button.classList.add('active'); }); }); -// Custom End function bindButtonEventListeners() { document.querySelectorAll('.dropdownButton[data-type="itemtype"]').forEach(button => { @@ -321,9 +309,7 @@ $(document).ready(function () { }); }); -// Custom Start function moveInventory(inv) { - // Wenn schon eine gespeicherte Position existiert -> NICHT überschreiben if (localStorage.getItem(HUD_POS_KEY)) return; const inventoryHud = document.getElementById('inventoryHud'); @@ -335,7 +321,6 @@ function moveInventory(inv) { inventoryHud.style.left = '1%'; } } -// Custom End function addData(index, item) {