Merge pull request #40 from M3-org/json-testing

Display Json Attributes Data

src/components/Editor.jsx

@@ -14,12 +14,13 @@ import {
 import styles from "./Editor.module.css"
 import Selector from "./Selector"
 import TraitInformation from "./TraitInformation"
+import JsonAttributes from "./JsonAttributes"
 import { TokenBox } from "./token-box/TokenBox"
 import { LanguageContext } from "../context/LanguageContext"
 import MenuTitle from "./MenuTitle"
 
 
-export default function Editor({confirmDialog,animationManager, blinkManager, lookatManager, effectManager}) {
+export default function Editor({confirmDialog,animationManager, blinkManager, lookatManager, effectManager, jsonSelectionArray}) {
   const {
     currentTraitName, 
     setCurrentTraitName, 
@@ -115,6 +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 jsonSelectionArray={jsonSelectionArray}/>
       <TraitInformation currentVRM={currentVRM} animationManager={animationManager} lookatManager={lookatManager}/>
     </Fragment>
   )

src/components/FileDropComponent.jsx

@@ -2,16 +2,16 @@
 import React, { useEffect, useState } from 'react';
 import styles from './FileDropComponent.module.css';
 
-export default function FileDropComponent ({onFileDrop}){
+export default function FileDropComponent ({onFilesDrop}){
   const [isDragging, setIsDragging] = useState(false);
 
   useEffect(() => {
     const handleDrop = (event) => {
       event.preventDefault();
       setIsDragging(false);
-      const file = event.dataTransfer.files[0];
-      if (onFileDrop) {
-        onFileDrop(file);
+      const files = event.dataTransfer.files;
+      if (onFilesDrop) {
+        onFilesDrop(files);
       }
     };
 

src/components/JsonAttributes.jsx

@@ -0,0 +1,87 @@
+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({jsonSelectionArray}){
+  const {
+    setSelectedOptions
+  } = useContext(SceneContext);
+  const [index, setIndex] = useState(0);
+
+  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"]}>
+                    {jsonSelectionArray[index].name}
+                  </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>
+      ) : (<></>)
+    );
+}

src/components/JsonAttributes.module.css

@@ -0,0 +1,143 @@
+
+.InformationContainerPos {
+  position: fixed;
+  right: 32px;
+  top: 98px;
+  width:350px;
+  height: -webkit-calc(100vh - 176px);
+  height: calc(100vh - 176px);
+  backdrop-filter: blur(22.5px);
+  background: rgba(5, 11, 14, 0.8);
+  z-index: 1000;
+  user-select: none;
+}
+
+.scrollContainer {
+  height: 100%;
+  width: 80%;
+  overflow-y: scroll;
+  position: relative;
+  overflow-x: hidden !important;
+  margin: 30px;
+  height: -webkit-calc(100% - 40px);
+  height: calc(100% - 40px);
+  padding-top: 5px;
+}
+
+.traitInfoTitle {
+  color: white;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 2px black;
+  font-size: 16px;
+  word-spacing: 2px;
+  margin-bottom: 10px;
+}
+.traitInfoText {
+  color: rgb(179, 179, 179);
+  /* text-transform: uppercase; */
+  text-shadow: 1px 1px 2px black;
+  font-size: 16px;
+  word-spacing: 2px;
+  margin-bottom: 30px;
+}
+.input-box {
+  width: 60px; /* Adjust as needed */
+  height: 20px;
+  color: #5eb086;
+  background-color:rgba(5, 11, 14, 0.5);
+  border: none;
+  font-size: medium;
+  font-weight: 500;
+  margin-left: 15px;
+}
+.input-box:focus {
+  outline: none;
+}
+
+.input-box::selection {
+  background-color: #111f17;
+  color: #5eb086;
+}
+
+.flexSelect{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height:40px;
+  align-items: center;
+}
+
+.arrow-button {
+
+  cursor: pointer;
+  overflow: hidden;
+  opacity: 0.8;
+  width: 32px;
+  height: 32px;
+  margin: 2px;
+  text-align: center;
+  outline-color: #3b434f;
+  outline-width: 2px;
+  outline-style: solid;
+  align-items: center;
+  margin-bottom: 10px;
+  background-color: #1e2530;
+}
+.left-button{
+  background: url('/ui/backButton_small.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.right-button{
+  background: url('/ui/nextButton_small.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.anim-button:hover {
+  opacity: 1;
+}
+
+/* Hide the default checkbox */
+.custom-checkbox input[type="checkbox"] {
+  display: none;
+}
+
+/* Style the custom checkbox */
+.custom-checkbox .checkbox-container {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #284b39; /* Change border color as needed */
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.custom-checkbox .checkbox-container.checked {
+  background-color: #5eb086; /* Change background color when checked */
+}
+
+.custom-checkbox .checkbox-container .checkmark {
+  display: none;
+}
+
+/* Style the checkmark when the checkbox is checked */
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-container {
+  background-color: #5eb086; /* Change background color when checked */
+}
+
+.custom-checkbox input[type="checkbox"]:checked + .checkbox-container .checkmark {
+  display: block;
+}
+
+.checkboxHolder {
+  display: flex;
+  gap: 30px;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  height: 40px;
+}

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>

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;

src/library/option-utils.js

@@ -76,7 +76,7 @@ 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.");
+    //console.warn("No trait with id: " + traitName + " was found.");
     return null;
   }
   let index = trait.collection?.findIndex(item => item.id === traitId);
@@ -91,7 +91,8 @@ export function getTraitOption(traitId, traitName, template){
     return  getOption(key, trait, item, thumbnailBaseDir + item.thumbnail);
   }
   else{
-    console.warn("No object with id: " + traitId + " was found in trait category " + traitName);
+    //console.warn(traitName + " : " + traitId);
+    console.log(traitName + " : " + traitId);
     return null;
   }