Search code examples
javascripthtmlcssterminalterminal-emulator

How do I callback an input and display it through a return with other text


I have a fake terminal that uses javascript, CSS, and HTML. I can Identify that there is an error with the command the user gives and print that there is an error, but I can't call back the input of the command line and put it in the error. For example, my terminal says

"unknown command: try --help for a list of commands or debug.exe if you are still having trouble."

I want to be able to say

"[input] some text".

Could someone please help me. Here is my Code.

    // setup vars
    var currentLine = "";
    var typeSpeed = 70;
    var pauseLength = 1000;
    
    // get ref to DOM Elements
    var cursor = $("#cursor");
    var animate = $(".animate");
    var input = $("#inputcmd");
    var output = $("#output");
    
    // set up Event Listeners
    input.keypress(keypressInput);
    $("#terminal-window").click(openKeyboard);
    
    // hide text so we can animate it
    animate.each(function(index) {
      $(this).addClass("hide");
    });
    
    // make first call to printCharaters() for animation
    var temp = setTimeout(printCharaters, typeSpeed);
    
    // this function animates printing of text inside DOMS with the .animate class.
    function printCharaters() {
      // check if current line array is empty
      if (currentLine.length == 0) {
        // stop cursor from blinking
        cursor.removeClass("blink");
    
        // get first line of text and add it to an array
        currentLine = animate.first().text().split("");
        currentLine = currentLine.reverse();
    
        // remove text from dom and unhide element
        animate.first().html("");
        animate.first().removeClass("hide");
        cursor.appendTo(animate.first());
      }
    
      // animate typing
      animate.first().append(currentLine.pop()).append(cursor);
    
      // check if we just popped the last element of the array off
      if (currentLine.length == 0) {
        // remove animated DOM Element from animation
        animate.first().removeClass("animate");
        // get new list of DOM Elements to animate
        animate = $(".animate");
        // make cursor blink at the end-of-line.
        cursor.addClass("blink");
    
        // Animate next DOM Element if any remain
        if (animate.length > 0) {
          setTimeout(printCharaters, pauseLength);
        } else {
          // all text in the DOM Elements have been animated
          input.after(cursor);
          input.focus();
        }
      } else {
        // Animate next character in DOM Element
        setTimeout(printCharaters, typeSpeed);
      }
    }
    
    function keypressInput(e) {
      // received enter key, send cmd and clear input
      if (e.keyCode == 13) {
        var command = input.text();
        output.html(proccessCMD(command));
        input.html("");
        e.preventDefault();
      }
    }
    
    function proccessCMD(cmd) {
      cmd = cmd.trim().toLowerCase();
      //there is only one command here. But you get the idea. Plug in your API call here.
      if (cmd == "--help") {
        return "try these command types: ls, cd ip, vpn, ping, date, time, cal, data, su, termlink_shutdown, termlink_boot, server, wi-fi, file, chat, reload, clear";
      }
      if (cmd == "ls /") {
        return "bin | src | lib | lib64 | dev | sbin"
      }
      if (cmd == "ls /bin") {
        return "license.txt | runtime | trash | archived"
      }
      if (cmd == "ls /bin /license") {
        return "This terminal may be shutdown at an unexpected time. We are not liable for amy damages. If you violate this terminal we can take you to a court of our choice. If you have any questions email us at ******.********@gmail.com. Thank you for using this terminal Terminal owned and operated by Nathan Schmitt"
      }
      if (cmd =="ls /bin /runtime") {
        return "runtime exception error! To debug type debug.exe"
      }
      if (cmd == "debug.exe") {
        return 'debuger loading....................................Complete --> Posabilities for an unexpected error: Failed to compile bootstrap files, your terminal sesion ended, your wi-fi has been disconnected, you have entered an incorrect or old command. "The computer is usualy not the problem, but is more likely you or your internet of things" --Bob Peeters. Some commands start or end with slashes. WHITE SPACE DOES COUNT AS AN IMPUT'
      }
      if (cmd == "ls /bin /trash") {
        return 'you must enter your admin password to view trash type "su" to enter admin terminal'
      }
      //su verification
      if (cmd == "su") {
        return "Enter SSID Enter 'SSID/PSWD:' to see SSID and Password."
        }
      if (cmd == "ssid/pswd:") {
        return "you must be logged in as an admin to use this command!"
      }
      if (cmd == "shutdown") {
        return "you must be logged in as an admin to use this command!"
      }
      if (cmd == "ls /lib") {
        return "Librarry: you must be logged in as an admin to use this command! Use The 'file' or 'lib64' to acsess the non-admin librarry"
      }
      if (cmd == "ls /lib64") {
        return "your lib64: Readme.txt Lisence.txt Runtime.exe ls / cd home cd /create.  your shared lib64:[you have not shared any of your personal files to the public, use Termlink Pro to acsess the share option]  Public lib64: [Kittens.txt] [fun.txt] [why.txt] [termlink.txt] [termlinkPro.txt] Privatelib: you must be logged in as an admin to use this command! **use the file command to acsess lib64 files**"
      }
      if (cmd == "ls /sbin") {
        return "you must be logged in as an admin to use the sbin command"
      }
      if (cmd == "ls /dev") {
        return "terminal development by Nathan Schmitt the src is codepen.io. The terminal is not completed and is still in indev stages, shutdowns are to be expeted in the next month. Thank you for choosing FBI termlink"
      }
      if (cmd == "ls /bin /archived") {
        return "you must be logged in as an admin to use the sbin command"
      }
      if (cmd =="cd /") {
        return "cd /home cd /su cd /server"
      }
      if (cmd == "cd /home") {
        return "destanation reached [directory:'home']"
      }
      if (cmd == "cd /su") {
        return "you must be logged in as an admin to use this command"
      }
      if (cmd == "cd /server") {
        return "you are on server 1. Use termlink pro to get onto any server port! our terminal has 84 ports to choose from. Use 'cd /port' to chose your port. To see full server information you must be logged in as and admin"
      }
      if (cmd == "cd /port") {
        return "make a termlink pro acount today!"
      }
      if (cmd == "clear") {
        return " "
      }
      if (cmd == "reload") {
        return "reload succsessfull"
      }
      if (cmd == "ip") {
        return "ip adress fetching is blocked by your system adminastrator"
      }
      if (cmd == "vpn") {
        return "it seems you do not have a valid vpn"
      }
      if (cmd == "ping") {
        return "[100 packets sent] [87 packets pinged [13 packet loss]"
      }
      if (cmd == "Data") {
        return "server data could not be found on this server [server 1]"
      }
      if (cmd == "termlink_boot") {
      return "boot-up completed in 0.0243785 seconds"
    }
    if (cmd == "termlink_shutdown") {
      return "you are not allowed to do what you just did"
    }
    if (cmd == "wi-fi") {
      return "your router does not allow fetching of this data"
    }
    if (cmd == "file") {
      return "file /readme.txt file/ runtime.exe file/ lisence.txt file /kittens.txt file /myfiles"
    }
      //unkown commands
      return'unknown command. type "--help" for list of commands or "debug.exe" if you are still having trouble.';
    }
    //open iOS keyboard
    function openKeyboard(){
      input.focus();
    }
