Merge pull request #183 from Benjythebee/add/emotionManager

add emotionManager

src/components/Emotions.jsx

@@ -0,0 +1,77 @@
+import React, { useEffect } from "react"
+import styles from "./Emotions.module.css"
+import MenuTitle from "./MenuTitle"
+import { SceneContext } from "../context/SceneContext";
+import Slider from "./Slider";
+
+// import 'react-dropdown/style.css';
+
+export default function Emotions(){
+
+    const {  characterManager,moveCamera } = React.useContext(SceneContext)
+
+    const [isConstant, setConstant] = React.useState(false)
+    const [intensity, setIntensity] = React.useState(1)
+
+    const availableEmotions = characterManager.emotionManager.availableEmotions
+
+    useEffect(() => {
+        moveCamera({ targetY:1.8, distance:2})
+    }, [])
+
+    const playEmotion = (emotion)=>{
+        characterManager.emotionManager.playEmotion(emotion,undefined,isConstant,intensity)
+    }
+
+    return (
+
+        <div>
+            <div className={styles["InformationContainerPos"]}>
+                <MenuTitle title="Emotions" width={180} right={20}/>
+                <div className={styles["scrollContainer"]}>
+                    <div className={styles["traitInfoText"]}>
+                        View different emotions
+                    </div>
+
+                    <div className={styles["checkboxHolder"]}>
+                        <div>
+                            </div>
+
+                            <label className={styles["custom-checkbox"]}>
+                                <input 
+                                    type="checkbox" 
+                                    checked={isConstant} 
+                                    onChange={() => setConstant(!isConstant)} 
+                                />
+                                <div className={styles["checkbox-container"]}></div>
+                            </label>
+                            <div/><div/>
+                            <div style={{color:"white"}}>Constant Emotion</div>
+
+
+                        </div>
+                        <br />
+                    <div className={styles["traitInfoText"]}>
+                        Intensity: {parseFloat(intensity.toFixed(2))}
+                    </div>
+
+                        <Slider title='' value = {parseFloat(intensity.toFixed(2))} onChange={(e) => setIntensity(parseFloat(e.currentTarget.value.toString()))} min={0} max={1} step={0.01}/>
+                        <br/>
+
+                    {availableEmotions.map((emotion, index) => {
+                        return (
+                            <div 
+                                key={index}
+                                className={styles["actionButton"]}
+                                onClick={() => {
+                                    playEmotion(emotion)
+                                }}>
+                                <div>  {emotion} </div>
+                            </div>
+                        )
+                    })}
+                </div>
+            </div>
+        </div>
+    )
+}

src/components/Emotions.module.css

