From 6d1eef836a819f0ae91b98e8335f847f991a69af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Fri, 28 Apr 2017 23:40:26 +0200
Subject: [PATCH 1/2] Add autocomplete strategy for foreground colors

---
 client/js/constants.js | 20 ++++++++++++++++++++
 client/js/lounge.js    | 21 ++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/client/js/constants.js b/client/js/constants.js
index c9587709..275b3e81 100644
--- a/client/js/constants.js
+++ b/client/js/constants.js
@@ -1,5 +1,24 @@
 "use strict";
 
+const colorCodeMap = [
+	["00", "White"],
+	["01", "Black"],
+	["02", "Blue"],
+	["03", "Green"],
+	["04", "Red"],
+	["05", "Brown"],
+	["06", "Magenta"],
+	["07", "Orange"],
+	["08", "Yellow"],
+	["09", "Light Green"],
+	["10", "Cyan"],
+	["11", "Light Cyan"],
+	["12", "Light Blue"],
+	["13", "Pink"],
+	["14", "Grey"],
+	["15", "Light Grey"],
+];
+
 const commands = [
 	"/away",
 	"/back",
@@ -35,5 +54,6 @@ const commands = [
 ];
 
 module.exports = {
+	colorCodeMap: colorCodeMap,
 	commands: commands
 };
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 2d9eac34..9b263931 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -111,6 +111,25 @@ $(function() {
 		index: 1
 	};
 
+	const foregroundColorStrategy = {
+		id: "foreground-colors",
+		match: /\x03(\d{0,2}|[A-Za-z ]{0,10})$/,
+		search(term, callback) {
+			term = term.toLowerCase();
+			const matchingColorCodes = constants.colorCodeMap
+				.filter(i => i[0].startsWith(term) || i[1].toLowerCase().startsWith(term));
+
+			callback(matchingColorCodes);
+		},
+		template(value) {
+			return `<span class="irc-fg${parseInt(value[0], 10)}">${value[1]}</span>`;
+		},
+		replace(value) {
+			return "\x03" + value[0];
+		},
+		index: 1
+	};
+
 	socket.on("auth", function(data) {
 		var login = $("#sign-in");
 		var token;
@@ -724,7 +743,7 @@ $(function() {
 			chat.find(".chan.active .chat").trigger("msg.sticky"); // fix growing
 		})
 		.tab(completeNicks, {hint: false})
-		.textcomplete([emojiStrategy, nicksStrategy, chanStrategy, commandStrategy], {
+		.textcomplete([emojiStrategy, nicksStrategy, chanStrategy, commandStrategy, colorStrategy], {
 			dropdownClassName: "textcomplete-menu",
 			placement: "top"
 		}).on({

From 0981605faed09c1cc52541edf0ef04f78b810791 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Sun, 30 Apr 2017 12:18:21 +0200
Subject: [PATCH 2/2] Add autocomplete strategy for background colors

---
 client/css/style.css |  4 ++++
 client/js/lounge.js  | 25 ++++++++++++++++++++++++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/client/css/style.css b/client/css/style.css
index af9b5605..9f731c39 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1533,6 +1533,10 @@ kbd {
 	display: inline-block;
 }
 
+.textcomplete-item .irc-bg {
+	display: block;
+}
+
 /**
   * Tooltips v0.5.3
   * See http://primercss.io/tooltips/
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 9b263931..8c512267 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -130,6 +130,26 @@ $(function() {
 		index: 1
 	};
 
+	const backgroundColorStrategy = {
+		id: "background-colors",
+		match: /\x03(\d{2}),(\d{0,2}|[A-Za-z ]{0,10})$/,
+		search(term, callback, match) {
+			term = term.toLowerCase();
+			const matchingColorCodes = constants.colorCodeMap
+				.filter(i => i[0].startsWith(term) || i[1].toLowerCase().startsWith(term))
+				.map(pair => pair.concat(match[1])); // Needed to pass fg color to `template`...
+
+			callback(matchingColorCodes);
+		},
+		template(value) {
+			return `<span class="irc-fg${parseInt(value[2], 10)} irc-bg irc-bg${parseInt(value[0], 10)}">${value[1]}</span>`;
+		},
+		replace(value) {
+			return "\x03$1," + value[0];
+		},
+		index: 2
+	};
+
 	socket.on("auth", function(data) {
 		var login = $("#sign-in");
 		var token;
@@ -743,7 +763,10 @@ $(function() {
 			chat.find(".chan.active .chat").trigger("msg.sticky"); // fix growing
 		})
 		.tab(completeNicks, {hint: false})
-		.textcomplete([emojiStrategy, nicksStrategy, chanStrategy, commandStrategy, colorStrategy], {
+		.textcomplete([
+			emojiStrategy, nicksStrategy, chanStrategy, commandStrategy,
+			foregroundColorStrategy, backgroundColorStrategy
+		], {
 			dropdownClassName: "textcomplete-menu",
 			placement: "top"
 		}).on({