Add extra buttons to mod.io pavlov map pages to allow switching to the map or adding it to the rotation of a server by using pavlovrcon.com
// ==UserScript==
// @name Pavlov mod.io maps integration with pavlovrcon.com
// @namespace https://greasyfork.org/en/users/1103172-underpl
// @version 3.0
// @description Add extra buttons to mod.io pavlov map pages to allow switching to the map or adding it to the rotation of a server by using pavlovrcon.com
// @author UnderPL
// @license CC BY-NC 4.0
// @require https://greasyfork.org/scripts/426194-toast-js/code/toastjs.js?version=971661
// @match https://mod.io/g/pavlov
// @match https://mod.io/g/pavlov/m/*
// @match https://mod.io/g/pavlov?_sort=*
// @match https://mod.io/g/pavlov?tags-in=*
// @match https://mod.io/g/pavlov?platforms*
// @grant GM_xmlhttpRequest
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==
(function() {
'use strict';
var currentPage = window.location.href;
var defaultGameMode = "INFECTION";
var storedGameMode = GM_getValue("storedGameMode", defaultGameMode);
var defaultServerId = "0";
var storedServerId = GM_getValue("storedServerId", defaultServerId);
var mapList = {};
var storedMapList = GM_getValue("storedMapList", mapList);
const mapsPageRegex = new RegExp("^https:\/\/mod\.io\/g\/pavlov(?:$|\\?tags-in=|\\?_sort=|\\?platforms)");
//To use with an HTTP server/proxy that can forward the request to the server
var httpProxy = false;
var httpProxyIp = "192.168.0.150"
var httpProxyPort = "3000"
const headers = {
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/114.0",
"Accept": "*/*",
"Accept-Language": "en-US,en;q=0.5",
"Content-Type": "application/json"
}
var retrievedMapList = false;
function retrieveMapList() {
GM_xmlhttpRequest({
method: "GET",
url: httpProxy ? `http://${httpProxyIp}:${httpProxyPort}/rcon?command=maps` : `https://pavlovrcon.com/api/maplist/${storedServerId}`,
headers: headers,
onload: function(response) {
if (response.status >= 200 && response.status < 400) {
var data = httpProxy ? JSON.parse(response.responseText) : response.responseText;
var mapListData = httpProxy ? data.MapList : JSON.parse(data);
mapListData.forEach(function(item) {
let mapId = httpProxy ? item.MapId : item.id;
let gameMode = httpProxy ? item.GameMode : item.game_mode;
if (mapId.startsWith("UGC")) {
mapId = mapId.substring(3);
if(!mapList[mapId]) {
mapList[mapId] = [];
}
mapList[mapId].push(gameMode);
}
});
retrievedMapList = true;
} else {
console.log("Command failed with status: " + response.status);
}
},
onerror: function() {
console.log("Request failed");
}
});
}
function createButton(id, color, text, targetButton) {
var newButton = targetButton.cloneNode(true);
newButton.id = id;
newButton.querySelector('span div span').textContent = text;
newButton.style.cssText = 'border-color: ' + color + ';margin-bottom: 10px;--primary-hover:' + color;
newButton.addEventListener('mouseover', function() {
newButton.querySelector('span div span').style.color = color;
});
newButton.addEventListener('mouseout', function() {
newButton.querySelector('span div span').style.color = 'inherit';
});
return newButton;
};
function confirmAction(mapName, mapId, selectedGameMode, action) {
var confirmationMessage = `Are you sure you want to ${action === 'addmaprotation' ? 'add' : 'remove'} "${mapName}" ${action === 'addmaprotation' ? 'to' : 'from'} the map rotation?\n
MapRotation=(MapId="${mapId}",GameMode="${selectedGameMode}")`;
return window.confirm(confirmationMessage);
}
function createSelectsAndLabels() {
var container = document.createElement('div');
container.style.cssText = 'justify-content:center;' + (currentPage.startsWith('https://mod.io/g/pavlov/m/') ? 'display:flex;' : "");
var serverIdDiv = document.createElement('div');
var serverIdLabel = document.createElement('label');
serverIdLabel.innerHTML = 'SERVER ID:';
serverIdLabel.style.cssText = 'font-size: 150%; margin: 0px 10px;';
serverIdDiv.appendChild(serverIdLabel);
var serverIdSelect = document.createElement('select');
serverIdSelect.id = "serverIds";
serverIdSelect.classList.add("form-select");
serverIdSelect.style.cssText = "color: black; font-size: 155%; padding-left: 5px; text-align: center; display: inline-block; margin: 0 auto;";
serverIdDiv.appendChild(serverIdSelect);
serverIdSelect.innerHTML = Array.from({length: 10}, (_, i) => i)
.map(id => `<option value="${id}" ${storedServerId == id ? 'selected' : ''}>${id}</option>`).join('');
serverIdSelect.addEventListener('change', function() {
GM_setValue("storedServerId", serverIdSelect.value);
});
var gameModeDiv = document.createElement('div');
var gameModeLabel = document.createElement('label');
gameModeLabel.innerHTML = 'MODE:';
gameModeLabel.style.cssText = 'font-size: 150%; margin: 0px 10px;';
gameModeDiv.appendChild(gameModeLabel);
var gameModeSelect = document.createElement('select');
gameModeSelect.id = "gameModes";
gameModeSelect.classList.add("form-select");
gameModeSelect.style.cssText = "color: black; font-size: 155%; padding-left: 5px; text-align: center; display: inline-block; margin: 0 auto;";
gameModeDiv.appendChild(gameModeSelect);
gameModeSelect.innerHTML = ['SND', 'TDM', 'DM', 'GUN', 'ZWV', 'WW2GUN', 'TANKTDM', 'KOTH', 'TTT', 'OITC', 'INFECTION', 'HIDE', 'PUSH', 'PH', 'CUSTOM']
.map(mode => `<option value="${mode}" ${storedGameMode === mode ? 'selected' : ''}>${mode}</option>`).join('');
gameModeSelect.addEventListener('change', function() {
storedGameMode = gameModeSelect.value;
GM_setValue("storedGameMode", storedGameMode);
});
container.appendChild(serverIdDiv);
container.appendChild(gameModeDiv);
return container;
};
function mapAction(mapId, selectedGameMode, action, callback) {
var body = JSON.stringify({
data: selectedGameMode,
"Map Name": "UGC" + mapId,
uid: null
});
var requestUrl;
if (httpProxy) {
requestUrl = `http://${httpProxyIp}:${httpProxyPort}/rcon?command=${action} UGC${mapId} ${selectedGameMode}`;
} else {
requestUrl = `https://pavlovrcon.com/api/${action}/${storedServerId}`;
}
GM_xmlhttpRequest({
method: httpProxy ? "GET" : "POST",
url: httpProxy ?
`http://${httpProxyIp}:${httpProxyPort}/rcon?command=${action} UGC${mapId} ${selectedGameMode}` :
`https://pavlovrcon.com/api/${action}/${storedServerId}`,
headers: headers,
data: body,
onload: function(response) {
if (response.status >= 200 && response.status < 400) {
cocoMessage.success(1500, "Command sent successfully", () => {
});
if(callback) {
callback(true);
}
} else {
cocoMessage.error(1500, "Command failed with status: " + response.status, () => {
});
if(callback) {
callback(false);
}
}
}
});
}
function addButtonsWithEventListeners(mapId, subscribeButton, specificMapPage = false) {
var playButton = createButton("playButton", "green", "Play", subscribeButton);
playButton.style.marginBottom = "10px";
playButton.style.marginTop = "8px";
var mapRotationButtonsContainer = document.createElement('div');
mapRotationButtonsContainer.style.cssText = 'display: flex; justify-content: space-between;';
var addToMapRotationButton = createButton("addToMapRotationButton", "blue", "Add to map rotation", subscribeButton);
var removeFromMapRotationButton = createButton("removeFromMapRotationButton", "blue", "Remove from map rotation", addToMapRotationButton);
addToMapRotationButton.style.width = "49%";
addToMapRotationButton.querySelector('span div span').style.fontSize = "75%";
removeFromMapRotationButton.style.width = "49%";
removeFromMapRotationButton.querySelector('span div span').style.fontSize = "75%";
mapRotationButtonsContainer.appendChild(addToMapRotationButton);
mapRotationButtonsContainer.appendChild(removeFromMapRotationButton);
subscribeButton.parentNode.insertBefore(playButton, subscribeButton);~
subscribeButton.parentNode.insertBefore(mapRotationButtonsContainer, playButton.nextElementSibling);
if(specificMapPage){
addSelectElement(playButton, 'before');
}
playButton.addEventListener('click', function(e) {
mapAction(mapId, GM_getValue("storedGameMode", selectElementContainer.querySelectorAll('select')[1].value), "switch_map");
});
var mapName;
addToMapRotationButton.addEventListener('click', function(e) {
var mapName;
var targetDiv;
if(specificMapPage) {
mapName = document.querySelector('.tw-util-truncate-two-lines.tw-font-bold').textContent;
targetDiv = document.querySelector('.tw-util-ratio-16-9.tw-relative.tw-w-full.tw-global--border-radius.tw-bg-theme-1.tw-overflow-hidden');
} else {
mapName = subscribeButton.parentNode.parentNode.parentNode.querySelectorAll('a > div')[1].textContent;
targetDiv = subscribeButton.parentNode.parentNode.parentNode;
}
var gameMode = GM_getValue("storedGameMode", selectElementContainer.querySelectorAll('select')[1].value);
if (confirmAction(mapName, mapId, gameMode, "add")) {
mapAction(mapId, gameMode, "addmaprotation");
addOverlayAndSpan(targetDiv, gameMode, mapId);
}
});
removeFromMapRotationButton.addEventListener('click', function(e) {
var mapName;
var targetDiv
if(specificMapPage) {
mapName = document.querySelector('.tw-util-truncate-two-lines.tw-font-bold').textContent;
targetDiv = document.querySelector('.tw-util-ratio-16-9.tw-relative.tw-w-full.tw-global--border-radius.tw-bg-theme-1.tw-overflow-hidden');
} else {
mapName = subscribeButton.parentNode.parentNode.parentNode.querySelectorAll('a > div')[1].textContent;
targetDiv = subscribeButton.parentNode.parentNode.parentNode;
}
var gameMode = GM_getValue("storedGameMode", selectElementContainer.querySelectorAll('select')[1].value);
if (confirmAction(mapName, mapId, gameMode, "remove")) {
mapAction(mapId, gameMode, "removemaprotation");
var overlayToRemove = targetDiv.querySelector(`#o-${mapId}-${gameMode}`);
if(overlayToRemove) {
overlayToRemove.remove();
}
}
});
}
function extractMapIdFromDiv(divsContainingMapId) {
const mapIds = [];
for (let i = 0; i < divsContainingMapId.length; i++) {
const style = divsContainingMapId[i].getAttribute('style');
const urlMatch = style.match(/url\("([^"]+)"\)/);
if (urlMatch) {
const url = urlMatch[1];
const mapIdMatch = url.match(/\/(\d+)\//);
if (mapIdMatch) {
mapIds.push(mapIdMatch[1]);
}
}
}
return mapIds;
}
let addedMaps = new Set();
function processMapDivs(divsContainingMapId) {
const subscribeButtons = document.querySelectorAll('button.tw-button-transition.tw-outline-none.tw-shrink-0.tw-items-center.tw-justify-center.tw-space-x-2.tw-font-bold.tw-bg-theme-1--hover.tw-text-md[id^="input"]');
const mapIds = extractMapIdFromDiv(divsContainingMapId);
for (let i = 0; i < mapIds.length; i++) {
const mapId = mapIds[i];
if (addedMaps.has(mapId)) {
continue;
}
addButtonsWithEventListeners(mapId, subscribeButtons[i]);
addedMaps.add(mapId);
}
}
function addControlsToSpecificMapPage() {
var subscribeButton = document.querySelector('button.tw-button-transition.tw-outline-none.tw-shrink-0.tw-items-center.tw-justify-center.tw-space-x-2.tw-font-bold.tw-bg-theme-1--hover.tw-text-md[id^="input"]');
if (!subscribeButton || document.getElementById('playButton') || document.getElementById('addToMapRotationButton')) {
return;
}
var mapIdElement = document.querySelector('div.tw-justify-between.tw-items-center.tw-flex:last-child > span.tw-whitespace-nowrap:last-child > span');
var mapId = mapIdElement.textContent;
addButtonsWithEventListeners(mapId, subscribeButton, true);
addGameModeInServerRotationTags(observerForSpecificMapPage, null, mapId);
};
function addOverlayAndSpan(targetDiv, gameMode, mapId) {
var tagsDiv = targetDiv.querySelector('.tags-div');
if (!tagsDiv) {
tagsDiv = document.createElement('div');
tagsDiv.className = 'tags-div tw-flex tw-space-x-1 tw-items-center';
tagsDiv.style.cssText = 'flex-direction:column;align-items: flex-end; position: absolute; right: 0;';
targetDiv.appendChild(tagsDiv);
}
var overlayDiv = document.createElement('div');
overlayDiv.id = `o-${mapId}-${gameMode}`;
overlayDiv.style = 'width: 100%; height: 100%; z-index: 1; text-align: right; margin-bottom:1px;';
overlayDiv.onclick = e => e.preventDefault();
var spanElement = document.createElement('span');
spanElement.id = `t-${mapId}-${gameMode}`;
spanElement.className = `ttw-px-2 tw-z-2 tw-bg-primary tw-rounded-full tw-text-primary-text tw-leading-snug tw-max-w-full`;
spanElement.style.cssText = 'background-color: blue; border:2px solid red; padding:0px 4px';
var pElement = document.createElement('p');
pElement.className = 'tw-util-truncate-one-line tw-w-full';
pElement.style = 'display:inline;';
pElement.textContent = `${gameMode}`;
spanElement.appendChild(pElement);
overlayDiv.appendChild(spanElement);
tagsDiv.appendChild(overlayDiv);
}
function addGameModeInServerRotationTags(observer, divsContainingMapId, mapId = null) {
observer.disconnect();
var mapIds = mapId ? [mapId] : extractMapIdFromDiv(divsContainingMapId);
var targetDivs = mapId ? document.querySelectorAll('.tw-util-ratio-16-9.tw-relative.tw-w-full.tw-global--border-radius.tw-bg-theme-1.tw-overflow-hidden')
: document.querySelectorAll('a .tw-relative.tw-util-ratio-16-9');
let mapGameModeCounters = {};
for(let i = 0; i < mapIds.length; i++) {
var mapId = mapIds[i];
if(mapList[mapId] && targetDivs[i]) {
var tagsDiv = targetDivs[i].querySelector('.tags-div');
if(!tagsDiv) {
tagsDiv = document.createElement('div');
tagsDiv.className = 'tags-div tw-flex tw-space-x-1 tw-items-center';
tagsDiv.style.cssText = 'flex-direction:column;align-items: flex-end; position: absolute; right: 0;';
targetDivs[i].appendChild(tagsDiv);
}
mapList[mapId].forEach((gameMode) => {
let currentMapId = mapId;
let currentGameMode = gameMode;
const mapGameModeKey = `${mapId}-${gameMode}`;
if(!mapGameModeCounters[mapGameModeKey]){
mapGameModeCounters[mapGameModeKey] = 0;
}
var overlayDiv = document.createElement('div');
overlayDiv.id = `o-${mapId}-${gameMode}-${mapGameModeCounters[mapGameModeKey]}`;
overlayDiv.style = 'width: 100%; height: 100%; z-index: 1; text-align: right;';
overlayDiv.onclick = e => e.preventDefault();
const spanId = `t-${mapId}-${gameMode}-${mapGameModeCounters[mapGameModeKey]++}`;
if (!tagsDiv.querySelector(`#${spanId}`)) {
var spanElement = document.createElement('span');
spanElement.id = spanId;
spanElement.className = `ttw-px-2 tw-z-2 tw-bg-primary tw-rounded-full tw-text-primary-text tw-leading-snug tw-max-w-full`;
spanElement.style.cssText = 'background-color: blue; border:2px solid red; padding:0px 4px';
var pElement = document.createElement('p');
pElement.className = 'tw-util-truncate-one-line tw-w-full';
pElement.style = 'display:inline;';
pElement.textContent = `${gameMode}`;
spanElement.appendChild(pElement);
overlayDiv.appendChild(spanElement);
tagsDiv.appendChild(overlayDiv);
spanElement.addEventListener('click', function(e) {
e.preventDefault();
if (confirmAction(currentGameMode, currentMapId, gameMode, "removemaprotation")) {
mapAction(currentMapId, gameMode, "removemaprotation", function(success) {
if (success) {
let index = mapList[currentMapId].indexOf(currentGameMode);
if (index !== -1) {
mapList[currentMapId].splice(index, 1);
}
document.querySelector(`#${overlayDiv.id}`).remove();
}
});
}
});
}
});
}
}
observer.observe(document.body, { childList: true, subtree: true });
}
function adjustElementStylesForMapsPage() {
const elements = document.querySelectorAll('.tw-flex.tw-items-center.tw-flex-col.tw-absolute.tw-bottom-3.lg\\:tw-bottom-4.tw-inset-x-3.lg\\:tw-inset-x-4');
elements.forEach((element) => {
element.classList.remove('tw-absolute');
});
const elementsTwo = document.querySelectorAll('.tw-px-3.lg\\:tw-px-4.tw-pb-14.lg\\:tw-pb-\\[3\\.75rem\\]');
elementsTwo.forEach((element) => {
element.classList.remove('tw-pb-14');
element.classList.remove('lg:tw-pb-[3.75rem]');
element.classList.add('tw-pb-4');
});
}
function addSelectElement(targetElement, position) {
position === "before" ? targetElement.before(selectElementContainer) : targetElement.after(selectElementContainer);
}
function findTargetElementAndAddSelectElement(targetElementSelector, position) {
var checkExist = setInterval(function() {
var targetElement = document.getElementsByClassName(targetElementSelector)[1]
if (targetElement) {
addSelectElement(targetElement, position);
clearInterval(checkExist);
}
}, 500);
}
var selectElementContainer = createSelectsAndLabels();
retrieveMapList();
if (mapsPageRegex.test(currentPage)) {
var targetElementSelector = 'md:tw-rounded-lg md:dark:tw-bg-dark-1 md:tw-bg-light-1 tw-border-opacity-40 tw-border-grey md:tw-border-0 tw-border-b md:tw-mb-2 tw-relative';
var targetElement = document.getElementsByClassName(targetElementSelector)[1]
findTargetElementAndAddSelectElement(targetElementSelector, 'after');
var observerForAllMapsPage = new MutationObserver(function(mutationsList) {
const divsContainingMapId = document.querySelectorAll('div.tw-bg-center.tw-bg-cover.tw-w-full.tw-h-full[role="img"]');
for (var mutation of mutationsList) {
if (mutation.type === 'childList') {
processMapDivs(divsContainingMapId);
adjustElementStylesForMapsPage();
addGameModeInServerRotationTags(observerForAllMapsPage, divsContainingMapId)
break;
}
}
});
observerForAllMapsPage.observe(document.body, { childList: true, subtree: true });
} else {
var observerForSpecificMapPage = new MutationObserver(function(mutationsList) {
for (var mutation of mutationsList) {
if (mutation.type === 'childList') {
addControlsToSpecificMapPage();
break;
}
}
});
observerForSpecificMapPage.observe(document.body, { childList: true, subtree: true });
}
})();