fork from "https://zounar.me/"

webconsole.js

function WebConsole(element) {
    var that = this;

    this.element = element;
    this.inputElement = null;

    this.actions = {};
    this.actionExitCode = {
        ok: 'ok',
        error: 'error',
        exit: 'exit'
    };

    this.element.addEventListener('click', function () {
        that.focusInput();
    });
}

WebConsole.prototype.write = function (text, isHtml) {
    if (typeof text === "undefined") {
        text = "";
    }

    if (typeof isHtml === "undefined") {
        isHtml = false;
    }

    this.clearInput();

    if (isHtml) {
        var newElement = document.createElement('span');
        newElement.innerHTML = text;

        this.element.appendChild(newElement);
    } else {
        this.element.appendChild(document.createTextNode(text));
    }
};

WebConsole.prototype.writeLine = function (text, isHtml) {
    this.write(text, isHtml);
    this.write("<br>", true);
};


WebConsole.prototype.clearInput = function () {
    if (this.inputElement !== null) {
        this.inputElement.removeAttribute('contenteditable');
    }
};

WebConsole.prototype.read = function (variableName, newLineAfter) {
    if (typeof newLineAfter === "undefined") {
        newLineAfter = false;
    }

    var that = this;

    this.clearInput();

    var textElement = document.createElement('span');
    textElement.setAttribute('contenteditable', 'true');
    textElement.className = "userInput";

    textElement.addEventListener('keydown', function (ev) {
        that.keyDownFunction(ev, variableName, textElement, newLineAfter);
    });

    this.element.appendChild(textElement);
    this.inputElement = textElement;
    this.focusInput();
};

WebConsole.prototype.keyDownFunction = function (event, variableName, textElement, newLineAfter) {
    if (event.keyCode === 13) {
        event.preventDefault();

        if (newLineAfter) {
            this.writeLine();
        }

        this.inputSubmit(variableName, textElement.innerHTML);
        return false;
    }
};

WebConsole.prototype.readLine = function (variableName) {
    this.read(variableName, true);
};

WebConsole.prototype.inputSubmit = function (variableName, value) {
    var action = this.getAction(value);

    var response = "";
    if (value.length > 0) {
        if (action !== null) {
            response = action(this, value);
            if (response === this.actionExitCode.ok || response === this.actionExitCode.error) {
                this.newCommand();
            }
        } else {
            this.writeLine(value + ': command not found');
            this.writeLine('Type \'help\' to get list of commands');
            this.newCommand();
        }
    }
};

WebConsole.prototype.newCommand = function () {
    this.write('visitor@' + this.IP + ':/# ');
    this.readLine('action');
}

WebConsole.prototype.focusInput = function () {
    var child = this.element.childNodes;

    for (var i = child.length - 1; i >= 0; i--) {
        if (child[i].tagName === "SPAN") {
            if (child[i].getAttribute("contenteditable") === "true") {
                child[i].focus();
            }
            break;
        }
    }
};

WebConsole.prototype.addAction = function (actionName, action) {
    this.actions[actionName] = action;
};

WebConsole.prototype.getAction = function (actionName) {
    if (typeof this.actions[actionName] !== "undefined") {
        return this.actions[actionName];
    } else {
        return null;
    }
};

WebConsole.prototype.getM = function () {
    const fragments = ['hey', 'zounar', 'dev'];
    return fragments[0] + '@' + fragments[1] + '.' + fragments[2];
}

WebConsole.prototype.IP = '';

WebConsole.prototype.fetchIp = function (callback) {
    var xhr = new XMLHttpRequest();
    var that = this;
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            that.IP = JSON.parse(xhr.responseText).ip;
            callback(that);
        }
    }
    xhr.open('GET', '/api/handshake', true);
    xhr.send();
}

var webConsole = new WebConsole(document.getElementById("console"));
webConsole.addAction('help', function (parentConsole) {
    parentConsole.writeLine('This is a list of available commands:');
    parentConsole.writeLine('help, hi, joke, whoareyou, exit ');

    return parentConsole.actionExitCode.ok;
});

webConsole.addAction('hi', function (parentConsole) {
    parentConsole.writeLine('Hi ' + parentConsole.IP + ', what\'s up?');

    return parentConsole.actionExitCode.ok;
});

