100% Orange Juice Avatar Creator is a fully online avatar creator in your web browser that tries to accurately recreate the same avatar info from the game 100% Orange Juice allowing you to try all single possible outfit combinations for all your favorite characters without needing to spend a single orange or a star!
https://pixepchief.github.io/100oj/
Here're some of the project's best features:
- All characters from the latest version of the game!
- Different poses and unit colors combinations!
Sadly, the only thing that I couldn't get right for the website is the hair, as they have alpha masks and I have no experience of modding the game to create hair gradients, and as of my current knowledge, there's no possible way to extract all the hair gradient colors from the game. If there's anyone willing to help me with this, feel free to shoot me a message at @pixepchief on Discord.
There are a few things that needs to be fixed, such as:
A few characters not working due to having different outfits (Hime for example)- Unique characters where there's two characters in one (Chef & Chris, Tomato & Mimyuu, Cuties)
If the major bugs get fixed, then I will get started working on the following with no particular order:
- Adding secondary colors
- Adding hair colors
- Adding accessories
- Adding glasses
- Adding pets
- Adding a view of the cost of your outfit
1. Clone the project
git clone https://github.com/pixepchief/100oj
2. That's it! The code is entirely in Tailwind CSS and HTML so no need to run anything else.
To start the project, simply open the file "index.html".
If you want to edit the project for yourself, and you want to integrate your modded characters into the website or anything of the sort, the entire website depends on a file named "characters.json" which gets generated by the "jsonGen.py" file by taking a look into the characters folder. To my knowledge, there are no depedencies that are required.
To generate characters.json, use the following command:
python ./jsonGen.py
Technologies used in the project:
- HTML 5
- Tailwind CSS
- JavaScript
- Python