Matt Jones | Feb. 28, 2021
In the summer of 2020, when nothing was open and you could only spend so much time going for walks, it seemed like a good time to start on a portfolio for my school and future projects. I’ve seen a few online and knew I didn’t want to just point people to a GitHub or a static site with screenshots of Java swing GUIs (eww). Why not make something that shows that I can program and serve as my portfolio?! At this time, I had just finished my front-end web class and was waiting to take my back-end class. I knew little about configuring servers, but I did just learn a lot about JavaScript and I genuinely enjoyed using it.
Knowing I could easily and freely host on Github.io, I found myself only limited by figuring out what to make. After tons of searching and planning, I found inspiration in the Fallout Robco Termlink hacking mini-game in the popular Fallout series. The objective is to hack the terminal by completing a simple code-breaking game. When I was a kid, I remember playing Mastermind, a board game invented in 1970 that is undoubtedly the original inspiration for the Fallout mini-game.
If you’d like to try the game Click Here. If you have no idea what I’m talking about this Video will show how it works within Fallout. ( Or this Video which shows someone who recreated it in real life)
The goal of the game is to find the correct password that will unlock the terminal. Problem is, there are ten options to pick from and only four chances to pick. Now don’t worry, it’s not impossible. When you pick a wrong answer, it will print out a correct character reading. This is based on the position of the character in the word and value. Using this information, you can find the correct term by process of elimination.
Now every program has bugs, right? Well, the Robco Termlink is certainly not immune. Sometimes, a collection of symbols is accidentally processed as a word. Fortunately for us, when entered this throws a weird exception that removes one of the wrong options.
If you get stuck at any point, I’ve written the rules and some examples within the help tab at the bottom of the page. If you REALLY get stuck or just don’t want to play, type ‘password’ into the inspector console.
After unlocking the terminal, you are presented with a command line. This will show instructions when you first load in, but if you ever get stuck, I’ve made a help page that will explain the game in greater detail. This terminal works just like any bash terminal. Not wanting anyone to be excluded from using this, I made the files clickable as well. When you open a directory, it will present all the files within. You can easily click the file you’d like to open or read. I tried to add a lot of detail and Readme’s in most directories to explain the topics covered in it.
The biggest challenge by far was my limited knowledge of JavaScript. In our classes, we were restricted to only using vanilla JavaScript with no libraries or plug-ins. I considered using a framework or plug-in and looked at a few but decided against it, for two reasons. Firstly, I didn’t know how long it would take to learn whichever framework or plugin I chose, and with limited time, I was uneasy about spending X amount of time learning a plugin that I may never use again. Secondly, I had a strong desire to improve my fundamental skills when it came to JavaScript. I thought I would learn more by writing everything myself. Looking back at this now, I probably would have made a different choice.
My second biggest challenge was making sure it would be presentable. From my experiences in my previous career, I knew that it may work well, but if it doesn’t look good, no one will want to use it. The problem is, I’m no front-end expert. Knowing only the basics of CSS I had to venture into the unknown, and learn all about animations, SCSS, responsive design, cross-browser support, and modular CSS.
One of my design choices was to add sounds similar to the Fallout game had. JavaScript made this easy to put in, but transferring the sounds across page transitions was a different story. The browser purposely blocked this from happening. The solution I came up with was to find the current timestamps of the sounds playing and save them in session storage. When you click on the next page the music starts playing from that saved timestamps.
Lastly, on the terminal page, I had to come up with a way to simulate a file system. My best solution was to have an editable json file that would be read into a binary tree object. This allowed it to be searchable and easily configurable.
A LOT!
From loading dynamic content with JavaScript to figuring out how to make a web-based directory system. It may not seem like it from the surface, but I put a lot of effort into this project. There were a few moments where I questioned why I chose this project.
Probably the most valuable lesson learned was figuring out how to plan and execute a project to completion, from nothing, by myself. At the time, this was the biggest web-based project I’d attempted.
A shortlist of skills I learned or improved:
- General JavaScript
- SCSS
- Project planning
- Responsive Design
- Media in HTML5
- Persistence
Unfortunately, I didn’t have time to resolve every issue. School started again and I found myself struggling to justify the time needed to fix all the little issues that have arisen since publishing. I will come back at some point to fix these.
- Safari now has issues with the animations. I believe it’s because Safari 4 doesn’t seem to be selective when reading keyframes.
- The game board box has become unresponsive and will act weirdly on different screen sizes.