World of Wonders is a Minecraft server that creates themeparks artistically and as realistic as possible. Its a place where friends can hang out, and us, as volunteer creators, can try out things we would like to learn. One of the things we provide in this project, is an experience with music. When riding a coaster, the actual music can be heard. Minecraft doesn’t provide this feature, so we had to improvise.
Someone else created the backend of the app, the code that lets you hear the actual music when riding the coasters. My job of this project was the front-end. The base of this app is being able to change the volume of the music, so i added a volume slider. Using ReactJS with TypeScript and TailwindCSS I was able to make the development much easier.
Later during the development of the project we wanted to add a park map. People should be able to navigate through the parks and see where they could locate points of interests. Using LeafletJS I was able to create a custom map with custom markers. The last problem was that the complete map had to be loaded as one big image, which got very slow on poor internet connections. Luckily LeafletJS has a built in tile feature, I only needed to generate tiles from the big image with a custom TileMapService in Python.
For my hobby project World of Wonders I made a complete WebClient where users can listen to the audio from the Minecraft server and can see their live location on the park map. Using the framework React and library LeafletJS it was possible to show markers and areas on the map and to make them responsive on how zoomed in the user is. After an update I managed to create my own TileMapService with this custom map, which optimized the application a lot. Some additional changes I added later are being able to see other persons on the map, an indicator that shows whether they are AFK and a nighttime map.
While working on this project I learned a lot about the less basic stuff of ReactJS and TypeScript. For example Context Providers, a debug system, eventListeners, localStorage, and dividing code into independent components.
