add rainbow text

2 files changed, 40 insertions, 12 deletions

diff --git a/webAO/client.css b/webAO/client.css
index 04d7bb3..8c77a90 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -250,6 +250,25 @@ img {
 	color: white;
 }
 
+.rainbow-text {
+	background-image: repeating-linear-gradient(to right, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange, yellow, green, blue, red, orange);
+	background-size: 200% 200%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: rainbow_alt 1s linear infinite;
+  }
+  
+  @keyframes rainbow { 
+    0%,100% {background-position: 0 0;    }
+    50%     {background-position: 100% 0; }
+  }
+
+  @keyframes rainbow_alt { 
+    0%   {background-position: 0 0;        }
+    100% {    background-position: 100% 0; }
+  }
+
 #client_inputbox {
 	font-size: 21px;
 	padding: 2px 10px;
diff --git a/webAO/client.js b/webAO/client.js
index 846259e..6082637 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -899,6 +899,7 @@ class Client extends EventEmitter {
 			let colorselect = document.getElementById("textcolor");
 
 			colorselect.options[colorselect.options.length] = new Option("Yellow", 5);
+			colorselect.options[colorselect.options.length] = new Option("Rainbow", 6);
 			colorselect.options[colorselect.options.length] = new Option("Pink", 7);
 			colorselect.options[colorselect.options.length] = new Option("Cyan", 8);
 		}
@@ -1033,6 +1034,19 @@ class Viewport {
 			"snddelay": 0,
 			"preanimdelay": 0
 		};
+
+		this.colors = {
+			"0": "#ffffff", // white
+			"1": "#00ff00", // green
+			"2": "#ff0000", // red
+			"3": "#ffa500", // orange
+			"4": "#4596ff", // blue
+			"5": "#ffff00", // yellow
+			"6": "#fedcba", // 6 is rainbow.
+			"7": "#aac0cb", // pink
+			"8": "#00ffff"  // cyan
+		};
+
 		this.blip = new Audio(AO_HOST + "sounds/general/sfx-blipmale.wav");
 		this.blip.volume = 0.5;
 
@@ -1262,6 +1276,7 @@ class Viewport {
 			// Hide message and evidence window
 			nameBox.style.display = "none";
 			chatBox.style.display = "none";
+			chatBoxInner.className = "";
 			eviBox.style.opacity = "0";
 			eviBox.style.height = "0%";
 			const shouts = {
@@ -1368,18 +1383,12 @@ class Viewport {
 				chatBox.style.display = "block";
 				chatBox.style.fontSize = (chatBox.offsetHeight * 0.25) + "px";
 
-				let colors = {
-					"0": "#ffffff", // white
-					"1": "#00ff00", // green
-					"2": "#ff0000", // red
-					"3": "#ffa500", // orange
-					"4": "#4596ff", // blue
-					"5": "#ffff00", // yellow
-					"6": "#fedcba", // 6 is rainbow.
-					"7": "#aac0cb", // pink
-					"8": "#00ffff"  // cyan
-				};
-				chatBoxInner.style.color = colors[this.chatmsg.color] || "#ffffff";
+				if (this.chatmsg.color === "6")
+					chatBoxInner.className = "rainbow-text";
+				else {
+					chatBoxInner.className = "";
+					chatBoxInner.style.color = this.colors[this.chatmsg.color] || "#ffffff";
+				}
 				this.chatmsg.startspeaking = false;
 
 				if (this.chatmsg.preanimdelay === 0) {