Selfies: Difference between revisions

← Older edit Newer edit →

Revision as of 22:28, 27 August 2025

Map Tools

Click on pin to view selfie.

Saved ✅

@@ Line 9: / Line 9: @@
      background:#f4f8f4; padding:10px; border-radius:12px;
      box-shadow:0 6px 20px rgba(0,0,0,.25);
-     width:300px; font:14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+     width:320px; font:14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      border:2px solid #3b5d3f;
    }
@@ Line 16: / Line 16: @@
      box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.25); font-size:18px; line-height:1; background:#16a085}
    .tv-input{display:block;width:100%;margin:6px 0;box-sizing:border-box}
-   .tv-text{padding:6px 8px;border:1px solid #ccc;border-radius:6px;font-size:14px}
+   .tv-text{padding:8px 10px;border:1px solid #ccc;border-radius:6px;font-size:15px}
-  .tv-select{padding:8px;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;
-   .tv-btn{display:block;width:100%;margin-top:6px;padding:10px;border:none;border-radius:6px;font-weight:bold;cursor:pointer}
+    font-weight:bold;cursor:pointer;background:#27ae60;color:#fff}
-  .btn-add{background:#27ae60;color:#fff} .btn-add:hover{background:#1f8b4d}
+  .tv-btn:hover{background:#1f8b4d}
-   .btn-exp{background:#3498db;color:#fff} .btn-exp:hover{background:#2980b9}
-  .btn-del{background:#bdc3c7;color:#2c3e50} .btn-del.on{background:#e74c3c;color:#fff}
+  /* Bigger file chooser */
-   #toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);background:#2ecc71;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:2000}
+   #m-photo{padding:8px;border:1px solid #ccc;border-radius:6px;font-size:15px;background:#fff}
+  /* Toast */
+   #toast{position:fixed;top:10px;left:50%;transform:translateX(-50%);
+    background:#2ecc71;color:#fff;padding:6px 12px;border-radius:6px;font-size:13px;
+    opacity:0;transition:opacity .3s;pointer-events:none;z-index:2000}
    #toast.show{opacity:1}
+  /* Wider, responsive popup with full-width image */
+  .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){
+    .tv-popup .leaflet-popup-content{width:72vw !important; max-width:72vw !important}
+  }
 </style>
@@ Line 32: / Line 44: @@
      <h3>Map Tools</h3>
-     <select id="m-type" class="tv-input tv-select">
+     <!-- Username required -->
-      <option value="selfie">Selfie 📸</option>
+     <input id="m-title" class="tv-input tv-text" placeholder="Enter Player Username *" required>
-    </select>
+     <textarea id="m-desc" class="tv-input tv-text" rows="2" placeholder="Add description"></textarea>
-     <input id="m-title" class="tv-input tv-text" placeholder="Type Name...">
-     <textarea id="m-desc" class="tv-input tv-text" rows="2" placeholder="Add short notes..."></textarea>
      <!-- allow jpg/jpeg/png/webp (≤10MB checked in JS + PHP) -->
      <input type="file" id="m-photo" class="tv-input" accept="image/jpeg,image/png,image/webp">
-     <button id="m-add" class="tv-btn btn-add">Add to Map</button>
+     <button id="m-add" class="tv-btn">Add to Map</button>
-    <button id="m-export" class="tv-btn btn-exp">Export 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 a map icon to view details.<br>
+       Click on pin to view selfie.
-      🖱️ Right click on map icon to delete (if Delete mode is ON).
      </div>
    </div>
@@ Line 56: / Line 62: @@
 <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
-<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
 <script>
    // --- CONFIG (endpoints) ---
@@ Line 70: / Line 75: @@
      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="" style="max-width:220px;border-radius:6px"></div>` : '';
+     const img = imgUrl ? `<div style="margin-top:6px"><img src="${imgUrl}" alt=""></div>` : '';
-     return `<b>${t||'Untitled'}</b>${d?`<div style="margin-top:4px">${d}</div>`:''}${img}`;
+     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 82: / Line 88: @@
      map.fitBounds(bounds);
+    // Single layer for selfies (no legend)
      const selfies = L.layerGroup().addTo(map);
-    L.control.layers(null, { 'Selfies 📸': selfies }, { collapsed:false, position:'topleft' }).addTo(map);
-    // Delete mode
-    let deleteMode=false;
-    const delBtn=document.getElementById('m-delmode');
-    delBtn.onclick=()=>{ deleteMode=!deleteMode; delBtn.textContent='Delete mode: '+(deleteMode?'ON':'OFF'); delBtn.classList.toggle('on', deleteMode); };
+    // Add / build marker
      function addMarker(latlng, title, desc, imgUrl){
        const m = L.marker(latlng,{icon:icon(), title:title||'Selfie', desc:desc||'', imgUrl:imgUrl||null}).addTo(selfies);
-       m.bindPopup(popupHtml(title,desc,imgUrl));
+       m.bindPopup(popupHtml(title,desc,imgUrl), { className:'tv-popup', maxWidth:600, minWidth:200, autoPan:true });
        m.on('click', () => m.openPopup());
-      m.on('contextmenu', () => { if(deleteMode){ selfies.removeLayer(m); saveShared().catch(console.warn); } });
        return m;
      }
      function collectMarkers(){
        const all=[]; selfies.eachLayer(l=>{ const ll=l.getLatLng();
@@ Line 102: / Line 104: @@
        }); return all;
      }
      async function saveShared(){
        const payload = JSON.stringify(collectMarkers());
@@ Line 108: / Line 111: @@
        toast('Saved ✅');
      }
      function applyMarkers(arr){ arr.forEach(m => addMarker([m.y,m.x], m.title||'Selfie', m.desc||'', m.img||null)); }
      // UI refs
-     const tI=document.getElementById('m-title'), dI=document.getElementById('m-desc'), pI=document.getElementById('m-photo'), addBtn=document.getElementById('m-add');
+     const tI=document.getElementById('m-title'),
+          dI=document.getElementById('m-desc'),
+          pI=document.getElementById('m-photo'),
+          addBtn=document.getElementById('m-add');
-     // Client-side file checks (jpg/jpeg/png/webp ≤ 10MB)
+     // Client-side checks: username required; file type/size optional but validated
-     function validatePhoto(){
+     function validateInputs(){
-       const f = pI.files[0]; if(!f) return true;
+      const name = tI.value.trim();
-      const ok = ['image/jpeg','image/png','image/webp'];
+      if(!name){ alert('Please enter a player username.'); tI.focus(); return false; }
-      if(!ok.includes(f.type)){ alert('Only JPG/JPEG, PNG, or WEBP allowed.'); pI.value=''; return false; }
+       const f = pI.files[0];
-      if(f.size > 10*1024*1024){ alert('Image is over 10MB.'); pI.value=''; return false; }
+      if(f){
+        const ok = ['image/jpeg','image/png','image/webp'];
+        if(!ok.includes(f.type)){ alert('Only JPG/JPEG, PNG, or WEBP allowed.'); pI.value=''; return false; }
+        if(f.size > 10*1024*1024){ alert('Image is over 10MB.'); pI.value=''; return false; }
+      }
        return true;
      }
      async function uploadPhotoIfAny(){
        const f = pI.files[0]; if(!f) return null;
@@ Line 129: / Line 141: @@
      }
-     // Add -> click map
+     // Add → click to place
      let placing=null;
      addBtn.onclick = () => {
-       if(!validatePhoto()) return;
+       if(!validateInputs()) return;
        placing = { title: tI.value, desc: dI.value };
        addBtn.textContent='Click map…'; addBtn.disabled=true; map.getContainer().style.cursor='crosshair';
@@ Line 147: / Line 159: @@
          finally{ cancel(); tI.value=''; dI.value=''; pI.value=''; }
        });
-    };
-    // Export PNG (hides panel for clean capture)
-    document.getElementById('m-export').onclick = async () => {
-      try{
-        const panel=document.getElementById('tv-panel'); const prev=panel.style.display; panel.style.display='none';
-        await new Promise(r=>setTimeout(r,50));
-        const canvas = await html2canvas(document.getElementById('map'), { useCORS:true, backgroundColor:null, scale:2 });
-        panel.style.display = prev || '';
-        const a=document.createElement('a'); a.href=canvas.toDataURL('image/png'); a.download='selfies-map.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a);
-      }catch(e){ alert('Export failed'); console.error(e); }
      };