body, #inputcmd{
      background-color: #333;
      color: #00ff00;
      font-family: "andale mono",	/* MS WebFont */ "monotype.com",	/* MS WebFont, former name */ monaco,	/* MacOS */ /* Fallback options */ "courier new",	/* Windows, MacOS */ courier,	/* Unix+X, MacOS */ monospace;
    }
    
    #terminal-window {
      padding: 10px;
      display: block;
      position : absolute;
      width: 100%;
      height:100%;
      top : 0px;
      left : 0px;
      background-color: #111;
      overflow : hidden;
    }
    
    #terminal-window:before { 
        content: '';
        z-index: 4010;
        width : 100%;
        height : 100%;
        position : absolute;
        top : 0px;
        left : 0px;
        background: linear-gradient(#444 50%, #111 50%);
        background-size: 100% 4px;
        background-repeat: repeat-y;
        opacity: .14;
        box-shadow : inset 0px 0px 1px 1px rgba(0, 0, 0, .8);
        animation: pulse 5s linear infinite;
    }
    #cursor {
      color: #00ffff;
      box-sizing: border-box;
      border-left: .5em solid;
    }
    .blink {
      animation: typing 6s steps(13, end) infinite, blinking 1s step-end infinite;  
    }
    .scanlines {
      z-index: 4100;
    }
    .hide {
      display: none;
    }
    .scanlines:before {
      content : '';
      position : absolute;
      top : 0px;
      left: 0px;
      width : 100%;
      height : 12px;
      background : #fff;
      background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,250,250,1) 50%,rgba(255,255,255,0.98) 51%,rgba(255,0,0,0) 100%); /* W3C */
      opacity : .1;
      animation: vline 6.25s linear infinite;
    }
    
    #inputcmd{
      background-color: #111;
      border: 1px;
      font-size: 1em;
      /*hide default cursor*/
      color: transparent;
      text-shadow: 0 0 0 #00ffff;
    }
    #inputcmd:focus{
        outline: none;
    }
    
    @keyframes pulse {
      0%   {transform: scale(1.001);  opacity: .14; }
      8%   {transform: scale(1.000);  opacity: .13; }
      15%  {transform: scale(1.004);  opacity: .14; }
      30%  {transform: scale(1.002);  opacity: .11; }
      100% {transform: scale(1.000);  opacity: .14; }
    }
    
    @keyframes vline {
      0%   { top: 0px;}
      100% { top: 100%;}
    }
    @keyframes blinking {
        from, to { border-color: transparent; }
        50% { border-color: cyan; }
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="terminal-window">
      <span id="cursor"></span>
      <p>
        <span class="animate">FBI (TM) TERMLINK PROTOCOL INSTANTIATING</span>
      </p>
      <p>
        <span class="animate">ENTER FBI PASSWORD</span>
      </p>
      <span class="animate">[Enter Password]>>></span>
      <span class="animate">******************************--Geust Password saved</span>
      <p>
      </p>
      <span class="animate">...</span><span class="animate">Acsess Granted!</span>
      <p>
      </p>
      <span class="animate"> To login as admin type "su"</span>
      <p>
      </p>
      <span class="animate"> (Termlink Terminal owned and operated by Nathan Schmittt) copyright(c) 2019 Termlink LLC</span>
    
      <p>
      </p>
      <span class="animate">[Enter Command]>>></span><span autofocus contenteditable="true" id="inputcmd"></span>
      <p><span id="output"></span></p>
      <p><span id="error"></span></p>
    </div>
    <div class="scanlines"></div>


Solution

  • If I understand correctly - you want to put the input of the user and some text afterwards.

    In keypress input you can put:

    `${cmd} your text here`
    

    The backticks enable string interpolation. the ${} signals a variable.