[Engedélyezett] TW-Mapper - Ingame térképes falu kiválasztó, szűrő.

toldi26-killer

Well-Known Member
A reakció pontszáma
586
Sziasztok!

Eme script nem lenne más mint egy térképes falu kiválasztó, szűrő, fantázia néven: TW-Mapper.
A script már jó ideje megfogalmazódott bennem, és most jutott el oda hogy remélhetőleg egy használható verzióhoz érkeztem, és ezt megosztanám.
Hibákat tartalmazhat, ha bármi gond van, jelezzétek, illetve ha bármi ötlet/kérdés van, azt is fogadom.


JavaScript:
javascript:$.getScript("https://media.innogamescdn.com/com_DS_HU/scripts/twmapper.js");void(0);


Használat:

(A leírás nem feltétlen fed le mindent)

1. A script térkép nézetben működik, csak a böngészőben.

2. Adatok betöltése:


Alapvetően a script az API-t használja és a böngésző IndexedDB-jébe cache-eli el az adatokat. Ebből adódóan amikor az adatokat tölti le, akkor bedob egy ablakot, ami jelzi hogy éppen az adatok letöltése történik. Ebben az esetben nem célszerű az ablakot lefrissíteni, bezárni, stb. ugyanis ez belezavarhat a frissétési folyamatokba ezzel a script működését megzavarva. Az API Letöltése naponta történik, ami azt jelenti hogy az első futtatástól számított 1 nap elteltével fogja újra lekérni. Ez a "TW_API_LAST_UPDATE" változóban tárolódik a Local Storageben, amennyiben ezt a változót leüríted akkor a script a következő futáskor újra lekéri az adatokat.

1708422318602.png


3. Kezdő felület:

A térkép felé bekerül két nyomógomb, melyek segítségével új csoportot, illetve a jelenlegi csoportjainkat kezelhetjük.

1708422392259.png

4. Csoport létrehozása:

A csoport ebben az esetben azt jelenti hogy a térképen kiválasztott falvakat ebbe a "zsebbe" fogod belepakolni. Ezekből akár többet is létrehozhatsz.
Az "Új csoport" gomb megnyomásával megjelenik a létrehozó felület, melyben meg kell adni egy nevet a csoportnak (lehet bármi, akár ugyan az is), emellett kiválasztható a csoport megjelenítési színe is.

1708422651188.png

A "Hozzáad" gomb megnyomásával létrejön a csoport, és megjelenik a felette lévő selectben.

5. Csoportba rajzolás:

A selectben ki lehet választani hogy jelenleg melyik az aktív csoportunk, ebbe fogunk hozzáadni/rajzolni.

1708422765848.png

  • Rajzolás checkbox: ezzel lehet ki-be kapcsolni a térképen való rajz funkciót.
  • Faluinfó checkbox: Ha ez be van pipálva, megjelenik az ingame faluinfó dobozka

A rajzoláshoz a "Rajzolás"-nak bek kell lenni pipálva, és valamelyik rajz eszközt ki kell választani, emellett az adott eszköz használatához a shift gombot nyomva kell tartani.
1708422830308.png
  • Konkáv rajz eszköz: Ezzel az eszközzel egy konkáv alakzatot lehet felrajzolni, a kiinduló pontnál egy kör jeleni meg. Ha a vonal visszaér a kiinduló pontba, akkor megy végbe a kiválasztás, és az alakzat által körbezárt területről az összes falu kijelölődik.

1708423381190.png

  • Kör rajz eszköz: ez az eszköz a kattintás pontjától a beállított sugárban jelöl ki falvakat.

1708423428601.png

  • Egyenkénti rajz eszköz: Ebben az esetben minden falura melyre klikkelünk az ki lesz választva

1708423459215.png

Ha a kijelölés megtörtént akkor a kijelölt elemeket a "Hozzáadás" gombbal a kiválasztott csoporthoz berakhatjuk.
Ha a "Visszaállít" gombra rákattintunk akkor az összes nem hozzáadott kijelölés megszűnik, ez hasznos ha elrontjuk.

6. Csoportok ablak:

A "Csoportok" gombra megjelenik, a kezelő felület. Itt látható az összes létrehozott csoport, és azokhoz kapcsolódó műveletek

1708423956373.png

A csoportokra alapvetően alkalmazhatóak halmazműveletek:
Összevonás (Únió), Kivonás, Metszet
Mindig az kiválasztott csoportokra fogja értelmezni a műveleteket. Kivonás esetében számít a kijelölés sorrendje.

  • A ceruza ikonra kattintva a csoportok átnevezhetőek
  • A szín inputra kattintva átszínezhetőek a kijelölések.
  • A nézet oszlopban lévő gombra kattintva betölti a jobb oldalra a falvakat melyek az adott csoportban vannak.
  • A másolás gomb a jobb felső sarokban, mindig az alatta lévő betöltött falvakra értelmezendő, mely eredményeként "space"-el elválasztott koordináta lista kerül a vágólapra.

7. Szűrés ablak:

A szűrés midig az összes kiválasztott csoportra alkalmazódik.

A szűrés menüben összeállíthatunk feltétel sorokat. Ezek tetszőlegesen rendezhetőek, összeállíthatóak.
Ha másolat chekbox be van kattintva akkor létre hoz új csoportokat, és az eredetit nem változtatja, egyébként az eredetit fogja felül írni.
A szűrés az alkalmaz gomb lenyomásával véglegesíthető.

