Redesigned chatbox for power users — and for those that just want a refresh
// ==UserScript==
// @name Power Chat
// @author commander
// @description Redesigned chatbox for power users — and for those that just want a refresh
// @namespace https://github.com/asger-finding/tanktrouble-userscripts
// @version 0.1.4
// @license GPL-3.0
// @match https://tanktrouble.com/*
// @match https://beta.tanktrouble.com/*
// @exclude *://classic.tanktrouble.com/
// @run-at document-end
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @require https://cdn.jsdelivr.net/npm/match-sorter@6/dist/match-sorter.umd.min.js
// @require https://update.greasyfork.org/scripts/482092/1309109/TankTrouble%20Development%20Library.js
// @noframes
// ==/UserScript==
GM_addStyle(`
#chat {
/* Disable drop shadow filter */
filter: none;
/* Transform chat location to bottom left */
inset: calc(100% - 30px) auto auto 34px !important;
}
/* Reverse chat messages flow */
#chat,
#chat .content,
#chat .body {
display: flex;
flex-direction: column-reverse;
}
#chat .body {
align-items: end;
background: #00000014;
border-image: linear-gradient(90deg, rgb(0 0 0 / 20%), #0000) 4 7 3 / 0 0 1pt 0 / 0;
border-radius: 3px;
direction: rtl;
margin-bottom: 4px;
margin-top: 0 !important;
mask-image: linear-gradient(to top, rgb(0 0 0) 70%, rgb(0 0 0 / 11%));
overflow: hidden;
padding-right: 10px;
pointer-events: visible;
/* Scrollbar */
scrollbar-gutter: stable;
top: 0 !important;
}
#chat .content {
position: relative;
width: fit-content !important;
}
#chat .status.button {
cursor: initial;
transform: translate(7px, -18px);
z-index: 1;
}
#chat form {
background: #ececec;
border-image: linear-gradient(90deg, rgb(0 0 0 / 20%), #0000) 4 7 3 / 0 0 1pt 0 / 1pt;
margin-left: 20px;
width: 200px;
}
/* Disable chat message sending animation */
#chat form[style*="repeating-linear-gradient"] {
background: #d0d0d0 !important;
}
#chat:not(.open) form {
display: none;
}
#chat textarea {
font-family: Arial, verdana;
left: 5px;
transition: width 0s !important;
width: calc(100% - 12px);
}
#chat .body .chatMessage svg {
border-left: 2px dotted rgb(170 170 170);
padding: 2px 4px 1px;
}
#chat .body.dragging {
border: none !important;
margin-left: 20px !important;
}
/* Rotate and align the handle to top-right */
.handle.ui-resizable-ne[src*="resizeHandleBottomRight.png"] {
height: 12px !important;
position: absolute;
right: 0;
top: 0;
transform: rotate(-90deg);
width: 12px;
}
body:has(#chat .body.ui-resizable-resizing) .ui-resizable-handle.handle.ui-resizable-ne {
display: none !important;
}
#chat .body:hover {
overflow-y: scroll;
}
#chat .body .chatMessage {
margin-left: ${(/Chrome.*Safari/u).test(navigator.userAgent) ? '3px' : '5px'};
direction: ltr;
}
#chat .body::-webkit-scrollbar {
width: 3px;
}
#chat .body::-webkit-scrollbar-track {
background: transparent;
}
#chat .body::-webkit-scrollbar-thumb {
background: rgb(170 170 170);
}
#chat form .autocomplete-dropdown {
background-color: #00ff02;
border-radius: 3px;
bottom: 0;
filter: drop-shadow(0 0 3px rgb(0 0 0 / 70%));
font-family: Arial, verdana;
margin-bottom: 25px;
max-height: 120px;
max-width: 200px;
min-width: 120px;
overflow-y: scroll;
padding: 4px 2px;
position: absolute;
scrollbar-color: #00a902 transparent;
scrollbar-gutter: stable;
scrollbar-width: thin;
white-space: nowrap;
z-index: 999;
}
#chat form .autocomplete-dropdown div {
border-bottom: 1pt dotted #00a902;
cursor: pointer;
display: none;
margin-bottom: 2px;
overflow: hidden;
padding: 0 8px 2px 4px;
text-overflow: ellipsis;
}
#chat form .autocomplete-dropdown .match {
display: block;
}
#chat form .autocomplete-dropdown .match:not(:has(~ .match)) {
border-bottom: none;
padding: 0 8px 0 4px;
}
#chat form .autocomplete-dropdown .highlight {
font-weight: bold;
}
#chat form .autocomplete-dropdown:hover .highlight {
font-weight: normal;
}
#chat form .autocomplete-dropdown div:hover {
font-weight: bold !important;
}
#chat form .autocomplete-dropdown:has(div:not(.highlight):hover) > .highlight {
font-weight: normal;
}
#chat form .autocomplete-caret-mirror {
background: transparent;
color: transparent;
font-family: Arial, verdana;
font-size: inherit;
font-weight: bold;
height: 0;
margin: 0 0 0 5px;
opacity: 0;
padding: 1px 2px;
pointer-events: none;
z-index: -2147483647;
}
`);
/**
* Reconfigure the chat handle to be dragging
* from the south-east direction (down)
* to the north-east direction (up)
*/
const changeHandleDirection = async() => {
const { resizable } = $.fn;
// Use a regular function to keep context
$.fn.resizable = function(...args) {
const [config] = args;
// Reassign the chat handle to be north-east facing
if (config.handles) {
const handle = config.handles.se;
if (handle === TankTrouble.ChatBox.chatBodyResizeHandle) {
handle.removeClass('ui-resizable-se')
.addClass('ui-resizable-ne');
config.handles.ne = handle;
delete config.handles.se;
// Set a taller chat maxHeight
config.maxHeight = 650;
}
}
return resizable.call(this, config);
};
await Loader.whenContentInitialized();
TankTrouble.ChatBox.chatBodyResizeHandle.detach().insertAfter(TankTrouble.ChatBox.chatBody);
};
/**
* Hook message render functions to disable jquery .show() animation and scroll to bottom
* This fixes chat messages not showing up in the reversed chat order or overflowed messages being cleared
*/
const fixChatRendering = () => {
Loader.interceptFunction(TankTrouble.ChatBox, '_renderChatMessage', (original, ...args) => {
TankTrouble.ChatBox.chatBody.scrollTop(TankTrouble.ChatBox.chatBody.height());
// Set animateHeight to false
args[9] = false;
original(...args);
});
Loader.interceptFunction(TankTrouble.ChatBox, '_renderSystemMessage', (original, ...args) => {
TankTrouble.ChatBox.chatBody.scrollTop(TankTrouble.ChatBox.chatBody.height());
// Set animateHeight to false
args[3] = false;
original(...args);
});
};
/**
* Prevent TankTrouble from clearing the chat when the client disconnects
* Print message to chat when client switches server to separate conversations
*/
const preventServerChangeChatClear = () => {
Loader.interceptFunction(TankTrouble.ChatBox, '_clearChat', (original, ...args) => {
const isUnconnected = ClientManager.getClient().getState() === TTClient.STATES.UNCONNECTED;
// Void the call if the client is unconnected
// when the function is invoked
if (isUnconnected) return null;
return original(...args);
});
Loader.interceptFunction(TankTrouble.ChatBox, '_updateStatusMessageAndAvailability', (original, ...args) => {
const [systemMessageText, guestPlayerIds] = args;
// Check for a welcome message. If match.
// print a different system message
if (systemMessageText === 'Welcome to TankTrouble Comms § § ') {
const newServer = ClientManager.getAvailableServers()[ClientManager.multiplayerServerId];
return original(`Connected to ${ newServer.name } ${ guestPlayerIds.length ? '§ ' : '' }`, guestPlayerIds);
}
return original(...args);
});
};
/**
* Write the chat savestate to storage and return
* @returns Promise for last savestate
*/
const initChatSavestate = async() => {
// Initialize dynamic stylesheet
// for user-defined chat width
const inputWidth = new CSSStyleSheet();
inputWidth.insertRule('#chat form { padding-right: 12px !important; }', 0);
inputWidth.insertRule('#chat form, #chat textarea { width: 208px !important; }', 1);
document.adoptedStyleSheets = [inputWidth];
// Savestate hooks
Loader.interceptFunction(TankTrouble.ChatBox, 'open', (original, ...args) => {
GM_setValue('chat-open', true);
original(...args);
});
Loader.interceptFunction(TankTrouble.ChatBox, 'close', (original, ...args) => {
GM_setValue('chat-open', false);
original(...args);
});
Loader.interceptFunction(TankTrouble.ChatBox, '_refreshChat', (original, ...args) => {
original(...args);
GM_setValue('chat-width', TankTrouble.ChatBox.chatBody[0].clientWidth);
});
// Get savestate
const shouldOpen = await GM_getValue('chat-open', true);
const initialWidth = await GM_getValue('chat-width', 0);
Loader.whenContentInitialized().then(() => {
/* eslint-disable prefer-destructuring */
const chatBody = TankTrouble.ChatBox.chatBody[0];
const chatInput = TankTrouble.ChatBox.chatInput[0];
/* eslint-enable prefer-destructuring*/
if (shouldOpen) TankTrouble.ChatBox.open();
if (initialWidth !== 0) chatBody.style.width = `${initialWidth}px`;
// Create a mutation observer that looks for
// changes in the chatBody's attributes
new MutationObserver(() => {
const width = Number(chatBody.offsetWidth || 220);
inputWidth.deleteRule(1);
inputWidth.insertRule(`#chat form, #chat form textarea { width: ${width - 12}px !important; }`, 1);
chatInput.dispatchEvent(new InputEvent('input'));
}).observe(chatBody, {
attributes: true,
characterData: false
});
});
};
/**
* Add up/down history for sent messages
* @param chatInput Input to target
*/
const addInputHistory = chatInput => {
const messages = [];
let currentInputValue = chatInput.value;
// Create and initialize chat messages history iterator
let i = messages.length;
const iterator = (function* chatsIterator() {
while (true) {
const incOrDec = (yield messages[i]) === 'prev' ? -1 : 1;
i = Math.min(Math.max(i + incOrDec, 0), messages.length);
}
}(messages));
// Initialize the generator
iterator.next();
/**
* Check whether or not the input has an empty selection range
* @returns Selection range is 0
*/
const isSelectionEmpty = () => chatInput.selectionStart === chatInput.selectionEnd;
/** Handle the user triggering a submit keydown event */
const handleSubmit = () => {
if (!chatInput.value) return;
messages.push(chatInput.value);
currentInputValue = '';
i = messages.length;
};
/** Handle the user triggering an arrow up keydown event */
const handleArrowUp = () => {
if (isSelectionEmpty() && chatInput.selectionStart === 0) {
const { value } = iterator.next('prev');
chatInput.value = typeof value === 'undefined' ? '' : value;
chatInput.setSelectionRange(chatInput.value.length, chatInput.value.length);
chatInput.dispatchEvent(new InputEvent('input', { isComposing: true }));
}
};
/** Handle the user triggering an arrow down keydown event */
const handleArrowDown = () => {
if (isSelectionEmpty() && chatInput.selectionStart === chatInput.value.length) {
const { value } = iterator.next();
chatInput.value = typeof value === 'undefined' ? currentInputValue : value;
chatInput.setSelectionRange(chatInput.value.length, chatInput.value.length);
chatInput.dispatchEvent(new InputEvent('input', { isComposing: true }));
}
};
// If the user is at the top of the history,
// save the chat input value as the "current"
// message whenever there is a change
chatInput.addEventListener('input', ({ inputType }) => {
const isAtEndOfHistory = i === messages.length;
const hasValueChanged = typeof inputType !== 'undefined';
if (isAtEndOfHistory && hasValueChanged) currentInputValue = chatInput.value;
});
// Listen for keydown events
// and trigger handlers
chatInput.addEventListener('keydown', ({ key }) => {
switch (key) {
case 'Enter':
handleSubmit();
break;
case 'ArrowUp':
handleArrowUp();
break;
case 'ArrowDown':
handleArrowDown();
break;
default:
break;
}
});
};
/**
* Add auto-complete for user mentions when typing @ in the chat input
* @param chatInput Chat input instance
*/
const addMentionAutocomplete = chatInput => {
class Dropdown {
options = new Map();
matches = [];
/**
* Setup the dropdown class
* @param input Input to attach to
* @param config Dropdown configuration (allow multiple of the same value, expiry time)
*/
constructor(input, config) {
this.input = $(input);
this.wrapper = $('<div class="autocomplete-dropdown" tabindex="-1"></div>').insertAfter(this.input);
this.textareaMirror = $('<div class="autocomplete-caret-mirror"></div>').appendTo(this.wrapper.parent());
this.textareaMirrorInline = $('<span></span>').appendTo(this.textareaMirror);
Object.assign(this, {
allowRepeats: false,
autofillLifetime: 10 * 60 * 100,
inputHeight: 18,
...config
});
this.wrapper.insertAfter(this.input);
this.hide();
}
#searchTerm = -1;
/**
* Filter the dropdown elements when searchterm is set
* @param term String term to search the dropdown registry for
* @returns term
*/
set searchTerm(term) {
if (this.#searchTerm !== term) {
this.#removeExpired();
const allSymbols = Array.from(this.options.keys());
this.matches = matchSorter.matchSorter(allSymbols, term, { keys: [symbol => symbol.description] });
for (const symbol of allSymbols) {
const element = this.options.get(symbol).value;
element.classList[this.matches.includes(symbol) ? 'add' : 'remove']('match');
}
for (const symbol of this.matches) this.wrapper.append(this.options.get(symbol).value);
this.#resetToFirst();
}
this.#searchTerm = term;
return term;
}
/**
* Getter for `searchTerm`
* @returns `searchTerm`
*/
get searchTerm() {
return this.#searchTerm;
}
iterator = (function* (options, that) {
let i = 0;
while (true) {
const symbol = that.matches[i];
const change = (yield [symbol, options.get(symbol)]) || 0;
i = (i = (i + change) % Math.max(that.matches.length, 1)) < 0
? i + that.matches.length
: i;
}
}(this.options, this));
/** Render the dropdown if not already visible */
show() {
if (this.isShowing()) return;
this.#resetToFirst();
this.wrapper.show();
this.wrapper.scrollTop(0);
}
/** Hide the dropdown */
hide() {
this.wrapper.hide();
}
/**
* Check if the dropdown is visible
* @returns Is the dropdown showing?
*/
isShowing() {
return this.wrapper.is(':visible');
}
/**
* Compute dropdown x-shift to textarea value.
*
* Should be called when value changes in the input field
*/
update() {
const transformed = this.input.val()
.substr(0, this.input[0].selectionStart);
this.textareaMirrorInline.html(transformed);
const rects = this.textareaMirrorInline[0].getBoundingClientRect();
const left = rects.right - rects.x;
this.left = left
+ Dropdown.#toNumeric(this.input.css('left'))
+ Dropdown.#toNumeric(this.input.css('margin-left'))
+ Dropdown.#toNumeric(this.input.css('padding-left'));
const isWordWrapped = this.#isWordWrapped();
const leftShift = isWordWrapped ? 0 : Math.max(0, this.left - (this.wrapper.width() / 2));
const bottomShift = this.input.outerHeight() - this.inputHeight;
this.wrapper.css('margin-left', `${leftShift}px`);
this.wrapper.css('margin-bottom', `${bottomShift + 25}px`);
if (!this.isShowing()) this.show();
}
/**
* Get data for the current position
* @returns Identifier and data for the current dropdown position
*/
getCurrent() {
return this.iterator.next(0).value;
}
/**
* Add an autocomplete option to the dropdown
* @param option Option as string
* @param submitCallback Event handler for mouseup
* @returns Success in adding option?
*/
addOption(option, submitCallback) {
const overrideSymbol = !this.allowRepeats
&& Array.from(this.options.keys())
.find(({ description }) => description === option);
const symbolExists = typeof overrideSymbol === 'symbol';
if (symbolExists) return false;
const symbol = Symbol(option);
const element = document.createElement('div');
element.innerText = option;
element.addEventListener('mouseup', evt => submitCallback(evt, evt.target.innerText));
const insert = [
symbol,
{
inserted: Date.now(),
lifetime: this.autofillLifetime,
value: element
}
];
this.options.set(...insert);
return true;
}
/**
* Add an array of text options to the dropdown
* @param options Options as string[]
* @param submitCallback Generalized event handler for mouseup for all options
*/
addOptions(options, submitCallback) {
for (const option of options) this.addOption(option, submitCallback);
}
/**
* Remove option and corresponding HTMLElement from DOM
* @param symbol Symbol for element to remove
* @returns Was the option deleted?
*/
removeOption(symbol) {
this.options.get(symbol)?.value.remove();
this.matches = this.matches.filter(toRemove => toRemove !== symbol);
return this.options.delete(symbol);
}
/**
* Clear all options from the dropdown
* @returns Did options clear?
*/
clearOptions() {
for (const symbol of this.options.keys()) this.removeOption(symbol);
return this.options.size === 0
&& this.wrapper.children().length === 0;
}
/**
* Navigate position in the dropdown up/down
* @param direction Up/down shift as number
* @returns Identifier for where we navigated to
*/
navigate(direction) {
this.wrapper.children().removeClass('highlight');
const [symbol, data] = this.iterator.next(direction).value;
if (!symbol) return null;
data.value.classList.add('highlight');
data.value.scrollIntoView(false);
return symbol;
}
/**
* Check if the input wraps to newline
* @returns Whether the input is one or multiple lines
*/
#isWordWrapped() {
return this.input.outerHeight() <= this.inputHeight;
}
/**
* Reset the position to the
* first item in the dropdown
*/
#resetToFirst() {
const symbols = this.matches;
const [currentSymbol] = this.iterator.next(0).value;
const dist = symbols.indexOf(currentSymbol);
this.navigate(-dist);
}
/**
* Remove expired entries
*/
#removeExpired() {
for (const [symbol, value] of this.options.entries()) {
const expiry = value.inserted + value.autofillLifetime;
if (Date.now() > expiry) this.removeOption(symbol);
}
}
/**
* Remove all non-numbers from string and return string as number
* @param str String to parse
* @returns String in number format
*/
static #toNumeric = str => Number(str.replace(/[^0-9.]/ug, ''));
}
const dropdown = new Dropdown(chatInput);
/**
* Get the word and start/end indexies of the input selectionEnd
* @returns Object with word and range start/end
*/
const getIndexiesOfWordInCurrentSelection = () => {
// Separate string by whitespace and
// list indexies for each word in array
const tokenizedQuery = chatInput.value.split(/[\s\n]/u).reduce((acc, word, index) => {
const previous = acc[index - 1];
const start = index === 0 ? index : previous.range[1] + 1;
const end = start + word.length;
return acc.concat([ { word, range: [start, end] } ]);
}, []);
const currentWord = tokenizedQuery.find(({ range }) => range[0] < chatInput.selectionEnd && range[1] >= chatInput.selectionEnd);
return currentWord;
};
/**
* Returns the user that the selection is over, from the input value, if prefixed by a @
* @returns Mention username or null
*/
const getUserFocusIfMention = () => {
const currentWord = getIndexiesOfWordInCurrentSelection();
const [mentions] = chatInput.value.split(/\s+(?=[^@])/u);
const isUserChat = mentions.startsWith('@');
if (currentWord && isUserChat) {
const [, end] = currentWord.range;
return end <= mentions.length ? currentWord : null;
}
return null;
};
/**
* Handle a dropdown submit event (enter, tab or click)
* by autofilling the value to the input field
* @param evt Event object
* @param username Username to autofill
*/
const handleSubmit = (evt, username = dropdown.getCurrent()[0].description) => {
const mention = getUserFocusIfMention();
if (mention === null) return;
const [start, end] = mention.range;
if (username) {
const before = chatInput.value.slice(0, start);
const after = chatInput.value.substring(end, chatInput.value.length);
const insertSpaceAfter = !after.startsWith(' ');
const beforeValue = `${ before }@${ username }${ insertSpaceAfter ? ' ' : '' }`;
const cursorPosition = [beforeValue.length + 1, beforeValue.length + 1];
chatInput.value = `${ beforeValue }${ after }`;
chatInput.setSelectionRange(...cursorPosition);
}
evt.preventDefault();
chatInput.dispatchEvent(new InputEvent('input'));
};
/**
* Event handler for TTClient.EVENTS.GAME_LIST_CHANGED
*/
const handleGameListChanged = () => {
const gameStates = ClientManager.getClient().getAvailableGameStates();
for (const gameState of gameStates) {
const playerStates = gameState.getPlayerStates();
for (const player of playerStates) {
const playerId = player.getPlayerId();
Backend.getInstance().getPlayerDetails(result => {
if (typeof result === 'object') dropdown.addOption(result.getUsername(), handleSubmit);
}, () => {}, () => {}, playerId, Caches.getPlayerDetailsCache());
}
}
};
/**
* Event handler for received chat messages
* @param data Event data
*/
const handleNewChatMessage = data => {
const involvedPlayerIds = data.involvedPlayerIds || [...data.getFrom() || [], ...data.getTo() || []];
const loggedIn = Users.getAllPlayerIds();
const foreignPlayerIds = involvedPlayerIds.filter(playerId => !loggedIn.includes(playerId));
for (const playerId of foreignPlayerIds) {
Backend.getInstance().getPlayerDetails(result => {
if (typeof result === 'object') dropdown.addOption(result.getUsername(), handleSubmit);
}, () => {}, () => {}, playerId, Caches.getPlayerDetailsCache());
}
};
chatInput.addEventListener('input', ({ isComposing }) => {
if (isComposing) return;
const userFocus = getUserFocusIfMention();
if (userFocus === null) {
dropdown.hide();
return;
}
dropdown.searchTerm = userFocus.word.replace(/^@/u, '');
if (!dropdown.matches.length) {
dropdown.hide();
return;
}
// Show UI
dropdown.show();
dropdown.update();
});
// eslint-disable-next-line complexity
chatInput.addEventListener('keydown', evt => {
const userFocus = getUserFocusIfMention();
if (userFocus === null) return;
dropdown.searchTerm = userFocus.word.replace(/^@/u, '');
if (!dropdown.matches.length) return;
switch (evt.key) {
case 'Enter':
case 'Tab':
handleSubmit(evt);
break;
case 'ArrowUp':
dropdown.navigate(-1);
evt.preventDefault();
break;
case 'ArrowDown':
dropdown.navigate(1);
evt.preventDefault();
break;
default:
break;
}
}, false);
/**
* State change event handler
* @param _self Self reference
* @param _oldState Old client state
* @param newState New client state
*/
const clientStateEventHandler = (_self, _oldState, newState) => {
switch (newState) {
case TTClient.STATES.UNCONNECTED:
dropdown.clearOptions();
break;
default:
break;
}
};
/**
* Event handler for new chat messages
* @param _self Self reference
* @param evt Event type
* @param data Event data
*/
// eslint-disable-next-line complexity
const clientEventHandler = (_self, evt, data) => {
switch (evt) {
case TTClient.EVENTS.GAME_LIST_CHANGED:
handleGameListChanged();
break;
case TTClient.EVENTS.USER_CHAT_POSTED:
if (data) handleNewChatMessage(data);
break;
case TTClient.EVENTS.GLOBAL_CHAT_POSTED:
case TTClient.EVENTS.CHAT_POSTED:
if (data) handleNewChatMessage(data);
break;
case TTClient.EVENTS.SYSTEM_CHAT_POSTED:
case TTClient.EVENTS.PLAYERS_BANNED:
case TTClient.EVENTS.PLAYERS_UNBANNED:
if (data) handleNewChatMessage(data);
break;
default:
break;
}
};
ClientManager.getClient().addStateChangeListener(clientStateEventHandler, this);
ClientManager.getClient().addEventListener(clientEventHandler, this);
};
changeHandleDirection();
fixChatRendering();
initChatSavestate();
Loader.whenContentInitialized().then(() => {
// eslint-disable-next-line prefer-destructuring
const chatInput = TankTrouble.ChatBox.chatInput[0];
preventServerChangeChatClear();
addMentionAutocomplete(chatInput);
addInputHistory(chatInput);
// Allow more characters in the chat input
chatInput.setAttribute('maxlength', '255');
});