Finally, my contribution is ready to be merged into the main branch of the project. After a bunch or research and testing, considering that this was the first project I worked on with Vue, everything should be good now. The project, Aibyss I worked on is game where the player/user have an AI controlled bot where they can write code to change how it behaves and survives against other AI controlled bots.
Issue: feat: add a button where it would zoom in closely to the bot and follows it.
This was an extension of an issue I worked on before, Zoom in feature. We decided, when I was working on that feature, to split it into 2. To reduce the scope of the issue. It was split into the just the zoom in feature and then the follow + zoom in which is the issue I worked on for this release.
So for this release I have to create a new function where it would make the camera follow the users AI controlled bot and zoom in closely to it based on its size. Since this was an extension of a previous issue I can use some of the functionality from that and integrate it for this release. Though I have to refactor the entire zoom in feature to be able to use for this release and make it generally usable for other potential features that might need it. While I'm at it the maintainer suggested to move it to a util file.
As for the follow feature, I have to grab the coordinate of the bot and use it to set the coordinate of the camera. This took me several iteration to do since I need to update the camera coordinates on each draw frame. To make it follow the bot smoothly. I also need the camera view go outside of the intended stage borders. So I need to adjust and compensate the coordinate so it doesn't go outside. The level of zoom in scale needs to be adjusted as well, based on the users bot size. The camera need to be on the right zoom in level so that bot isn't too large for the zoom in camera view.
Final demo:
This release wasn't free of any issue. We encounter an error which we could not figure out what's causing it. I have a work around it but it is not ideal and preferred that the error is resolved.
Error:
My investigation lead me to a certain line being considered null when first loading the page, but they have been initialized and has values before the error happens. Unless other actions was performed first, like zooming in with mouse wheel, then everything works fine. For now were considering it as a bug with Vue since everything should be initialized but something is considering them or something else as null.
What I learned
To start with, I learned to worked with Vue, some of the Tailwind Css and Typescript. I never worked on these stuff before and happy to include these to my technical skills. Though the most important thing I learned from this is how to work with another person. For this one, I got lucky to have a communicable maintainer for this open source project. He was patient with me, considering that I'm new to Vue and typescript. I like how strict he was with the additions I making. This made me more thorough on how I'm doing my code and everything should follow their coding standards. It made me take this more seriously and I should consider this as professional work.
I also learned from this the importance of a well defined specifications, which I wish this one had. Most of the on this release I worked on assumptions on what should be included or not. After I made a pull request the maintainer added suggestions and modifications, which I'm happy to do, but it extend the time when my PR can be merge into main. This lead to unnecessary time wasted since I could be working for all of these from the beginning or between iterations. Especially since communication time between each input is at least a day.
Overall, this was a great learning experience for me and not to get intimidated by something new. At first I was scared to work on this, but it turns out it wasn't that bad. Just needed to take the first step for it and the everything becomes easy. The first step is always the hardest.
Top comments (0)