adb/cybre.town
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

optimize and rearrange history object

Browse Source
This commit is contained in:
adb 2021-02-11 21:50:03 +01:00
parent 6c871264b8
commit d89117a4a5
2 changed files with 39 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/console.vue
View File

@ -1,38 +1,37 @@
<template>
<div @click="focusInput()" class="console">
<div @keypress.enter="renderCommand()" class="group" v-for="(group, index) in history" :key="group">
<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">{{
typeof output.content === "function"?output.content(group.command):
output.content}}</span></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
history:[{
host: "[cybre.town]$ ",
command: "welcome --help",
output: []
}],
currentInput: ""
}
},
methods:{
execCommand(){
commands.methods.renderCommand()
this.$forceUpdate()
},
renderCommand(){
let command = commands.methods.getCommand();
command.output.forEach((group, i) => {
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.output.length-1 === i){
if (command.length-1 === i){
this.history.push({
host: "[cybre.town]$ ",
command: "",
@ -46,11 +45,13 @@ export default {
})
},
focusInput(){
this.$nextTick(function(){
this.$nextTick(function lol(){
this.$refs.consoleInput.focus();
this.$refs.consoleInput.select();
})
}
},
mounted() {
this.displayCommand();
}
}
</script>

39
src/render-commands.js
View File

@ -24,7 +24,7 @@ let commands = [
{color: "white", content: "\nWelcome to:\n", delay: 100},
{
color: "green",
content(){
content: function (){
let fontSize = window.getComputedStyle(document.body,null).fontSize.split("px")[0];
return window.innerWidth/fontSize<35?
" __ \n" +
@ -51,7 +51,7 @@ let commands = [
" \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/ \\/_/\\/_/\n" +
" /\\___/\n" +
" \\/__/ @adb.sh\n\n";
},
}(),
delay: 300
},
{
@ -133,33 +133,38 @@ let commands = [
{color: "white", content: "forwarding", delay: 400},
{color: "white", content: " ...", forward: "https://meet.adb.sh", delay: 600}
]
},
{
name: ["test"],
output(input){ return[
{color: "blue", content: "\nJitsi", delay: 100},
{color: "white", content: " is loading\n", delay: 200},
{color: "white", content: input, delay: 400}
]}
}
]
let history = [{
host: "[cybre.town]$ ",
command: "welcome --help",
output: []
}]
export default {
data(){
return {
commands,
history
commands
}
},
methods:{
renderCommand(input){
history[history.length-1].output = this.getCommand(input).output;
history.push({
host: "[cybre.town]$ ",
command: "",
output: []
})
let toRender = this.getCommand(input).output
let payload = [];
if (typeof toRender === "function"){
payload = toRender(input)
}else{
toRender.forEach(part =>
payload.push(typeof part === "function"?part(input):part)
)
}
return payload;
},
getCommand(input) {
input = (input?input:history[history.length-1].command).split(" ")[0];
input = input.split(" ")[0];
let command = commands.find(
command => Array.isArray(command.name)?command.name.find(
altName => altName === input):command.name === input);