Dragon Collector is a simple website for collecting awesome pixel art dragons. It uses real Mendelian genetics and image templates to create thousands of potential pixel dragons.
The site uses Mongoose, a Node.js server and backend, and an Angular 7 client. The Angular client uses TypeScript and RxJS.
The server heavily relies on promises to handle the many asynchronous operations, from uploading images to writing files to compositing dragons, in a standard way.
The dragon building process
Building dragons is split into server-side JS modules, away from the routers or client APIs. This way the logic is contained and more easily maintained. The entire frontend doesn't need to know anything about how the dragons are made.
Each dragon has sets of traits for the three things that are modeled with real genetics: the colors. The main, secondary and eye colors all have their own constituent set of traits.
The server analyzes the given set of traits and determines what color these traits would create. It then generates either a random shade of that color or one based on the color of the parents.
Next, it uses that color to shade several image files. These files are the main, secondary and eye areas on the dragon. Each image is colored independently according to its traits. The images, along with "masks" (non-colored parts, like horns or hooves), are composited together into a finished image.
This image is then saved to file and uploaded to Imgur. As a noncommercial, low-traffic product, this is an acceptable image host.
Finally, the image is deleted from the local server. All future versions are served from Imgur.
What's with the subfolder?
The db-code subfolder holds another git repository. While this repo excludes the .env file in db-code with all my passwords and client secrets, the sub-repo does not. The sub-repo is only for pushing deployments to Heroku with the .env.
This is not an ideal setup for a production app. It is, however, a simple way to keep the source code public without revealing the app's secret keys.
With unlimited time, I would like to add these features. I've already laid the groundwork for some of them.
- More locations
- A chart with traits listed to show the reproduction process
- Trading between users
- Lending a dragon to another user for breeding