better style, DOS colors, simplified content
This commit is contained in:
randogoth
parent
c9b86ba012
commit
8338b702b4
12 changed files with 182 additions and 234 deletions
|
|
@ -1,5 +1,35 @@
|
|||
const randomColor = Math.floor(Math.random()*16777215).toString(16);
|
||||
document.querySelector('#blog-title').firstElementChild.style.backgroundColor = '#' + randomColor;
|
||||
function pickColors() {
|
||||
const backgrounds = [
|
||||
"#000000", // Black
|
||||
"#0000AA", // Blue
|
||||
];
|
||||
|
||||
const highlights = [
|
||||
"#00AA00", // Green
|
||||
"#00AAAA", // Cyan
|
||||
"#AA00AA", // Magenta
|
||||
"#AA5500", // Brown
|
||||
"#AAAA00", // Yellow
|
||||
"#AA0000", // Red
|
||||
"#555555", // Dark Gray
|
||||
"#5555FF", // Bright Blue
|
||||
"#55FF55", // Bright Green
|
||||
"#55FFFF", // Bright Cyan
|
||||
"#FF5555", // Bright Red
|
||||
"#FF55FF", // Bright Magenta
|
||||
"#FFFF55", // Bright Yellow
|
||||
];
|
||||
|
||||
return {
|
||||
// background: backgrounds[Math.floor(Math.random() * backgrounds.length)],
|
||||
highlight: highlights[Math.floor(Math.random() * highlights.length)],
|
||||
};
|
||||
}
|
||||
|
||||
const { background, highlight } = pickColors();
|
||||
|
||||
document.querySelector('.home').style.backgroundColor = background;
|
||||
document.querySelector('#blog-title').firstElementChild.style.backgroundColor = highlight;
|
||||
|
||||
let scrollHeight = Math.max(
|
||||
document.body.scrollHeight, document.documentElement.scrollHeight,
|
||||
|
|
@ -28,115 +58,115 @@ window.addEventListener('scroll', () => {
|
|||
}
|
||||
});
|
||||
|
||||
//components
|
||||
//console component
|
||||
class Console{
|
||||
comps=[];
|
||||
input_received=false;
|
||||
blocking_interval=null;
|
||||
text_color="#bbb";
|
||||
constructor(root){
|
||||
this.elem=document.createElement("span");
|
||||
this.elem.className="console";
|
||||
root.appendChild(this.elem);
|
||||
this.resetTextColor();
|
||||
}
|
||||
appendComponent(comp){
|
||||
this.comps.push(comp);
|
||||
this.elem.appendChild(comp.elem);
|
||||
}
|
||||
writeLine(txt){
|
||||
let text=new Text(txt,this.text_color);
|
||||
this.appendComponent(text);
|
||||
}
|
||||
async readLine(txt){
|
||||
let text=new Text(txt,this.text_color);
|
||||
this.appendComponent(text);
|
||||
let input=new Input(this.text_color);
|
||||
this.appendComponent(input);
|
||||
input.elem.focus({ preventScroll: true});
|
||||
return new Promise(resolve=>{
|
||||
this.blocking_interval=setInterval(()=>{
|
||||
if(this.input_received){
|
||||
this.input_received=false;
|
||||
clearInterval(this.blocking_interval);
|
||||
resolve(input.elem.innerText);
|
||||
}
|
||||
},500);
|
||||
})
|
||||
}
|
||||
setTextColor(color){
|
||||
this.text_color=color;
|
||||
}
|
||||
resetTextColor(){
|
||||
this.text_color="#bbb";
|
||||
}
|
||||
//helpers
|
||||
get lastComp(){return this.comps[this.comps.length-1]};
|
||||
}
|
||||
//text component
|
||||
class Text{
|
||||
constructor(txt,color){
|
||||
this.elem=document.createElement("span");
|
||||
this.elem.className="text";
|
||||
this.elem.style.color=color;
|
||||
this.elem.innerText=txt;
|
||||
}
|
||||
}
|
||||
//input component
|
||||
class Input{
|
||||
constructor(color){
|
||||
this.elem=document.createElement("span");
|
||||
this.elem.style.color=color;
|
||||
this.elem.contentEditable=true;
|
||||
this.elem.addEventListener('keydown',function(e){
|
||||
let key=e.key;
|
||||
if(key=="Enter"){
|
||||
e.preventDefault();
|
||||
cmd.input_received=true;
|
||||
cmd.lastComp.elem.contentEditable=false;
|
||||
cmd.lastComp.elem.style.borderWidth="0px";
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
// //components
|
||||
// //console component
|
||||
// class Console{
|
||||
// comps=[];
|
||||
// input_received=false;
|
||||
// blocking_interval=null;
|
||||
// text_color="#bbb";
|
||||
// constructor(root){
|
||||
// this.elem=document.createElement("span");
|
||||
// this.elem.className="console";
|
||||
// root.appendChild(this.elem);
|
||||
// this.resetTextColor();
|
||||
// }
|
||||
// appendComponent(comp){
|
||||
// this.comps.push(comp);
|
||||
// this.elem.appendChild(comp.elem);
|
||||
// }
|
||||
// writeLine(txt){
|
||||
// let text=new Text(txt,this.text_color);
|
||||
// this.appendComponent(text);
|
||||
// }
|
||||
// async readLine(txt){
|
||||
// let text=new Text(txt,this.text_color);
|
||||
// this.appendComponent(text);
|
||||
// let input=new Input(this.text_color);
|
||||
// this.appendComponent(input);
|
||||
// input.elem.focus({ preventScroll: true});
|
||||
// return new Promise(resolve=>{
|
||||
// this.blocking_interval=setInterval(()=>{
|
||||
// if(this.input_received){
|
||||
// this.input_received=false;
|
||||
// clearInterval(this.blocking_interval);
|
||||
// resolve(input.elem.innerText);
|
||||
// }
|
||||
// },500);
|
||||
// })
|
||||
// }
|
||||
// setTextColor(color){
|
||||
// this.text_color=color;
|
||||
// }
|
||||
// resetTextColor(){
|
||||
// this.text_color="#bbb";
|
||||
// }
|
||||
// //helpers
|
||||
// get lastComp(){return this.comps[this.comps.length-1]};
|
||||
// }
|
||||
// //text component
|
||||
// class Text{
|
||||
// constructor(txt,color){
|
||||
// this.elem=document.createElement("span");
|
||||
// this.elem.className="text";
|
||||
// this.elem.style.color=color;
|
||||
// this.elem.innerText=txt;
|
||||
// }
|
||||
// }
|
||||
// //input component
|
||||
// class Input{
|
||||
// constructor(color){
|
||||
// this.elem=document.createElement("span");
|
||||
// this.elem.style.color=color;
|
||||
// this.elem.contentEditable=true;
|
||||
// this.elem.addEventListener('keydown',function(e){
|
||||
// let key=e.key;
|
||||
// if(key=="Enter"){
|
||||
// e.preventDefault();
|
||||
// cmd.input_received=true;
|
||||
// cmd.lastComp.elem.contentEditable=false;
|
||||
// cmd.lastComp.elem.style.borderWidth="0px";
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
/************************************/
|
||||
let root=document.getElementById("root");
|
||||
// /************************************/
|
||||
// let root=document.getElementById("root");
|
||||
|
||||
let cmd=new Console(root);
|
||||
let prompt = "C:\\>"
|
||||
async function execute(){
|
||||
let command= await cmd.readLine(prompt);
|
||||
if ( command == "projects" ) window.location = "/current.html";
|
||||
else if ( command == "blog" ) window.location = "/blog";
|
||||
else if ( command == "archive" ) window.location = "/archive";
|
||||
else if ( command == "dir" ) window.location = "/archive";
|
||||
else if ( command == "home" ) window.location = "/";
|
||||
else if ( command == "connect" ) window.location = "/connect.html";
|
||||
else if ( command == "reboot" ) location.reload();
|
||||
else if ( command == "a:" ) {
|
||||
prompt = "A:\\>";
|
||||
cmd.writeLine("\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
else if ( command == "b:" ) {
|
||||
prompt = "B:\\>";
|
||||
cmd.writeLine("\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
else if ( command == "c:" ) {
|
||||
prompt = "C:\\>";
|
||||
cmd.writeLine("\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
else {
|
||||
cmd.writeLine("\nSyntax error\n");
|
||||
cmd=new Console(root);
|
||||
execute();
|
||||
}
|
||||
}
|
||||
execute();
|
||||
// let cmd=new Console(root);
|
||||
// let prompt = "C:\\>"
|
||||
// async function execute(){
|
||||
// let command= await cmd.readLine(prompt);
|
||||
// if ( command == "projects" ) window.location = "/current.html";
|
||||
// else if ( command == "blog" ) window.location = "/blog";
|
||||
// else if ( command == "archive" ) window.location = "/archive";
|
||||
// else if ( command == "dir" ) window.location = "/archive";
|
||||
// else if ( command == "home" ) window.location = "/";
|
||||
// else if ( command == "connect" ) window.location = "/connect.html";
|
||||
// else if ( command == "reboot" ) location.reload();
|
||||
// else if ( command == "a:" ) {
|
||||
// prompt = "A:\\>";
|
||||
// cmd.writeLine("\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// else if ( command == "b:" ) {
|
||||
// prompt = "B:\\>";
|
||||
// cmd.writeLine("\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// else if ( command == "c:" ) {
|
||||
// prompt = "C:\\>";
|
||||
// cmd.writeLine("\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// else {
|
||||
// cmd.writeLine("\nSyntax error\n");
|
||||
// cmd=new Console(root);
|
||||
// execute();
|
||||
// }
|
||||
// }
|
||||
// execute();
|
||||
Loading…
Add table
Add a link
Reference in a new issue