Selfies: Difference between revisions

← Older edit Newer edit →

Revision as of 22:34, 27 August 2025

Map Tools

Rotate: 0°

Click on pin to view selfie.
Right-click on pin to delete (if Delete Mode is ON).

Saved ✅

@@ Line 3: / Line 3: @@
 <style>
+  .mw-parser-output, .mw-body, .mw-body-content { overflow: visible !important; }
    .tv-wrap{position:relative}
-   #map{height:80vh;width:100%;border:1px solid #ddd;border-radius:10px}
+   #map{height:80vh;width:100%;border:1px solid #ddd;border-radius:10px; overflow:visible}
    .tv-panel{
      position:absolute; top:10px; right:10px; z-index:1000;
@@ Line 18: / Line 21: @@
    .tv-text{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:15px}
    .tv-btn{display:block;width:100%;margin-top:8px;padding:12px;border:none;border-radius:6px;
-     font-weight:bold;cursor:pointer;background:#27ae60;color:#fff}
+     font-weight:bold;cursor:pointer}
-   .tv-btn:hover{background:#1f8b4d}
+  .btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d}
+   .btn-del{background:#bdc3c7;color:#2c3e50;transition:background .2s,color .2s}
+  .btn-del.on{background:#e74c3c;color:#fff}
-  /* Bigger file chooser */
    #m-photo{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:15px;background:#fff}
-   /* Toast */
+   .tv-rotate{display:flex;gap:8px;align-items:center}
+  .tv-rotate input[type=range]{flex:1}
    #toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);
      background:#2ecc71;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;
@@ Line 30: / Line 36: @@
    #toast.show{opacity:1}
-  /* Wider, responsive popup with full-width image */
+   .tv-popup .leaflet-popup-content{margin:10px 12px; width:380px !important; max-width:380px !important}
-   .tv-popup .leaflet-popup-content{margin:10px 12px; width:360px !important; max-width:360px !important}
    .tv-popup .leaflet-popup-content img{display:block;width:100%;height:auto;border-radius:6px}
    @media (max-width:520px){
@@ Line 44: / Line 49: @@
      <h3>Map Tools</h3>
-    <!-- Username required -->
      <input id="m-title" class="tv-input tv-text" placeholder="Enter Player Username *" required>
      <textarea id="m-desc" class="tv-input tv-text" rows="2" placeholder="Add description"></textarea>
+    <input type="file" id="m-photo" class="tv-input" accept="image/jpeg,image/png,image/webp">
-     <!-- allow jpg/jpeg/png/webp (≤10MB checked in JS + PHP) -->
+     <div class="tv-rotate tv-input">
-    <input type="file" id="m-photo" class="tv-input" accept="image/jpeg,image/png,image/webp">
+      <label for="m-rot" style="white-space:nowrap">Rotate:</label>
+      <input id="m-rot" type="range" min="0" max="360" step="1" value="0">
+      <span id="m-rot-val" style="width:3ch;text-align:right">0</span>°
+    </div>
-     <button id="m-add" class="tv-btn">Add to Map</button>
+     <button id="m-add" class="tv-btn btn-add">Add to Map</button>
+    <button id="m-delmode" class="tv-btn btn-del">Delete mode: OFF</button>
      <div style="font-size:12px;opacity:.75;margin-top:6px;line-height:1.4">
-       Click on pin to view selfie.
+       Click on pin to view selfie.<br>
+      Right-click on pin to delete (if Delete Mode is ON).
      </div>
    </div>
@@ Line 63: / Line 73: @@
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 <script>
-  // --- CONFIG (endpoints) ---
    const MAP_IMAGE_URL = 'https://treeverse.wiki/images/5/50/Selfie.JPEG';
    const DATA_URL      = '/map-selfie/map-data-selfie.json';
    const SAVE_URL      = '/map-selfie/save-selfie.php';
    const UPLOAD_URL    = '/map-selfie/upload-selfie.php';
-  // --------------------------
    function toast(msg="Saved ✅"){ const t=document.getElementById('toast'); t.textContent=msg; t.classList.add('show'); setTimeout(()=>t.classList.remove('show'),1500); }
    function icon(){ return L.divIcon({ className:'tv-icon', html:'<span>📸</span>', iconSize:[30,30], iconAnchor:[15,30], popupAnchor:[0,-24] }); }
-   function popupHtml(title,desc,imgUrl){
+   function popupHtml(title,desc,imgUrl,rot){
      const t=(title||'').trim();
      const d=(desc||'').trim().replace(/</g,'&lt;').replace(/>/g,'&gt;');
-     const img = imgUrl ? `<div style="margin-top:6px"><img src="${imgUrl}" alt=""></div>` : '';
+    const rotation = Number.isFinite(rot) ? rot : 0;
+     const img = imgUrl ? `<div style="margin-top:6px"><img src="${imgUrl}" alt="" style="transform:rotate(${rotation}deg);transform-origin:center center;"></div>` : '';
      return `<b>${t||'Untitled'}</b>${d?`<div style="margin-top:6px">${d}</div>`:''}${img}`;
    }
-  // Load background image to get pixel bounds
    const img = new Image();
    img.onload = () => {
@@ Line 88: / Line 96: @@
      map.fitBounds(bounds);
-     // Single layer for selfies (no legend)
+     const popupOpts = { className:'tv-popup', maxWidth:600, minWidth:220,
+      autoPan:true, keepInView:true, autoPanPaddingTopLeft:[0,80], autoPanPaddingBottomRight:[0,40] };
      const selfies = L.layerGroup().addTo(map);
-     // Add / build marker
+     // Delete mode
-     function addMarker(latlng, title, desc, imgUrl){
+    let deleteMode=false;
-       const m = L.marker(latlng,{icon:icon(), title:title||'Selfie', desc:desc||'', imgUrl:imgUrl||null}).addTo(selfies);
+    const delBtn=document.getElementById('m-delmode');
-       m.bindPopup(popupHtml(title,desc,imgUrl), { className:'tv-popup', maxWidth:600, minWidth:200, autoPan:true });
+    delBtn.onclick=()=>{ deleteMode=!deleteMode; delBtn.textContent='Delete mode: '+(deleteMode?'ON':'OFF'); delBtn.classList.toggle('on', deleteMode); };
+     function addMarker(latlng, title, desc, imgUrl, rot){
+       const m = L.marker(latlng,{icon:icon(), title:title||'Selfie', desc:desc||'', imgUrl:imgUrl||null, rot:Number(rot)||0}).addTo(selfies);
+       m.bindPopup(popupHtml(title,desc,imgUrl, m.options.rot), popupOpts);
        m.on('click', () => m.openPopup());
+      m.on('contextmenu', () => { if(deleteMode){ selfies.removeLayer(m); saveShared().catch(console.warn); } });
        return m;
      }
@@ Line 101: / Line 116: @@
      function collectMarkers(){
        const all=[]; selfies.eachLayer(l=>{ const ll=l.getLatLng();
-         all.push({type:'selfie', y:ll.lat, x:ll.lng, title:l.options.title||'Selfie', desc:l.options.desc||'', img:l.options.imgUrl||null});
+         all.push({ type:'selfie', y:ll.lat, x:ll.lng, title:l.options.title||'Selfie', desc:l.options.desc||'', img:l.options.imgUrl||null, rot:Number(l.options.rot)||0 });
        }); return all;
      }
@@ Line 112: / Line 127: @@
      }
-     function applyMarkers(arr){ arr.forEach(m => addMarker([m.y,m.x], m.title||'Selfie', m.desc||'', m.img||null)); }
+     function applyMarkers(arr){ arr.forEach(m => addMarker([m.y,m.x], m.title||'Selfie', m.desc||'', m.img||null, m.rot||0)); }
-    // UI refs
      const tI=document.getElementById('m-title'),
            dI=document.getElementById('m-desc'),
            pI=document.getElementById('m-photo'),
+          rI=document.getElementById('m-rot'),
+          rV=document.getElementById('m-rot-val'),
            addBtn=document.getElementById('m-add');
-     // Client-side checks: username required; file type/size optional but validated
+     rI.addEventListener('input', ()=>{ rV.textContent = rI.value; });
      function validateInputs(){
        const name = tI.value.trim();
@@ Line 141: / Line 158: @@
      }
-    // Add → click to place
      let placing=null;
      addBtn.onclick = () => {
        if(!validateInputs()) return;
-       placing = { title: tI.value, desc: dI.value };
+       placing = { title: tI.value, desc: dI.value, rot:Number(rI.value)||0 };
        addBtn.textContent='Click map…'; addBtn.disabled=true; map.getContainer().style.cursor='crosshair';
@@ Line 153: / Line 169: @@
        map.once('click', async e => {
          try{
-           const imgUrl = await uploadPhotoIfAny(); // may be null
+           const imgUrl = await uploadPhotoIfAny();
-           addMarker([e.latlng.lat,e.latlng.lng], placing.title, placing.desc, imgUrl);
+           addMarker([e.latlng.lat,e.latlng.lng], placing.title, placing.desc, imgUrl, placing.rot);
            await saveShared();
          }catch(err){ alert('Could not add selfie: ' + err.message); }
-         finally{ cancel(); tI.value=''; dI.value=''; pI.value=''; }
+         finally{ cancel(); tI.value=''; dI.value=''; pI.value=''; rI.value='0'; rV.textContent='0'; }
        });
      };
-    // Initial load
      (async function(){
        try{