CoW Calc

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.

So for this devlog, I have just added the Sniper, Flame Tank, and Amphibious Tank units that were previously missing from the calculator. I have also added a tag on the website so it stands out!
ㅤ
This was the first step in my todo list for this app.

So this is more of a self-reflection of what I have done and what there is to do.

Outside of coding

So, I had previously left this app public for a long time (like a year) hoping that players would just somehow find it naturally, but it turns out that’s not how the world works. So I sent it to the discord server (mentioned earlier). Now I also sent as a reddit post and it got lots of traction, quickly becoming #1 post of the day. So clearly, what I’m doing is good and is solving the problem.

What is there left to do

So I got my friend who plays this game and never saw the calculator before try it and I quickly realized that the website is not very intuitive at all. I need to make a better tutorial (one where it shows where you should click, etc).
ㅤ
There are also some minor things I have on there that made sense when I was coding it, but now that I think of it don’t make sense at all (like the hp field and how it handles non percentage values). Not only that, but there are many quality of life features, like if you set the doctrine of the first item, it set the default doctrine to that one for everything following it. Also the “Your” stack and “Enemy” stacks should be color coded, and more info should be displayed as icons rather than text.
ㅤ
Also, devs added a new Sniper unit to the game, and I forgot to include flame tanks and amphibious tanks in my calculator.

Overall, the app is basically done, just need to add the final touches that will make this truly helpful for anyone.
ㅤ
Summary of things to do (this is supposed to be a task list, but stardance formatting is not working):

• Add Sniper, Flame Tank, and Amphibious Tank
• Color Code “Your” and “Enemy” stacks
• Display more info as icons rather than text (such as doctrines, unit levels, etc)
• Set the default doctrine after one has been added to a stack
• Make the HP field make more sense

And finally, the big task:

• Make a tutorial that really holds the player’s hand for the initial bit, so that they know what to do afterwards.

So with that I will start on this transformation!

For this devlog, I just updated the tutorial to be more specific and have better wording.

I also adjusted the UI of it so that it has a scrollbar, if not enough vertical room, etc.

So I sent this app to the Call of War discord server and the overall feedback was pretty positive! It’s just that there was one complaint that came again and again: there is no mobile support! I had completely forgotten about that somehow, so I set out to change that in this devlog.

I did the following in this devlog:

• added whole new way to edit unit lists, which better suits mobile
• made the UI on mobile look better