Add customizable buttons to Torn.com chat
// ==UserScript==
// @name Torn.com Enhanced Chat Buttons
// @namespace http://tampermonkey.net/
// @version 0.1
// @description Add customizable buttons to Torn.com chat
// @author Callz [2188704]
// @match https://www.torn.com/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
const buttonCSS = `
.custom-chat-button {
background-color: #007BFF;
color: white;
padding: 2px 7px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 6px;
cursor: pointer;
border-radius: 5px;
border: none;
transition: background-color 0.3s ease;
min-width: 80px;
overflow: hidden;
white-space: nowrap;
}
.custom-chat-button:hover {
background-color: #0056b3;
}
.custom-ui-panel label {
font-size: 20px;
margin-bottom: 20px;
}
.custom-ui-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #f5f5f5;
padding: 20px;
color: black;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 9999999999;
max-width: 70%;
}
.custom-ui-panel h3 {
font-size: 20px;
margin-bottom: 20px;
}
.custom-ui-panel input[type="text"],
.custom-ui-panel select,
.custom-ui-panel textarea {
width: 90%;
padding: 10px;
margin-top:10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.custom-ui-panel input[type="color"] {
padding: 0;
}
.custom-ui-panel button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 16px;
border-radius: 5px;
cursor: pointer;
margin: 10px 5px;
font-size: 16px;
transition: background-color 0.3s ease;
}
.custom-ui-panel button#close-ui {
background-color: #ccc;
margin-right: 10px;
}
.custom-ui-panel button#close-ui:hover {
background-color: #999;
}
.custom-ui-panel textarea {
height: 100px;
resize: vertical;
}
.custom-ui-panel hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #ccc;
}
#chat-config-button {
color:green;
}
#button-configs {
max-height: 200px;
overflow-y: scroll;
}
`;
function addCSS(cssString) {
const style = document.createElement('style');
style.textContent = cssString;
document.head.append(style);
}
function getButtonConfigurations() {
const defaultConfig = { buttons: [] };
const config = localStorage.getItem('chatButtonConfig');
return config ? JSON.parse(config) : defaultConfig;
}
function saveButtonConfigurations(config) {
localStorage.setItem('chatButtonConfig', JSON.stringify(config));
console.log('Saved configuration:', config);
}
function createUIPanel() {
const panel = document.createElement('div');
panel.className = 'custom-ui-panel';
panel.innerHTML = `
<h3>Chat Button Configuration</h3>
<div id="button-configs"></div>
<hr> <!-- Divider -->
<div>
<input type="text" id="button-text" placeholder="Button Text">
<label for="button-color">Background Color:</label>
<input type="color" id="button-color">
<select id="button-condition">
<option value="TradeChat">Trade Chat</option>
<option value="HospitalChat">Hospital Chat</option>
<option value="FactionChat">Faction Chat</option>
<option value="CompanyChat">Company Chat</option>
<option value="GlobalChat">Global Chat</option>
<option value="UserChat">User Chat</option>
</select>
<textarea id="button-text-content" placeholder="Add the text here that should be pasted in chat. You can use {name} to get the name of the active chat"></textarea>
<button id="add-button">Add Button</button>
<button id="edit-button" style="display: none;">Edit Button</button>
</div>
<button id="close-ui">Close</button>
`;
document.body.appendChild(panel);
document.getElementById('add-button').addEventListener('click', addNewButtonConfig);
document.getElementById('edit-button').addEventListener('click', editButtonConfig);
document.getElementById('close-ui').addEventListener('click', closeUI);
populateButtonConfigs();
}
function populateButtonConfigs() {
const configsContainer = document.getElementById('button-configs');
configsContainer.innerHTML = '';
const configs = getButtonConfigurations();
configs.buttons.forEach((buttonConfig, index) => {
let configDiv = document.createElement('div');
configDiv.innerHTML = `
<div>Text: ${buttonConfig.buttonText}</div>
<div>Color: ${buttonConfig.backgroundColor}</div>
<div>Condition: ${buttonConfig.condition}</div>
<div>Message: ${buttonConfig.text}</div>
`;
let editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.addEventListener('click', function() { selectForEdit(index); });
configDiv.appendChild(editButton);
let deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', function() { deleteButtonConfig(index); });
configDiv.appendChild(deleteButton);
configsContainer.appendChild(configDiv);
});
}
window.selectForEdit = function(index) {
const config = getButtonConfigurations().buttons[index];
document.getElementById('button-text').value = config.buttonText;
document.getElementById('button-color').value = config.backgroundColor;
document.getElementById('button-condition').value = config.condition;
document.getElementById('button-text-content').value = config.text;
document.getElementById('edit-button').style.display = 'block';
document.getElementById('edit-button').setAttribute('data-edit-index', index);
};
window.deleteButtonConfig = function(index) {
let config = getButtonConfigurations();
config.buttons.splice(index, 1);
saveButtonConfigurations(config);
populateButtonConfigs();
};
function addNewButtonConfig() {
const buttonText = document.getElementById('button-text').value;
const backgroundColor = document.getElementById('button-color').value;
const condition = document.getElementById('button-condition').value;
const text = document.getElementById('button-text-content').value;
let config = getButtonConfigurations();
config.buttons.push({ buttonText, backgroundColor, condition, text });
saveButtonConfigurations(config);
populateButtonConfigs();
}
function editButtonConfig() {
const index = parseInt(document.getElementById('edit-button').getAttribute('data-edit-index'), 10);
const buttonText = document.getElementById('button-text').value;
const backgroundColor = document.getElementById('button-color').value;
const condition = document.getElementById('button-condition').value;
const text = document.getElementById('button-text-content').value;
let config = getButtonConfigurations();
config.buttons[index] = { buttonText, backgroundColor, condition, text };
saveButtonConfigurations(config);
populateButtonConfigs();
}
function closeUI() {
const panel = document.querySelector('.custom-ui-panel');
if (panel) {
panel.remove();
}
}
function createConfigButton() {
const settingsPanel = document.querySelector('.settings-panel___IZSDs');
if (settingsPanel && !document.querySelector('#chat-config-button')) {
let configButton = document.createElement('button');
configButton.id = 'chat-config-button';
configButton.textContent = 'Edit Chat Buttons';
configButton.addEventListener('click', createUIPanel);
configButton.style = '/* Add specific styles for the button here */';
settingsPanel.appendChild(configButton);
}
}
addCSS(buttonCSS);
const chatContainerObserver = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
createConfigButton();
applyButtonConfigurations();
});
});
const chatContainer = document.querySelector('#chatRoot');
if (chatContainer) {
chatContainerObserver.observe(chatContainer, { childList: true, subtree: true });
}
function applyButtonConfigurations() {
const configs = getButtonConfigurations();
document.querySelectorAll('.chat-box___mHm01').forEach(chatBox => {
configs.buttons.forEach(buttonConfig => {
const conditionFunc = conditions[buttonConfig.condition];
if (conditionFunc && conditionFunc(chatBox) && !chatBox.querySelector(`[data-button-text="${buttonConfig.buttonText}"]`)) {
let button = document.createElement('button');
button.className = 'custom-chat-button';
button.innerText = buttonConfig.buttonText;
button.style.backgroundColor = buttonConfig.backgroundColor;
button.setAttribute('data-button-text', buttonConfig.buttonText);
button.addEventListener('click', () => addCustomText(chatBox, buttonConfig.text));
const filterContainer = chatBox.querySelector('.tt-chat-filter');
filterContainer.insertBefore(button, filterContainer.firstChild);
}
});
});
}
const conditions = {
TradeChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Trade',
HospitalChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Hospital',
FactionChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Faction',
CompanyChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Company',
GlobalChat: chatBox => chatBox.querySelector('.chat-box-header__name___jIjjM').textContent === 'Global',
UserChat: chatBox => chatBox.querySelector('.chat-box-header__options___nTsMU'),
};
function addCustomText(chatBox, messageTemplate) {
const chatTextarea = chatBox.querySelector('.chat-box-footer__textarea___liho_');
const nameElement = chatBox.querySelector('.typography___Dc5WV');
const name = nameElement ? nameElement.textContent.trim() : 'Trader';
const message = messageTemplate.replace('{name}', name);
if(chatTextarea) {
chatTextarea.value = message;
}
}
applyButtonConfigurations();
})();