In this blog post I will describe my experience of implementing a new feature into open-source browser based geolocation game.
GitHub link to the project.
The feature I implemented is well documented and can be accessed by this link.
Basically, the feature request is to add functionality for automatic switching between day and night modes in this web-app.
The best way to start was to carefully read issue opened on GitHub, because it already included a lot of tips on how to implement a solution. Everything I will write in this blog is mostly what author of that project offered to do in order to add this feature.
To begin with I determined what will be changed when game switches from day to night mode and vice versa. Changing display modes means set light colored map tiles, bridge icons and current location marker during the day and dark colored during night.
First of all, I carefully studied source code to understand what is going on “under the hood” and where I should start. Also, I decided to isolate all mode management code into its own module.
I needed application to switch modes on the fly. To achieve this, I used open-source SunCalc library to calculate times of sunrise and sunset based on current geolocation of the user. The function that checks if the mode should be changed is executed every 5 seconds. As soon as mode needs to be changed my newly created module emits named event, that other listeners receive and execute some code.
For simplicity I added some functions to module that renders UI. Those functions basically called functions from day-night-mode module to retrieve mode-suitable icons and updated UI.
The main problem was that code that renders map tiles and code that renders bridges’ icons are in two different places. That’s why I decided to add event listener into main module, which listeners to a ‘modeChange’ event and calls update functions from UI module and module that handles bridges and their markers on the map.
My pull request can be found here.
Here is the final result:
In conclusion, I found it to be a very useful experience. I found out about several open-source libraries such as Leaflet and SunCalc. I also enforced my knowledge of JavaScript, learned about asynchronous event-driven architecture and generally enjoyed contributing to this project.
aglazkov 