From d89117a4a5505c62cd5b352d8a6d8c355929399d Mon Sep 17 00:00:00 2001 From: adb <info@adb.sh> Date: Thu, 11 Feb 2021 21:50:03 +0100 Subject: [PATCH] optimize and rearrange history object --- src/components/console.vue | 33 ++++++++++++++++---------------- src/render-commands.js | 39 +++++++++++++++++++++----------------- 2 files changed, 39 insertions(+), 33 deletions(-) diff --git a/src/components/console.vue b/src/components/console.vue index 40f0637..1246f51 100644 --- a/src/components/console.vue +++ b/src/components/console.vue @@ -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> diff --git a/src/render-commands.js b/src/render-commands.js index a5e36a4..dd158b5 100644 --- a/src/render-commands.js +++ b/src/render-commands.js @@ -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);