For this lab, we were asked to implement a solution for a day/night scheme for Professor David Humphrey’s app. The issue he created is here, and asks for an automatic solution without the use of a button, that will change the lighting setting of the app according to the time of day in your location.
Professor Humphrey mentioned an open source tool called Suncalc, so I set out to use it. It wasn’t very difficult to incorporate into the app, but the only major issue I had was actually figuring out where to put it. I started the lab late, and after looking through the solutions my classmates had already posted, I realized that there had been many commits in the repo I forked to start off, versus their repos. Thus, I first inspected the code in the src folder, and eventually figured out that the map was initialized in the map/base-ui.js file. In there, I included Suncalc, determined if the current hour was after sunrise, or sunset, and used it to change the Leaflet map system to a darker map. I thought I was all done, until I reread the instructions, and realized I needed to import that code into a separate module, which I called lighting. After fixing that up, I set out to change the current location icon color (I initially thought it had disappeared, because I couldn’t see it with the black theme). I did this by including a nightMode variable inside lighting, as well as a getter function.
Back in my base-ui.js file, I realized that changing the icons might not be as easy as I thought. For starters, I had no idea where to get the icons from. I looked at the SVG icons inside the icons folder, and looked at the actual svg files, and was utterly confused. Then, after a few seconds of staring at the fill color item, I decided to simply change it to “white”, and see if my icon turned white. And voila, it actually did!
So, I created some new SVG’s for the location, locked, and unlocked icons, and saved them with the others. Now, instead of just using the regular location icon to mark the current location in the map, this logic determines whether to use the black or white icon depending on the nightMode of the map:
Similar logic is implemented inside the troll-bridge.js file, for the locked and unlocked bridges icons (it took me some time to find that code). And thus, I (hope I) have implemented a fix for the lighting issue. My code repo is here: Issue 6. Overall, I’d say this was a very interesting lab. I’m glad to have learned a bit more about working with node.js through this lab, and using test suites like eslint and prettier was pretty cool as well. Thank you for reading.
Zed's Open Source Blog 