Weekend Project: HD2 Stratagem Game

Give it a try!

You can find the minigame online here, or find the source code in its GitHub repository.

About

"Stratagem Hero" was obviously already taken, so "Stratagem Revolution" (like Dance Dance Revolution, but unfamthomably dumber and less inspired) it is. I was originally going to call it HellDDvR, but that was a bit of a stretch.

My girlfriend and I have been playing a lot of Helldivers 2 lately, and she found a site listing the directional codes for all the in-game stratagems. More than that, though, there was an interactive widget that let her enter the sequence for any given stratagem, like a low-stress practice run.

So of course my first thought was, "huh, I bet I could make something like that". This project represents the cumulative few hours of work I put into that whim, and was a good exercise for making a React application that involved CSS animations and assets in need of preloading.

Technical Decisions

• The stack is TypeScript, React, and Bun (exclusively for its TS compiler/bundler, no host is necessary to play).
• No postprocessed CSS.
• There are no remote resources to fetch; all available stratagems are configured as a list of objects in the source.
• Mobile/responsive layouts weren't a consideration, considering four arrow keys/WASD are needed. The assumption is you'll be playing on a 1920x1080 screen, however it can be comfortably played at resolutions down to around 950x640.
• Caching of assets (.svg and .png) files is accomplished by awaiting the loading of HTMLImageElements with a src attributes pointing toward each one.