World War II Simulation

I hosted a real in-person game using my website!

There was 11 people playing the game and 3 people moderating the actions.
After creating everyone’s account who signed up and sending them a login link via email, we all met in the library of our school. I then demonstrated the basics of the game, and then they got to playing.
Everyone was super appreciative of the work I’ve done to make the site, but there were some major issues. Sometimes it would sign the person out, and then take a while to get back in. If I had more time I would have been able to host the server on a more powerful device as I think the Raspberry Pi that was running the backend was just overwhelmed by the connections. Either way, it wasn’t game breaking as they would just have to click the login link again and wait a minute. Below are all the issues we discussed in our post game meeting.

• Let countries reply to PSA
• Trading should affect resources on both sides.
• Add levels - every year levels update automatically, resources update automatically
• Make queue public
• Russia 2x troops
• Research increased troops
• Let countries make limited announcements
• Allow math in resource change form
• Docs on the page
• Randomly signed out; slow loading to get back in
• Don’t allow changing troop location names

Unfortunately, I don’t think I have time to implement all of these, but my intention with this website is to use it in college, and host simulations there. So maybe if there is more interest I can start working on them.
I got many compliments for the troop management. This feature worked surprisingly well for being such a last-minute addition. The resource change log was helpful for moderators to keep track of what each country was doing, and announcement feature was also a hit.
Wow, that was a long devlog, next up is docs for the site to explain how to play this game, and then hopefully get a mini tutorial, so people can try the site out.

I added this super nice 404 styled page with photos of my cat! The photos are from a self hosted immich album and I think the photos are such a cute touch. I also made the background stop moving when you enter the game pages because it was wasting resources and slightly distracting. Finally, I removed the country starting resources from the create page because it was unessesary,

It turns out the flags I was using is not applicable during the 1940s so I updated all of them and added much needed color. The hover effect is still awesome. There was also a bug that was causing me to be unable to assign users to countries or remove the assignment from users so I fixed that.

I finished the database migrations from the last devlog and improved the game waiting page by adding a profile card which tells what user they are signed in as and what country they are playing. It shows a muted image of the flag and when you hover it has this nice 3d effect, courtesy of reactbits.

Huge new feature! Troop creation. I wasn’t initially going to make this feature, it wasn’t on my issue tracker but I decided for the full scale test of this website on Thursday coming up, I would want the site to have as many of the features of the paper game as possible. It was very complex figuring out the logic of troop creation and location and movement. And there is even some more logic to be done with new year system but that is another devlog. Enjoy the video.

In preperation of some new features to the resource page, I changed it to be called the assets page and added this nice selector between the different features of the page.

Commits

• feat(web): change resource page to assets (33346aa)

I noticed some long loading times on slow devices, so I tried to optimize this by moving the login check to the frontend lazily. Also, the email link will take them to the email with the login link.

Commits

