Terminal cursor bell/shake

openprotest · May 16, 2024 · 5180368 · 5180368
1 parent 1fbe0cd
commit 5180368
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/Protest/Front/ssh.js b/Protest/Front/ssh.js
@@ -132,8 +132,6 @@ class Ssh extends Terminal {
 		}
 		catch {}
 
-		console.log(connectionString);
-
 		this.ws.onopen = ()=> {
 			this.connectButton.disabled = true;
 			this.ws.send(connectionString);

diff --git a/Protest/Front/terminal.css b/Protest/Front/terminal.css
@@ -37,20 +37,23 @@
 
 .terminal-cursor {
 	position: absolute;
-	top: 0;
-	left: 0;
 	z-index: 1;
 	width: 3px;
 	height: 20px;
-	border-radius: 1px;
+	transition: .25s;
+}
+
+.terminal-cursor > div {
+	position: absolute;
+	width: 100%;
+	height: 100%;
 	opacity: 0;
+	border-radius: 1px;
 	background-color: var(--clr-accent);
 	box-shadow: var(--clr-accent) 0 0 2px;
-
-	transition: .25s;
 }
 
-.terminal-content:focus > .terminal-cursor {
+.terminal-content:focus > .terminal-cursor > div {
 	animation: terminal-cursor 1.2s infinite;
 }
 
@@ -66,4 +69,11 @@
 	30% {opacity:1}
 	70% {opacity:1}
 	100%{opacity:.1}
+}
+
+@keyframes terminal-shake {
+	10%, 90%      {transform:translateX(-1px)}
+	20%, 80%      {transform:translateX(2px)}
+	30%, 50%, 70% {transform:translateX(-4px)}
+	40%, 60%      {transform:translateX(4px)}
 }
diff --git a/Protest/Front/terminal.js b/Protest/Front/terminal.js
@@ -5,7 +5,7 @@ class Terminal extends Window {
 	constructor(params) {
 		super();
 
-		this.params = params ? params : {host:"", ansi:true, autoScroll:true, bell:true};
+		this.params = params ? params : {host:"", ansi:true, autoScroll:true, bell:false};
 
 		this.AddCssDependencies("terminal.css");
 
@@ -45,6 +45,8 @@ class Terminal extends Window {
 		this.cursorElement = document.createElement("div");
 		this.cursorElement.className = "terminal-cursor";
 
+		this.cursorElement.appendChild(document.createElement("div"));
+
 		this.statusBox = document.createElement("div");
 		this.statusBox.className = "terminal-status-box";
 		this.statusBox.textContent = "Connecting...";
@@ -324,9 +326,9 @@ class Terminal extends Window {
 				break;
 
 			case "\x07":
-				if (this.params.bell) {
-					this.Bell();
-				}
+				if (this.params.bell) this.Bell();
+				this.cursorElement.style.animation = "terminal-shake .3s 1";
+				setTimeout(()=>{ this.cursorElement.style.animation = ""; }, 300);
 				break;
 
 			//TODO:
@@ -879,7 +881,7 @@ class Terminal extends Window {
 		let ctx = new window.AudioContext();
 		let oscillator = ctx.createOscillator();
 		oscillator.type = "sine";
-		oscillator.frequency.value = 290;
+		oscillator.frequency.value = 360;
 
 		let gain = ctx.createGain();
 		gain.gain.value = .4;

diff --git a/Protest/Front/ui.js b/Protest/Front/ui.js
@@ -303,8 +303,8 @@ const MENU = {
 		{ t:"Watchdog", i:"mono/watchdog.svg?light", g:"tools", h:false, f:()=> new Watchdog(), k:"" },
 		{ t:"Gandalf",  i:"mono/gandalf.svg?light",  g:"tools", h:false, f:()=> new Gandalf() },
 
-		{ t:"Telnet",             i:"mono/telnet.svg?light",        g:"tools", h:true,  f:()=> new Telnet({host:"", ansi:true, autoScroll:true, bell:true}) },
-		{ t:"Secure shell",       i:"mono/ssh.svg?light",           g:"tools", h:false, f:()=> new Ssh({host:"", ansi:true, autoScroll:true, bell:true})},
+		{ t:"Telnet",             i:"mono/telnet.svg?light",        g:"tools", h:true,  f:()=> new Telnet({host:"", ansi:true, autoScroll:true, bell:false}), k:"terminal" },
+		{ t:"Secure shell",       i:"mono/ssh.svg?light",           g:"tools", h:false, f:()=> new Ssh({host:"", ansi:true, autoScroll:true, bell:false}), k:"ssh terminal" },
 		{ t:"WMI client",         i:"mono/wmi.svg?light",           g:"tools", h:false, f:params=> new Wmi(params), k:"windows management instrumentation viewer" },
 		{ t:"SNMP polling",       i:"mono/snmp.svg?light",          g:"tools", h:false, f:params=> new Snmp(params) },
 		//{ t:"SNMP traps",         i:"mono/trap.svg?light",          g:"tools", h:false, f:params=> new Snmp(params) },