You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.0 KiB
80 lines
2.0 KiB
<template>
|
|
<div @click="focusInput()" class="console">
|
|
<div @keypress.enter="renderCommand()" 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"
|
|
commands.methods.renderCommand()
|
|
export default {
|
|
name: "console",
|
|
data(){
|
|
return{
|
|
history:commands.data().history
|
|
}
|
|
},
|
|
methods:{
|
|
execCommand(){
|
|
commands.methods.renderCommand()
|
|
this.$forceUpdate()
|
|
},
|
|
renderCommand(){
|
|
let command = commands.methods.getCommand();
|
|
command.output.forEach((group, i) => {
|
|
setTimeout(() => {
|
|
this.history[this.history.length-1].output.push(group);
|
|
if (group.forward) window.location = group.forward;
|
|
if (command.output.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(){
|
|
this.$refs.consoleInput.focus();
|
|
this.$refs.consoleInput.select();
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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> |