Add Konami Codes with Stimulus
In almost every (SaaS) app (and marketing sites) I built, I added (at some point), a little Easter egg. Small, little things, tweaks or jokes to the UI I would tell no one about, but that would certainly put a smile on their face.
One way I have done this is by using a Konami code. The Konami code (↑ ↑ ↓ ↓ ← → ← → B A) originated in Japan in the 1980s as a cheat code for Konami video games. The code became legendary when it was included in Contra (1987), where it gave players 30 extra lives. Since then, it has appeared in hundreds of games and websites as a cultural Easter egg.
Today I like to show how to add this in a reusable way by using Stimulus’ Values API and using (dispatching) a custom event that can be listened for on other Stimulus controllers.
This HTML sets up a Stimulus controller called “sequence” and attaches a keydown event listener to the window. When a key is pressed anywhere on the page, the detect method on the sequence controller will be called.
