support multiple json files

M3-org · Oct 22, 2023 · 4a363d8 · 4a363d8
1 parent c319220
commit 4a363d8
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 92 deletions.
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -20,7 +20,7 @@ import { LanguageContext } from "../context/LanguageContext"
 import MenuTitle from "./MenuTitle"
 
 
-export default function Editor({confirmDialog,animationManager, blinkManager, lookatManager, effectManager, jsonSelection}) {
+export default function Editor({confirmDialog,animationManager, blinkManager, lookatManager, effectManager, jsonSelectionArray}) {
   const {
     currentTraitName, 
     setCurrentTraitName, 
@@ -116,7 +116,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
         </div>
       </div>
       <Selector confirmDialog = {confirmDialog} animationManager={animationManager} templateInfo={templateInfo} blinkManager = {blinkManager} lookatManager = {lookatManager} effectManager = {effectManager}/>
-      <JsonAttributes jsonSelection={jsonSelection}/>
+      <JsonAttributes jsonSelectionArray={jsonSelectionArray}/>
       <TraitInformation currentVRM={currentVRM} animationManager={animationManager} lookatManager={lookatManager}/>
     </Fragment>
   )

diff --git a/src/components/JsonAttributes.jsx b/src/components/JsonAttributes.jsx
@@ -1,42 +1,87 @@
-import React from "react"
+import React, {useEffect,useState,useContext} from "react"
 import styles from "./JsonAttributes.module.css"
+import { SceneContext } from "../context/SceneContext"
 import MenuTitle from "./MenuTitle"
 
-export default function JsonAttributes({jsonSelection}){
+export default function JsonAttributes({jsonSelectionArray}){
+  const {
+    setSelectedOptions
+  } = useContext(SceneContext);
+  const [index, setIndex] = useState(0);
 
-    return (
-        jsonSelection != null ? (
-          <div className={styles["InformationContainerPos"]}>
-            <MenuTitle title="TraitSelection" width={180} right={20} />
-            <div className={styles["scrollContainer"]}>
-              {jsonSelection.name && (
-                <div style={{ textAlign: 'center'}}>
+  useEffect(() => {
+    if (jsonSelectionArray?.length >0)
+      setSelectedOptions(jsonSelectionArray[0].options)
+    setIndex(0);
+  }, [jsonSelectionArray])
+
+  const nextJson = async () => {
+    if (index >= jsonSelectionArray.length -1){
+      setSelectedOptions(jsonSelectionArray[0].options)
+      setIndex(0);
+    }
+    else{
+      const newIndex = index + 1;
+      setSelectedOptions(jsonSelectionArray[newIndex].options)
+      setIndex(newIndex);
+    }
+  }
+  const prevJson = async () => {
+    console.log("prev")
+    if (index <= 0){
+      setSelectedOptions(jsonSelectionArray[jsonSelectionArray.length].options)
+      setIndex(jsonSelectionArray.length -1);
+    }
+    else{
+      const newIndex = index-1;
+      setSelectedOptions(jsonSelectionArray[newIndex].options)
+      setIndex(newIndex);
+    }
+  }
+
+  return (
+      jsonSelectionArray?.length > 0 ? (
+        <div className={styles["InformationContainerPos"]}>
+          <MenuTitle title="TraitSelection" width={180} right={20} />
+          <div className={styles["scrollContainer"]}>
+            <div className={styles["flexSelect"]}>
+              {jsonSelectionArray?.length > 1 ? <div // add left arrow only when array is greater than 1
+                  className={`${styles["arrow-button"]} ${styles["left-button"]}`}
+                  onClick={prevJson}
+              />:<></>}
+              {jsonSelectionArray[index].name && (
+                <div style={{ textAlign: 'center', flex: 1}}>
                   <div className={styles["traitInfoTitle"]}>
-                    {jsonSelection.name}
+                    {jsonSelectionArray[index].name}
                   </div>
                 </div>
               )}
-              {jsonSelection.thumb && (
-                <img
-                  src={jsonSelection.thumb}
-                  alt="Selection Thumbnail"
-                  style={{
-                    width: '280px',
-                    height: '460px',
-                    display: 'block',
-                    margin: '20px auto 20px',
-                  }}
-                />
-              )}
-              {jsonSelection.attributes.map((attribute) => (
-                <div key={`json:${attribute.trait}_${attribute.name}`}>
-                  <div className={styles["traitInfoText"]}>
-                    {`${attribute.trait} : ${attribute.id}`}
-                  </div>
-                </div>
-              ))}
+              {jsonSelectionArray?.length > 1 ? <div //add right arrow only when array is greater than 1
+                className={`${styles["arrow-button"]} ${styles["right-button"]}`}
+                onClick={nextJson}
+              />:<></>}
             </div>
+            {jsonSelectionArray[index].thumb && (
+              <img
+                src={jsonSelectionArray[index].thumb}
+                alt="Selection Thumbnail"
+                style={{
+                  width: '280px',
+                  height: '460px',
+                  display: 'block',
+                  margin: '20px auto 20px',
+                }}
+              />
+            )}
+            {jsonSelectionArray[index].attributes.map((attribute) => (
+              <div key={`json:${attribute.trait}_${attribute.name}`}>
+                <div className={styles["traitInfoText"]}>
+                  {`${attribute.trait} : ${attribute.id}`}
+                </div>
+              </div>
+            ))}
           </div>
-        ) : (<></>)
-      );
+        </div>
+      ) : (<></>)
+    );
 }
diff --git a/src/components/JsonAttributes.module.css b/src/components/JsonAttributes.module.css
@@ -21,6 +21,7 @@
   margin: 30px;
   height: -webkit-calc(100% - 40px);
   height: calc(100% - 40px);
+  padding-top: 5px;
 }
 
 .traitInfoTitle {
@@ -58,15 +59,15 @@
   color: #5eb086;
 }
 
-.animationSelect{
+.flexSelect{
   display: flex;
   justify-content: space-between;
   width: 100%;
   height:40px;
   align-items: center;
 }
 
-.anim-button {
+.arrow-button {
 
   cursor: pointer;
   overflow: hidden;
@@ -79,7 +80,7 @@
   outline-width: 2px;
   outline-style: solid;
   align-items: center;
-  margin-bottom: 30px;
+  margin-bottom: 10px;
   background-color: #1e2530;
 }
 .left-button{

diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
@@ -127,15 +127,15 @@ export default function TraitInformation({currentVRM, animationManager, lookatMa
                             Animation
                         </div>
                         <br/>
-                        <div className={styles["animationSelect"]}>
+                        <div className={styles["flexSelect"]}>
                             <div 
-                                className={`${styles["anim-button"]} ${styles["left-button"]}`}
+                                className={`${styles["arrow-button"]} ${styles["left-button"]}`}
                                 onClick={prevAnimation}
                             ></div>
                             <div className={styles["traitInfoText"]}>{animationName}</div>
                             <div 
                             //`${styles.class1} ${styles.class2}`
-                                className={`${styles["anim-button"]} ${styles["right-button"]}`}
+                                className={`${styles["arrow-button"]} ${styles["right-button"]}`}
                                 onClick={nextAnimation}
                             ></div>
                         </div>

diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
@@ -58,15 +58,15 @@
   color: #5eb086;
 }
 
-.animationSelect{
+.flexSelect{
   display: flex;
   justify-content: space-between;
   width: 100%;
   height:40px;
   align-items: center;
 }
 
-.anim-button {
+.arrow-button {
 
   cursor: pointer;
   overflow: hidden;

diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx
@@ -38,7 +38,7 @@ function Appearance({
     setViewMode(ViewMode.CREATE)
   }
 
-  const [jsonSelection, setJsonSelection] = React.useState(null)
+  const [jsonSelectionArray, setJsonSelectionArray] = React.useState(null)
 
 
   const next = () => {
@@ -94,58 +94,65 @@ 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();
-      const thumbLocation = `${templateInfo.assetsLocation}/anata/_thumbnails/t_${file.name.split('_')[0]}.jpg`
-      const jsonName = file.name.split('.')[0];
-
-      //const thumbnailName = 
-      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 = [];
-
-          const jsonAttributes = jsonContent.attributes.map((attribute) => {return { trait:attribute.trait_type, id:attribute.value }});
-
-
-          const jsonSelection = {name: jsonName, thumb:thumbLocation,attributes:jsonAttributes}
-          setJsonSelection(jsonSelection);
-
-          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)
-          }
-
-
 
+    const filesArray = Array.from(files);
+    const jsonDataArray = [];
+    const processFile = (file) => {
+      return new Promise((resolve, reject) => {
+        if (file && file.name.toLowerCase().endsWith('.json')) {
+          const reader = new FileReader();
+          const thumbLocation = `${templateInfo.assetsLocation}/anata/_thumbnails/t_${file.name.split('_')[0]}.jpg`;
+          const jsonName = file.name.split('.')[0];
+
+          reader.onload = function (e) {
+            try {
+              const jsonContent = JSON.parse(e.target.result);
+              const options = [];
+              const jsonAttributes = jsonContent.attributes.map((attribute) => ({ trait: attribute.trait_type, id: attribute.value }));
+
+              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.forEach((trait) => {
+                const coincidence = filteredOptions.some((option) => option.trait.trait === trait.trait);
+                if (!coincidence) {
+                  filteredOptions.push({ item: null, trait: trait });
+                }
+              });
+
+              const jsonSelection = { name: jsonName, thumb: thumbLocation, attributes: jsonAttributes, options: filteredOptions };
+              jsonDataArray.push(jsonSelection);
+
+              resolve(); // Resolve the promise when processing is complete
+            } catch (error) {
+              console.error("Error parsing the JSON file:", error);
+              reject(error);
+            }
+          };
 
-        } catch (error) {
-          console.error("Error parsing the JSON file:", error);
+          reader.readAsText(file);
         }
-      };
-
-      reader.readAsText(file); // Read the file as text
-
-      // Handle the dropped .fbx file
-    } 
+      });
+    };
+
+  // Use Promise.all to wait for all promises to resolve
+  Promise.all(filesArray.map(processFile))
+  .then(() => {
+    if (jsonDataArray.length > 0){
+      // This code will run after all files are processed
+      setJsonSelectionArray(jsonDataArray);
+      setSelectedOptions(jsonDataArray[0].options);
+    }
+  })
+  .catch((error) => {
+    console.error("Error processing files:", error);
+  });
+
   };
 
   return (
@@ -163,7 +170,7 @@ function Appearance({
         lookatManager={lookatManager}
         effectManager={effectManager}
         confirmDialog={confirmDialog}
-        jsonSelection={jsonSelection}
+        jsonSelectionArray={jsonSelectionArray}
       />
       <div className={styles.buttonContainer}>
         <CustomButton