Merge pull request #33 from M3-org/Multiple-Animation-Select

Multiple animation select
M3-org · Oct 17, 2023 · f5f768b · f5f768b
2 parents 46ca95b + 969e010
commit f5f768b
Show file tree

Hide file tree

Showing 12 changed files with 233 additions and 96 deletions.
diff --git a/public/ui/backButton_small.png b/public/ui/backButton_small.png
diff --git a/public/ui/nextButton_small.png b/public/ui/nextButton_small.png
diff --git a/src/App.jsx b/src/App.jsx
@@ -92,7 +92,9 @@ async function fetchScene() {
 async function fetchAnimation(templateInfo) {
   // create an animation manager for all the traits that will be loaded
   const newAnimationManager = new AnimationManager(templateInfo.offset)
-  await newAnimationManager.loadAnimations(templateInfo.animationPath, templateInfo.animationPath.endsWith('.fbx'))
+  const animationPaths = getAsArray(templateInfo.animationPath);
+  newAnimationManager.storeAnimationPaths(animationPaths, templateInfo.assetsLocation || "");
+  await newAnimationManager.loadAnimation(animationPaths, animationPaths[0].endsWith('.fbx'), templateInfo.assetsLocation || "")
   return newAnimationManager
 }
 

diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -103,7 +103,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
                     size={56}
                     resolution={2048}
                     numFrames={128}
-                    icon={templateInfo.traitIconsDirectorySvg + item.iconSvg}
+                    icon={ (templateInfo.assetsLocation || "") + templateInfo.traitIconsDirectorySvg + item.iconSvg}
                     rarity={currentTraitName !== item.name ? "none" : "mythic"}
                     onClick={() => {
                       selectOption(item)
@@ -115,7 +115,7 @@ export default function Editor({confirmDialog,animationManager, blinkManager, lo
         </div>
       </div>
       <Selector confirmDialog = {confirmDialog} animationManager={animationManager} templateInfo={templateInfo} blinkManager = {blinkManager} lookatManager = {lookatManager} effectManager = {effectManager}/>
-      <TraitInformation currentVRM={currentVRM}/>
+      <TraitInformation currentVRM={currentVRM} animationManager={animationManager}/>
     </Fragment>
   )
 }
diff --git a/src/components/Selector.jsx b/src/components/Selector.jsx
@@ -342,7 +342,7 @@ export default function Selector({confirmDialog, templateInfo, animationManager,
       }
 
 
-      const baseDir = useTemplateBaseDirectory ? templateInfo.traitsDirectory : "";
+      const baseDir = useTemplateBaseDirectory ? (templateInfo.assetsLocation || "") + templateInfo.traitsDirectory : "";
       // load necesary assets for the options
       options.map((option, index)=>{
         if (option.selected){

diff --git a/src/components/Slider.module.css b/src/components/Slider.module.css
@@ -14,8 +14,8 @@
   color: #5eb086;
   background-color:rgba(5, 11, 14, 0.5);
   border: none;
-  font-size: large;
-  font-weight: 700;
+  font-size: medium;
+  font-weight: 500;
   margin-left: 15px;
 }
 .input-box:focus {

diff --git a/src/components/TraitInformation.jsx b/src/components/TraitInformation.jsx
@@ -5,7 +5,7 @@ import { SceneContext } from "../context/SceneContext";
 import Slider from "./Slider";
 import { cullHiddenMeshes } from "../library/utils";
 
-export default function TraitInformation({currentVRM}){
+export default function TraitInformation({currentVRM, animationManager}){
     const {
         displayTraitOption,
         avatar
@@ -14,6 +14,7 @@ export default function TraitInformation({currentVRM}){
     const [cullOutDistance, setCullOutDistance] = useState(0); // set from the values of the trait
     const [cullInDistance, setCullInDistance] = useState(0);
     const [cullLayer, setCullLayer] = useState(0);
+    const [animationName, setAnimationName] = useState(animationManager.getCurrentAnimationName());
 
     useEffect(() => {
         if (currentVRM != null){
@@ -22,6 +23,11 @@ export default function TraitInformation({currentVRM}){
             setCullInDistance(currentVRM?.data?.cullingDistance[1]||0);
         }
     }, [currentVRM])
+
+    useEffect(()=>{
+        //console.log(animationManager.currentAnimationName);
+        setAnimationName(animationManager.getCurrentAnimationName());
+    },[animationManager.currentAnimationName])
 
 
     const handleCullOutChange = (event) => {
@@ -48,57 +54,85 @@ export default function TraitInformation({currentVRM}){
         }
     };
 
+    const nextAnimation = async () => {
+        await animationManager.loadNextAnimation();
+        setAnimationName(animationManager.getCurrentAnimationName());
+    }
+    const prevAnimation = async () => {
+        await animationManager.loadPreviousAnimation();
+        setAnimationName(animationManager.getCurrentAnimationName());
+    }
+
     return (
         displayTraitOption != null ? (
         <div>
             <div className={styles["InformationContainerPos"]}>
                 <MenuTitle title="Trait Information" width={180} right={20}/>
-                <div className={styles["traitInfoTitle"]}>
-                    Trait ID
-                </div>
-                <div className={styles["traitInfoText"]}>
-                    {displayTraitOption?.id}
-                </div>
-                <div className={styles["traitInfoTitle"]}>
-                    Trait Name
-                </div>
-                <div className={styles["traitInfoText"]}>
-                    {displayTraitOption?.name}
-                </div>
-                <div className={styles["traitInfoTitle"]}>
-                    Culling Layer
-                </div>
-                <div className={styles["traitInfoText"]}>
-                    {displayTraitOption?.cullingLayer || "-"}
-                </div>
-                <div className={styles["traitInfoTitle"]}>
-                    Description
-                </div>
-                <div className={styles["traitInfoText"]}>
-                    {displayTraitOption?.description || "A nice " + displayTraitOption?.name}
-                </div>
-                <div className={styles["traitInfoTitle"]}>
-                    Culling Options
-                </div>
-                <div className={styles["traitInfoText"]}>
-                    Culling Layer
-                        <input
-                            type="number"
-                            min="0"
-                            max="100"
-                            value={cullLayer}
-                            onChange={handleCullLayerChange}
-                            className={styles["input-box"]}
-                            step ={1}
-                        />
-                    <br/>
-                    <br/>
-                    Cull Out Distance
-                    <Slider  value={cullOutDistance} onChange={handleCullOutChange} min={0} max={1} step={0.001}stepBox={0.01}/>
-                    <br/>
-                    Cull In Distance
-                    <Slider  value={cullInDistance} onChange={handleCullInChange}  min={0} max={1} step={0.001}stepBox={0.01}/>
-                </div>
+                <div className={styles["scrollContainer"]}>
+                    <div className={styles["traitInfoTitle"]}>
+                        Trait ID
+                    </div>
+                    <div className={styles["traitInfoText"]}>
+                        {displayTraitOption?.id}
+                    </div>
+                    <div className={styles["traitInfoTitle"]}>
+                        Trait Name
+                    </div>
+                    <div className={styles["traitInfoText"]}>
+                        {displayTraitOption?.name}
+                    </div>
+                    <div className={styles["traitInfoTitle"]}>
+                        Culling Layer
+                    </div>
+                    <div className={styles["traitInfoText"]}>
+                        {displayTraitOption?.cullingLayer || "-"}
+                    </div>
+                    <div className={styles["traitInfoTitle"]}>
+                        Description
+                    </div>
+                    <div className={styles["traitInfoText"]}>
+                        {displayTraitOption?.description || "A nice " + displayTraitOption?.name}
+                    </div>
+                    <div className={styles["traitInfoTitle"]}>
+                        Culling Options
+                    </div>
+                        <div className={styles["traitInfoText"]}>
+                            Culling Layer
+                                <input
+                                    type="number"
+                                    min="0"
+                                    max="100"
+                                    value={cullLayer}
+                                    onChange={handleCullLayerChange}
+                                    className={styles["input-box"]}
+                                    step ={1}
+                                />
+                            <br/>
+                            <br/>
+                            Cull Out Distance
+                            <Slider  value={cullOutDistance} onChange={handleCullOutChange} min={0} max={1} step={0.001}stepBox={0.01}/>
+                            <br/>
+                            Cull In Distance
+                            <Slider  value={cullInDistance} onChange={handleCullInChange}  min={0} max={1} step={0.001}stepBox={0.01}/>
+                        </div>
+                        <div className={styles["traitInfoTitle"]}>
+                            Animation
+                        </div>
+                        <br/>
+                        <div className={styles["animationSelect"]}>
+                            <div 
+                                className={`${styles["anim-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"]}`}
+                                onClick={nextAnimation}
+                            ></div>
+                        </div>
+                    </div>
+
             </div>
         </div>
         ):(<></>)

diff --git a/src/components/TraitInformation.module.css b/src/components/TraitInformation.module.css
@@ -1,47 +1,101 @@
+
 .InformationContainerPos {
-    position: absolute;
-    top: 98px;
-    right: 50px;
-    height: 500px;
-    width: 300px;
-    backdrop-filter: blur(22.5px);
-    background: rgba(5, 11, 14, 0.5);
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    padding: 30px;
+  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);
+}
+
 .traitInfoTitle {
-    color: white;
-    text-transform: uppercase;
-    text-shadow: 1px 1px 2px black;
-    font-size: 16px;
-    word-spacing: 2px;
-    margin-bottom: 10px;
+  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;
+  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: large;
-    font-weight: 700;
-    margin-left: 15px;
-  }
-  .input-box:focus {
-    outline: none;
-  }
+  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;
-  }
+.input-box::selection {
+  background-color: #111f17;
+  color: #5eb086;
+}
+
+.animationSelect{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height:40px;
+  align-items: center;
+}
+
+.anim-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: 30px;
+  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;
+}