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

add render animation, add forwarding, add commands, css mobile view

Browse Source
master
adb 3 years ago
parent 4482c4673b
commit a8f0599e18
3 changed files with 140 additions and 47 deletions
Show Stats Download Patch File Download Diff File

39
src/App.vue
Unescape View File

@ -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>

26
src/components/console.vue
Unescape View File

@ -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)
})
}
}
}

122
src/render-commands.js
Unescape View File

@ -2,22 +2,18 @@ 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:
"try something like:\n" +
"\n" +
" - Mastodon > social\n" +
" - Gitea > git\n" +
" - Matrix > element\n" +
" - Etherpad > ether\n" +
" - short url > surl\n" +
" - Jitsi > meet\n",
"try something like:\n" +
"\n" +
" - Mastodon > social\n" +
" - Gitea > git\n" +
" - Matrix > element\n" +
" - Etherpad > ether\n" +
" - short url > surl\n" +
" - Jitsi > meet\n",
delay: 200
},
]
@ -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];
}
}
}
Write Preview
Loading…
Cancel
Save