diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..bc8a670
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.idea/*
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
index 9de7471..99fe05a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1,15 +1,20 @@
body {
background-color: black;
- font-family: 'Lucida Console';
+ font-family: 'Lucida Console', serif;
font-size: large;
}
#cursor {
- position: absolute;
- z-index: -1;
- background-color: white;
- display: inline-block;
opacity: 1;
+ border: none;
+ font-size: inherit;
+ max-width: 1ch;
+ text-align: center;
+ caret-color: transparent;
+}
+
+#cursor:focus {
+ outline: none;
}
#textbox {
diff --git a/images/favicon.png b/images/favicon.png
new file mode 100644
index 0000000..c698f7c
Binary files /dev/null and b/images/favicon.png differ
diff --git a/index.html b/index.html
index e105110..e00e648 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,17 @@
-
+
+ Baipyr.US
-
-
+
-
-
-
-
+
+
+
+
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index f1ffeab..19ab03a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -3,78 +3,84 @@ let startPosition = 0;
let cursorPosition = 0;
let cursorYOffset = 0;
-document.addEventListener("keypress", e=>{
- if ((e.key == "Enter") || (e.code == "KeyV" && e.ctrlKey))
- return;
- let textbox = document.getElementById("input");
- const index = cursorPosition - startPosition;
- if (e.key == ' ' && (textbox.textContent[index-1] == ' ' || cursorPosition == startPosition))
- return;
- if (index <= textbox.textContent.length-1) {
- const text = textbox.textContent;
- const a = text.substring(0, index);
- const b = text.substring(index, text.length);
- textbox.textContent = a + e.key + b;
- } else
- textbox.textContent += e.key;
+const tbDiv = document.getElementById("textbox");
+tbDiv.innerHTML = pretext+tbDiv.innerHTML;
+const length = tbDiv.innerText.length+1;
+startPosition = length;
+cursorPosition = length;
+const cursor = document.getElementById("cursor");
+const textIn = document.getElementById("input");
+
+cursor.oninput = () => {
+ textIn.textContent += cursor.value;
+ cursor.value = "";
cursorPosition++;
- updateCursor();
+};
+cursor.focus();
+
+document.addEventListener("selectionchange", e => {
+ if (e.target !== cursor) {
+ const selection = window.getSelection();
+ if (selection.type === "Caret")
+ cursor.focus();
+ console.log(selection);
+ }
});
-document.addEventListener("keydown", e=>{
- let textbox = document.getElementById("input");
+document.addEventListener("keydown", e => {
const index = cursorPosition - startPosition;
- const text = textbox.textContent;
+ const text = textIn.textContent;
switch (e.key) {
case "Backspace":
// Ein Zeichen nach links löschen
- if (index == 0)
+ if (index === 0)
return;
- if (index <= textbox.textContent.length-1) {
+ if (index <= textIn.textContent.length-1) {
const a = text.substring(0, index-1);
const b = text.substring(index, text.length);
- textbox.textContent=a+b;
+ textIn.textContent=a+b;
} else
- textbox.textContent = text.substring(0,text.length-1);
+ textIn.textContent = text.substring(0,text.length-1);
cursorPosition--;
- updateCursor();
break;
case "ArrowLeft":
// Ein Zeichen nach links
- if (cursorPosition > startPosition) {
+ if (cursorPosition > startPosition)
cursorPosition--;
- updateCursor();
- }
break;
case "ArrowRight":
// Ein Zeichen nach reckts
- if (index < textbox.textContent.length) {
+ if (index < textIn.textContent.length)
cursorPosition++;
- updateCursor();
- }
break;
case "Delete":
// Ein Zeichen nach rechts löschen
- if (index == 0 || index >= textbox.textContent.length)
+ if (index === 0 || index >= textIn.textContent.length)
return;
const a = text.substring(0, index);
const b = text.substring(index+1, text.length);
- textbox.textContent=a+b;
+ textIn.textContent=a+b;
break;
case "Enter":
// Befehl absenden / Zeilenumbruch
- const parent = document.getElementById("textbox");
- parent.removeChild(textbox);
+ const cursor = document.getElementById("cursor");
+ tbDiv.removeChild(cursor);
+ tbDiv.removeChild(textIn);
// Run command and return output???
- const commandOutput = "";
-
- parent.innerHTML += '' + text + '
' + commandOutput + pretext;
- textbox.textContent = "";
- parent.appendChild(textbox);
+ let commandOutput = "";
+
+ const aTag = str => `${str}`;
+ if (commandOutput !== "") {
+ commandOutput = `${aTag(commandOutput)}
`;
+ cursorYOffset++;
+ }
+ tbDiv.innerHTML += `${aTag(text)}
${commandOutput}${pretext}`;
+ textIn.textContent = "";
+ tbDiv.appendChild(textIn);
+ tbDiv.appendChild(cursor);
cursorPosition = startPosition;
cursorYOffset++;
- updateCursor();
break;
case "ArrowUp":
// Einen Befehl zurück in der History
@@ -88,24 +94,6 @@ document.addEventListener("keydown", e=>{
}
});
-function updateCursor() {
- let cursor = document.getElementById("cursor");
- const transform = `translate(${cursorPosition}ch,${cursorYOffset}em)`;
- cursor.style.transform = transform;
-}
-
-function preload() {
- let cursor = document.getElementById("cursor");
- let textbox = document.getElementById("textbox");
- textbox.innerHTML = pretext+textbox.innerHTML;
- const length = textbox.innerText.length+1;
- const transform = `translate(${length}ch)`;
- cursor.style.transform = transform;
- startPosition = length;
- cursorPosition = length;
-}
-
setInterval(()=>{
- let cursor = document.getElementById("cursor");
- cursor.style.opacity = (cursor.style.opacity=="1")?"0":"1";
+ cursor.style.opacity = !parseInt(cursor.style.opacity)+0;
},1000);
\ No newline at end of file