// ==UserScript==
// @name         GrepoTweaks-SentinelIndicator
// @namespace    sentinelindicator
// @author       Sau1707
// @description  Adds a green shield see to polis with sentinels, 100% client side
// @version      1.1.0
// @match        http://*.grepolis.com/game/*
// @match        https://*.grepolis.com/game/*
// @match        https://sau1707.github.io/Grepolis/
// @require      https://github.com/Sau1707/Grepolis/raw/main/update.js
// ==/UserScript==

(function () {
	'use strict';
	const uw = unsafeWindow;
	let active = [];
	let loop;

	/* Generate container */
	function setup() {
		const container = document.getElementById('map_move_container');
		const div = document.createElement('div');
		div.id = 'map_sentinel';
		div.style.position = 'absolute';
		div.style.top = '0px';
		div.style.left = '0px';
		div.style.zIndex = '5';
		div.style.pointerEvents = 'none';
		div.style.opacity = '0.6';
		container.appendChild(div);

		const targetNode = document.getElementById('map_islands');
		const observerOptions = {
			childList: true,
			attributes: true,
			subtree: true,
		};

		const observer = new MutationObserver(updateMap);
		observer.observe(targetNode, observerOptions);
	}

	/* Add green shield  */
	function addGreenShild(polisId) {
		const polis = document.getElementById(`town_${polisId}`);
		/* Filter polis that are not visible now */
		if (!polis) return false;
		const x = parseInt(polis.style.left);
		const y = parseInt(polis.style.top);
		/* Create shield */
		const shield = document.createElement('div');
		shield.id = `sentinel_shield_${polisId}`;
		shield.style.left = `${x - 29}px`;
		shield.style.top = `${y - 25}px`;
		shield.style.background =
			'url(https://gpit.innogamescdn.com/images/game/autogenerated/map/town_overlay/city_shield_cd2b0df.png) no-repeat 0 0';
		shield.style.width = '110px';
		shield.style.height = '72px';
		shield.style.position = 'absolute';
		shield.style.transform = 'translate(10px,10px)';
		shield.style.backgroundSize = '95%';
		shield.style.filter =
			'grayscale(100%) brightness(80%) sepia(300%) hue-rotate(50deg) saturate(500%)';
		/* Add to map */
		const map = document.getElementById('map_sentinel');
		map.appendChild(shield);
		return true;
	}

	function removeGreenShild(polisId) {
		const element = document.getElementById(`sentinel_shield_${polisId}`);
		if (!element) return false;
		element.remove();
		return true;
	}

	/* Main function */
	function updateMap() {
		const towns = Object.keys(uw.ITowns.towns);
		let current = [];
		towns.forEach((e) => {
			const models = uw.ITowns.all_supporting_units.fragments[e].models;
			models.forEach((m) => {
				let attributes = m.attributes;
				current.indexOf(attributes.current_town_id) === -1
					? current.push(attributes.current_town_id)
					: null;
			});
		});

		/* Check if list has updated */
		let removeShield = active.filter((x) => !current.includes(x));
		let addShield = current.filter((x) => !active.includes(x));
		removeShield.forEach((e) => {
			removeGreenShild(e);
		});
		addShield.forEach((e) => {
			if (!addGreenShild(e)) current.splice(current.indexOf(e), 1);
		});
		active = current;
	}

	window.addEventListener('load', (event) => {
		setTimeout(() => {
			setup();
			updateMap();
		}, 500);
	});

	console.log('[GrepoTweaks-SentinelIndicator] Loaded');
})();