From 9206496253a8bfa8e8a4bf98efabd47d8abe76e3 Mon Sep 17 00:00:00 2001 From: memelotsqui Date: Fri, 1 Mar 2024 22:05:14 -0600 Subject: [PATCH] upadte pages --- .../Managers/sprite-atlas-generator.md | 2 +- docs/Developers/Pages/appearance.md | 2 +- docs/Developers/Pages/batch-download.md | 19 --- docs/Developers/Pages/batch-manifest.md | 19 --- docs/Developers/Pages/load.md | 69 ++--------- docs/Developers/Pages/mint.md | 79 +----------- docs/Developers/Pages/optimizer.md | 114 +++--------------- docs/Developers/Pages/view.md | 81 +------------ 8 files changed, 34 insertions(+), 351 deletions(-) diff --git a/docs/Developers/Managers/sprite-atlas-generator.md b/docs/Developers/Managers/sprite-atlas-generator.md index 50019d88..adf80197 100644 --- a/docs/Developers/Managers/sprite-atlas-generator.md +++ b/docs/Developers/Managers/sprite-atlas-generator.md @@ -24,7 +24,7 @@ Properties for `Sprite Atlas Generator` are not meant to be edited directly, the The blink manager used for managing blinking animations. -- `.animationManager: Object**` +- `.yarnanimationManager: Object**` The animation manager used for loading and managing animations. diff --git a/docs/Developers/Pages/appearance.md b/docs/Developers/Pages/appearance.md index 5f2787af..0f94fcb7 100644 --- a/docs/Developers/Pages/appearance.md +++ b/docs/Developers/Pages/appearance.md @@ -6,7 +6,7 @@ To Access this menu, go to `Create Character` menu button, then select any optio **Summary** -The `Appearance` component, allows you to load and select different character traits (models), animations, and textures, as well as entering debug mode and fine tune details on your avatar. It provides buttons based on a pre-defined `character-manifest` to dress-up and customize your character. +The `Appearance` page, allows you to load and select different character traits (models), animations, and textures, as well as entering debug mode and fine tune details on your avatar. It provides buttons based on a pre-defined `character-manifest` to dress-up and customize your character. **Logic** diff --git a/docs/Developers/Pages/batch-download.md b/docs/Developers/Pages/batch-download.md index 85f9ec09..7621b9d9 100644 --- a/docs/Developers/Pages/batch-download.md +++ b/docs/Developers/Pages/batch-download.md @@ -13,25 +13,6 @@ Once these nft json objects are added, for each json file dropped, user may prev *Important note* If multiple files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser -**Import Statements** - -```jsx -import React, { useContext, useEffect, useState } from "react" -import styles from "./Optimizer.module.css" -import { ViewMode, ViewContext } from "../context/ViewContext" -import { SceneContext } from "../context/SceneContext" -import CustomButton from "../components/custom-button" -import { LanguageContext } from "../context/LanguageContext" -import { SoundContext } from "../context/SoundContext" -import { AudioContext } from "../context/AudioContext" -import FileDropComponent from "../components/FileDropComponent" -import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils" -import JsonAttributes from "../components/JsonAttributes" -import ModelInformation from "../components/ModelInformation" -import MergeOptions from "../components/MergeOptions" -import { local } from "../library/store" -``` - **Logic** For this component we want the user to be able to drag and drop a file with `FileDropComponent` and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly. diff --git a/docs/Developers/Pages/batch-manifest.md b/docs/Developers/Pages/batch-manifest.md index 17c41e25..ecfeae64 100644 --- a/docs/Developers/Pages/batch-manifest.md +++ b/docs/Developers/Pages/batch-manifest.md @@ -16,25 +16,6 @@ The user can batch the process to download a preview image with the `initialTrai *Important note* If multiple images/files are not being downloaded, browser might not support/allow this feature. Please switch to a web browser that support this feature (Chrome), or allow it on your current browser -**Import Statements** - -```jsx -import React, { useContext, useEffect, useState } from "react" -import styles from "./Optimizer.module.css" -import { ViewMode, ViewContext } from "../context/ViewContext" -import { SceneContext } from "../context/SceneContext" -import CustomButton from "../components/custom-button" -import { LanguageContext } from "../context/LanguageContext" -import { SoundContext } from "../context/SoundContext" -import { AudioContext } from "../context/AudioContext" -import FileDropComponent from "../components/FileDropComponent" -import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils" -import JsonAttributes from "../components/JsonAttributes" -import ModelInformation from "../components/ModelInformation" -import MergeOptions from "../components/MergeOptions" -import { local } from "../library/store" -``` - **Logic** For this component we want the user to be able to drag and drop a file with `FileDropComponent` and detect wether the user dropped Manifest file (.json), animation file (.fbx) or .vrm file to start the batch download process accodrdingly. diff --git a/docs/Developers/Pages/load.md b/docs/Developers/Pages/load.md index aabfa8cb..13f725e2 100644 --- a/docs/Developers/Pages/load.md +++ b/docs/Developers/Pages/load.md @@ -1,71 +1,16 @@ # Load -The `Load` component is a part of a React application that interacts with the Ethereum blockchain. It allows users to connect their Ethereum wallet, fetches the NFTs (Non-Fungible Tokens) owned by the user, and displays them. The user can then select a character (NFT) to load. The component also provides audio feedback based on the user's actions and allows the user to navigate back to the landing page. +(wip) The `Load` page is currently hidden, but should be accessible from the `Landing` page to allow user quickly load their saved characters. -In simpler terms, this component is like a personal locker for users where they can see all the unique digital assets (NFTs) they own. They can connect their digital wallet, see their assets, and choose one to interact with. +**Summary** -**Imports** +The `Load` page allows to load an existing character from your wallet or page preferences into the character studio viewer. -```jsx! -import React, { useEffect, useState } from 'react'; -import styles from './Load.module.css'; -import { ethers } from 'ethers'; -import { useWeb3React } from '@web3-react/core'; -import { InjectedConnector } from "@web3-react/injected-connector" -import { ViewContext, ViewMode } from '../context/ViewContext'; -import { SoundContext } from "../context/SoundContext" -import { AudioContext } from "../context/AudioContext" -``` -The component imports necessary libraries and contexts. `ethers` is a library to interact with Ethereum blockchain. `useWeb3React` and `InjectedConnector` are used to connect to the user's Ethereum wallet. `ViewContext`, `SoundContext`, and `AudioContext` are React contexts used to manage global state related to view mode, sound, and audio settings. +**Functions** +- `loadCharacter`: loads target character with given string, it searched in user preferences cache to get this data. -**Component State and Contexts** +- `connectWallet`: Connects Wallet to fetch nfts from a collection (wip) -```jsx! -function Load() { - const { account, library, activate } = useWeb3React(); - const [characters, setCharacters] = useState([]); - const { setViewMode } = React.useContext(ViewContext); - const { playSound } = React.useContext(SoundContext) - const { isMute } = React.useContext(AudioContext) - ... -} -``` - -The component uses `useWeb3React` to get the user's Ethereum account, the Ethereum library instance, and the `activate` function to connect the wallet. It also uses `useState` to manage a local state `characters` which stores the NFTs owned by the user. It uses `useContext` to get the necessary functions and values from the global state. - -**Fetching NFTs** - -```jsx -useEffect(() => { - ... -}, [account, library]); -``` - -The `useEffect` hook is used to fetch the NFTs owned by the user whenever the `account` or `library` changes. It interacts with a smart contract on the Ethereum blockchain to get the balance and details of each NFT. - -**Wallet Connection and Character Loading** - -```jsx! -const connectWallet = () => { - activate(injectedConnector) -} - -const loadCharacter = (character) => { - !isMute && playSound('backNextButton'); - setViewMode(ViewMode.APPEARANCE) -} -``` - -The `connectWallet` function is used to connect the user's Ethereum wallet. The `loadCharacter` function is used to load a selected character (NFT), play a sound if not muted, and change the view mode to `APPEARANCE`. - -**Rendering** - -```jsx! -return ( - ... -); -``` - -The component renders a message to connect the wallet if not connected, a list of characters (NFTs) owned by the user, and a back button to navigate back to the landing page. The styles are applied using CSS modules. +- `back`: Goes back to the previous menu. \ No newline at end of file diff --git a/docs/Developers/Pages/mint.md b/docs/Developers/Pages/mint.md index d98cf312..acffd1d2 100644 --- a/docs/Developers/Pages/mint.md +++ b/docs/Developers/Pages/mint.md @@ -1,82 +1,15 @@ # Mint -The `MintComponent` is a React component that provides the functionality for minting a digital asset. In layman's terms, it's like a factory machine interface where you can create your own unique digital item (like a character in a game). This component handles the process of creating the item, showing the status of the creation process, and providing buttons to navigate to other parts of the application. +(wip) The `Mint` Page is currently hidden, but should be accessed after user finished creating his character from the appearance menu. -**Imports** +**Summary** -The component imports several dependencies, including styles, contexts, a custom button component, and a utility function for minting assets. - -```jsx! -import React from "react" -import styles from "./Mint.module.scss" -import { ViewMode, ViewContext } from "../context/ViewContext" -import { SceneContext } from "../context/SceneContext" -import CustomButton from "../components/custom-button" -import { SoundContext } from "../context/SoundContext" -import { AudioContext } from "../context/AudioContext" -import { mintAsset } from "../library/mint-utils" -``` - -**Component Definition** - -The `MintComponent` is a functional component that takes a `getFaceScreenshot` prop. It uses several contexts to get and set various application states. - - -```jsx! -function MintComponent({getFaceScreenshot}) { - const { templateInfo, model, avatar } = React.useContext(SceneContext) - const { setViewMode } = React.useContext(ViewContext) - const { playSound } = React.useContext(SoundContext) - const { isMute } = React.useContext(AudioContext) - ... -} -``` - - -**State Variables** - -The component uses two state variables: `status` to store the current status of the minting process, and `minting` to store whether the minting process is currently ongoing. - -```jsx! -const [status, setStatus] = React.useState("") -const [minting, setMinting]= React.useState(false) -``` +The `Mint` Page purpose is to allow the user an easy way to mint into an existing collection their selected character. **Functions** -The component defines several functions: +- `back`go back to the previous page. -- `back` and `next` are used to navigate to other views in the application. -- `MenuTitle` is a sub-component that renders the title of the menu. -- `Mint` is an asynchronous function that handles the minting process. - -```jsx! -const back = () => {...} -const next = () => {...} -function MenuTitle() {...} -async function Mint(){...} -``` - -**Render** - -The component returns a JSX structure that includes: - -- A title for the section. -- A container for the minting process, which includes the `MenuTitle` sub-component, two `CustomButton` components for the minting options, and a status message. -- A container for navigation buttons. +- `next` move forward to the next page. -```jsx! -return ( -
- ... -
-) -``` - -**Export** - -Finally, the `MintComponent` is exported for use in other parts of the application. - -```jsx! -export default MintComponent -``` +- `Mint` is an asynchronous function that handles the minting process. diff --git a/docs/Developers/Pages/optimizer.md b/docs/Developers/Pages/optimizer.md index 1e13817b..133ba0be 100644 --- a/docs/Developers/Pages/optimizer.md +++ b/docs/Developers/Pages/optimizer.md @@ -1,115 +1,29 @@ # Optimizer -The `Optimizer` component is a part of a React application that provides an interface for users to optimize their 3D character models. Users can drop their character files into the component, which then processes the file, optimizes it, and allows the user to download the optimized version. The component also provides options for merging and creating texture atlases, and displays information about the current model. +You can access this page by going to `Optimize Character` menu button. -In layman's terms, this component is like a workshop for 3D character models. Users can bring their models in, tweak some settings, and then get a more optimized version of their model to use in their projects. +**Summary** -**Imports** +The `Optimizer` page, allows you to drag and drop an existing vrm file and add optimzation options, such as reducing meshes, manual face culling, reducing material count, and reducing file size by applying sparse accessors to expression shapes. -The component imports various hooks from React, styles, contexts, components, and utility functions from different modules. +It uses the drag and drop component to allow the user to drop any vrm file model or animation file into the window. -```jsx! -import React, { useContext, useEffect, useState } from "react" -import styles from "./Optimizer.module.css" -import { ViewMode, ViewContext } from "../context/ViewContext" -import { SceneContext } from "../context/SceneContext" -import CustomButton from "../components/custom-button" -import { LanguageContext } from "../context/LanguageContext" -import { SoundContext } from "../context/SoundContext" -import { AudioContext } from "../context/AudioContext" -import FileDropComponent from "../components/FileDropComponent" -import { getFileNameWithoutExtension, disposeVRM, getAtlasSize } from "../library/utils" -import ModelInformation from "../components/ModelInformation" -import MergeOptions from "../components/MergeOptions" -import { local } from "../library/store" -``` +**Logic** -**Component Definition** +For this component we want the user to be able to drag and drop a file with `FileDropComponent` and detect wether the user dropped an nft json file (.json), animation file (.fbx) or .vrm file to start the optimization process. -The `Optimizer` component is defined as a functional, no props are required. +**Pre-process Functions:** -```jsx! -function Optimizer() { - // Component body -} -``` +- `handleFilesDrop`: Function to detect wether the user dropped a manifest, animation, or vrm file(s). -**State and Context** +- `handleVRMDrop`: User dropped a VRM file, load the vrm file into the current view. (if multiple files are added, only the first one will be used) -The component uses several pieces of state and context to manage its behavior and data. +- `handleAnimationDrop`: User dropped an animation file, load the animation into the current displayed character, if no vrm or manifest has been added, this will have no effect. (if multiple files are added, only the first one will be used) -```jsx! -const { - isLoading, - setViewMode -} = React.useContext(ViewContext) -const { - characterManager, - animationManager, - sceneElements, - loraDataGenerator, - spriteAtlasGenerator -} = React.useContext(SceneContext) -const { playSound } = React.useContext(SoundContext) -const { isMute } = React.useContext(AudioContext) +**Process Functions:** -const [model, setModel] = useState(null); -const [nameVRM, setNameVRM] = useState(""); -``` -*characterManager* is the class that holds the logic to load/append vrm models and custom character manifests. +- `download`: Start optimization and download process for current loaded character. -*animationManager* is the class that holds the logic to load animations to current loaded traits. +**Util Functions:** -*sceneElements* all the elements within the scene that dont belong to the character traits. - -*loraDataGenerator* is the class that holds the logic to create lora data from loaded vrm files. - -*spriteAtlasGenerator* is the class that holds the logic to create 2d animated sprites and spritesheets from the currently loaded vrm files. - - - - -**Helper Functions** - -Several helper functions are defined within the component to handle various tasks such as getting options, downloading the VRM, handling file drops, and more. - -```jsx! -const back = () => { /* Function body */ } -const getOptions = () => { /* Function body */ } -const download = () => { /* Function body */ } -const handleAnimationDrop = async (file) => { /* Function body */ } -const handleVRMDrop = async (file) => { /* Function body */ } -const handleFilesDrop = async(files) => { /* Function body */ }; -``` - -**useEffect Hook** - -A `useEffect` hook is used to perform side effects when the `currentVRM` state changes. - -```jsx! -useEffect(() => { - const fetchData = async () => { /* Function body */ } - fetchData(); -}, [currentVRM]) -``` - -**Render** - -The component returns a JSX structure that includes a loading indicator, a section title, a `FileDropComponent`, a `MergeOptions` component, a `ModelInformation` component, and a set of `CustomButton` components. - - -```jsx! -return ( -
- {/* JSX structure */} -
-) -``` - -**Export** - -Finally, the `Optimizer` component is exported for use in other parts of the application. - -```jsx -export default Optimizer -``` +- `back`: Go to the previous menu diff --git a/docs/Developers/Pages/view.md b/docs/Developers/Pages/view.md index 13f42829..22c32203 100644 --- a/docs/Developers/Pages/view.md +++ b/docs/Developers/Pages/view.md @@ -1,83 +1,12 @@ # View -The `View` component is a part of a React application that handles the user interface for a chat feature. It uses various contexts to manage state and behavior, such as view mode, sound, audio, and language settings. The component also controls a microphone feature and speech recognition. In layman's terms, this component is like the control center for a chat room where users can interact with each other, and it manages how the chat room looks, sounds, and behaves. +This menu is currently hidden, but it can be shown after character bio page, after the personality of the character has been selected. -**Imports** +**Summary** -```jsx! -import React, { useContext } from "react" -import styles from "./View.module.css" -import { ViewMode, ViewContext } from "../context/ViewContext" -import Chat from "../components/Chat" -import CustomButton from "../components/custom-button" -import { LanguageContext } from "../context/LanguageContext" -import { SoundContext } from "../context/SoundContext" -import { AudioContext } from "../context/AudioContext" -``` +The `View` page, allows you to chat with the current created character, turning on the `Chat` component and allowing microphone to be used. -The component imports necessary modules, styles, and contexts. `useContext` is a React hook that allows the component to access the state and functions provided by the imported contexts. +**Util Functions:** -**Component Function** +- `back`: Go to the previous menu -```jsx! -function View({templateInfo}) { - ... -} -``` - -The `View` component receives `templateInfo` as a prop. - - -**State and Context** - - -```jsx! -const { setViewMode } = React.useContext(ViewContext) -const [micEnabled, setMicEnabled] = React.useState(false) -const [speechRecognition, setSpeechRecognition] = React.useState(false) -const { playSound } = React.useContext(SoundContext) -const { isMute } = React.useContext(AudioContext) -const { t } = useContext(LanguageContext); -``` - -The component uses several pieces of state and context: - -- `setViewMode`: A function from `ViewContext` to change the view mode. -- `micEnabled` and `setMicEnabled`: State variables to manage the microphone status. -- `speechRecognition` and `setSpeechRecognition`: State variables to manage the speech recognition status. -- `playSound`: A function from `SoundContext` to play a sound. -- `isMute`: A state variable from `AudioContext` to check if the audio is muted. -- `t`: A function from `LanguageContext` to translate text. - -**Back Function** - -```jsx! -const back = () => { - setViewMode(ViewMode.SAVE) - !isMute && playSound('backNextButton'); - if (speechRecognition) - speechRecognition.stop() - setMicEnabled(false) -} -``` - - -The `back` function changes the view mode to `SAVE`, plays a sound if audio is not muted, stops speech recognition if it's active, and disables the microphone. - -**Render** - -```jsx -return ( - ... -) -``` - -The component renders a chat interface with a title, a `Chat` component, and a `CustomButton` component. The `Chat` component receives several props related to the microphone and speech recognition. The `CustomButton` component is configured to act as a back button. - -**Export** - -```jsx -export default View -``` - -The `View` component is exported for use in other parts of the application.