cybre.town/src/components/console.vue

<template>
  <div @click="focusInput()" class="console">
    <div @keypress.enter="displayCommand()" class="group" v-for="(group, index) in history" :key="group">
      <pre><span class="host">{{group.host}}</span><span
          v-if="index !== history.length-1">{{group.command}}</span><input
          v-else v-model="group.command" ref="consoleInput" type="text" autocomplete="off"></pre>
      <pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
    </div>
  </div>
</template>

<script>
import commands from "@/render-commands.js"

export default {
  name: "console",
  data(){
    return{
      history:[{
        host: "[cybre.town]$ ",
        command: "welcome --help",
        output: []
      }],
      currentInput: ""
    }
  },
  methods:{
    displayCommand(){
      let command = commands.methods.renderCommand(this.history[this.history.length-1].command);
      command.forEach((group, i) => {
        setTimeout(() => {
          this.history[this.history.length-1].output.push(group);
          if (group.forward) window.location = group.forward;
          if (command.length-1 === i){
            this.history.push({
              host: "[cybre.town]$ ",
              command: "",
              output: []
            });
            this.$forceUpdate()
            this.focusInput()
          }
          window.scrollTo(0,document.body.scrollHeight);
        }, group.delay)
      })
    },
    focusInput(){
      this.$nextTick(function lol(){
        this.$refs.consoleInput.focus();
      })
    }
  },
  mounted() {
    this.displayCommand();
  }
}
</script>

<style scoped lang="scss">
  pre{
    margin: 0;
    padding: 0;
  }
  .console{
    color: #fff;
    .group{
      .host{color: #02a594;}
      .white{color: #fff}
      .green{color: #44dd88;}
      .blue{color: #0081b1;}
      input{
        background-color: #0000;
        border: 0;
        margin: 0;
        padding: 0;
        color: #fff;
        appearance: none;
        outline: none;
        font: inherit;
      }
    }
  }
</style>