Merge branch 'master' into chatboxstyle

4 files changed, 50 insertions, 16 deletions

diff --git a/webAO/client.html b/webAO/client.html
index af9949b..5ec6519 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -51,8 +51,9 @@
 	<div id="client_charselect">
 		<p>Choose your character</p>
 		<button onclick="pickChar(1001)">Or spectate</button>
-		<br>
-		<br>
+		<br><br>
+		<input id="client_charactersearch" placeholder="Search" oninput="chartable_filter(event)"></input>
+		<br><br>
 		<div id="client_chartable"></div>
 	</div>
 	<div id="client_error" class="error" style="display: none">
@@ -281,18 +282,19 @@
 			<meta name="frame-title" lang="en" content="Evidence">
 			<fieldset style="text-align: left; display: flex; flex-direction: column;">
 				<legend>Information</legend>
-				<div style="display: flex;">
+				<hr>
+				<div style="display: flex;">					
 					<img id="evi_preview" class="evi_icon" src="" alt="Evidence Icon" onerror="imgError(this);">
 					<div id="evi_options">
+						<input id="evi_name" name="evi_name" type="text" placeholder="Evidence name">
+						<br>
 						<label for="evi_filename">Icon:</label>
 						<select id="evi_select" name="evi_select" onchange="updateEvidenceIcon()"></select>
 						<input id="evi_filename" name="evi_filename" type="text"
 							placeholder="Custom filename">
-						<br>
-						<label for="evi_name">Name:</label>
-						<input id="evi_name" name="evi_name" type="text" placeholder="Evidence name">
 					</div>
 				</div>
+				<hr>
 				<div style="display: flex; padding-top: 5px;">
 					<textarea id="evi_desc" name="evi_desc" rows="2" cols="20"
 						placeholder="Evidence description"></textarea>
@@ -311,8 +313,7 @@
 			<br>
 			<div id="evidences"></div>
 			<br>
-			<button id="button_present" alt="Present" class="client_button" onclick="togglePresent()"
-				style="letter-spacing: 3px; width: 8em;"><i>Present</i></button>
+			<button id="button_present" alt="Present" class="client_button" onclick="togglePresent()">Present</button>
 		</span>
 
 		<!-- Settings section -->
diff --git a/webAO/client.js b/webAO/client.js
index 9392f2c..54458e5 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1137,9 +1137,9 @@ class Client extends EventEmitter {
 			let img = document.getElementById(`demo_${i}`);
 
 			if (args[i + 1] === "-1")
-				img.style = "opacity: 0.25";
+				img.style.opacity = 0.25;
 			else if (args[i + 1] === "0")
-				img.style = "";			
+				img.style.opacity = 1;			
 		}
 	}
 
@@ -2285,6 +2285,24 @@ function appendICLog(msg, name = "", time = new Date()) {
 }
 
 /**
+ * Triggered when the music search bar is changed
+ * @param {MouseEvent} event
+ */
+export function chartable_filter(_event) {
+	const searchname = document.getElementById("client_charactersearch").value;
+
+	client.chars.forEach(function (character, charid) {
+		const demothing = document.getElementById(`demo_${charid}`);
+		if (character.name.toLowerCase().indexOf(searchname.toLowerCase()) === -1) { 
+			demothing.style.display = "none";
+		} else {
+			demothing.style.display = "inline-block";
+		}
+	});
+}
+window.chartable_filter = chartable_filter;
+
+/**
  * Requests to play as a character.
  * @param {number} ccharacter the character ID; if this is a large number,
  * then spectator is chosen instead.
diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css
index ffd7b28..985c04f 100644
--- a/webAO/styles/classic.css
+++ b/webAO/styles/classic.css
@@ -15,13 +15,26 @@ img {
 	image-rendering: pixelated;
 }
 
+hr {
+	height: 6px;
+	width: 100%;
+	background-color: #c6c6c6;
+	background: repeating-linear-gradient(to right,#f7f7f7, #f7f7f7 1px, #8c8c8c 1px, #8c8c8c 2px, #c6c6c6 2px, #c6c6c6 16px);
+	margin: 0;
+}
+
 #evi_name {
 	background-color: #393939;
 	color: #ffad18;
+	border: none;
 }
 
 #evi_desc {
 	flex: 1 auto;
+	border-top: 1px solid #6b946b;
+	border-left: 1px solid #6b946b;
+	border-right: none;
+	border-bottom: none;
 	background-color: #9cc694;
 }
 
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 4063b67..fa020ef 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -126,6 +126,7 @@
 	max-height: 60px;
 	margin: 3px;
 	border: 1px solid #000;
+	vertical-align: top;
 }
 
 #client_icwrapper {
@@ -321,17 +322,18 @@
 
 .evi_icon {
 	width: 70px;
+	min-width: 70px;
 	height: 70px;
-	background-color: #787878;
-	outline-color: #886060;
-	outline-width: 1px;
-	outline-style: inset;
-	outline-offset: -1px;
+	background-color: #7b7b7b;
+	outline: 2px ridge #fff;
+	outline-offset: -2px;
+	margin-right: 2px;
 }
 
 #evi_options {
 	display: inline-block;
-	padding-left: 5px;
+	width: 100%;
+	border: 2px ridge white;
 }
 
 #evi_options label {