Merge pull request #41 from AttorneyOnline/css_buttons

Css buttons

12 files changed, 67 insertions, 62 deletions

diff --git a/webAO/client.css b/webAO/client.css
index 8b19f1b..be80855 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -367,10 +367,14 @@ img {
 	height: auto;
 }
 
-#evi_icon {
-	background-image: url('misc/empty.png');
-	background-repeat: no-repeat;
-	background-size: contain;
+.evi_icon {
+	width: 70px;
+	height: 70px;
+	background-color: #787878;
+	outline-color:#886060;  
+	outline-width: 1px;
+	outline-style: inset;
+	outline-offset: -1px;
 }
 
 #evi_options {
@@ -445,8 +449,18 @@ img {
 }
 
 .client_button {
-	padding: 1px;
+	margin: 1px;
+	padding: 2px 15px;
 	cursor: pointer;
+	text-align: center;
+	font-weight: bold;
+	color: white;
+	background-color: #7b2900;
+	border-radius: 3px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #fffbf1;
+	box-shadow: 1px inset;
 }
 
 .client_button.hover_button.inactive {
@@ -454,18 +468,6 @@ img {
 }
 
 .client_button.hover_button:hover {
-	margin: -2px;
-	border-radius: 5px;
-	border-style: dashed;
-	border-width: 2px;
-	border-color: #FFD081;
-}
-
-.client_button.hover_button:hover {
-	margin: -2px;
-	border-radius: 5px;
-	border-style: dashed;
-	border-width: 2px;
 	border-color: #FFD081;
 }
 
diff --git a/webAO/client.html b/webAO/client.html
index 64078e6..71e2e86 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -27,7 +27,7 @@
 				<img id="client_char" alt="Character" onerror="charError(this);">
 				<img id="client_bench">
 				<img id="client_fg" alt="Various overlay" src="misc/placeholder.gif" onerror="imgError(this);">
-				<img id="client_evi" src="misc/evidence_selector.png" alt="Character Evidence"
+				<img id="client_evi" src="" alt="Character Evidence"
 					onerror="imgError(this);">
 				<img id="client_shout" alt="Shout overlay" src="misc/placeholder.gif" onerror="imgError(this);">
 				<div id="client_name">
@@ -54,9 +54,9 @@
 		</div>
 		<br>
 		<div id="client_buttons">
-			<img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleShout(1)">
-			<img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleShout(2)">
-			<img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleShout(3)">
+			<button id="button_1" alt="Hold it!" class="client_button" onclick="toggleShout(1)">Hold it!</button>
+			<button id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleShout(2)">OBJECTION!</button>
+			<button id="button_3" alt="Take That!" class="client_button" onclick="toggleShout(3)">Take That!</button>
 			<br>
 			<br>
 			<label for="textcolor">Text Color:</label>
@@ -71,9 +71,9 @@
 			<input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx">
 			<br>
 			<br>
-			<img src="misc/flip.png" id="button_flip" alt="Flip" class="client_button" onclick="toggleFlip()">
-			<img src="misc/flash.png" id="button_effect_1" alt="Flash" class="client_button" onclick="toggleEffect(1)">
-			<img src="misc/shake.png" id="button_effect_2" alt="Shake" class="client_button" onclick="toggleEffect(2)">
+			<button id="button_flip" alt="Flip" class="client_button" onclick="toggleFlip()"><b>Flip</b></button>
+			<button id="button_effect_1" alt="Flash" class="client_button" onclick="toggleEffect(1)"><b>Flash</b></button>
+			<button id="button_effect_2" alt="Shake" class="client_button" onclick="toggleEffect(2)"><b>Shake</b></button>
 		</div>
 		<fieldset style="margin:10px;">
 			<legend>Actions</legend>
@@ -177,8 +177,8 @@
 					<input id="bg_filename" name="bg_filename" class="short" type="text" style="margin-top:10px">
 					<br>
 					<br>
-					<img src="misc/location_change.png" id="bg_change" alt="Change" class="client_button hover_button"
-						onclick="changeBackgroundOOC()">
+					<button id="bg_change" alt="Change" class="client_button hover_button"
+						onclick="changeBackgroundOOC()">Change</button>
 				</span>
 			</fieldset>
 		</span>
@@ -189,7 +189,7 @@
 			<fieldset style="text-align: left; display: flex; flex-direction: column;">
 				<legend>Information</legend>
 				<div style="display: flex;">
-					<img id="evi_icon" src="misc/evidence_selector.png" alt="Evidence Icon" onerror="imgError(this);">
+					<img id="evi_preview" class="evi_icon" src="" alt="Evidence Icon" onerror="imgError(this);">
 					<div id="evi_options">
 						<label for="evi_filename">Icon:</label>
 						<select id="evi_select" name="evi_select" onchange="updateEvidenceIcon()"></select>
@@ -205,21 +205,21 @@
 						placeholder="Evidence description"></textarea>
 				</div>
 				<div style="display: block; text-align: center; padding-top: 20px;">
-					<img src="misc/evidence_add.png" id="evi_add" alt="Add Evidence" class="client_button hover_button"
-						onclick="addEvidence()">
-					<img src="misc/evidence_edit.png" id="evi_edit" alt="Edit Evidence"
-						class="client_button hover_button inactive" onclick="editEvidence()">
-					<img src="misc/evidence_cancel.png" id="evi_cancel" alt="Cancel Evidence"
-						class="client_button hover_button inactive" onclick="cancelEvidence()">
-					<img src="misc/evidence_remove.png" id="evi_del" alt="Remove Evidence"
-						class="client_button hover_button inactive" onclick="deleteEvidence()">
+					<button id="evi_add" alt="Add Evidence" class="client_button hover_button"
+						onclick="addEvidence()">Add</button>
+					<button id="evi_edit" alt="Edit Evidence"
+						class="client_button hover_button inactive" onclick="editEvidence()">Edit</button>
+					<button id="evi_cancel" alt="Cancel Evidence"
+						class="client_button hover_button inactive" onclick="cancelEvidence()">Cancel</button>
+					<button id="evi_del" alt="Remove Evidence"
+						class="client_button hover_button inactive" onclick="deleteEvidence()">Remove</button>
 				</div>
 			</fieldset>
 			<br>
 			<div id="evidences"></div>
 			<br>
-			<img src="misc/present.png" id="button_present" alt="Present" class="client_button"
-				onclick="togglePresent()">
+			<button id="button_present" alt="Present" class="client_button"
+				onclick="togglePresent()"><i>Present</i></button>
 		</span>
 
 		<!-- Settings section -->
@@ -261,10 +261,10 @@
 					onchange="changeBlipVolume()">
 			</div>
 			<br>
-			<img src="misc/character_change.png" id="char_change" alt="Change" class="client_button hover_button"
-				onclick="changeCharacter()" onload="loadSettings()">
-			<img src="misc/character_random.png" id="char_random" alt="Random" class="client_button hover_button"
-				onclick="randomCharacterOOC()">
+			<button id="char_change" alt="Change" class="client_button hover_button"
+				onclick="changeCharacter()">Change Character</button>
+			<button id="char_random" alt="Random" class="client_button hover_button"
+				onclick="randomCharacterOOC()">Random Character</button>
 			<br>
 			<br>
 			<span style="color:red">Only touch these settings if you know what you are doing.</span>
@@ -301,7 +301,7 @@
 		<!-- About section -->
 		<span class="menu_content" id="content_4">
 			<meta name="frame-title" lang="en" content="About">
-			<img id="about-logo" src="images/logo-new.png" alt="Attorney Online logo">
+			<img id="about-logo" src="images/logo-new.png" onload="loadSettings()" alt="Attorney Online logo">
 			<h1 style="line-height: .3em;">webAO</h1>
 			<h3>version 2.4</h3>
 			<p>Client created by
diff --git a/webAO/client.js b/webAO/client.js
index 1b13a95..dc4aca5 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -348,6 +348,7 @@ class Client extends EventEmitter {
 		// Load evidence array to select
 		const evidence_select = document.getElementById("evi_select");
 		evidence_select.add(new Option("Custom", 0));
+		console.log(evidence_arr);
 		evidence_arr.forEach(evidence => {
 			evidence_select.add(new Option(evidence));
 		});
@@ -688,7 +689,7 @@ class Client extends EventEmitter {
 			evidence_box.innerHTML += `<img src="${this.evidences[i - 1].icon}" 
 				id="evi_${i}" 
 				alt="${this.evidences[i - 1].name}"
-				class="client_button"
+				class="evi_icon"
 				onclick="pickEvidence(${i})">`;
 		}
 	}
@@ -1471,19 +1472,20 @@ class Viewport {
 			if (this.chatmsg.startspeaking) {
 				if (this.chatmsg.evidence > 0) {
 					// Prepare evidence
-					eviBox.style.backgroundImage = "url('" + client.evidences[this.chatmsg.evidence - 1].icon + "')";
+					eviBox.src = safe_tags(client.evidences[this.chatmsg.evidence - 1].icon);
+
+					eviBox.style.width = "auto";
+					eviBox.style.height = "30%";
+					eviBox.style.opacity = 1;
 
 					if (this.chatmsg.side === "def") {
 						// Only def show evidence on right
 						eviBox.style.right = "1.5em";
 						eviBox.style.left = "initial";
-						eviBox.style.height = "30%";
-						eviBox.style.opacity = 1;
-					} else {
+						} else {
 						eviBox.style.right = "initial";
 						eviBox.style.left = "1.5em";
-						eviBox.style.height = "30%";
-						eviBox.style.opacity = 1;
+						
 					}
 				}
 
@@ -2055,13 +2057,14 @@ window.pickEmotion = pickEmotion;
  * Highlights and selects an evidence for in-character chat.
  * @param {string} evidence the evidence to be presented
  */
-export function pickEvidence(evidence) {
+export function pickEvidence(evidenceID) {
+	const evidence = Number(evidenceID);
 	if (client.selectedEvidence !== evidence) {
 		//Update selected evidence		
 		if (client.selectedEvidence > 0) {
-			document.getElementById("evi_" + client.selectedEvidence).className = "client_button";
+			document.getElementById("evi_" + client.selectedEvidence).className = "evi_icon";
 		}
-		document.getElementById("evi_" + evidence).className = "client_button dark";
+		document.getElementById("evi_" + evidence).className = "evi_icon dark";
 		client.selectedEvidence = evidence;
 
 		// Show evidence on information window
@@ -2135,7 +2138,7 @@ window.deleteEvidence = deleteEvidence;
 export function cancelEvidence() {
 	//Clear evidence data
 	if (client.selectedEvidence > 0) {
-		document.getElementById("evi_" + client.selectedEvidence).className = "client_button";
+		document.getElementById("evi_" + client.selectedEvidence).className = "evi_icon";
 	}
 	client.selectedEvidence = 0;
 
@@ -2145,7 +2148,7 @@ export function cancelEvidence() {
 	document.getElementById("evi_filename").value = "";
 	document.getElementById("evi_name").value = "";
 	document.getElementById("evi_desc").value = "";
-	document.getElementById("evi_icon").style.backgroundImage = "url('misc/empty.png')"; //Clear icon
+	document.getElementById("evi_preview").src = "misc/empty.png"; //Clear icon
 
 	// Update button
 	document.getElementById("evi_add").className = "client_button hover_button";
@@ -2178,14 +2181,14 @@ window.getIndexFromSelect = getIndexFromSelect;
 export function updateEvidenceIcon() {
 	const evidence_select = document.getElementById("evi_select");
 	const evidence_filename = document.getElementById("evi_filename");
-	const evidence_iconbox = document.getElementById("evi_icon");
+	const evidence_iconbox = document.getElementById("evi_preview");
 
 	if (evidence_select.selectedIndex === 0) {
 		evidence_filename.style.display = "initial";
-		evidence_iconbox.style.backgroundImage = `url(${AO_HOST}evidence/${encodeURI(evidence_filename.value.toLowerCase())})`;
+		evidence_iconbox.src = AO_HOST + "evidence/" + encodeURI(evidence_filename.value.toLowerCase());
 	} else {
 		evidence_filename.style.display = "none";
-		evidence_iconbox.style.backgroundImage = `url(${AO_HOST}evidence/${encodeURI(evidence_select.value.toLowerCase())})`;
+		evidence_iconbox.src = AO_HOST + "evidence/" + encodeURI(evidence_select.value.toLowerCase());
 	}
 }
 window.updateEvidenceIcon = updateEvidenceIcon;
diff --git a/webAO/favicon.ico b/webAO/favicon.ico
new file mode 100644
index 0000000..e0815c8
--- /dev/null
+++ b/webAO/favicon.ico
diff --git a/webAO/images/background.png b/webAO/images/background.png
deleted file mode 100644
index 0048d20..0000000
--- a/webAO/images/background.png
+++ /dev/null
diff --git a/webAO/images/button.png b/webAO/images/button.png
deleted file mode 100644
index 8ca7dd5..0000000
--- a/webAO/images/button.png
+++ /dev/null
diff --git a/webAO/images/buttonH.png b/webAO/images/buttonH.png
deleted file mode 100644
index e21d83c..0000000
--- a/webAO/images/buttonH.png
+++ /dev/null
diff --git a/webAO/images/logo-neo.png b/webAO/images/logo-neo.png
deleted file mode 100644
index c625cac..0000000
--- a/webAO/images/logo-neo.png
+++ /dev/null
diff --git a/webAO/images/logo.png b/webAO/images/logo.png
deleted file mode 100644
index b07cb99..0000000
--- a/webAO/images/logo.png
+++ /dev/null
diff --git a/webAO/images/sel.png b/webAO/images/sel.png
deleted file mode 100644
index d8005f5..0000000
--- a/webAO/images/sel.png
+++ /dev/null
diff --git a/webAO/index.html b/webAO/index.html
index 28fe555..7b19fd8 100644
--- a/webAO/index.html
+++ b/webAO/index.html
@@ -9,7 +9,7 @@
     <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Oswald%7CRoboto+Condensed" rel="stylesheet">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
+    <link rel="stylesheet" type="text/css" href="master.css" />
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link rel="icon" href="images/favicon.ico" />
     <script src="master.b.js"></script>
diff --git a/webAO/stylesheet.css b/webAO/master.css
index 209a7c0..9aa459f 100644
--- a/webAO/stylesheet.css
+++ b/webAO/master.css
@@ -18,7 +18,7 @@
 	vertical-align: middle;
 	text-decoration: none;
 	cursor: pointer;
-	background-image: url(images/button.png);
+	background: repeating-linear-gradient(#792c01, #792c01 3px, #9a491c 3px, #9a491c 4px);
 	border: 1px solid #553e30;
 	border-radius: 5px;
 	box-shadow: 0 0 0 1px #FFFFFF; 
@@ -35,14 +35,14 @@
 }
 
 .button:hover {
-	background-image: url(images/buttonH.png);
+	background: repeating-linear-gradient(#a57318, #a57318 3px, #c68c39 3px, #c68c39 4px);
 	border: 1px solid #bdb521;
 }
 
 #menu .chosen:before {
 	height: 200px;
 	width: 200px;
-	border-image: url(images/sel.png) 11 stretch !important;
+	border-color: #bdb521;
 	border-width:11px;
 	padding: 1px;
 }
@@ -55,7 +55,7 @@
 	top: 35%;
 	right: 0px;
 	padding: 0px;
-	background: url('images/desc.png') no-repeat;
+	background: url("./images/desc.png") no-repeat;
 	border: 2px solid #888;
 	border-radius: 5px;
 }