Skip to content
No description, website, or topics provided.
JavaScript TypeScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
db-code Removes test code Feb 13, 2019
images Fixes imagebuilder and creates images at dragon gen Jan 8, 2019
.DS_Store Connected services still in progress Feb 10, 2019
.gitignore Ignore pngs Jan 8, 2019 Adds link to readme Feb 15, 2019
db.code-workspace Adds workspace file for VS Code Jan 22, 2019

Dragon Collector

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.

Tech stack

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.

Planned features

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
You can’t perform that action at this time.