add render animation, add forwarding, add commands, css mobile view
This commit is contained in:
parent
4482c4673b
commit
a8f0599e18
39
src/App.vue
39
src/App.vue
@ -1,7 +1,5 @@
|
||||
<template>
|
||||
<div class="top">
|
||||
<console class="console"></console>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -16,12 +14,45 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
body,html{
|
||||
margin: 0;
|
||||
}
|
||||
*{
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #444 #2220;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
*::-webkit-scrollbar-track {
|
||||
background: none;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
background-color: #444;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
position: absolute;
|
||||
background-color: #222;
|
||||
min-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.console{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%,0);
|
||||
width: 36rem;
|
||||
height: calc(100% - 2rem);
|
||||
overflow-y: auto;
|
||||
left: calc(50% - 19rem);
|
||||
padding: 1rem;
|
||||
}
|
||||
@media (max-width: 45rem){
|
||||
.console{
|
||||
width: calc(100% - 2rem);
|
||||
height: calc(100% - 2rem);
|
||||
overflow-y: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="console">
|
||||
<div @keypress.enter="execCommand()" class="group" v-for="(group, index) in history" :key="group">
|
||||
<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" type="text"></pre>
|
||||
v-if="index !== history.length-1">{{group.command}}</span><input ref="consoleInput" v-else v-model="group.command" type="text"></pre>
|
||||
<pre><span v-for="output in group.output" :key="output" :class="output.color">{{output.content}}</span></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,6 +22,28 @@ export default {
|
||||
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.$nextTick(function(){
|
||||
this.$refs.consoleInput.focus();
|
||||
this.$refs.consoleInput.select();
|
||||
})
|
||||
}
|
||||
window.scrollTo(0,document.body.scrollHeight);
|
||||
}, group.delay)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,11 +2,7 @@ let commands = [
|
||||
{
|
||||
name: "unknown",
|
||||
output:[
|
||||
{
|
||||
color: "white",
|
||||
content: "\nthe command you entered is undefined!\n",
|
||||
delay: 100
|
||||
},
|
||||
{color: "white", content: "\nthe command you entered is undefined!\n\n", delay: 100},
|
||||
{
|
||||
color: "white",
|
||||
content:
|
||||
@ -25,11 +21,7 @@ let commands = [
|
||||
{
|
||||
name: "welcome",
|
||||
output:[
|
||||
{
|
||||
color: "white",
|
||||
content: "\nWelcome to:\n",
|
||||
delay: 100
|
||||
},
|
||||
{color: "white", content: "\nWelcome to:\n", delay: 100},
|
||||
{
|
||||
color: "green",
|
||||
content:
|
||||
@ -42,7 +34,7 @@ let commands = [
|
||||
" \\/____/\\/___/\\ \\___/ \\/_/ \\/____/\\/_/ \\/__//___/ \\/_/\\/_/ \\/_/\\/_/\n" +
|
||||
" /\\___/\n" +
|
||||
" \\/__/ @adb.sh\n\n",
|
||||
delay: 200
|
||||
delay: 300
|
||||
},
|
||||
{
|
||||
color: "white",
|
||||
@ -55,25 +47,75 @@ let commands = [
|
||||
" - Etherpad > ether\n" +
|
||||
" - short url > surl\n" +
|
||||
" - Jitsi > meet\n",
|
||||
delay: 300
|
||||
delay: 500
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "social",
|
||||
name: ["ls", "la", "list"],
|
||||
output:[
|
||||
{
|
||||
color: "blue",
|
||||
content: "\nsocial",
|
||||
delay: 100
|
||||
},
|
||||
{
|
||||
color: "white",
|
||||
content: " is loading\n",
|
||||
delay: 100
|
||||
},
|
||||
{color: "white", content: "social ", delay: 100},
|
||||
{color: "white", content: "git ", delay: 200},
|
||||
{color: "white", content: "element ", delay: 300},
|
||||
{color: "white", content: "ether ", delay: 350},
|
||||
{color: "white", content: "surl ", delay: 400},
|
||||
{color: "white", content: "meet", delay: 500},
|
||||
]
|
||||
},
|
||||
{
|
||||
name: ["social", "mastodon", "Mastodon", "mstdn"],
|
||||
output:[
|
||||
{color: "blue", content: "\nMastodon", delay: 100},
|
||||
{color: "white", content: " is loading\n", delay: 200},
|
||||
{color: "white", content: "forwarding", delay: 400},
|
||||
{color: "white", content: " ...", forward: "https://social.cybre.town", delay: 600}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: ["git", "gitea", "Gitea"],
|
||||
output:[
|
||||
{color: "blue", content: "\nGitea", delay: 100},
|
||||
{color: "white", content: " is loading\n", delay: 200},
|
||||
{color: "white", content: "forwarding", delay: 400},
|
||||
{color: "white", content: " ...", forward: "https://git.adb.sh", delay: 600}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: ["matrix", "Matrix", "element", "Element"],
|
||||
output:[
|
||||
{color: "blue", content: "\nmatrix", delay: 100},
|
||||
{color: "white", content: " is loading\n", delay: 200},
|
||||
{color: "white", content: "forwarding", delay: 400},
|
||||
{color: "white", content: " ...", forward: "https://element.adb.sh", delay: 600}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: ["ether", "etherpad", "Etherpad"],
|
||||
output:[
|
||||
{color: "blue", content: "\nEtherpad", delay: 100},
|
||||
{color: "white", content: " is loading\n", delay: 200},
|
||||
{color: "white", content: "forwarding", delay: 400},
|
||||
{color: "white", content: " ...", forward: "https://ether.adb.sh", delay: 600}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: ["surl", "short-url", "shortURL"],
|
||||
output:[
|
||||
{color: "blue", content: "\ngit", delay: 100},
|
||||
{color: "white", content: " is loading\n", delay: 200},
|
||||
{color: "white", content: "forwarding", delay: 400},
|
||||
{color: "white", content: " ...", forward: "https://s.adb.sh", delay: 600}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: ["meet", "jitsi", "Jitsi"],
|
||||
output:[
|
||||
{color: "blue", content: "\nJitsi", delay: 100},
|
||||
{color: "white", content: " is loading\n", delay: 200},
|
||||
{color: "white", content: "forwarding", delay: 400},
|
||||
{color: "white", content: " ...", forward: "https://meet.adb.sh", delay: 600}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
let history = [{
|
||||
@ -91,21 +133,19 @@ export default {
|
||||
},
|
||||
methods:{
|
||||
renderCommand(input){
|
||||
if (input === undefined) input = history[history.length-1].command;
|
||||
input = input.split(" ");
|
||||
let command = commands.find((command) => command.name === input[0]);
|
||||
if (command === undefined) command = commands[0];
|
||||
command.output.forEach(group => {
|
||||
/*setTimeout(() => {
|
||||
history[history.length-1].output.push(group);
|
||||
}, group.delay)*/
|
||||
history[history.length-1].output.push(group);
|
||||
})
|
||||
history[history.length-1].output = this.getCommand(input).output;
|
||||
history.push({
|
||||
host: "[cybre.town]$ ",
|
||||
command: "",
|
||||
output: []
|
||||
})
|
||||
},
|
||||
getCommand(input) {
|
||||
input = (input?input:history[history.length-1].command).split(" ")[0];
|
||||
let command = commands.find(
|
||||
command => Array.isArray(command.name)?command.name.find(
|
||||
altName => altName === input):command.name === input);
|
||||
return command?command:commands[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user