import getTranslations from './i18n/mapCoordsPicker'; import hexToRGB from './utils/hexToRGB'; import { getItem, setItem } from './utils/localStorage'; // ==UserScript== // @name Map Coords Picker // @namespace https://github.com/tribalwarshelp/scripts // @updateURL https://raw.githubusercontent.com/tribalwarshelp/scripts/master/dist/mapCoordsPicker.js // @downloadURL https://raw.githubusercontent.com/tribalwarshelp/scripts/master/dist/mapCoordsPicker.js // @version 0.7.0 // @description Map Coords Picker // @author Kichiyaki http://dawid-wysokinski.pl/ // @match *://*/game.php*screen=map* // @grant none // ==/UserScript== const LOCAL_STORAGE_KEY = 'kichiyaki_map_coords_picker'; const container = document.querySelector('#content_value > h2'); let button; let formsContainer; let actionsContainer; let config = getItem(LOCAL_STORAGE_KEY, { started: false, groups: { All: { villages: [], color: '#ffffff', }, }, selectedGroup: 'All', }); let intervalID; const translations = getTranslations(); const saveConfig = () => { setItem(LOCAL_STORAGE_KEY, config); }; const villageIDByCoords = (x, y) => { const village = TWMap.villages[parseInt(`${x}${y}`)]; if (village) { return TWMap.villages[parseInt(`${x}${y}`)].id; } return NaN; }; const setVillageBgColor = (x, y, bgColor = 'transparent') => { const id = villageIDByCoords(x, y); if (isNaN(id)) return; const village = document.querySelector('#map_village_' + id); if (village) { let overlay = document.querySelector('#' + 'map_village_overlay_' + id); if (!overlay) { overlay = document.createElement('div'); overlay.id = 'map_village_overlay_' + id; overlay.style.cssText = document.defaultView.getComputedStyle( village, '' ).cssText; village.parentElement.appendChild(overlay); } console.log(`rgba(${hexToRGB(bgColor.replace('#', '')).join(', ')}, 0.7)`); overlay.style.backgroundColor = bgColor !== 'transparent' ? `rgba(${hexToRGB(bgColor.replace('#', '')).join(', ')}, 0.7)` : bgColor; } }; const deleteVillageFromOtherGroups = (key) => { for (let name in config.groups) { if (name === config.selectedGroup) return; config.groups[name].villages = config.groups[name].villages.filter( (village) => village.key !== key ); } }; const handleMapClick = (x, y, e) => { e.preventDefault(); const key = `${x}|${y}`; const selected = config.groups[config.selectedGroup].villages.some( (village) => village.key === key ); if (selected) { config.groups[config.selectedGroup].villages = config.groups[ config.selectedGroup ].villages.filter((village) => village.key !== key); setVillageBgColor(x, y); } else { config.groups[config.selectedGroup].villages = [ ...config.groups[config.selectedGroup].villages, { x, y, key, }, ]; setVillageBgColor(x, y, config.groups[config.selectedGroup].color); deleteVillageFromOtherGroups(key); } }; const renderForm = (container, group) => { const selected = group && group.name !== config.selectedGroup; const html = ` ${ group ? `` : '' } ${ selected ? `` : '' } `; const form = document.createElement('form'); form.innerHTML = html; form.addEventListener('submit', (e) => { e.preventDefault(); if (group) { if (group.name === config.selectedGroup) config.selectedGroup = e.target[1].value; colorizeGroupVillages(group.name, e.target[0].value); config.groups[e.target[1].value] = { ...config.groups[group.name], color: e.target[0].value, }; if (group.name !== e.target[1].value) delete config.groups[group.name]; } else { config.groups[e.target[1].value] = { color: e.target[0].value, villages: [], }; } renderGroups(); }); if (group) { form .querySelector('button[type="button"]') .addEventListener('click', () => { if (config.selectedGroup === group.name) { return UI.ErrorMessage(translations.cannotDeleteSelectedGroup); } colorizeGroupVillages(group.name, 'transparent'); delete config.groups[group.name]; form.remove(); }); const selectButton = form.querySelector('.selectButton'); if (selectButton) { selectButton.addEventListener('click', (e) => { config.selectedGroup = group.name; renderGroups(); }); } } container.appendChild(form); }; const renderGroups = () => { formsContainer.innerHTML = ''; for (let name in config.groups) { renderForm(formsContainer, { ...config.groups[name], name }); } renderForm(formsContainer); }; const exportVillagesHandler = () => { const groups = []; for (let name in config.groups) { groups.push(`