add json filename as title

M3-org · Oct 22, 2023 · fdd8315 · fdd8315
1 parent d93b5af
commit fdd8315
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 37 deletions.
diff --git a/src/components/JsonAttributes.jsx b/src/components/JsonAttributes.jsx
@@ -6,38 +6,37 @@ export default function JsonAttributes({jsonSelection}){
 
     return (
         jsonSelection != null ? (
-
-        <div className={styles["InformationContainerPos"]}>
-                <MenuTitle title="TraitSelection" width={180} right={20}/>
-                <div className={styles["scrollContainer"]}>
-                {jsonSelection.thumb && (
-                    <img 
-                        src={jsonSelection.thumb} 
-                        alt="Selection Thumbnail" 
-                        style={{ 
-                            width: '280px', 
-                            height: '460px' ,
-                            display: 'block',  // Center horizontally
-                            margin: '20px auto 20px',  // Center horizontally
-                        }
-                    }
-
-                    />
-                )}
-                {
-                    jsonSelection.attributes.map((attribute) =>{
-                        return (
-                            <div
-                                key={`json:${attribute.trait}_${attribute.name}`}>
-                                <div className={styles["traitInfoText"]}>
-                                    {`${attribute.trait} : ${attribute.id}`}
-                                </div>
-                            </div>
-                        )
-                    })
-                }
+          <div className={styles["InformationContainerPos"]}>
+            <MenuTitle title="TraitSelection" width={180} right={20} />
+            <div className={styles["scrollContainer"]}>
+              {jsonSelection.name && (
+                <div style={{ textAlign: 'center'}}>
+                  <div className={styles["traitInfoTitle"]}>
+                    {jsonSelection.name}
+                  </div>
                 </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>
+              ))}
+            </div>
+          </div>
+        ) : (<></>)
+      );
 }
diff --git a/src/pages/Appearance.jsx b/src/pages/Appearance.jsx
@@ -96,9 +96,9 @@ function Appearance({
     if (file && file.name.toLowerCase().endsWith('.json')) {
       //console.log('Dropped .json file:', file);
       const reader = new FileReader();
-      console.warn(file.name);
       const thumbLocation = `${templateInfo.assetsLocation}/anata/_thumbnails/t_${file.name.split('_')[0]}.jpg`
-      console.log(thumbLocation);
+      const jsonName = file.name.split('.')[0];
+
       //const thumbnailName = 
       reader.onload = function(e) {
         try {
@@ -108,8 +108,10 @@ function Appearance({
           const options = [];
 
           const jsonAttributes = jsonContent.attributes.map((attribute) => {return { trait:attribute.trait_type, id:attribute.value }});
-          console.log(jsonAttributes);
-          const jsonSelection = {thumb:thumbLocation,attributes:jsonAttributes}
+
+
+          const jsonSelection = {name: jsonName, thumb:thumbLocation,attributes:jsonAttributes}
+          console.log(jsonSelection);
           setJsonSelection(jsonSelection);
 
           jsonContent.attributes.forEach(attribute => {