webConsole.addAction('whoareyou', function (parentConsole) {
    parentConsole.writeLine('==================================');
    parentConsole.writeLine('Name: Robin Zounar');
    parentConsole.writeLine('Description: Web Developer');
    parentConsole.writeLine('Message of the day: I\'m programing enthusiast and huge C++ and PHP lover.');
    parentConsole.writeLine('I believe that simplicity is the key to achieve the best results.');
    parentConsole.writeLine('You share the same idea?');
    parentConsole.writeLine('Let me know!');
    parentConsole.writeLine('----------------------------------');
    parentConsole.writeLine('Contacts');
    parentConsole.writeLine('Mail: <a href="mailto:' + parentConsole.getM() + '">' + parentConsole.getM() + '</a>', true);
    parentConsole.writeLine('Tel.: <a href="tel:+420725053760" title="Call me">+420 725 053 760</a>', true);
    parentConsole.writeLine('LinkedIn: <a href="https://www.linkedin.com/in/zounar"  target="_blank" title="Visit my LinkedIn">/in/zounar</a>', true);
    parentConsole.writeLine('Location: <a href="https://www.google.cz/maps/place/Brno/@49.193843,16.600255,3a,75y,299h,90t/data=!3m8!1e2!3m6!1s72065971!2e1!3e10!6s%2F%2Flh3.googleusercontent.com%2Fproxy%2FUxj1G9HWlMUHjZkfV5iCvrKhJYa-o-1Qg6_Eb7zZBVhiULzxR4dQbTU-gtA2iP5VZuJ8MGE_u7eFvJA5aAgrmkdL87o7QQ%3Dw203-h152!7i3072!8i2304!4m5!3m4!1s0x4712943ac03f5111:0x400af0f6614b1b0!8m2!3d49.1950602!4d16.6068371!6m1!1e1" target="_blank" title="See my city">Brno, Czech Republic</a>', true);
    parentConsole.writeLine('==================================');

    return parentConsole.actionExitCode.ok;
});

webConsole.addAction('joke', function (parentConsole) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            parentConsole.writeLine(JSON.parse(xhr.responseText).value.joke);
            parentConsole.newCommand();
        }
    }
    xhr.onerror = function () {
        parentConsole.writeLine('Something went wrong, that\'s not a joke');
        parentConsole.newCommand();
    }
    xhr.open('GET', 'https://api.icndb.com/jokes/random?escape=javascript', true);
    xhr.send();
});

webConsole.addAction('exit', function (parentConsole) {
    parentConsole.writeLine('Exiting...');

    return parentConsole.actionExitCode.exit;
});

webConsole.writeLine('Welcome to this shell. Want to know who am I? Start typing commands.');
webConsole.fetchIp(function (parentConsole) {
    webConsole.write('visitor@' + parentConsole.IP + ':/# ');
    webConsole.readLine('action');
});





// body {
//     margin: 0;
//     padding: 0;
//     background-color: #111111;
// }

// .seo-description {
//     position:absolute;
//     height: 0;
//     width: 0;
//     overflow: hidden;
//     opacity: 0;
//     color: white;
//     font-family: "PT Mono", monospace;
//     font-size: 0.75em;
// }

// .console {
//     width: 100vw;
//     height: 100vh;
//     box-sizing: border-box;
//     padding: 15px 10px;
//     font-family: "PT Mono", monospace;
//     font-size: 0.75em;
// }

// /* colors */
// .console, .console a, .console a {
//     color: #EEEEEE;
// }
// .console {
//     background-color: #111111;
// }
// .console a {
//     text-decoration: none;
// }
// .console a:hover {
//     text-decoration: underline;
// }

// .console .command {
//     line-height: 130%;
// }

// .console #cursor {
//     min-width: 10px;
//     display: inline-block;
//     background-color: blue;
// }

// .console .userInput {
//     border: none;
//     outline: none;
// }

// .console #cursor.blink {
//     border-bottom: 2px solid #EEEEEE;
// }

// .console .response {
//     display: inline-block;
//     padding-right: 7px;
// }

// .console .userInput {
//     outline: none;
//     border: none;
// }