MediaWiki:Common.js: Difference between revisions

Revision as of 23:41, 26 August 2025

/* Any JavaScript here will be loaded for all users on every page load. */
(function(){
  // --- Leaflet CSS/JS ---
  var LCSS='https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
  var LJS ='https://unpkg.com/leaflet@1.9.4/dist/leaflet.js';
  if (!document.querySelector('link[href="'+LCSS+'"]')) {
    var l=document.createElement('link'); l.rel='stylesheet'; l.href=LCSS; document.head.appendChild(l);
  }
  function loadScript(src, cb){ var s=document.createElement('script'); s.src=src; s.onload=cb; document.head.appendChild(s); }
  function fileUrl(title){ return new URL(mw.util.getUrl('Special:FilePath/'+title), location.origin).href; }

  // --- CSS for emoji markers ---
  (function(){
    var css = `
      .tv-icon{display:flex;align-items:center;justify-content:center;
        width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 2px #fff, 0 2px 6px rgba(0,0,0,.25);
        font-size:18px;line-height:1;}
      .tv-icon-boss{ background:#c0392b; }     /* red */
      .tv-icon-pebble{ background:#7f8c8d; }  /* gray */
      .tv-icon-logs{ background:#8e5a2b; }    /* brown */
      .tv-icon span{ transform:translateY(1px); }
    `;
    var st=document.createElement('style'); st.textContent=css; document.head.appendChild(st);
  })();

  // === CONFIG ===
  var MAP_IMAGE_FILE = 'TreeverseMap.jpg';   // exact filename of your uploaded map
  // ==============

  // Make a divIcon with emoji
  function makeEmojiIcon(kind){
    var cls = 'tv-icon ';
    var emoji = '❓';
    if (kind==='boss'){ cls+='tv-icon-boss'; emoji='👹'; }
    else if (kind==='pebble'){ cls+='tv-icon-pebble'; emoji='🪨'; }
    else if (kind==='logs'){ cls+='tv-icon-logs'; emoji='🪓'; }
    return L.divIcon({
      className: cls,
      html: '<span>'+emoji+'</span>',
      iconSize: [30,30],
      iconAnchor: [15,30],
      popupAnchor: [0,-24]
    });
  }

  // Control for adding markers
  function makeControl(map, layers){
    var c=L.control({position:'topright'});
    c.onAdd=function(){
      var d=L.DomUtil.create('div','leaflet-bar');
      d.style.padding='8px'; d.style.background='#fff'; d.style.minWidth='220px'; d.style.font='14px/1.2 sans-serif';
      d.innerHTML=''
        +'<div style="font-weight:600;margin-bottom:6px">Add marker</div>'
        +'<label style="display:block;margin:4px 0 2px">Type</label>'
        +'<select id="tm-type" style="width:100%">'
        +'<option value="boss">Boss 👹</option>'
        +'<option value="pebble">Pebble 🪨</option>'
        +'<option value="logs">Logs 🪓</option>'
        +'</select>'
        +'<label style="display:block;margin:6px 0 2px">Title</label>'
        +'<input id="tm-title" placeholder="Name…" style="width:100%;box-sizing:border-box">'
        +'<label style="display:block;margin:6px 0 2px">Coords (y, x)</label>'
        +'<input id="tm-y" placeholder="y" style="width:48%">'
        +'<input id="tm-x" placeholder="x" style="width:48%;float:right">'
        +'<div style="clear:both;margin-top:8px"></div>'
        +'<button id="tm-add" class="mw-ui-button" style="width:100%">Add</button>';
      L.DomEvent.disableClickPropagation(d);

      var addMarker=function(){};
      d.querySelector('#tm-add').onclick=function(){
        var t=d.querySelector('#tm-type').value,
            title=(d.querySelector('#tm-title').value||'').trim(),
            y=parseFloat(d.querySelector('#tm-y').value),
            x=parseFloat(d.querySelector('#tm-x').value);
        if(isNaN(y)||isNaN(x)){alert('Enter numbers for y and x');return;}
        addMarker(t,[y,x],title||t);
      };
      c.setAddMarker=function(fn){ addMarker=fn; };
      c.setInputs=function(latlng){
        d.querySelector('#tm-y').value=Math.round(latlng.lat);
        d.querySelector('#tm-x').value=Math.round(latlng.lng);
      };
      return d;
    };
    c.addTo(map); return c;
  }

  function init(){
    var img=new Image(), mapImgUrl=fileUrl(MAP_IMAGE_FILE);
    img.onload=function(){
      var w=img.naturalWidth, h=img.naturalHeight;
      if(!w||!h){ alert('Could not read size for '+MAP_IMAGE_FILE); return; }
      var el=document.getElementById('treeverse-map'); if(!el) return;
      var map=L.map(el,{crs:L.CRS.Simple,minZoom:-2,maxZoom:5});
      var bounds=[[0,0],[h,w]];
      L.imageOverlay(mapImgUrl,bounds).addTo(map);
      map.fitBounds(bounds);

      var layers={ boss:L.layerGroup().addTo(map),
                   pebble:L.layerGroup().addTo(map),
                   logs:L.layerGroup().addTo(map) };
      var icons={ boss:makeEmojiIcon('boss'),
                  pebble:makeEmojiIcon('pebble'),
                  logs:makeEmojiIcon('logs') };

      function addMarker(type,latlng,title){
        var m=L.marker(latlng,{icon:icons[type],title:title||type}).addTo(layers[type]);
        m.bindPopup('<b>'+ (title||type) +'</b><br>(y:'+Math.round(latlng[0])+', x:'+Math.round(latlng[1])+')');
        return m;
      }

      var control=makeControl(map,layers);
      control.setAddMarker(addMarker);
      map.on('click',e=>control.setInputs(e.latlng));

      L.control.layers(null,{
        'Bosses 👹':layers.boss,
        'Pebbles 🪨':layers.pebble,
        'Logs 🪓':layers.logs
      },{collapsed:false}).addTo(map);

      // Example starter markers
      addMarker('town',[Math.round(h*0.55),Math.round(w*0.45)],'Spawn'); // optional
      addMarker('pebble',[Math.round(h*0.40),Math.round(w*0.70)],'Pebble Patch');
      addMarker('boss',[Math.round(h*0.25),Math.round(w*0.30)],'Ancient Demon');
      addMarker('logs',[Math.round(h*0.60),Math.round(w*0.60)],'Logging Camp');
    };
    img.onerror=function(){ alert('Could not load map image "'+MAP_IMAGE_FILE+'". Check Special:ListFiles.'); };
    img.src=mapImgUrl+'?v='+Date.now();
  }

  loadScript(LJS, init);
})();