• feat(web): use local cookie store api for faster login checks (#81)
  Full Changelog

The new features just keep coming. An issue I happened upon many times when testing the site is the year scheduler. Initially, I thought setting the schedule when creating the game was enough, but after trying it out and talking to some other people it is clear this is not enough. This devlog adds a schedule page that mods and admins can access to view what year changes are scheduled, and edit, delete, or add scheduled actions.

Commits

• feat: manage year schedule (#76)
• feat(web): logout page (#79)
• feat(web): link to email login link on homepage by @aamirazad in (#80)
  Full Changelog

I added a new feature: pause game. This fits perfectly in the previously added admin menu. There are many times that pausing the game is useful. Maybe if we are investigating cheating, and we don’t want to give one country and unfair advantage. Or during lunch break this prevents countries to continue playing the game which they should not do. Admins and mods can bypass this paused menu while everyone else are locked out of their dashboard.
Commits

The moderator’s experience was slightly confusing. For instance, there was no easy way to get to the page where admins can assign users to countries without just typing the url in the bar. This is now fixed in a visually pleasing way. Instead of adding more confusing buttons to the top bar, there is just one button which opens a google apps selector style menu of all the actions they could want to take. I still have to implement the pause button, that is my next feature.
Commits

Pretty small devlog today. Some of the time logged was from last devlog’s work. Like there was some small issues with authentication I had to fix. I also started work on some much-needed quality of life changes such as removing the spectator role from the user creation menu because I don’t think that feature is too important. I also added some tooltips to buttons so you don’t have to guess what they do.
Commits

Huge devlog today. I added the moderator dashboard, proper U.S. infinite oil resources, and most importantly, the message board. The message board allows moderators to post announcements to certain countries or everyone about world events. They are stored for further reference and notification popups ensure users always notice the announcement. The moderators can also view every country’s resource dashboard and finally the U.S. has unlimited oil as shown as an infinity symbol.
Commits

It’s been a bit. I took a break for reasons, but I’m excited to be back to working on the website. This devlog is a small but important change which I noticed when I did the in-person demo that race conditions happened quite often with multiple people making changes at the same time. I switched the system out to use delta changes so that it doesn’t overwrite someone else’s change. To prevent the delta change resulting in a negative value, it automatically detects this and undoes the change. The video demonstrates this.
Commits

I did a full scale demo of the site with 6 people all on the site. Although it took a bit to join the game, might have to look into that. The actual game performed really well. I was super happy with how fast everything updated with the websockets and how the new year triggers happens at the exact same time for everyone. I do have to look into a race condition some kids found where if two people make a change at the same time, it overwrites the old one with the new one instead of handling it properly. This should be a simple fix and a rare bug. Also, people said that they really want a message board for mods (moderators) to post events which will be my next big feature I’ll be working on.
Commits

Sorry for the long devlog, but this change is really big. I added the new year process and a bunch of other small changes. When changing resources amount, it prevents the user from going in the negatives and also shows whether they are increasing the amount or decreasing using fancy colors and transitions. I improved said colors to be more pleasing. And the main start of the show is timed years which occurs based on the time set when creating the game. At these set times, the game will update the year and show a message on everyone screen of what they got (+1 for now). In the video you see me realize it doesn’t check for game start or game end which I will fix next.

Resources tracking is done! Players are now given the correct starting resources according to the documented game rules. They can then make changes which is published to all the other players of that country. They are required to write a note of why the change, which will be used to verify there is no fraud during the game. Finally, there is a neat view of the change history which shows how much was increased and the resulting amount. Watch the video to see it in action!
Commits

I’m so sad, but I still haven’t gotten the db initialization working. It seems I will need to do something called migrations which will allow the database to change as I change it, but it seems really complex, and I think for now I’ll just manually do the migrations on the production database for now. The amount of github actions runs that I’ve gone through testing this is insane.

I’m so bad at github actions. Either that or github actions is hard to use. Or both. Either way, I fought though dockerfile and workflow files so that I have a automactially publishing docker image for the backend, which will run on my raspberry pi. I am so close, the image is buildilng finally but it doesn’t work on arch :(. I’ll fix it later, I’m tired.
Commits

I added a nice shadcn ui date picker. This looks much better than the chrome native one. Also, I added the ability to set the seconds for the time. This is necessary for me because the bell in our school doesn’t ring at the exact time, it actually rings 1 minute and 15 seconds late. So, to have new years sync up with the exact time the bell rings (new years occur every period change) the site supports starting on a non 0 second.
Commits

I re-added my beautiful dashboard. I got to test the provider’s context and it works, the state persists between routes, the websocket connection doesn’t get disconnected. This is great news, and will make switching between the different parts of the dashboard really fast. Anyway, I think the page looks pretty slick though I might need to tweak the transparency. Either way, I really like how this site is looking.
Commits

Lots of really good progress. I finally got user management added, although I was just going to do it in the database I thought the ui wouldn’t be that complicated, it was kinda complicated but I’m really happy with how it turned out. Creating users is really easy and the copy login link will make sending out links to a bunch of people really easy.

Users are not assigned to a country by and admin, I will need a ui for this but right now it is api only. Anyway, when the game starts, they are taken to their country’s dashboard where they see those resources for that game and that country. I want to bring back the other dashboard I made but this is a good start.
Commits

I got basic websocket listening working. So now it watches for the game start message and the moment it is send by an admin, everyone goes to the main game page because the game has started. I love how fast websockets respond to stuff. Next I need to figure out how to have rooms for each country playing.
Commits

The game creation screen now goes into a countdown which everyone will see based on when the game is supposed to start. The countdown doesn’t do anything when it passes the time, it just says starting soon. This does show the user that they are in the right place. It also detects when the game starts, though I think next I will need to connect up the websocket logic back up so that it is instant.

Game creation form is looking good for the first try. I would like a select box to choose the players and I will need a full-fledged user management page, but this does do the basic creation of a game along with each of the country’s resources. Of course, most of this is mainly on the database side for now, but I am glad my previous work on types has made this part much easier.
Commits

I can’t decide if I love or hate typescript’s types, but I finally got no type errors. After hours of looking at so many red squiggly lines, this is such a relief. Every single api return type is not accounted for and is beautiful.

I made the background look nicer, and I am continuing to connect the frontend to the backend. There is proper error messages for being unauthenticated, and the login flow is smoother. Finally, it shows the user if there is an active game or not.

It doesn’t look like much, but this is great progress. I like the loading spinners and the login flow is super seamless. Plus, the error messages actually make sense and tells the user to wait when the game is not active. It is supposed to say that there is no game started right now, I haven’t added any games, only if there is an upcoming or in-progress game should it actually show something.
Commits

I am still in the middle of working on the really complex interactions between elysia and nextjs. Typescript’s types are not typing and it is making life super complex. For reasons that baffle me, the return types on the elysia side, and what nextjs thinks that comes out of elysia doesn’t match. I might just need to “as any” on the nextjs side cause this is too difficult to make work the proper way.
Commits

I’m sorry but flavortown broke my devlogs :(. This devlog seems long, the previous devlogs lost their time tracked, so it is all under this one. Specifically, I spent around 9 hours on the first two devlogs before flavortown started, Then I spent 4 hours on this devlog which contains a ton of changes. The elysia backend really works now, with api docs and a sqlite database to track users and (soon) game state. The frontend also connects to this by allowing users to login using a special link. This code is sent to the backend with responds with all the user’s information to show the Next.js frontend. Speaking of which, the main game dashboard is looking pretty snazzy too with an interactive dock to change tabs.

I worked on websocket loading status. Using react-use-websocket, it tells the user if they are connecting, connected, or disconnected (that short flash of disconnected is only on firefox, ugh, firefox annoys me sometimes). And then I made this really pretty landing page with a reactbits component. I think it looks neat, and it is fun to click on while you are waiting for the game to start.
Commits

The devlog before this did not register any hours. This one is the same changes but with the correct hours. You can see a demo video of the concurrency below. I tested this websocket stuff on a bunch of different devices, and I was super happy with the latency. The idea is kids playing the same country will be changing these resources constantly, when they buy troops or do research, so having an up-to-date count of their resources with syncing is essential. I thought of using convex, but that was too expensive, this is self-hosted and free!

Very basic, web socket powered, ephemeral resource tracking. Players enter their name, and join a country. All the computers logged into the same country will see the same resources powered by a self-hosted websocket api server (running on my raspberry pi).
Commits