1708424497922.png
 
Utoljára szerkesztve:

toldi26-killer

Well-Known Member
A reakció pontszáma
586
@Bogyó Légyszi frissítsd

Javítottam néhány dolgot.

JavaScript:
const fieldHeightBig=38,fieldWidthBig=53,fieldHeightMini=5,fieldWidthMini=5;var activeMarker,canDraw=!1,backupTW=null,canvasMini=null,ctxMini=null,translateMini=null,canvasBig=null,ctxBig=null,translateBig=null,groups=[],selectedGroups=[],markers=[],activeGroup=null,isDrawing=!1,db=null,filters=[];async function InitData(){return new Promise(((e,i)=>{let t=indexedDB.open("TW_API_DATA",1),l=0;function n(){l++,3==l&&(console.log("All data loaded ✔"),window.top.UI.SuccessMessage("Térkép adatok betöltve!"),window.Dialog.close("launchDialog"),e())}async function a(e,i,t){let l=db.transaction(i,"readwrite");e.trim().split("\n").forEach((async e=>{let n=e.split(","),a={};n.forEach(((e,i)=>{let l=decodeURIComponent(e).replaceAll("+"," ");isNaN(l)||(l=parseInt(l)),a[t[i]]=l})),await l.objectStore(i).put(a)}))}t.onupgradeneeded=function(){console.log("init database"),(db=t.result).objectStoreNames.contains("villages")||db.createObjectStore("villages",{keyPath:"id",autoIncrement:!1}),db.objectStoreNames.contains("players")||db.createObjectStore("players",{keyPath:"id",autoIncrement:!1}),db.objectStoreNames.contains("allies")||db.createObjectStore("allies",{keyPath:"id",autoIncrement:!1})},t.onerror=function(){console.error("Error",t.error)},t.onsuccess=async()=>{db=t.result;let e=localStorage.getItem("TW_API_LAST_UPDATE");(e<(new Date).getTime()||null==e)&&(await addLoadingModal(),await async function(){console.log("Updating...");let e=await getData(`https://${window.location.host}/map/village.txt`),i=await getData(`https://${window.location.host}/map/player.txt`),t=await getData(`https://${window.location.host}/map/ally.txt`);await a(e,"villages",["id","name","x","y","player","points","rank"]),await a(i,"players",["id","name","ally","villages","points","rank"]),await a(t,"allies",["id","name","tag","members","villages","points","all_points","rank"]),console.log("Updated allies"),localStorage.setItem("TW_API_LAST_UPDATE",new Date((new Date).setDate((new Date).getDate()+1)).getTime())}());let i=db.transaction("villages"),l=await i.objectStore("villages").getAll();l.onsuccess=()=>{window.villages=l.result,n()},tPlayers=db.transaction("players"),rPlayers=await tPlayers.objectStore("players").getAll(),rPlayers.onsuccess=()=>{window.players=rPlayers.result,n()},tAllies=db.transaction("allies"),rAllies=await tAllies.objectStore("allies").getAll(),rAllies.onsuccess=()=>{window.allies=rAllies.result,n()}}}))}async function updateApi(){localStorage.setItem("TW_API_LAST_UPDATE",(new Date).getTime()),await InitData(),$("#updated").text(`Api frissítve: ${getLastUpdate()}`)}function addLoadingModal(){return new Promise(((e,i)=>{window.Dialog.show("launchDialog","<h1 style=text-align:center>Térkép adatok frissítése</h1><div id=counter-loading style=display:flex;justify-content:center;width:100%><img src=https://dshu.innogamescdn.com/asset/6389cdba/graphic/loading.gif style=height:25px><span style=padding:5px>Betöltés...</span></div>"),$(".popup_box_close").hide(),$(".popup_box_container").append('<div style="position: fixed;width: 100%;height: 100%;top:0;left:0;z-index:12001"></div>'),setTimeout((()=>{e()}),500)}))}function getData(e){return $.ajax({url:e,type:"GET"})}function redirect(){return window.location.href.includes("screen=map")?(backupTW=TWMap.map._handleClick,!1):(window.top.UI.InfoMessage("Átírányítás a térképre!"),setTimeout((()=>{window.location.href=`game.php?village=${game_data.village.id}&screen=map`}),1e3),!0)}function getLastUpdate(){let e=localStorage.getItem("TW_API_LAST_UPDATE");return e=new Date(parseInt(e)-864e5),e.toLocaleString("hu-HU")}function loadUI(){$("#content_value").prepend(`<div style=display:table;width:100%><div style="margin:5px 0;width:100%"><button class=btn onclick=renderModal()>Csoportok</button> <button class=btn onclick=newGroup() id=newGroup>Új csoport</button><div style=float:right><span id=updated style=float:right>Api frissítve: ${getLastUpdate()}</span><br><button class=btn onclick=updateApi() style=float:right;margin-top:5px>Adatok frissítése</button></div></div><select id=groupSelector onchange=groupChanged() placeholder="-- Válassz csoportot--"style="margin:5px 0;font-size:14px;width:100px"></select><div style="margin:5px 0;display:none"id=addGroup><label for=color>Szín:</label> <input id=color type=color value=#e66465> <label for=groupName>Név:</label> <input id=groupName value=#e66465> <button class=btn onclick=addGroup()>Hozzáad</button> <button class=btn onclick=cancelAdd()>Mégse</button></div><div style="margin:5px 0;display:none"id=tools><input id=draw type=checkbox onchange=toggleDrawing()> <label for=draw>Rajzolás</label> <input id=vinfo type=checkbox onchange=toggleInfo()> <label for=vinfo>FaluInfo</label> <input id=concave type=radio name=tool> <label for=concave>Konkáv</label> <input id=circle type=radio name=tool> <label for=circle>Kör</label> <input id=radius type=number value=10 max=1000 min=1> <input id=single type=radio name=tool><label for=circle>Egyenként</label> <button class=btn onclick=addToGroup()>Hozzáad</button> <button class=btn onclick=resetSelected()>visszaállít</button></div></div>`)}function initMap(){$("#minimap_mover").append('<canvas id="mini_map" />'),$("#map_mover").append('<canvas id="big_map" />'),$('[onclick*="VillageInfo.Notes.toggleEdit()"]').removeAttr("onclick"),canvasMini=document.getElementById("mini_map"),ctxMini=canvasMini.getContext("2d"),canvasBig=document.getElementById("big_map"),(ctxBig=canvasBig.getContext("2d")).canvas.width=$("#map_mover").innerWidth(),ctxBig.canvas.height=$("#map_mover").innerHeight(),ctxMini.canvas.width=$("#minimap_mover").innerWidth(),ctxMini.canvas.height=$("#minimap_mover").innerHeight(),ctxBig.save(),ctxMini.save(),translating(),render();new MutationObserver(updatePos).observe(document.querySelector("#map_container"),{attributes:!0})}function newGroup(){$("#tools").hide(),$("#newGroup").hide(),$("#addGroup").show(),$("#groupName").val(""),$("#color").val("#e66465")}function addGroup(){if(""==$("#groupName").val().trim())return void window.UI.ErrorMessage("A csoport nevét kötelező megadni!");$("#newGroup").show(),$("#addGroup").hide(),$("#tools").show();let e={id:(new Date).getTime(),name:$("#groupName").val(),color:$("#color").val(),villages:[]};groups.push(e),activeGroup=e,renderGroupSelect()}function cancelAdd(){$("#newGroup").show(),$("#addGroup").hide(),renderGroupSelect()}function renderGroupSelect(){let e="";groups.forEach((i=>{e+=`<option ${i.id==activeGroup.id?"selected":""} value="${i.id}">${i.name} (${i.villages.length})</option>`})),$("#groupSelector").html(e),groups.length>0&&$("#tools").show()}function groupChanged(){if(""==$("#groupSelector").val())return void $("#tools").hide();$("#tools").show();let e=parseInt($("#groupSelector").val().toString()),i=groups.findIndex((i=>i.id==e));activeGroup=groups[i],renderGroupSelect()}function toggleDrawing(){isDrawing?(isDrawing=!1,TWMap.map._handleClick=backupTW,$("#map_popup").css("opacity","1")):(isDrawing=!0,TWMap.map._handleClick=mapAction)}function toggleInfo(){$("#vinfo").is(":checked")?$("#map_popup").css("opacity","1"):$("#map_popup").css("opacity","0")}(async()=>{redirect()||(await InitData(),initMap(),loadUI())})(),document.addEventListener("keydown",(e=>{if("Shift"===e.key)canDraw=!0})),document.addEventListener("keyup",(e=>{if("Shift"===e.key)canDraw=!1}));const mapAction=function(e){var i=this.coordByEvent(e);return!!canDraw&&($("#concave").is(":checked")&&drawConcave(i[0],i[1]),$("#circle").is(":checked")&&drawCircle(i[0],i[1]),$("#single").is(":checked")&&drawSingle(i[0],i[1]),!1)};function drawCircle(e,i){let t=$("#radius").val();activeMarker=(new Date).getTime(),markers.push({id:activeMarker,type:"circle",r:2*t,x:e,y:i,villages:getVillagesByCircle(t,e,i),color:activeGroup.color}),render(),activeMarker=null}function drawSingle(e,i){let t=getVillagesByCircle(0,e,i);t.length>0&&(activeMarker=(new Date).getTime(),markers.push({id:activeMarker,type:"single",x:e,y:i,villages:t,color:activeGroup.color}),render(),activeMarker=null)}function drawConcave(e,i){let t=markers.findIndex((e=>e.id==activeMarker));-1==t?(activeMarker=(new Date).getTime(),markers.push({id:activeMarker,type:"concave",points:[{x:e,y:i}],canClose:!1,color:activeGroup.color}),render()):(markers[t].points[0].x==e&&markers[t].points[0].y==i?(activeMarker=(new Date).getTime(),markers[t].canClose=!0,markers[t].villages=getVillagesByRect(markers[t].points)):markers[t].points.push({x:e,y:i}),render())}function getVillagesByCircle(e,i,t){let l=window.villages,n=[];return l.forEach((l=>{isInside({x:i,y:t},l,e)&&n.push(l)})),n}function isInside(e,i,t){return(i.x-e.x)*(i.x-e.x)+(i.y-e.y)*(i.y-e.y)<=t*t}function getVillagesByRect(e){let i=999,t=0,l=999,n=0;e.forEach((e=>{e.x>t&&(t=e.x),e.y>n&&(n=e.y),e.x<i&&(i=e.x),e.y<l&&(l=e.y)}));let a=window.villages,o=[];a.forEach((e=>{e.x>=i&&e.x<=t&&e.y>=l&&e.y<=n&&o.push(e)}));let r=[];o.forEach((i=>{let t=!1;rayCasting(e,{x:i.x,y:i.y})&&(t=!0);for(let l=0;l<e.length-1;l++)calcIsInsideThickLineSegment(e[l],i,e[l+1],.2)&&(t=!0);calcIsInsideThickLineSegment(e[0],i,e[e.length-1],.2)&&(t=!0),t&&r.push(i)})),render();let s="";return r.forEach((e=>{s+="','"+e.x+"|"+e.y})),r}function rayCasting(e,i){for(var t=i.x,l=i.y,n=!1,a=0,o=e.length-1;a<e.length;o=a++){var r=e[a].x,s=e[a].y,d=e[o].x,c=e[o].y;s>l!=c>l&&t<(d-r)*(l-s)/(c-s)+r&&(n=!n)}return n}function calcIsInsideThickLineSegment(e,i,t,l){var n=(t.x-e.x)*(t.x-e.x)+(t.y-e.y)*(t.y-e.y);if(0==n)return!1;var a=((i.x-e.x)*(t.x-e.x)+(i.y-e.y)*(t.y-e.y))/n;if(a<0)return Math.sqrt((e.x-i.x)*(e.x-i.x)+(e.y-i.y)*(e.y-i.y))<=l;if(0<=a&&a<=1){var o=((e.y-i.y)*(t.x-e.x)-(e.x-i.x)*(t.y-e.y))/n;return Math.abs(o)*Math.sqrt(n)<=l}return Math.sqrt((t.x-i.x)*(t.x-i.x)+(t.y-i.y)*(t.y-i.y))<=l}function render(){ctxBig.canvas.width=$("#map_mover").innerWidth(),ctxBig.canvas.height=$("#map_mover").innerHeight(),ctxMini.canvas.width=$("#minimap_mover").innerWidth(),ctxMini.canvas.height=$("#minimap_mover").innerHeight(),ctxBig.clearRect(0,0,ctxBig.canvas.width,ctxBig.canvas.height),ctxMini.clearRect(0,0,ctxMini.canvas.width,ctxMini.canvas.height),ctxMini.reset(),ctxMini.translate(-translateMini.x,-translateMini.y),ctxBig.reset(),ctxBig.translate(-translate.x,-translate.y),markers.forEach((e=>{if(ctxMini.beginPath(),ctxBig.beginPath(),ctxMini.strokeStyle=e.color,ctxBig.strokeStyle=e.color,ctxMini.fillStyle=e.color,ctxBig.fillStyle=e.color+"80",ctxMini.lineWidth=2,ctxBig.lineWidth=5,"circle"==e.type&&(ctxBig.ellipse((e.x+1)*fieldWidthBig-fieldWidthBig/2,(e.y+1)*fieldHeightBig-fieldHeightBig/2,fieldWidthBig/2*e.r,fieldHeightBig/2*e.r,0,0,2*Math.PI),ctxBig.stroke(),ctxMini.ellipse((e.x+1)*fieldWidthMini-fieldWidthMini/2,(e.y+1)*fieldHeightMini-fieldHeightMini/2,fieldWidthMini/2*e.r,fieldHeightMini/2*e.r,0,0,2*Math.PI),ctxMini.stroke(),ctxBig.beginPath(),ctxBig.ellipse((e.x+1)*fieldWidthBig-fieldWidthBig/2,(e.y+1)*fieldHeightBig-fieldHeightBig/2,fieldWidthBig/2*.5,fieldHeightBig/2*.5,0,0,2*Math.PI),ctxBig.fill()),"concave"==e.type){e.points.length>0&&(ctxBig.ellipse((e.points[0].x+1)*fieldWidthBig-fieldWidthBig/2,(e.points[0].y+1)*fieldHeightBig-fieldHeightBig/2,fieldWidthBig/2*.5,fieldHeightBig/2*.5,0,0,2*Math.PI),ctxBig.fill());for(let i=0;i<e.points.length-1;i++)ctxBig.moveTo((e.points[i].x+1)*fieldWidthBig-fieldWidthBig/2,(e.points[i].y+1)*fieldHeightBig-fieldHeightBig/2),ctxBig.lineTo((e.points[i+1].x+1)*fieldWidthBig-fieldWidthBig/2,(e.points[i+1].y+1)*fieldHeightBig-fieldHeightBig/2),ctxMini.moveTo((e.points[i].x+1)*fieldWidthMini-fieldWidthMini/2,(e.points[i].y+1)*fieldHeightMini-fieldHeightMini/2),ctxMini.lineTo((e.points[i+1].x+1)*fieldWidthMini-fieldWidthMini/2,(e.points[i+1].y+1)*fieldHeightMini-fieldHeightMini/2);e.canClose&&(ctxBig.moveTo((e.points[e.points.length-1].x+1)*fieldWidthBig-fieldWidthBig/2,(e.points[e.points.length-1].y+1)*fieldHeightBig-fieldHeightBig/2),ctxBig.lineTo((e.points[0].x+1)*fieldWidthBig-fieldWidthBig/2,(e.points[0].y+1)*fieldHeightBig-fieldHeightBig/2),ctxMini.moveTo((e.points[e.points.length-1].x+1)*fieldWidthMini-fieldWidthMini/2,(e.points[e.points.length-1].y+1)*fieldHeightMini-fieldHeightMini/2),ctxMini.lineTo((e.points[0].x+1)*fieldWidthMini-fieldWidthMini/2,(e.points[0].y+1)*fieldHeightMini-fieldHeightMini/2)),ctxBig.closePath(),ctxBig.stroke(),ctxMini.stroke()}void 0!==e.villages&&e.villages.forEach((i=>{ctxBig.fillStyle=e.color+"66",ctxBig.fillRect((i.x+1)*fieldWidthBig-fieldWidthBig,(i.y+1)*fieldHeightBig-fieldHeightBig,fieldWidthBig,fieldHeightBig),ctxMini.fillStyle=e.color,ctxMini.fillRect((i.x+1)*fieldWidthMini-fieldWidthMini,(i.y+1)*fieldHeightMini-fieldHeightMini,fieldWidthMini,fieldHeightMini)}))})),groups.forEach((e=>{e.villages.forEach((i=>{ctxBig.fillStyle=e.color+"66",ctxBig.fillRect((i.x+1)*fieldWidthBig-fieldWidthBig,(i.y+1)*fieldHeightBig-fieldHeightBig,fieldWidthBig,fieldHeightBig),ctxMini.fillStyle=e.color,ctxMini.fillRect((i.x+1)*fieldWidthMini-fieldWidthMini,(i.y+1)*fieldHeightMini-fieldHeightMini,fieldWidthMini,fieldHeightMini)}))}))}function translating(){let e=$("#map_coord_x").css("left").replace("px",""),i=$("#map_coord_y").css("top").replace("px",""),t=$("#minimap_container").css("left").replace("px",""),l=$("#minimap_container").css("top").replace("px","");translate={x:26500-e,y:26500-i},translateMini={x:-t,y:-l}}function updatePos(){translating(),render()}function addToGroup(){let e=groups.findIndex((e=>e.id==activeGroup.id));markers.forEach((i=>{i.villages.forEach((i=>{-1==groups[e].villages.findIndex((e=>e.id==i.id))&&groups[e].villages.push(i)}))})),markers=[],render(),renderGroupSelect()}function resetSelected(){markers=[],render()}function renderGroupList(){let e="";groups.forEach((i=>{e+=`<div class=group-row id=g-${i.id}><div class=name>${i.name} (${i.villages.length})<a class=rename-icon data-title=Átnevez href=# onclick=editGroupName(${i.id})></a></div><div class=color><input type=color value=${i.color} onchange=changeColor(${i.id}) style=height:20px></div><div class=checkbox><input type=checkbox value=${i.id} onclick=toggleSelected(${i.id})></div><div class=view><button class=btn onclick=loadActiveGoup(${i.id})>-></button></div></div>`})),$(".group-items").html(e)}function editGroupName(e){let i=groups.findIndex((i=>i.id==e));$("html").find(`#g-${e}`).find(".name").html(`<input value="${groups[i].name}" type="text"/><button onclick="saveGroupName(${groups[i].id})" >Átnevez</button>`)}function saveGroupName(e){let i=groups.findIndex((i=>i.id==e));groups[i].name=$("html").find(`#g-${e}`).find(".name input").val(),$("html").find(`#g-${e}`).find(".name").html(`${groups[i].name} (${groups[i].villages.length})<a onclick="editGroupName(${groups[i].id})" class="rename-icon" href="#" data-title="Átnevez"></a>`),renderGroupSelect()}function changeColor(e){let i=groups.findIndex((i=>i.id==e));groups[i].color=$("html").find(`#g-${e}`).find(".color input").val(),render()}function loadActiveGoup(e){let i=groups.findIndex((i=>i.id==e));activeGroup=groups[i],renderSelectedVillages(),renderGroupSelect()}function renderSelectedVillages(){let e="";activeGroup.villages.forEach((i=>{let t="",l="",n=window.players.findIndex((e=>e.id==i.player));if(n>-1){let e=window.players[n],i=window.allies.findIndex((i=>i.id==e.ally));if(t=e.name,i>-1){l=window.allies[i].tag}}e+=`<div class=village-row><div class=village-name>${i.name} (${i.x}|${i.y})</div><div class=point>${i.points}</div><div class=owner>${t}</div><div class=ally>${l}</div><div class=type>${i.rank>0?`<span class="bonus_icon bonus_icon_${i.rank}">`:""}</div></div>`})),$(".village-items").html(e)}function toggleSelected(e){let i=selectedGroups.findIndex((i=>i==e));-1!=i?selectedGroups.splice(i,1):selectedGroups.push(e)}function deleteSelected(){0!=selectedGroups.length?(selectedGroups.forEach((e=>{let i=groups.findIndex((i=>i.id==e));groups.splice(i,1)})),selectedGroups=[],renderGroupSelect(),renderGroupList()):window.UI.ErrorMessage("Nincs egy csoport se kiválasztva!")}function union(){if(selectedGroups.length<2)return void window.top.UI.ErrorMessage("Nincs elegendő csoport kiválasztva");let e=groups.findIndex((e=>e.id==selectedGroups[0])),i=[...groups[e].villages],t=groups[e].name;for(let e=1;e<selectedGroups.length;e++){let l=groups.findIndex((i=>i.id==selectedGroups[e])),n=[...groups[l].villages];t+=" ∪ "+groups[l].name,n.forEach((e=>{-1==i.findIndex((i=>e.x==i.x&&e.y==i.y))&&i.push(e)}))}groups.push({id:(new Date).getTime(),name:t,color:groups[e].color,villages:i}),selectedGroups=[],renderGroupSelect(),renderGroupList(),render()}function subtract(){if(selectedGroups.length<2)return void window.top.UI.ErrorMessage("Nincs elegendő csoport kiválasztva");let e=groups.findIndex((e=>e.id==selectedGroups[0])),i=[...groups[e].villages],t=groups[e].name;for(let e=1;e<selectedGroups.length;e++){let l=groups.findIndex((i=>i.id==selectedGroups[e])),n=[...groups[l].villages];t+=" - "+groups[l].name,n.forEach((e=>{let t=i.findIndex((i=>e.x==i.x&&e.y==i.y));-1!=t&&i.splice(t,1)}))}groups.push({id:(new Date).getTime(),name:t,color:groups[e].color,villages:i}),selectedGroups=[],renderGroupSelect(),renderGroupList(),render()}function openFilter(){0!=selectedGroups.length?($(".filter-window").show(),$(".group-items").find('input[type="checkbox"]').get().forEach((e=>{$(e).prop("disabled")||$(e).attr("disabled",!0)}))):window.UI.ErrorMessage("Nincs egy csoport se kiválasztva!")}function cancelFilter(){$(".filter-window").hide(),filters=[],$(".group-items").find('input[type="checkbox"]').get().forEach((e=>{$(e).prop("disabled")&&$(e).attr("disabled",!1)}))}function mainMenu(){$(".filter-main").show(),$(".filter-sub").hide()}function barbMenu(){$(".filter-main").hide(),$(".filter-sub").html('<div><button onclick="addFilter(\'barbs\',\'+\')" class="btn">+ Barbár</button><button onclick="addFilter(\'barbs\',\'-\')" class="btn">- Barbár</button><button onclick="mainMenu()" class="btn">Mégse</button></div>'),$(".filter-sub").show()}function allyMenu(){let e=[];selectedGroups.forEach((i=>{let t=groups.findIndex((e=>e.id==i));groups[t].villages.forEach((i=>{if(0!=i.player){let t=window.players.findIndex((e=>e.id==i.player)),l=window.allies.findIndex((e=>window.players[t].ally==e.id));-1==e.findIndex((e=>e.id==window.allies[l].id))&&e.push({id:window.allies[l].id,tag:window.allies[l].tag})}}))})),$(".filter-main").hide(),$(".filter-sub").html(`<div><select id="filter-ally">${e.map((e=>`<option value="${e.id}">${e.tag}</option>`)).join("")}</select></div><div><button onclick="addFilter('ally','+')" class="btn">+ klán</button><button onclick="addFilter('ally','-')" class="btn">- Klán</button><button onclick="mainMenu()" class="btn">Mégse</button></div>`),$(".filter-sub").show()}function playerMenu(){let e=[];selectedGroups.forEach((i=>{let t=groups.findIndex((e=>e.id==i));groups[t].villages.forEach((i=>{if(0!=i.player){let t=window.players.findIndex((e=>e.id==i.player));-1==e.findIndex((e=>e.id==window.players[t].id))&&e.push({id:window.players[t].id,name:window.players[t].name})}}))})),$(".filter-main").hide(),$(".filter-sub").html(`<div><select id=filter-player>${e.map((e=>`<option value=${e.id}>${e.name}</option>`)).join("")}</select></div><div><button class=btn onclick='addFilter("player","+")'>+ játékos</button> <button class=btn onclick='addFilter("player","-")'>- játékos</button> <button class=btn onclick=mainMenu()>Mégse</button></div>`),$(".filter-sub").show()}function bonusMenu(){$(".filter-main").hide(),$(".filter-sub").html(`<div><select id=filter-bonus><option value=-1>Csak bónusz<option value=0>Nem bónusz</option>${Object.keys(TWMap.bonus_data).map((e=>`<option value=${e}>${TWMap.bonus_data[e].text}</option>`)).join("")}</select></div><div><button class=btn onclick='addFilter("bonus","+")'>+ Búnusz</button> <button class=btn onclick='addFilter("bonus","-")'>- Búnusz</button> <button class=btn onclick=mainMenu()>Mégse</button></div>`),$(".filter-sub").show()}function pointMenu(){$(".filter-main").hide(),$(".filter-sub").html('<div><label>Falu pont:</label> <select id=filter-points-select><option value=">"selected>><option value="<">&lt;<option value="=">=<option value=">=">≥<option value="<=">≤<option value="!=">≠</select> <input id=filter-points type=number></div><div><button class=btn onclick=\'addFilter("points","+")\'>+ Pont</button> <button class=btn onclick=\'addFilter("points","-")\'>- Pont</button> <button class=btn onclick=mainMenu()>Mégse</button><div>'),$(".filter-sub").show()}function addFilter(e,i){let t=null;if("points"==e){if(""==$("html").find("#filter-points").val().trim())return void window.UI.ErrorMessage("A szűrési értéket kötelező megadni!");t={stmt:$("html").find("#filter-points-select").val(),val:$("html").find("#filter-points").val()}}else"player"==e?t={id:$("html").find("#filter-player").val(),name:$("html").find("#filter-player option:selected").text()}:"ally"==e?t={id:$("html").find("#filter-ally").val(),name:$("html").find("#filter-ally option:selected").text()}:"bonus"==e&&(t={id:$("html").find("#filter-bonus").val(),name:$("html").find("#filter-bonus option:selected").text()});filters.push({type:e,op:i,val:t}),$(".filter-main").show(),$(".filter-sub").hide(),renderFilter()}function renderFilter(){let e="";filters.forEach(((i,t)=>{let l="";switch(i.type){case"player":l=`Játékos ${"-"==i.op?"eltávolítása":"hozzáadása"}: ${i.val.name}`;break;case"ally":l=`Klán ${"-"==i.op?"eltávolítása":"hozzáadása"}: ${i.val.name}`;break;case"bonus":l=`Bónusz ${"-"==i.op?"eltávolítása":"hozzáadása"}: ${i.val.name}`;break;case"barbs":l="Barbárok "+("-"==i.op?"eltávolítása":"hozzáadása");break;case"points":l=`${"-"==i.op?"Eltávolítás":"Hozzáadás"} ha falu pont ${i.val.stmt} ${i.val.val}`}e+=`<div class=filter-item id=fi-${t}><span style=display:inline-flex><div class="qbhandle ui-sortable-handle"style="margin:3px 5px;width:11px;height:11px;background-image:url(https://dshu.innogamescdn.com/asset/7fe7ab60/graphic/sorthandle.png);cursor:pointer"></div>${l}</span> <img data-title=Törlés onclick=removeFilter(${t}) src=https://dshu.innogamescdn.com/asset/7fe7ab60/graphic/delete.png></div>`})),$(".filter-items").html(e),$(".filter-items").sortable({update:()=>{let e=[];$(".filter-items .filter-item").get().forEach((i=>{let t=parseInt($(i).attr("id").replace("fi-",""));e.push(filters[t])})),filters=e,renderFilter()}})}function removeFilter(e){filters.splice(e,1),renderFilter()}function applyFilter(){0!=selectedGroups.length?0!=filters.length?(selectedGroups.forEach((e=>{let i=groups.findIndex((i=>i.id==e)),t=[...groups[i].villages],l=[...groups[i].villages],n=!1;if(filters.forEach((e=>{switch("+"!=e.op||n?n=!1:(t=[...l],l=[],n=!0),e.type){case"player":l="+"==e.op?[...addPlayerFilter(e,t,l)]:[...removePlayerFilter(e,l)];break;case"ally":l="+"==e.op?[...addAllyFilter(e,t,l)]:[...removeAllyFilter(e,l)];break;case"bonus":l="+"==e.op?[...addBonusFilter(e,t,l)]:[...removeBonusFilter(e,l)];break;case"barbs":l="+"==e.op?[...addBarbsFilter(t,l)]:[...removeBarbsFilter(l)];break;case"points":l="+"==e.op?[...addPointsFilter(e,t,l)]:[...removePointsFilter(e,l)]}})),$("#copyCheck").is(":checked")){let e={...groups[i]};e.villages=l,e.id=(new Date).getTime(),groups.push(e)}else groups[i].villages=l})),$(".filter-items").html(""),selectedGroups=[],renderGroupList(),renderGroupSelect(),render(),cancelFilter(),renderSelectedVillages()):window.UI.ErrorMessage("Nincs egy szűrő se hozzáadva!"):window.UI.ErrorMessage("Nincs egy csoport se kiválasztva!")}function addPlayerFilter(e,i,t){let l=[...t];return i.forEach((i=>{if(i.player==e.val.id){-1==t.findIndex((e=>e.id==i.id))&&l.push(i)}})),l}function removePlayerFilter(e,i){let t=[];return i.forEach((i=>{i.player!=e.val.id&&t.push(i)})),t}function addAllyFilter(e,i,t){let l=[...t];return i.forEach((i=>{if(pInd=window.players.findIndex((e=>e.id==i.player)),pInd>-1&&window.players[pInd].ally==e.val.id){-1==t.findIndex((e=>e.id==i.id))&&l.push(i)}})),l}function removeAllyFilter(e,i){let t=[];return i.forEach((i=>{pInd=window.players.findIndex((e=>e.id==i.player)),pInd>-1&&window.players[pInd].ally!=e.val.id&&t.push(i)})),t}function addBonusFilter(e,i,t){let l=[...t];return i.forEach((i=>{i.rank==e.val.id&&-1!=e.val.id&&l.push(i),i.rank>0&&-1==e.val.id&&l.push(i)})),l}function removeBonusFilter(e,i){let t=[];return i.forEach((i=>{i.rank!=e.val.id&&-1!=e.val.id&&t.push(i),0==i.rank&&-1==e.val.id&&t.push(i)})),t}function addBarbsFilter(e,i){let t=[...i];return e.forEach((e=>{0==e.player&&t.push(e)})),t}function removeBarbsFilter(e){let i=[];return e.forEach((e=>{0!=e.player&&i.push(e)})),i}function addPointsFilter(e,i,t){let l=[...t];return i.forEach((i=>{statement(e.val.stmt,i.points,parseInt(e.val.val))&&l.push(i)})),l}function removePointsFilter(e,i){let t=[];return i.forEach((i=>{statement(e.val.stmt,i.points,parseInt(e.val.val))||t.push(i)})),t}function statement(e,i,t){switch(e){case">":return i>t;case"<":return i<t;case"=":return t;case">=":return i>=t;case"<=":return i<=t;case"!=":return i!=t}}function copyCoords(){window.UI.SuccessMessage("A koordináták sikeresen vágólapra lettek másolva!"),navigator.clipboard.writeText(activeGroup.villages.map((e=>e.x+"|"+e.y)).join(" "))}window.renderModal=()=>{selectedGroups=[],window.Dialog.show("groupsModal",'<style>::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{box-shadow:inset 0 0 5px grey;border-radius:10px}::-webkit-scrollbar-thumb{background:grey;border-radius:10px}#popup_box_groupsModal{width:1100px!important}.container{height:500px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:40px calc(100% - 40px);gap:0 0;grid-template-areas:"menu menu" "groups villages"}.menu{grid-area:menu}.groups{grid-area:groups;text-align:center}.villages{grid-area:villages;text-align:center}.group-row{display:grid;grid-template-columns:3fr 2fr 1fr 50px;grid-template-rows:30px;gap:0 0;grid-auto-flow:row;grid-template-areas:"name color checkbox view"}.group-row div{padding:6px}.group-items .group-row:nth-of-type(even){background-color:#fff5da}.name{grid-area:name}.view{grid-area:view}.color{grid-area:color}.checkbox{grid-area:checkbox}.group-items{overflow-y:scroll;height:calc(100% - 40px)}.village-row{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;grid-template-rows:30px;gap:0 0;grid-auto-flow:row;grid-template-areas:"village-name point owner ally type"}.village-row div{padding:6px}.village-items .village-row:nth-of-type(even){background-color:#fff5da}.village-name{grid-area:village-name}.point{grid-area:point}.owner{grid-area:owner}.ally{grid-area:ally}.type{grid-area:type}.village-items{overflow-y:scroll;height:calc(100% - 40px)}.group-header{margin-right:5px;background:linear-gradient(to bottom,#e2c07c 0,#dab874 44%,#c1a264 100%);font-weight:700}.village-header{margin-right:5px;background:linear-gradient(to bottom,#e2c07c 0,#dab874 44%,#c1a264 100%);font-weight:700}.filter-window{height:400px;width:500px;position:fixed;top:0;bottom:0;left:0;right:0;margin:auto;background:transparent url(https://dshu.innogamescdn.com/asset/fd86cac8/graphic/index/contentbg.png) scroll left top repeat;filter:drop-shadow(0 0 .75rem rgb(88, 88, 88));border:2px solid #6c4824;border-radius:10px;display:grid;grid-template-rows:1fr 3fr 25px;gap:0 0;grid-template-areas:"filter-menu" "filter-items" "filter-footer";padding:5px;row-gap:10px}.filter-menu{display:grid;justify-content:center;grid-area:filter-menu}.filter-sub{margin:10px auto;display:table;justify-content:center;grid-area:filter-sub}.filter-footer{display:flex;justify-content:center;grid-area:filter-footer}.filter-items{grid-area:filter-items;overflow-y:scroll}.filter-sub select{max-width:150px;font-size:14px}.filter-sub div{margin-bottom:5px}.filter-sub div:first-of-type{display:flex;justify-content:center}.filter-item{padding:5px;background-color:#fff5da;border-top:solid 1px #ebd7af;display:flex;justify-content:space-between}</style><div class=container><div class=menu><button class=btn onclick=union()>Összevon</button> <button class=btn onclick=subtract()>Kivon</button> <button class=btn onclick=section()>Metszet</button> <button class=btn onclick=openFilter()>Szűrés</button> <button class=btn onclick=deleteSelected()>Törlés</button> <span>TW-mapper - v1.1 by: toldi26</span> <button class=btn onclick=copyCoords() style=float:right>Másolás</button></div><div class=groups><div class="group-header group-row"><div class=name>Csoport Név</div><div class=color>Szín</div><div class=checkbox>választ</div><div class=view>Nézet</div></div><div class=group-items></div></div><div class=villages><div class="village-header village-row"><div class=village-name>Falu Név</div><div class=point>Pont</div><div class=owner>Tulajdonos</div><div class=ally>Klán</div><div class=type>Típus</div></div><div class=village-items></div></div><div class=filter-window style=display:none><div class=filter-menu><div class=filter-main><button class=btn onclick=barbMenu()>Barbár</button> <button class=btn onclick=playerMenu()>Játékos</button> <button class=btn onclick=allyMenu()>Klán</button> <button class=btn onclick=pointMenu()>Pont</button> <button class=btn onclick=bonusMenu()>Bónusz</button></div><div class=filter-sub></div></div><div class=filter-items></div><div class=filter-footer><input id=copyCheck type=checkbox><label style=padding:5px>Másolat</label> <button class=btn onclick=applyFilter()>Alkalmaz</button> <button class=btn onclick=cancelFilter()>Mégse</button></div></div></div>'),renderGroupList()},window.section=()=>{if(selectedGroups.length<2)return void window.top.UI.ErrorMessage("Nincs elegendő csoport kiválasztva");let e=groups.findIndex((e=>e.id==selectedGroups[0])),i=[...groups[e].villages],t=groups[e].name;for(let e=1;e<selectedGroups.length;e++){let l=groups.findIndex((i=>i.id==selectedGroups[e])),n=[...groups[l].villages],a=[];t+=" ∩ "+groups[l].name,i.forEach((e=>{-1!=n.findIndex((i=>i.x==e.x&&i.y==e.y))&&a.push(e)})),i=a}groups.push({id:(new Date).getTime(),name:t,color:groups[e].color,villages:i}),selectedGroups=[],renderGroupSelect(),renderGroupList(),render()};
 
Fent