Merge branch '274-tabcomplete-names' into 'master'

Autocomplete online character names on tab press

Closes #274

See merge request Isleward/isleward!555

src/client/ui/templates/messages/messages.js

@@ -36,6 +36,9 @@ define([
 		customChannels: [],
 		lastCustomChannel: null,
 
+		tabStart: null,
+		tabIndex: -1,
+
 		postRender: function () {
 			[
 				'onGetMessages',
@@ -343,9 +346,13 @@ define([
 			if ([9, 27].includes(charCode) || charCode !== 13) {
 				if (charCode === 9) {
 					e.preventDefault();
-					textbox.val(`${textbox.val()}    `);
+					this.tabComplete();
 				} else if (charCode === 27)
 					this.toggle(false);
+				else {
+					// If we pressed another key besides tab, esc, or enter, reset tab completion
+					this.tabIndex = -1;
+				}
 
 				return;
 			}
@@ -377,6 +384,44 @@ define([
 			});
 
 			this.toggle();
+		},
+
+		tabComplete: function () {
+			let textbox = this.find('input');
+			let text = textbox.val();
+
+			// If this is the first tab press, get the last word of the current text
+			if (this.tabIndex === -1) {
+				let match = text.match(/(\s+)?(\w*)$/);
+
+				if (!match)
+					return;
+				
+				this.tabStart = match[2];
+			}
+
+			// Get online player names and filter by our tab search
+			let list = $('.uiOnline').data('ui').onlineList.map(l => l.name);
+			list = list.sort().filter(player => player.startsWith(this.tabStart));
+
+			if (list.length === 0)
+				return;
+
+			// On each tab press, replace with the next element of the name list and wrap at the end
+			let nextIndex = this.tabIndex + 1;
+			if (nextIndex > list.length - 1)
+				nextIndex = 0;
+			
+			this.tabIndex = nextIndex;
+			
+			let completed = list[nextIndex];
+
+			// Replace the last word of the text with the matched name
+			let replaced = text.replace(/(\s+)?(\w*)$/, (match, p1, p2) => {
+				return (p1 || '') + completed;
+			});
+
+			textbox.val(replaced);
 		}
 	};
 });

src/client/ui/templates/messages/template.html

@@ -8,7 +8,7 @@
 	<div class="list rep chat info loot"></div>
 	<div class="bottom">
 		<div class="channelPicker"></div>
-		<input type="text" class="el textbox message">
+		<input type="text" class="el textbox message" spellcheck="false">
 		<div class="input el textbox message"></div>
 	</div>
 	<div class="bottom time"></div>