@@ -0,0 +1,110 @@
+
+.InformationContainerPos {
+    position: fixed;
+    right: 132px;
+    top: 98px;
+    width:250px;
+    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);
+  }
+  .centerAlign{
+    text-align: center;
+  }
+  .traitInfoTitle {
+    text-align: center;
+    color: white;
+    text-transform: uppercase;
+    text-shadow: 1px 1px 2px black;
+    font-size: 14px;
+    word-spacing: 2px;
+    margin-bottom: 10px;
+  }
+
+
+.traitInfoText {
+    color: rgb(179, 179, 179);
+    /* text-transform: uppercase; */
+    text-shadow: 1px 1px 2px black;
+    font-size: 14px;
+    word-spacing: 2px;
+    margin-bottom: 6px;
+    display: flex;
+    justify-content: left;
+  }
+
+/* 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: 5px;
+    align-items: center;
+    justify-content: left;
+    height: 40px;
+  }
+
+
+
+  .actionButton{
+    margin: 10px auto;
+    text-align: center;
+    outline-color: #3b434f;
+    color: #d1d7df;
+    outline-width: 2px;
+    outline-style: solid;
+    background-color: #1e2530;
+    height: 30px;
+    width: 80%;
+    font-family: "TTSC-Bold";
+    text-transform: uppercase !important;
+    font-size:x-small;
+    display: flex;
+    justify-content: center;
+    align-items : center;
+    user-select: none;
+    cursor: pointer;
+  }

src/components/RightPanel.jsx

@@ -1,15 +1,17 @@
-import React, { useContext, useState, useEffect } from "react"
+import React from "react"
 import styles from "./RightPanel.module.css"
 import MenuTitle from "./MenuTitle"
 import traitsIcon from "../images/t-shirt.png"
 import genSpriteIcon from "../images/users.png"
+import emotionIcon from "../images/emotion.png"
 import genLoraIcon from "../images/paste.png"
 import genThumbIcon from "../images/portraits.png"
 import { TokenBox } from "../components/token-box/TokenBox"
 import TraitInformation from "../components/TraitInformation"
 import LoraCreation from "./LoraCreation"
 import SpriteCreation from "./SpriteCreation"
 import ThumbnailCreation from "./ThumbnailCreation"
+import Emotions from "./Emotions"
 
 export default function RightPanel({selectedTrait, selectedVRM, traitGroupName}){
     const [selectedOption, setSelectedOption] = React.useState("")
@@ -27,6 +29,7 @@ export default function RightPanel({selectedTrait, selectedVRM, traitGroupName})
             {selectedOption=="LoraCreation" && <LoraCreation selectedTrait={selectedTrait} selectedVRM={selectedVRM} />}
             {selectedOption=="SpriteCreation" && <SpriteCreation selectedTrait={selectedTrait} selectedVRM={selectedVRM} />}
             {selectedOption=="ThumbnailCreation" && <ThumbnailCreation selectedTrait={selectedTrait} traitGroupName={traitGroupName} />}
+            {selectedOption=="EmotionManager" && <Emotions />}
             <div className={styles["InformationContainerPos"]}>
                 <MenuTitle title="Tools" width={90} right={0}/>
                 <div className={styles["scrollContainer"]}>
@@ -71,6 +74,16 @@ export default function RightPanel({selectedTrait, selectedVRM, traitGroupName})
                         rarity={selectedOption == "ThumbnailCreation" ? "mythic" : "none"}      
                         />
                     </div>
+                     <div
+                            key={"Emotions"}
+                            onClick={()=>{setSelectedOptionString("EmotionManager")}}
+                        >
+                            <TokenBox
+                            size={56}
+                            icon={emotionIcon}
+                            rarity={selectedOption == "EmotionManager" ? "mythic" : "none"}      
+                            />
+                        </div>
                     </div>    
                 </div>
 

src/components/RightPanel.module.css

@@ -4,7 +4,7 @@
   right: 32px;
   top: 98px;
   width:90px;
-  height: 270px;
+  height: auto;
   backdrop-filter: blur(22.5px);
   background: rgba(5, 11, 14, 0.8);
   z-index: 1000;
@@ -19,7 +19,7 @@
   position: relative;
   overflow-x: hidden !important;
   margin: 16px;
-  height: 270px;
+  height: 300px;
 }
 .options-container {
   user-select: none;

src/context/SceneContext.jsx

@@ -1,16 +1,30 @@
 import React, { createContext, useEffect, useState } from "react"
 
 import gsap from "gsap"
-import { local } from "../library/store"
 import { sceneInitializer } from "../library/sceneInitializer"
 import { LoraDataGenerator } from "../library/loraDataGenerator"
 import { SpriteAtlasGenerator } from "../library/spriteAtlasGenerator"
 import { ThumbnailGenerator } from "../library/thumbnailsGenerator"
 
-export const SceneContext = createContext()
+export const SceneContext = createContext({
+    /**
+ * @typedef {import('../library/characterManager').CharacterManager} CharacterManager
+ * @type {CharacterManager}
+ */
+  characterManager: null,
+  /**
+   * @typedef {Object} MoveCameraParam
+   * @property {number} targetX
+   * @property {number} targetY
+   * @property {number} targetZ
+   * @property {number} distance
+   * @param {MoveCameraParam} _value
+   */
+  // eslint-disable-next-line no-unused-vars
+  moveCamera: (_value) => {},
+})
 
 export const SceneProvider = (props) => {
-
   const [characterManager, setCharacterManager] = useState(null)
   const [loraDataGenerator, setLoraDataGenerator] = useState(null)
   const [spriteAtlasGenerator, setSpriteAtlasGenerator] = useState(null)