Here is a follow-up of my completely pointless but incredibly fun side-project to create a retro CRT screen in JS and CSS.

This time I decided to build the hacking minigame from the Fallout game series, which was also the inspiration to start this project in the first place.

Check the full Sandbox for a bigger screen.

The goal of the game is to find the password that is hidden in this garbled mess of characters. You can click a word or move with the arrow keys and use the enter key to confirm. Incorrect guesses will result in a hint indicating how many letters the password has in common with your guess.

Some of the stuff I've learned

• Hexadecimal numbers (0xffff) can be used as regular numbers in JS, so you can easily add and subtract them. Seems obvious, just never thought about it.
• The CSS ch unit (width of one character) combined with a monospace font is super useful for building these kind of text based interfaces, where I want to have a maximum of exactly 80 characters on every line.
• CSS columns is something I rarely use, but works perfectly here. The column-fill: auto property was crucial for filling columns one by one, instead of in a balanced manner.
• To word-break the passwords and highlight them over multiple lines, I first tried putting a password in a single span with the word-break: break-all property, but later switched to one <span> per character, since that makes the whole thing easier to control using JS and also easier to position. I then assign some data attributes to the span to keep track of which word is being clicked and highlighted.

Any cool ideas?

What should I build next? Know any other games with terminal screens like these? Let me know! 👇👇👇