feat: initial inventory rendering draft

Author: FabulousCodingFox

package-lock.json

@@ -25,6 +25,7 @@
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/vite": "^4.1.16",
     "@vitest/browser": "^4.0.7",
+    "clsx": "^2.1.1",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.13.0",

package.json

@@ -49,6 +49,11 @@ extract-precache-hgpak:
     @gum spin --spinner dot --title "Extracting..." -- ./out/hgpaktool ./PCBANKS/NMSARC.Precache.pak -O ./out/EXTRACTED
     @gum style --foreground 10 "✅ NMSARC.Precache.pak extracted."
 
+extract-texui-hgpak:
+    @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "📦 HGPAK TexUI EXTRACTION"
+    @gum spin --spinner dot --title "Extracting..." -- ./out/hgpaktool ./PCBANKS/NMSARC.TexUI.pak -O ./out/EXTRACTED
+    @gum style --foreground 10 "✅ NMSARC.TexUI.pak extracted."
+
 extract-locale: extract-metadata-hgpak
     @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "📜 translations.json"
     @for f in ./out/EXTRACTED/language/*_usenglish.mbin; do \
@@ -57,35 +62,45 @@ extract-locale: extract-metadata-hgpak
     @gum spin --spinner dot --title "Extracting translations" -- python ./src/extract_translations.py
     @gum style --foreground 10 "✅ translations.json ready."
 
-extract-items: extract-precache-hgpak extract-locale
+extract-item-name-mappings: extract-precache-hgpak extract-locale
     @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "📜 item_to_name_mappings.json"
     @gum spin --spinner dot --title "Decoding nms_reality_gcproducttable.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/nms_reality_gcproducttable.mbin" > /dev/null;
     @gum spin --spinner dot --title "Decoding nms_basepartproducts.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/nms_basepartproducts.mbin" > /dev/null;
     @gum spin --spinner dot --title "Extracting item names" -- python ./src/extract_item_names.py
     @gum style --foreground 10 "✅ item_to_name_mappings.json created."
 
+extract-items: extract-precache-hgpak extract-locale extract-texui-hgpak
+    @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "📜 items.json & item images"
+    @gum spin --spinner dot --title "Decoding nms_reality_gcsubstancetable.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/nms_reality_gcsubstancetable.mbin" > /dev/null;
+    @gum spin --spinner dot --title "Decoding nms_reality_gctechnologytable.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/nms_reality_gctechnologytable.mbin" > /dev/null;
+    @gum spin --spinner dot --title "Decoding nms_reality_gcproceduraltechnologytable.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/nms_reality_gcproceduraltechnologytable.mbin" > /dev/null;
+    @gum spin --spinner dot --title "Decoding proceduralproducttable.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/proceduralproducttable.mbin" > /dev/null;
+    @gum spin --spinner dot --title "Extracting items" -- python ./src/extract_items.py
+    @cp ./out/items.json ../src/data/items.json
+    @npx prettier --write ../src/data/items.json --config ../.prettierrc > /dev/null
+    @gum style --foreground 10 "✅ items.json & item images created."
 # ---------------------------------------------------------------------------
 # 🎁  REWARDS
 # ---------------------------------------------------------------------------
 extract-rewards: extract-season-rewards extract-twitch-rewards extract-platform-rewards
 
-extract-season-rewards: extract-items
+extract-season-rewards: extract-item-name-mappings
     @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "🎁 rewards/season.json"
     @gum spin --spinner dot --title "Decoding unlockableseasonrewards.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/unlockableseasonrewards.mbin" > /dev/null
     @gum spin --spinner dot --title "Extracting rewards" -- python ./src/extract_season_rewards.py
     @cp ./out/season_rewards.json ../src/data/rewards/season.json
     @npx prettier --write ../src/data/rewards/season.json --config ../.prettierrc > /dev/null
     @gum style --foreground 10 "✅ rewards/season.json created."
 
-extract-twitch-rewards: extract-items
+extract-twitch-rewards: extract-item-name-mappings
     @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "🎁 rewards/twitch.json"
     @gum spin --spinner dot --title "Decoding unlockabletwitchrewards.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/unlockabletwitchrewards.mbin" > /dev/null
     @gum spin --spinner dot --title "Extracting rewards" -- python ./src/extract_twitch_rewards.py
     @cp ./out/twitch_rewards.json ../src/data/rewards/twitch.json
     @npx prettier --write ../src/data/rewards/twitch.json --config ../.prettierrc > /dev/null
     @gum style --foreground 10 "✅ rewards/twitch.json created."
 
-extract-platform-rewards: extract-items
+extract-platform-rewards: extract-item-name-mappings
     @gum style --border rounded --border-foreground 45 --margin "1 0 0 0" --padding "0 3" --width 80 --align left "🎁 rewards/platform.json"
     @gum spin --spinner dot --title "Decoding unlockableplatformrewards.mbin" -- ./out/mbincompiler -y -d ./out/ "./out/EXTRACTED/metadata/reality/tables/unlockableplatformrewards.mbin" > /dev/null
     @gum spin --spinner dot --title "Extracting rewards" -- python ./src/extract_platform_rewards.py

scripts/Justfile

@@ -15,6 +15,7 @@ pkgs.mkShell {
     pkgs.jq
     pkgs.curl
     pkgs.python313
+    pkgs.python313Packages.pillow
     pkgs.xmlstarlet
   ];
 

scripts/shell.nix

@@ -0,0 +1,88 @@
+import xml.etree.ElementTree as ET
+import json
+import os
+from PIL import Image
+
+xml_paths = [
+    "./out/nms_reality_gcproducttable.MXML",
+    "./out/nms_basepartproducts.MXML",
+    "./out/nms_reality_gcsubstancetable.MXML",
+    "./out/nms_reality_gctechnologytable.MXML",
+    "./out/nms_reality_gcproceduraltechnologytable.MXML",
+    "./out/proceduralproducttable.MXML"
+]
+translations_path = "./out/translations.json"
+output_json = "./out/items.json"
+
+# Load translation strings
+with open(translations_path, "r", encoding="utf-8") as f:
+    translations = json.load(f)
+
+items = {}
+
+def process_xml(xml_path):
+    tree = ET.parse(xml_path)
+    root = tree.getroot()
+
+    products = root.findall(".//Property[@value='GcProductData']")
+    if(len(products) == 0):
+        products = root.findall(".//Property[@value='GcRealitySubstanceData']")
+    if(len(products) == 0):
+        products = root.findall(".//Property[@value='GcProceduralTechnologyData']")
+    if(len(products) == 0):
+        products = root.findall(".//Property[@value='GcTechnology']")
+
+    print(len(products), "items found in", xml_path)
+
+    for product in products:
+        prod_id = None
+        name_lower_key = None
+        texture_path = None
+
+        for prop in product.findall("Property"):
+            if prop.get("name") == "ID":
+                prod_id = prop.get("value")
+            if prop.get("name") == "Subtitle" and "proceduralproducttable.MXML" in xml_path:
+                name_lower_key = prop.get("value")
+            if prop.get("name") == "NameLower":
+                name_lower_key = prop.get("value")
+            if prop.get("name") == "Template":
+                template_value = prop.get("value")
+                if template_value in items:
+                    texture_path = items[template_value]["texture"]
+            if prop.get("name") == "Icon":
+                icon_prop = prop.find("Property[@name='Filename']")
+                if icon_prop is not None:
+                    texture_path = icon_prop.get("value").lower()
+                    if texture_path.startswith("textures/"):
+                        real_path = os.path.abspath(os.path.join(__file__, "../../out/EXTRACTED/", texture_path))
+                        target_path = os.path.abspath(os.path.join(__file__, "../../../static/nms/", texture_path))
+                        texture_path = "/nms/" + texture_path.replace(".dds", ".png")
+                        if "textures/ui/frontend/icons" in texture_path:
+                            if os.path.exists(real_path):
+                                if not os.path.exists(os.path.dirname(target_path)): 
+                                    os.makedirs(os.path.dirname(target_path), exist_ok=True)
+                                img = Image.open(real_path)
+                                img = img.resize((64, 64))
+                                img.save(target_path.replace(".dds", ".png"))
+                            else:
+                                texture_path = None
+                        else:
+                            texture_path = None
+
+
+        if prod_id and name_lower_key:
+            translated_value = translations.get(name_lower_key, name_lower_key)
+
+            items[prod_id] = {
+                "name": translated_value,
+                "texture": texture_path
+            }
+
+for path in xml_paths:
+    process_xml(path)
+
+with open(output_json, "w", encoding="utf-8") as f:
+    json.dump(items, f, indent=4, ensure_ascii=False)
+
+print(f"Saved {len(items)} combined entries to {output_json}")

scripts/src/extract_items.py

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import type { JSONSaveData } from '$lib/json';
+  import clsx from 'clsx';
+  import itemData from '../../data/items.json';
+
+  type Props = {
+    value: JSONSaveData;
+  };
+
+  let { value = $bindable() }: Props = $props();
+
+  let size = $derived(value.Width * value.Height);
+</script>
+
+<div class="grid w-full grid-cols-3 grid-rows-2 gap-px" style={`grid-template-columns: repeat(${value.Width}, minmax(0, 1fr)); grid-template-rows: repeat(${value.Height}, minmax(0, 1fr));`}>
+  {#each Array.from({ length: size }, (_, i) => i) as index}
+    {@const item = (value.Slots as { Index: { X: number; Y: number }; Id: string }[]).find((slot) => slot.Index.X + slot.Index.Y * value.Width === index)}
+    {@const isSlotEnabled = (value.ValidSlotIndices as { X: number; Y: number }[]).some((slot) => slot.X + slot.Y * value.Width === index)}
+    {@const isSlotSpecial = (value.SpecialSlots as { Index: { X: number; Y: number } }[]).some((slot) => slot.Index.X + slot.Index.Y * value.Width === index)}
+    <div class={clsx('group relative flex aspect-square flex-col items-center justify-center gap-2 overflow-hidden px-3 py-2 text-gray-500', isSlotEnabled ? 'bg-white' : 'bg-gray-300', isSlotSpecial ? 'inset-ring-4 inset-ring-yellow-100' : '')}>
+      {#if item}
+        {@const itemMeta = itemData[item.Id.replaceAll('^', '').split('#')[0]] ?? { texture: '', name: item.Id }}
+        <img class="aspect-square w-1/2" src={itemMeta.texture} alt="" />
+        <p class="text-xs">{itemMeta.name}</p>
+        <p class="text-xs">{item.Amount}/{item.MaxAmount}</p>
+      {/if}
+    </div>
+  {/each}
+</div>