Fix multiple materials referencing same file

config/models.mjs

@@ -238,7 +238,28 @@ export async function getSkinConfig() {
         { label: "Green Light", name: "greenlight", hasDefault: false },
         { label: "Red Light", name: "lite_red", hasDefault: false },
       ],
-      plasmathrower: [{ label: "Weapon", name: "weapon_plasmathrower" }],
+      plasmathrower: [
+        {
+          label: "Rear & Barrel",
+          name: "weapon_plasma10",
+          file: "weapon_plasma1",
+        },
+        {
+          label: "Top & Front",
+          name: "weapon_plasma21",
+          file: "weapon_plasma2",
+        },
+        {
+          name: "weapon_plasma1",
+          file: "weapon_plasma1",
+          selectable: false,
+        },
+        {
+          name: "weapon_plasma2",
+          file: "weapon_plasma2",
+          selectable: false,
+        },
+      ],
       energy: [
         {
           label: "Weapon",

docs/_next/static/jutdsOroUmxbv_NU7Tfkx/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-7261674e93dbb0a6.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-0934afea379f1152.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-7261674e93dbb0a6.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-617009baca527a4e.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

src/ColorCanvas.tsx

@@ -15,8 +15,9 @@ export default function ColorCanvas({
   materialDef: MaterialDefinition;
 }) {
   const { skinImageUrls, defaultSkinImageUrls } = useWarrior();
-  const skinImageUrl = skinImageUrls[materialDef.name];
-  const defaultSkinImageUrl = defaultSkinImageUrls[materialDef.name];
+  const skinImageUrl = skinImageUrls[materialDef.file ?? materialDef.name];
+  const defaultSkinImageUrl =
+    defaultSkinImageUrls[materialDef.file ?? materialDef.name];
   const { setColorImageUrl } = useSkin();
   const { canvasPadding } = useSettings();
   const [noAlphaImageUrl, setNoAlphaImageUrl] = useState<string | null>(null);
@@ -36,7 +37,7 @@ export default function ColorCanvas({
         width: textureSize[0],
         height: textureSize[1],
       });
-      setColorImageUrl(materialDef.name, imageUrl);
+      setColorImageUrl(materialDef.file ?? materialDef.name, imageUrl);
     },
     [textureSize, canvasPadding, setColorImageUrl, materialDef]
   );

src/Material.tsx

@@ -114,7 +114,7 @@ interface MaterialProps {
 export default function Material({ material, materialDef }: MaterialProps) {
   const { getSkinImages } = useSkin();
   const { colorImageUrl, metallicImageUrl } =
-    getSkinImages(material.name) ?? {};
+    getSkinImages(materialDef?.file ?? material.name) ?? {};
 
   useTexture({
     material,

src/MetallicCanvas.tsx

@@ -15,8 +15,9 @@ export default function MetallicCanvas({
   materialDef: MaterialDefinition;
 }) {
   const { skinImageUrls, defaultSkinImageUrls } = useWarrior();
-  const skinImageUrl = skinImageUrls[materialDef.name];
-  const defaultSkinImageUrl = defaultSkinImageUrls[materialDef.name];
+  const skinImageUrl = skinImageUrls[materialDef.file ?? materialDef.name];
+  const defaultSkinImageUrl =
+    defaultSkinImageUrls[materialDef.file ?? materialDef.name];
   const { setMetallicImageUrl } = useSkin();
   const { canvasPadding } = useSettings();
   const [alphaImageUrl, setAlphaImageUrl] = useState<string | null>(null);
@@ -50,7 +51,10 @@ export default function MetallicCanvas({
         runningChangeHandlers.current -= 1;
       }
       if (runningChangeHandlers.current === 0) {
-        setMetallicImageUrl(materialDef.name, outputImageUrl);
+        setMetallicImageUrl(
+          materialDef.file ?? materialDef.name,
+          outputImageUrl
+        );
       }
     },
     [

src/SkinProvider.tsx

@@ -6,31 +6,31 @@ export default function SkinProvider({ children }: { children: ReactNode }) {
 
   const setters = useMemo(
     () => ({
-      setSkinImages(materialName: string, skinImages: SkinImages) {
+      setSkinImages(materialFile: string, skinImages: SkinImages) {
         setMaterialSkins((materialSkins) => {
           return {
             ...materialSkins,
-            [materialName]: skinImages,
+            [materialFile]: skinImages,
           };
         });
       },
-      setColorImageUrl(materialName: string, colorImageUrl: string) {
+      setColorImageUrl(materialFile: string, colorImageUrl: string) {
         setMaterialSkins((materialSkins) => {
           return {
             ...materialSkins,
-            [materialName]: {
-              ...materialSkins[materialName],
+            [materialFile]: {
+              ...materialSkins[materialFile],
               colorImageUrl,
             },
           };
         });
       },
-      setMetallicImageUrl(materialName: string, metallicImageUrl: string) {
+      setMetallicImageUrl(materialFile: string, metallicImageUrl: string) {
         setMaterialSkins((materialSkins) => {
           return {
             ...materialSkins,
-            [materialName]: {
-              ...materialSkins[materialName],
+            [materialFile]: {
+              ...materialSkins[materialFile],
               metallicImageUrl,
             },
           };
@@ -43,14 +43,14 @@ export default function SkinProvider({ children }: { children: ReactNode }) {
   const context = useMemo(() => {
     return {
       materialSkins,
-      getSkinImages(materialName: string) {
-        return materialSkins[materialName];
+      getSkinImages(materialFile: string) {
+        return materialSkins[materialFile];
       },
-      getColorImageUrl(materialName: string) {
-        return materialSkins[materialName].colorImageUrl;
+      getColorImageUrl(materialFile: string) {
+        return materialSkins[materialFile].colorImageUrl;
       },
-      getMetallicImageUrl(materialName: string) {
-        return materialSkins[materialName].metallicImageUrl;
+      getMetallicImageUrl(materialFile: string) {
+        return materialSkins[materialFile].metallicImageUrl;
       },
       ...setters,
     };

src/WarriorProvider.tsx

@@ -44,14 +44,16 @@ export function getSkinImageUrls({
             switch (selectedSkinType) {
               case "default":
                 if (materialDef.hasDefault !== false) {
-                  skinImageUrls[materialDef.name] = `${basePath}/textures/${
+                  skinImageUrls[
+                    materialDef.file ?? materialDef.name
+                  ] = `${basePath}/textures/${
                     materialDef.file ?? materialDef.name
                   }.png`;
                 }
                 break;
               case "custom":
                 skinImageUrls[
-                  materialDef.name
+                  materialDef.file ?? materialDef.name
                 ] = `${baseSkinPath}/${selectedSkin}/${
                   materialDef.file ?? materialDef.name
                 }.png`;

src/WarriorSelector.tsx

@@ -75,7 +75,7 @@ export default function WarriorSelector() {
             <option value="chaingun">Chaingun</option>
             <option value="grenade_launcher">Grenade Launcher</option>
             <option value="sniper">Laser Rifle</option>
-            {/* <option value="plasmathrower">Plasma Cannon</option> */}
+            <option value="plasmathrower">Plasma Cannon</option>
             <option value="energy">Blaster</option>
             <option value="shocklance">Shocklance</option>
             <option value="elf">ELF Projector</option>
@@ -178,7 +178,9 @@ export default function WarriorSelector() {
                 }
               });
               setSelectedSkin(null);
-              setSkinImageUrls({ [materialDef.name]: imageUrl });
+              setSkinImageUrls({
+                [materialDef.file ?? materialDef.name]: imageUrl,
+              });
             }}
             type="file"
             accept=".png, image/png"

src/useSkin.ts

@@ -9,12 +9,12 @@ export type MaterialSkins = Record<string, SkinImages>;
 
 interface SkinContextValue {
   materialSkins: MaterialSkins;
-  getSkinImages: (materialName: string) => SkinImages;
-  setSkinImages: (materialName: string, skinImages: SkinImages) => void;
-  getColorImageUrl: (materialName: string) => string | undefined;
-  setColorImageUrl: (materialName: string, colorImageUrl: string) => void;
-  getMetallicImageUrl: (materialName: string) => string | undefined;
-  setMetallicImageUrl: (materialName: string, colorImageUrl: string) => void;
+  getSkinImages: (materialFile: string) => SkinImages;
+  setSkinImages: (materialFile: string, skinImages: SkinImages) => void;
+  getColorImageUrl: (materialFile: string) => string | undefined;
+  setColorImageUrl: (materialFile: string, colorImageUrl: string) => void;
+  getMetallicImageUrl: (materialFile: string) => string | undefined;
+  setMetallicImageUrl: (materialFile: string, colorImageUrl: string) => void;
 }
 
 const SkinContext = React.createContext<SkinContextValue | null>(null);