@superheroyrr

Just finished my second contribution, sorry for not documenting it in more detail if you like that. Basically what I’ve done now is added for iCalendar files (*.ics) to be added to the calendar widget that is builtin.
ㅤ
iCalendar files are a pretty universal way to add event to different calendars, heck the “big 3” (Google Calendar, Apple Calendar, and Microsoft Outlook) of calendar apps all support it. So, it is a fairly important thing to have.
ㅤ
I was motivated to add this because I wanted to add my own *.ics files to the Noctalia calendar, but couldn’t due to this limitation. But not anymore! (that is if they merge my PR)
ㅤ
What’s crazy is that while I was writing my PR, someone else literally made another PR that was also editing the calendar code, what a coincidence! I don’t think that our 2 PR’s will conflict with each other since we were editing different parts of it as well!

For this update, I have done 3 things:

• Added a small outline circle to distant objects so that they are more visible.
• made it so you can click inside of these circles or on the planet to zoom into it
• Added a trail behind each planet.

These past ~2.5 hours have been spent on some quality of life features for the app. Mainly these 3:

1. Made every object 5x bigger than its real life size because it turns out the solar system is such a big place, that you kind of have to. Otherwise everything looks too small.
2. Made it so when you switch between planet it has a quick transition period.
3. Added textures to every planet and the sun. This was actually the hardest part, I had to play around with the settings because it would usually apply the texture sideways, or distort it but I got it working anyways.

So in this devlog I’ve done quite a few things to make the overall experience nicer:
ㅤ

• Added a way to pin one object to the center of the screen.
• Added the Moon and the rest of the planets in the solar system
• Switched from using light minutes to light seconds for distance measurements because the light minutes values were WAY too small

Another annoying bug I had to fix:

So there was this bug where the moon would pretty much always just fly out into the abyss as if there was zero gravity applied to it. It was pretty annoying to find out that it because I was using C++‘s float type instead of double.
ㅤ
What’s the difference? Well basically float gives about 7 decimal points of precision, while double gives about 15. I initially started with float because it is half the memory size of double and in my experience, float gets the job done like 99% of the time.
ㅤ
However, it turns out I did need more than 7 decimal points. This is because the gravitational force experienced by the Moon is very small, like around 10^-12 (thats 0.(eleven zeroes…)1). Since float can’t hold that value, it just rounded it to zero, causing the moon to fly out in a straight line forever. I’ll be honest, it wasn’t me who figured that out, it was Gemini who did, but pretty much everything else in this devlog was made by me.
ㅤ
It’s crazy how such a small difference of like 10^-12 can make on a physics engine like this! I hope I don’t have to then switch to C++‘s long double, which has even more precision, that would be insane if I had to go that extreme. I probably would have had to if I didn’t switch from light minutes to light seconds lol.

I got gravity simulation working! Now the Earth is spinning around the Sun!
ㅤ
I know you can’t see it in the video I posted, but the Earth is there, it’s just that this simulation is drawn to scale, the Earth would actually barely be visible if you were looking from a spacecraft that far away.
ㅤ
This took quite a while because of this one really stupid bug: basically I store all the distance values in light minutes rather than kilometers or miles because otherwise those values would be too big. However, the physics equations that I’m using expect the values to be in meters, not light minutes.
ㅤ
So basically, I forgot to convert from light minutes to meters when calculating the gravity acceleration, so those values were too small to change the velocity of the Earth, causing it to go in a straight line forever.
ㅤ
But now that that is done, I will start adding the rest of the planets and maybe their moons as well to this simulation, then I can look purely at quality of life improvements to improve the interactivity of it.
ㅤ
This project is turning out to be easier than I expected! Hopefully another challenge doesn’t pop up…

So I got this cool C library called adjust.h setup for hot code reloading. This means that I can update the code while it’s running, and the changes show up in real time! I know that I am making this a web app, but because the module doesn’t work on web, I will prototype the app on desktop for now.

So in this devlog, I have set up the project with all of its dependencies, it really can take that long when you’re using C++! Right now I just have a basic testing window, but I will quickly fill it in with a preset of the solar system soon, then I’ll be writing physics code for a while.

Flashback to when I said:

At the very least, I feel confident that this project is complete enough to be submitted now…

Yeah clearly that did NOT happen.
ㅤ
So I tried using my own app for its intended purpose on my own, and I ran into a crazy weird bug: sometimes when switching between the main page and connection page, it would duplicate the units that were selected.
ㅤ
What’s weirder is that it seemed to only affect the enemy units and not the your list…
ㅤ
It took me about 2 hours of debugging (unfortunately most of which was on Chrome DevTools debugger, so it didn’t count for stardance 😞) to finally find out the root cause.
ㅤ
The root cause was in how React.js handles refreshing data. So basically, whenever the data in my program changes (ie: the user hits next or start calculation on the connections page), it gets saved to the sessionStorage, after being processed into certain format. It saved the “your” unit lists then the “enemy” unit lists to the sessionStorage.
ㅤ
In the function that saves it to the sessionStorage, it has a local variable that is supposed to have the current data, which is normal. How it works is that the it sort of takes local variable and overrides the specific changes on top of it, then saves the whole thing to sessionStorage.
ㅤ
However, because it was using a React method to get the current data, it doesn’t immediately update itself, only updates when a new frame is drawn to the screen… So when the higher level code then tried to save the your unit list, the local variable was out of date, and applied the changes on top of an out of date data and then saved that to the sessionStorage.
ㅤ
This caused problems when switching between tabs since sessionStorage is the lifeline of the communication between them. I got around this problem by basically saving all of the data in one go instead of saving one part then the next part.
ㅤ
This was very frustrating to debug by myself but it feels rewarding now that I’ve done it. NOW I will submit this. My family is starting a roadtrip tomorrow morning so I won’t be able to code for a few days, I really want to get this off my plate before then.
ㅤ
Here’s my debugging setup I used for this:

