Help Me (Properly) Open-Source My Vanilla JavaScript Game Engine!
Tags: help, javascript, rails, devjournal
Published: 2019-09-08 23:57:08

---
title: Help Me (Properly) Open-Source My Vanilla JavaScript Game Engine!
published: true
description: overview and community invitation to help open-source my vanilla js game engine project
tags: help, javascript, rails, devjournal
series: "The Fire Mage: An Open Source Video Game Engine in Vanilla JavaScript"
---


# [The Fire Mage: A Vanilla JS Game Engine](https://github.com/isalevine/the-fire-mage-frontend)

![animated gif of “The Fire Mage” being played in browser](https://thepracticaldev.s3.amazonaws.com/i/1y4m9ajy5nemk242rvv1.gif)
*The game engine in action, with the proof-of-concept game ["The Fire Mage"](https://the-fire-mage.herokuapp.com)*

Several months back, [I wrote about making a video game engine in vanilla JavaScript](https://dev.to/isalevine/how-i-accidentally-made-a-game-engine-from-scratch-with-vanilla-js-4m80) (with a Ruby on Rails backend) as part of a coding bootcamp project. Since then, [I've deployed a working demo of the engine on Heroku](https://the-fire-mage.herokuapp.com/) and have been working to clean up the code. But long-term, my goal has been to make this an open source project--and now, I turn to you, my beloved Dev.to community, for help making this happen!

In this post, I want to review some of the work I've done on the codebase, what I *think* needs to happen to make it properly open-source (especially re: documentation), and seek feedback on other things to cover/include/do as part of the process. 

Currently, I'm just focusing on refactoring and documenting [the frontend repo](https://github.com/isalevine/the-fire-mage-frontend).

I'd love to hear your experiences and share resources about making a good open source project, so please contribute in the comments! :)



# What I've Been Doing
1. **I finally contributed to an open source project!** Special thanks to [Brittany Walker](https://dev.to/brittanyrw) for her wonderful project, [EmojiScreen](https://github.com/brittanyrw/emojiscreen), that helped me get my first pull request to an open source repo approved! [Read more about the project on her blog here.](https://dev.to/brittanyrw/make-your-first-pull-request-contribute-to-emojiscreen-3mfd)
	

1. **I started taking [notes on goals](https://github.com/isalevine/the-fire-mage-frontend/blob/master/REFACTOR_NOTES.md), a [changelog](https://github.com/isalevine/the-fire-mage-frontend/blob/master/CHANGELOG.md), and a [contribution guide](https://github.com/isalevine/the-fire-mage-frontend/blob/master/CONTRIBUTION_GUIDE.md).** I know good open source projects must have all three! However, I know I have a lot of work to do editing/cleaning up the notes, as well as finalizing a style for the changelog and contribution guide.
1. **I began refactoring code to follow a container-component-style pattern.** Inspired by the file structures from some of my React projects, the first changes I began making to the codebase were to move classes to their own files, and start creating containers to render them--essentially treating them as components! This has gone a long way toward breaking up the extra-long files with classes and helper methods, but has also become difficult to manage the necessary imports. *I'd love to get community feedback on this overall strategy, or about designing project file structures generally!*
1. **I created a few initial issues for the frontend's GitHub repo.** I picked a few of the most glaring issues with the engine right now, and made a few GitHub issues to help steer contributors toward them. However, I could use advice on both *choosing which issues to focus on* and *how to structure GitHub issues to help contributors!*
1. **[I've deployed a working demo of the engine!](https://the-fire-mage.herokuapp.com/)** I'm gonna keep shamelessly plugging this, so deal with it. (Or just go play it already!)  <3


# What I'd Like To Accomplish

1. **I want the code to be modular enough to be easily reused to make a new video game.** Right now the engine is more-or-less hardcoded with its proof-of-concept game, so breaking the code into smaller, reusable parts is the top priority--and eventually, how to load/run a script to initialize a game scenario.

1. **I want to keep all of the game engine's frontend code entirely in vanilla JavaScript, and write/refactor it according to best practices.** This project began as an ascetic quest to dive deep into vanilla JavaScript's DOM manipulation, and though I've learned a lot since then, I'm still just as interested in writing vanilla JS!
1. **I want to refine the interface so that it feels like playing a real-time strategy game like Warcraft II, its main inspiration.** This includes making the page/game container's interface more computer-game-like, adding a File and Help menu, displaying more in-game text and art, and eventually adding music and sound effects.
1. **I want to familiarize myself with working communally on an open source project!** I know I have a lot to learn, and this wonderful community has proven it's a great place to get a lot of friendly wisdom. <3



# What I'd Like Help With Right Now
1. **I need help with the content and structure of the contribution guide, changelog, and GitHub issues!** What are some of the best examples and formats for each that you've seen? What do you feel must *absolutely* be included in each?

1. **I'd like general advice on open-sourcing a project.** What things am I not thinking about? What do you wish you had known when creating your first open source project?
1. **I'd like guidance on how to open discussions about high-level goals.** One example is the component-container pattern I'm currently refactoring with--how would I go about proposing and getting feedback on it, before committing any changes to the master?
1. **Playtesting!** I'd love to get more people playing with (and breaking) the engine. :)


# Links to The Fire Mage

1. **Frontend Repo on GitHub:** 
[https://github.com/isalevine/the-fire-mage-frontend](https://github.com/isalevine/the-fire-mage-frontend)
1. **Frontend Demo on Heroku:** 
[https://the-fire-mage.herokuapp.com/](https://the-fire-mage.herokuapp.com/)
1. **Frontend Readme:** 
[https://github.com/isalevine/the-fire-mage-frontend/blob/master/README.md](https://github.com/isalevine/the-fire-mage-frontend/blob/master/README.md)
1. **Frontend Refactoring Notes/Goals:** [https://github.com/isalevine/the-fire-mage-frontend/blob/master/REFACTOR_NOTES.md](https://github.com/isalevine/the-fire-mage-frontend/blob/master/REFACTOR_NOTES.md)
1. **Frontend Changelog (draft):** 
[https://github.com/isalevine/the-fire-mage-frontend/blob/master/CHANGELOG.md](https://github.com/isalevine/the-fire-mage-frontend/blob/master/CHANGELOG.md)
1. **Frontend Contribution Guide (draft):** 
[https://github.com/isalevine/the-fire-mage-frontend/blob/master/CONTRIBUTION_GUIDE.md](https://github.com/isalevine/the-fire-mage-frontend/blob/master/CONTRIBUTION_GUIDE.md)
1. **Backend Repo on GitHub:** 
[https://github.com/isalevine/the-fire-mage-backend](https://github.com/isalevine/the-fire-mage-backend)


Thanks Dev.to community! <3