-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from memelotsqui/main
Update doc on missing pages
- Loading branch information
Showing
8 changed files
with
34 additions
and
351 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className={styles.container}> | ||
| ... | ||
| </div> | ||
| ) | ||
| ``` | ||
|
|
||
| **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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className={styles.container}> | ||
| {/* JSX structure */} | ||
| </div> | ||
| ) | ||
| ``` | ||
|
|
||
| **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 |
Oops, something went wrong.