Merge pull request #39 from M3-org/load-json-support

add json support in appearance screen with drag and drop

src/components/Editor.jsx

@@ -52,8 +52,8 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
   useEffect(() => {
     if (awaitDisplay){
       setSelectedOptions(
-        loadUserSelection(manifestSelectionIndex)
-        || getRandomizedTemplateOptions(templateInfo)
+        //loadUserSelection(manifestSelectionIndex)
+        getRandomizedTemplateOptions(templateInfo)
       )
         setAwaitDisplay(false)
     }

src/components/Selector.jsx

@@ -144,7 +144,6 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
       const finalAvatar = {...avatar, ...newAvatar}
       setTimeout(() => {
         if (Object.keys(finalAvatar).length > 0) {
-          console.log(finalAvatar)
           cullHiddenMeshes(finalAvatar)
         }
         !isMute && playSound('characterLoad',300);

src/library/option-utils.js

@@ -70,6 +70,33 @@ export const getClassOptions = (manifest) => {
   return options
 }
 
+export function getTraitOption(traitId, traitName, template){
+
+
+  const trait = template.traits.find(trait => trait.trait === traitName)
+
+  if (trait == null){
+    console.warn("No trait with id: " + traitName + " was found.");
+    return null;
+  }
+  let index = trait.collection?.findIndex(item => item.id === traitId);
+  index = index != null ? index : -1;
+
+
+  if (index != -1){
+    const item = trait.collection[index];
+
+    const key = trait.name + "_" + index;
+    const thumbnailBaseDir = (template.assetsLocation || "") + template.thumbnailsDirectory
+    return  getOption(key, trait, item, thumbnailBaseDir + item.thumbnail);
+  }
+  else{
+    console.warn("No object with id: " + traitId + " was found in trait category " + traitName);
+    return null;
+  }
+
+}
+
 export function getTraitOptions(trait, template) {
   const traitOptions = []
   const thumbnailBaseDir = (template.assetsLocation || "") + template.thumbnailsDirectory

src/pages/Appearance.jsx

@@ -9,6 +9,7 @@ import { SoundContext } from "../context/SoundContext"
 import { AudioContext } from "../context/AudioContext"
 import FileDropComponent from "../components/FileDropComponent"
 import { getFileNameWithoutExtension } from "../library/utils"
+import { getTraitOption } from "../library/option-utils"
 
 function Appearance({
   animationManager,
@@ -23,7 +24,9 @@ function Appearance({
     getRandomCharacter,
     isChangingWholeAvatar,
     setIsChangingWholeAvatar,
-    toggleDebugMNode
+    toggleDebugMNode,
+    templateInfo,
+    setSelectedOptions
   } = React.useContext(SceneContext)
 
   const { playSound } = React.useContext(SoundContext)
@@ -87,6 +90,48 @@ function Appearance({
       await animationManager.loadAnimation(path, true, "", animName);
       // Handle the dropped .fbx file
     } 
+    if (file && file.name.toLowerCase().endsWith('.json')) {
+      console.log('Dropped .json file:', file);
+      const reader = new FileReader();
+
+      reader.onload = function(e) {
+        try {
+          const jsonContent = JSON.parse(e.target.result); // Parse the JSON content
+          // Now you can work with the JSON data in the 'jsonContent' variable
+
+          const options = [];
+          jsonContent.attributes.forEach(attribute => {
+            if (attribute.trait_type != "BRACE")
+              options.push(getTraitOption(attribute.value, attribute.trait_type , templateInfo));
+          });
+          const filteredOptions = options.filter(element => element !== null);
+
+          templateInfo.traits.map(trait => {
+            const coincidence = filteredOptions.some(option => option.trait.trait == trait.trait);
+            // find if trait.trait has coincidence in any of the filteredOptions[].trait
+            // if no coincidence was foud add to filteredOptions {item:null, trait:templateInfo.traits.find((t) => t.name === currentTraitName}
+            if (!coincidence) {
+              // If no coincidence was found, add to filteredOptions
+              filteredOptions.push({ item: null, trait: trait });
+            }
+          });
+
+          if (filteredOptions.length > 0){
+            setSelectedOptions(filteredOptions)
+          }
+
+
+
+
+        } catch (error) {
+          console.error("Error parsing the JSON file:", error);
+        }
+      };
+
+      reader.readAsText(file); // Read the file as text
+
+      // Handle the dropped .fbx file
+    } 
   };
 
   return (