The Fire Mage: A Vanilla JS Game Engine

The game engine in action, with the proof-of-concept game "The Fire Mage"

Several months back, I wrote about making a video game engine in vanilla JavaScript (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 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.

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 for her wonderful project, EmojiScreen, that helped me get my first pull request to an open source repo approved! Read more about the project on her blog here.

2. I started taking notes on goals, a changelog, and a contribution guide. 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.

3. 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!

4. 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!

5. I've deployed a working demo of the engine! 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.

2. 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!

3. 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.

4. 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?

2. 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?

3. 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?

4. 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
2. Frontend Demo on Heroku: https://the-fire-mage.herokuapp.com/
3. Frontend Readme: https://github.com/isalevine/the-fire-mage-frontend/blob/master/README.md
4. Frontend Refactoring Notes/Goals: https://github.com/isalevine/the-fire-mage-frontend/blob/master/REFACTOR_NOTES.md
5. Frontend Changelog (draft): https://github.com/isalevine/the-fire-mage-frontend/blob/master/CHANGELOG.md
6. Frontend Contribution Guide (draft): https://github.com/isalevine/the-fire-mage-frontend/blob/master/CONTRIBUTION_GUIDE.md
7. Backend Repo on GitHub: https://github.com/isalevine/the-fire-mage-backend

Thanks Dev.to community! <3