Merge pull request #44 from AttorneyOnline/new_chatbox

New chatbox

6 files changed, 121 insertions, 53 deletions

diff --git a/webAO/classic.css b/webAO/classic.css
new file mode 100644
index 0000000..5235f70
--- /dev/null
+++ b/webAO/classic.css
@@ -0,0 +1,47 @@
+body {
+	font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "ＭＳ Ｐゴシック", "Tahoma", Sans;
+}
+
+img {
+	image-rendering: -moz-crisp-edges;
+	image-rendering: -o-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
+	image-rendering: crisp-edges;
+	-ms-interpolation-mode: nearest-neighbor;
+}
+
+#client_name {
+	display: none;
+	padding: 0px 6px;
+	height: 7%;
+	border: 1px solid rgba(255, 255, 255, 0.7);
+	background: rgba(73, 0, 254, 0.5);
+	top: 63%;
+	border-radius: 3px;
+	position: absolute;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: none;
+	width: 98%;
+	width: calc(100% - 4px);
+	margin: auto;
+	height: 30%;
+	border: 2px solid rgba(255, 255, 255, 0.7);
+	background-color: rgba(0, 0, 0, 0.5);
+	top: 70%;
+	border-radius: 4px;
+	position: absolute;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_chat p {
+	margin: 4px;
+	color: white;
+}
\ No newline at end of file
diff --git a/webAO/client.css b/webAO/client.css
index a23aa66..e736e16 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -1,15 +1,3 @@
-body {
-	font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "ＭＳ Ｐゴシック", "Tahoma", Sans;
-}
-
-img {
-	image-rendering: -moz-crisp-edges;
-	image-rendering: -o-crisp-edges;
-	image-rendering: -webkit-optimize-contrast;
-	image-rendering: crisp-edges;
-	-ms-interpolation-mode: nearest-neighbor;
-}
-
 #about-logo {
 	padding-top: 5px;
 	height: 30%;
@@ -228,42 +216,6 @@ img {
 	left: 0;
 }
 
