Command Line 404 page

Creating a command line 404 page.

Posted by Matthew Regis on Fri, Nov 25, 2016
In Web, Development
Tags javascript, jquery, code, web, development

Overview

So after re-creating my new site I wanted to create a new 404 page. I had created one for my previous site which you still can have a look at Here and I even wrote a blog post about it Here. If you want to have a look now you can go Here also there is a diffrent one for mobile which I talk about under Mobile. You can view it Here (make sure your on a mobile device otherwise it kicks you to the main 404 page and visa vera).

So I did a little research about what 404 page I could create, orignally I was going to create a game like snake or breakout and I made some prototypes but abandoned the idea after finding numerous examples of where this type of thing has been done before. I wanted to create something that was a bit more unique.

Old 404 Page (old site)

My last site’s 404 page had a static background and a terminal popping up, this was to create the idea of having a interative 404 page where you could play around with the webpage by using javascript to inject into the page (don’t work it was a static 404 page, the only page you would be injecting too is the one your viewing and not anybody else viewing it).

For that page I used this libary for creating a terminal. I still liked the idea of having a terminal but this time I thought I would make it a full screen terminal, so no background image or links appearing.

New 404 Page (new site)

There are a couple of ways you can go about creating a terminal for the web but probably the most easiest from the get go that has tons of features already built it is using Jquery Terminal Emulator.

So that’s exactly what I did. The libary takes care of all the hard work in making the terminal, now I could focus on the fun stuff. I had two things in mind that I definitely wanted to implement this time round.

  • There should be more options. - The last 404 page had only three options, which wasn’t that much.
  • There should be a game. - I was thinking of higher or lower orignally but in the end I added rock paper sciccors lizard spock.

Help (Menu)

I’ve broken the menu into a few parts:

  • Error info - This is to tie in with the 404 error.
  • Links - Contacts and website links so you can go to the main site.
  • Fun stuff - Games, jokes and other stuff.
  • Credit - Give credit where it’s due.

help menu

Rock Paper Sciccors Lizard Spock

Because as part of my build process for my site is to minify the html and strip comments you might be looking at the source of the rps game and trying to see what I did. To save you the hassle I’ve put it here with comments.

I’ve implemented it like this because if I want to add to it then all I have to do is just add more options. If I wanted I could create ulitmate rps.

//options
var rps = ["rock", "paper", "scissors", "lizard", "spock"];
//what beats what. For example rock beats scissors and lizard
var rules = {
    "rock": ["scissors", "lizard"],
    "paper": ["rock", "spock"],
    "scissors": ["paper", "lizard"],
    "lizard": ["paper", "spock"],
    "spock": ["rock", "scissors"]
};
//check that option passed through is valid, does it exsit in the options
var valid = (rps.indexOf(args) > -1);
if (valid) {
    //store play option in pla
    var pla = args;
    //generate a random number from how ever bug the options array (rps)
    var num = Math.random() * (rps.length.toFixed(0) - 1) + 0;
    //round the number to 0 decimal places and pick a option for the computer and store it in com
    var com = rps[num.toFixed(0)];
    //if com equals pla its a tie
    if (com === pla) {
        var out = "Computer threw " + pla + " - Draw! ";
        typed_message(this, out, 3);
        speakit(out);
    } else {
        //get the rules for the players option 
        var rule = rules[pla];
        //does the computers option exsit in the players options rules
        var result = (rule.indexOf(com) > -1);
        //declare empty string
        var outcome = "";
        //if result is true then player wins then if not then the only other option is that the computer won.
        if (result) {
            outcome = "Computer threw " + com + " - You Win! ";
        } else {
            outcome = "Computer threw " + com + " - You Lose! ";
        }
        typed_message(this, outcome, 3);
        speakit(outcome);
    }
} else {
    //option passed through doesn't match so show error
    typed_message(this, "Option value is undefined", 3);
}

Jokes

Here is a snippet of what I did for the joke function. I’ve replaced the joke content but you get the idea.

I’ve added comments which should be self-explanatory.

//jokes array
var jokes = ["joke 1","joke 2","joke 3"];
//generate random number from the size of the jokes array
var num = Math.random() * (jokes.length.toFixed(0) - 1) + 0;
//use that random number to get the joke while also rounding the number
var joke = jokes[num.toFixed(0)];
//type out joke
typed_message(this, joke, 3);
speakit(joke);

Speach

I added some speech into the console just for fun. I used the speech synthesis api which you can read about here.

var msg = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(msg);

I didn’t know at the time but most browsers had a built in api for text to speech, I thought I would of had to use a service or something but turns out its as simple as adding the few lines. Sorry IE users though as it seems you don’t have this feature.

Mobile

Because the terminal doesn’t really work well on mobile I created a 404 flappy bird clone. It was acutally one I had created quite a while ago but I created it for Phonegap and released it as a Android app. It was a kind of experiment to see how well a html/js app would be received. Long story short the app has been taken down now as it could of been vulnerable to attacks due to the Phonegap platform and it was slow as ?#@!

Summary

I had fun creating this 404 page and hopfully I’ll keep updating it. The terminal libary made it really easy to implement, which makes me want to work on it. Now I have to think of some ideas of what I could implement. I also would like to add some easter eggs, I added one. Try typing hello… did you get the reference?


comments powered by Disqus