From 1446d5fb320c706f3f4d3375d9e15363d5d03bdf Mon Sep 17 00:00:00 2001
From: Carlos <28845529+mesacarlos@users.noreply.github.com>
Date: Tue, 20 Aug 2019 16:10:59 +0200
Subject: [PATCH] Client, revision 2: Console colors added. General
 improvements.

---
 client/index.html                         |  8 ++--
 client/scripts/WebConsole.js              | 47 ++++++++++++++++++++++-
 client/scripts/WebConsoleJqueryHandler.js |  3 ++
 client/styles/WebConsole.css              |  4 ++
 4 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/client/index.html b/client/index.html
index dec73e6..c118cd0 100644
--- a/client/index.html
+++ b/client/index.html
@@ -93,13 +93,13 @@
 						<button type="button" class="btn btn-danger" id="deleteServerButton">Delete server</button>
 					</div>
 				</div>
-				<div class="input-group mb-3">
-					<textarea class="form-control" rows="20" id="consoleTextArea" disabled style="resize: none;"></textarea>
+				<div class="card mb-2">
+					<div class="card-body overflow-auto text-light bg-dark console" id="consoleTextArea"></div>
 				</div>
 				<div class="input-group mb-3">
 					<input type="text" class="form-control" id="commandInput">
 					<div class="input-group-append">
-						<button class="btn btn-outline-secondary" type="button" id="sendCommandButton">Send</button>
+						<button class="btn btn-secondary" type="button" id="sendCommandButton">Send</button>
 					</div>
 				</div>
 			</div>
@@ -198,7 +198,7 @@
 		<!-- Webpage footer -->
 		<footer class="footer mt-auto py-3">
 			<div class="container">
-				<span class="text-muted">WebConsole v1.1 - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
+				<span class="text-muted">WebConsole v1.1 (rev. 2) - <a href="https://github.com/mesacarlos/WebConsole">GitHub</a></span>
 			</div>
 		</footer>
 		
diff --git a/client/scripts/WebConsole.js b/client/scripts/WebConsole.js
index 8f2adcd..6cb6087 100644
--- a/client/scripts/WebConsole.js
+++ b/client/scripts/WebConsole.js
@@ -96,9 +96,52 @@ function onWebSocketsMessage(message){
 * Write to console
 */
 function writeToWebConsole(msg){
-	var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 12 == $("#consoleTextArea").height();
+	var isScrolledDown = document.getElementById("consoleTextArea").scrollHeight - document.getElementById("consoleTextArea").scrollTop - 40 == $("#consoleTextArea").height();
 	
-	$("#consoleTextArea").append(msg.replace("<", "&lt;") + "\n");
+	//Write to div, replacing < to &lt; (to avoid XSS) and replacing new line to br.
+	msg = msg.replace(/</g, "<");
+	msg = msg.replace(/(?:\r\n|\r|\n)/g, "<br>");
+	
+	//Color filter for Windows (thanks to SuperPykkon)
+	msg = msg.replace(/\[0;30;22m/g, "<span style='color: #000000;'>"); //&0
+	msg = msg.replace(/\[0;34;22m/g, "<span style='color: #0000AA;'>"); //&1
+	msg = msg.replace(/\[0;32;22m/g, "<span style='color: #00AA00;'>"); //&2
+	msg = msg.replace(/\[0;36;22m/g, "<span style='color: #00AAAA;'>"); //&3
+	msg = msg.replace(/\[0;31;22m/g, "<span style='color: #AA0000;'>"); //&4
+	msg = msg.replace(/\[0;35;22m/g, "<span style='color: #AA00AA;'>"); //&5
+	msg = msg.replace(/\[0;33;22m/g, "<span style='color: #FFAA00;'>"); //&6
+	msg = msg.replace(/\[0;37;22m/g, "<span style='color: #AAAAAA;'>"); //&7
+	msg = msg.replace(/\[0;30;1m/g, "<span style='color: #555555;'>");  //&8
+	msg = msg.replace(/\[0;34;1m/g, "<span style='color: #5555FF;'>");  //&9
+	msg = msg.replace(/\[0;32;1m/g, "<span style='color: #55FF55;'>");  //&a
+	msg = msg.replace(/\[0;36;1m/g, "<span style='color: #55FFFF;'>");  //&b
+	msg = msg.replace(/\[0;31;1m/g, "<span style='color: #FF5555;'>");  //&c
+	msg = msg.replace(/\[0;35;1m/g, "<span style='color: #FF55FF;'>");  //&d
+	msg = msg.replace(/\[0;33;1m/g, "<span style='color: #FFFF55;'>");  //&e
+	msg = msg.replace(/\[0;37;1m/g, "<span style='color: #FFFFFF;'>");  //&f
+	msg = msg.replace(/\[m/g, "</span>");  //&f
+	
+	//Color filter for UNIX (This is easier!)
+	//span may not be closed every time but browsers will do for ourselves
+	msg = msg.replace(/§0/g, "<span style='color: #000000;'>"); //&0
+	msg = msg.replace(/§1/g, "<span style='color: #0000AA;'>"); //&1
+	msg = msg.replace(/§2/g, "<span style='color: #00AA00;'>"); //&2
+	msg = msg.replace(/§3/g, "<span style='color: #00AAAA;'>"); //&3
+	msg = msg.replace(/§4/g, "<span style='color: #AA0000;'>"); //&4
+	msg = msg.replace(/§5/g, "<span style='color: #AA00AA;'>"); //&5
+	msg = msg.replace(/§6/g, "<span style='color: #FFAA00;'>"); //&6
+	msg = msg.replace(/§7/g, "<span style='color: #AAAAAA;'>"); //&7
+	msg = msg.replace(/§8/g, "<span style='color: #555555;'>"); //&8
+	msg = msg.replace(/§9/g, "<span style='color: #5555FF;'>"); //&9
+	msg = msg.replace(/§a/g, "<span style='color: #55FF55;'>"); //&a
+	msg = msg.replace(/§b/g, "<span style='color: #55FFFF;'>"); //&b
+	msg = msg.replace(/§c/g, "<span style='color: #FF5555;'>"); //&c
+	msg = msg.replace(/§d/g, "<span style='color: #FF55FF;'>"); //&d
+	msg = msg.replace(/§e/g, "<span style='color: #FFFF55;'>"); //&e
+	msg = msg.replace(/§f/g, "<span style='color: #FFFFFF;'>"); //&f
+	msg = msg.replace(/§r/g, "</span>");  //&r
+	
+	$("#consoleTextArea").append(msg + "<br>");
 	
 	if(isScrolledDown){
 		var textarea = document.getElementById('consoleTextArea');
diff --git a/client/scripts/WebConsoleJqueryHandler.js b/client/scripts/WebConsoleJqueryHandler.js
index 6276d40..1297993 100644
--- a/client/scripts/WebConsoleJqueryHandler.js
+++ b/client/scripts/WebConsoleJqueryHandler.js
@@ -103,6 +103,9 @@ $("#commandInput").on('keypress', function (e) {
 
 		//Enable the textbox again.
 		$(this).removeAttr("disabled");
+		
+		//Focus again
+		$(this).focus();
 	}
 });
 
diff --git a/client/styles/WebConsole.css b/client/styles/WebConsole.css
index c5643c2..124b34b 100644
--- a/client/styles/WebConsole.css
+++ b/client/styles/WebConsole.css
@@ -1,3 +1,7 @@
 .flat-progressbar{
 	height: 10px;
+}
+
+.console{
+	height: 480px;
 }
\ No newline at end of file