So immediately after deploying the previous change there was a simple type error that made the whole thing fail 🤦‍♂️. This could have been easily avoided if I just ran npm run build before pushing, I think I will do that from now on.
ㅤ
I also added a button on the connections page to go back to the main page, I had to go through 2 deployments for this change as well because on the first attempt, I accidentally put the button underneath the tutorial button on mobile lol.
ㅤ
At the very least, I feel confident that this project is complete enough to be submitted now, I am really excited to move on to another cooler project.

Ok so now I fixed that bug which the guy from discord was talking about (at least probably). The problem they had was that when switching between the connections page and the main page, it would sometimes clear out all of the entered information.
ㅤ
This problem was not occurring for me or my friend, so I was a bit confused on why this could be. After a bit of research (basically talking to my friend gemini), it turns out that the previous method I was using for this, React.js context, was not designed for this use case and is fairly fragile about the data it holds.
ㅤ
A simple refresh will clear out the data, and sometimes mobile browsers can aggressively do this. The person who reported the bug was also one of the people who asked for mobile support, so they were probably on mobile and it happened. For some reason, my phone wouldn’t cause this to happen so I didn’t catch that bug.
ㅤ
So now, instead of React.js’s context api, I swapped to using the browser’s sessionStorage api, which is supposed to be much more reliable and also keeps the data intact after a fully refresh! I will now ask that guy if the problem is fixed.

So for this devlog, I added information about how to report bugs and give feature requests. It is pretty low-tech, but it gets the job done.
ㅤ
I also made the handle bars of the connections page on mobile bigger, so it isn’t as annoying to use.

I just finished this really cool interactive tutorial!!
ㅤ
I’ll be honest, I vibe coded like 80% of this part, than made various tweaks and changed the wording of the different steps so that they make more sense (at one point Claude literally called the doctrines “numbers” lol if you played this game, you would know that they are NOT numbers. FYI they are the “Allies/Comintern/Axis/Pan-Asian” drop downs).
ㅤ
Somehow, I was able to get that 80% done with just the free tier of the Claude web app chat. It was REALLY annoying because I kept running into usage limits, which is why it took this long to make. If someone could suggest some other tool that’s free and is much easier that would be appreciated.
ㅤ
What’s really crazy is that I was able to just give it the link to the github repo, told it to make an interactive tutorial and it just started working on it, that too on the free tier! It was very surprising how good a result it created from the first go and how much critical thinking it showed.

Now, I did say that I would be done with this once I made the tutorial, but I really want to do some other small things first and also add information about how to report bug/give feedback on the website. Also, someone on the game’s discord server pointed out what might be a bug, or a flaw in the app so I should fix that as well.
ㅤ
Jeez, I’ve been telling myself “oh wow, I’m so close, I should be able to finish it today” for what feels like a week now, but seriously, I should be done with this today or tomorrow. (hopefully I didn’t jinx it again).

So it turns out there is also level 2 and level 3 marines and snipers, along with level 2 flame tanks that exist in the game, which I didn’t realize earlier.
ㅤ
So in this session, I added those pieces of data to the app, and they can be used in calculations now. Holy this required 2,400 lines of code apparently
ㅤ
(I used the script at src/data/units/synthesiser.ts to estimate the statistics of the other doctrines, since I don’t have access to them, it’s usually pretty accurate with the predictions so it should be fine).
ㅤ
Now I will work on the tutorial tomorrow and I should be done with this!

It turns out that the Call of War devs added another new unit to the game: Marines. So I quickly added its data to the website. Now it can be used for calculations

So now I have added iconography to make the website less text-heavy and more visually appealing. It’s not a lot but it really makes things better
ㅤ
Now the only thing left is the tutorial!

So I have finished the doctrine thing today, this makes the website more convenient to use since it is VERY likely that all units in a stack are the same doctrine. Previously you would have had to set the doctrine for EVERY single unit if it wasn’t all Allies doctrine. I made the level and quantity inputs smaller, so that the doctrine selector can take up more space and it actually displays the full name with out the “…”
ㅤ
Now what’s next is: trying to display more iconography, and the tutorial!!

So I added much better a much better slider system for inputting the hp of each unit. This system is much more intuitive and easy to understand than the previous one.
ㅤ
On the way, I learned about the ch unit in CSS, which was what I used to set the width of the number input with the up and down arrows.
ㅤ
Now you might be like “how did it take 1hr 41min to just do that??” So basically, I went through 2 prototypes to get to this point, and it’s been so long since I did web development, I ran into freaking syntax errors slowing me down!!!
ㅤ
Also, along with this change, I found a bunch of places where there were bad coding practices, like basically having copy pasted code with just a small change between them. Because this is bad practice, I felt obliged to fix them. Again, those syntax errors slowed me down on this part as well.
ㅤ
But tbh, yeah it should NOT have taken this long to finish this feature, but at least it created an improvement!

Conclusion

This was one of the things my friend told me I should fix up, and so I did, now there are only 3 other things I decided I would do before considering this project to be done. They are:

• the default doctrine being selected
• information displayed as icons instead of text
• the big thing: a proper tutorial

I am closing in on the finish line, I can feel it!

So I have now color coded the enemy and allied nodes to be red and blue respectively in the node editor.
ㅤ
This makes it much easier to use the calculator if you have a lot of stacks here.

Ok the pull request got merged into the main source code, after just a small fixup! But I’m not done just yet, I still need to add to the documentation of the project.
ㅤ
So I did that. Now that was my first contribution to an open source project where I typed real code! It wasn’t a huge change, but you have to start somewhere!