-#client_name {
-	display: none;
-	padding: 0px 6px;
-	height: 7%;
-	border: 1px solid rgba(255, 255, 255, 0.7);
-	background: rgba(73, 0, 254, 0.5);
-	top: 63%;
-	border-radius: 3px;
-	position: absolute;
-}
-
-#client_chat {
-	font-size: 1em;
-	display: none;
-	width: 98%;
-	width: calc(100% - 4px);
-	margin: auto;
-	height: 30%;
-	border: 2px solid rgba(255, 255, 255, 0.7);
-	background-color: rgba(0, 0, 0, 0.5);
-	top: 70%;
-	border-radius: 4px;
-	position: absolute;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_chat p {
-	margin: 4px;
-	color: white;
-}
-
 .rainbow-text {
 	background-color: rgb(255, 255, 255);
 	background-image: repeating-linear-gradient(to right,
diff --git a/webAO/client.html b/webAO/client.html
index 0204560..3c0845b 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -6,7 +6,7 @@
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="stylesheet" type="text/css" href="client.css?v=1.0.0" id="client_stylesheet">
-	<link rel="stylesheet" type="text/css" href="default.css?v=1.0.0" id="client_theme">
+	<link rel="stylesheet" type="text/css" href="classic.css?v=1.0.0" id="client_theme">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 	<link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" />
 	<link type="text/css" rel="stylesheet"
@@ -287,10 +287,17 @@
 				onclick="randomCharacterOOC()">Random Character</button>
 			<br>
 			<br>
+			<label for="client_themeselect">Theme:</label>
+			<select id="client_themeselect" name="client_themeselect" onchange="reloadTheme()">
+				<option value="classic" selected>Classic</option>
+				<option value="soj">SoJ</option>
+			</select>
+			<br>
+			<br>
 			<span style="color:red">Only touch these settings if you know what you are doing.</span>
 			<br>
 			<br>
-			<label for="client_encoding"> Client side chat encoding:</label>
+			<label for="client_encoding">Client side chat encoding:</label>
 			<select id="client_encoding" name="client_encoding">
 				<option value="none" selected>None</option>
 				<option value="unicode">Unicode</option>
@@ -298,7 +305,7 @@
 			</select>
 			<br>
 			<br>
-			<label for="client_decoding"> Client side chat decoding:</label>
+			<label for="client_decoding">Client side chat decoding:</label>
 			<select id="client_decoding" name="client_decoding">
 				<option value="none">None</option>
 				<option value="unicode" selected>Unicode</option>
diff --git a/webAO/client.js b/webAO/client.js
index daac518..8524880 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1235,6 +1235,7 @@ class Viewport {
 
 		const nameBox = document.getElementById("client_name");
 		const chatBox = document.getElementById("client_chat");
+		const chatContainerBox = document.getElementById("client_chatcontainer");
 		const eviBox = document.getElementById("client_evi");
 		const shoutSprite = document.getElementById("client_shout");
 		const chatBoxInner = document.getElementById("client_inner_chat");
@@ -1265,6 +1266,7 @@ class Viewport {
 			// Hide message box
 			nameBox.style.display = "none";
 			chatBox.style.display = "none";
+			chatContainerBox.style.display = "none";
 			shoutSprite.src = client.resources[shout]["src"];
 			shoutSprite.style.display = "block";
 			this.shoutaudio.src=`${AO_HOST}characters/${encodeURI(this.chatmsg.name.toLowerCase())}/${shout}.wav`;
@@ -1282,6 +1284,7 @@ class Viewport {
 			// Hide message box
 			nameBox.style.display = "none";
 			chatBox.style.display = "none";
+			chatContainerBox.style.display = "none";
 			const delay = await this.getAnimLength(`${AO_HOST}characters/${encodeURI(chatmsg.name.toLowerCase())}/${encodeURI(chatmsg.preanim)}.gif`);
 			chatmsg.preanimdelay = delay;
 			this.initUpdater(delay);
@@ -1455,6 +1458,7 @@ class Viewport {
 	tick() {
 		const nameBox = document.getElementById("client_name");
 		const chatBox = document.getElementById("client_chat");
+		const chatContainerBox = document.getElementById("client_chatcontainer");
 		const charSprite = document.getElementById("client_char");
 		const pairSprite = document.getElementById("client_pair_char");
 		const eviBox = document.getElementById("client_evi");
@@ -1547,11 +1551,13 @@ class Viewport {
 					}
 				}
 
+				chatContainerBox.style.display = "block";
+
 				nameBox.style.display = "block";
-				nameBox.style.fontSize = (nameBox.offsetHeight * 0.7) + "px";
+				nameBox.style.fontSize = (nameBox.offsetHeight * 0.75) + "px";
 
 				chatBox.style.display = "block";
-				chatBox.style.fontSize = (chatBox.offsetHeight * 0.25) + "px";
+				chatBox.style.fontSize = (chatBox.offsetHeight * 0.3) + "px";				
 
 				if (this.chatmsg.color === 6)
 					chatBoxInner.className = "rainbow-text";
@@ -1832,6 +1838,16 @@ export function changeBlipVolume() {
 window.changeBlipVolume = changeBlipVolume;
 
 /**
+ * Triggered by the theme selector.
+ */
+export function reloadTheme() {
+	viewport.theme = document.getElementById("client_themeselect").value;
+	setCookie("theme",viewport.theme);
+	document.getElementById("client_theme").href = viewport.theme + ".css";
+}
+window.reloadTheme = reloadTheme;
+
+/**
  * Triggered when a character icon is clicked in the character selection menu.
  * @param {MouseEvent} event
  */
diff --git a/webAO/images/chatbox.svg b/webAO/images/chatbox.svg
new file mode 100644
index 0000000..90dbab7
--- /dev/null
+++ b/webAO/images/chatbox.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="82" width="400"><desc>  Created with Raphaël 2.0.1</desc><rect width="397" height="59" x="1.5" y="21.5" style="fill-opacity:0.7;stroke-linejoin:round"/><path d="m1.5 21.5v-20h83.8l10 20z" style="fill-opacity:0.7;fill:#230087;stroke-width:1px"/><path d="M1 1V81H399V21H95.5L85.5 1Z" style="fill:none;stroke-linejoin:round;stroke-opacity:0.8;stroke-width:1px;stroke:#c8c8c8"/><path d="M0 82V0h86c5 10.6 5 8.6 10 20h304v62z" style="fill:none;paint-order:normal;stroke-linejoin:round;stroke-opacity:0.8;stroke-width:1px;stroke:#000"/></svg>
\ No newline at end of file
diff --git a/webAO/soj.css b/webAO/soj.css
new file mode 100644
index 0000000..ad29317
--- /dev/null
+++ b/webAO/soj.css
@@ -0,0 +1,45 @@
+body {
+	font-family: sans-serif;
+}
+
+#client_chatcontainer {
+	position: absolute;
+	top: 73%;
+	height: 27%;
+	width: 100%;
+	background-image: url("images/chatbox.svg");
+	background-size: cover;
+ 	background-repeat: no-repeat;
+}
+
+#client_name {
+	display: none;
+	top: 5%;
+	padding: 0px 10px;
+	height: 20%;
+	border-radius: 3px;
+	position: absolute;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: none;
+	width: 100%;
+	margin: auto;
+	height: 90%;
+	top: 20%;
+	border-radius: 4px;
+	position: absolute;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_chat p {
+	margin: 4px;
+	padding: 5px 10px;
+	color: white;
+}
\ No newline at end of file