Updated lobby searching

We had added this features some time ago but it had to be deleted due Getkey was working on the game server list. I made some changes to the sort arrows (but haven't worked on sorting yet, sorry)
My commit refers to https://github.com/KordonBleu/jumpsuit/projects/1#card-2123886

client/view/search.js

@@ -1,23 +1,30 @@
-/*let searchInput = document.getElementById('search-input'),
+import * as servers from './servers.js';
+
+let searchInput = document.getElementById('lobby-search');
+
 export function applyLobbySearch() {
-	wsClt.serverList.forEach(function(lobby, index) {
-		//lobbyListElement.children are reversed compared to wsClt.serverList
-		let currentElem = lobbyListElement.children[wsClt.serverList.length - index - 1],
-			newValue = currentElem.firstChild.textContent;
+	for (let entry of servers.slaveRows) {
+		let tableRow = entry[1],
+			tableItem = tableRow.firstChild,
+			newValue = tableItem.textContent,
+			serverName = entry[0].userData.serverName;
 
-		if (searchInput.value === '') currentElem.classList.remove('search-hidden');
-		else {
-			let regx = new RegExp(searchInput.value, 'gi'),
-				match,
-				offset = 0;
-			while ((match = regx.exec(lobby.name)) !== null) {
+		if (searchInput.value !== '') {
+			let match, offset = 0, regex = new RegExp(searchInput.value.replace(/[#-.]|[[-^]|[?|{}]/g, '\\$&'), 'gi'); //clean RegEx
+			while ((match = regex.exec(serverName)) !== null) {
 				newValue = newValue.substr(0, match.index + offset) + '<u>' + newValue.substr(match.index + offset, match[0].length) + '</u>' + newValue.substr(offset + match.index + match[0].length);
 				offset += 7; //<u>...</u> inserted so the string length and match indexes change
 			}
-			if (offset === 0) currentElem.classList.add('search-hidden');
-			else currentElem.classList.remove('search-hidden');
-		}
-		currentElem.firstChild.innerHTML = newValue; //always set the innerHTML in order to clear highlights or re-highlight
-	});
+			if (offset === 0) tableRow.classList.add('hidden');
+			else tableRow.classList.remove('hidden');
+		} else tableRow.classList.remove('hidden');
+
+		tableItem.innerHTML = newValue;
+	}
 }
-searchInput.addEventListener('input', applyLobbySearch);*/
+
+document.getElementById('lobby-search-reset').addEventListener('click', e => {
+	e.preventDefault();
+	searchInput.value = '';
+});
+searchInput.addEventListener('input', applyLobbySearch);

static/style.css

@@ -281,10 +281,11 @@ label {
 	width: 1em;
 	height: 1em;
 }
-.lobby-list tr {
-	font-weight: 600;
+
+#lobby-list tr.hidden {
+	display: none;
 }
-.lobby-list tr:nth-child(even) {
+#lobby-list tr:nth-child(even) {
 	background-color: rgba(0, 0, 0, .1);
 }
 #lobby-list td:first-child {
@@ -296,7 +297,8 @@ label {
 	word-wrap: break-word;
 }
 #lobby-list td u {
-	color: #3F51B5;
+	color: #C2185B;
+	font-weight: 600;
 }
 #lobby-list:empty::before {
 	content: "No servers found :(";