added settings menu that saves and reads to/from the browser localStorage

minor design changes

public/script.js

@@ -114,6 +114,34 @@ function showCustomFruitInput(squareEl) {
 
 // Wait for user to click a category, then send to server
 function waitForCategorySelection(customName, squareEl, squareNumber) {
+  // --- Check if fruit name already exists ---
+  const fruitExists = Array.from(document.querySelectorAll('.fruit'))
+    .some(fruitEl => fruitEl.dataset.fruit && fruitEl.dataset.fruit.toLowerCase() === customName.toLowerCase());
+  if (fruitExists) {
+    // If fruit is already in a different square, move it
+    const existingSquare = document.querySelector(`.square[data-fruit="${customName}"]`);
+    if (existingSquare && existingSquare !== squareEl) {
+      existingSquare.innerHTML = '';
+      delete existingSquare.dataset.fruit;
+      const existingSquareId = existingSquare.dataset.squareId;
+      fetch('/api/positions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ squareId: existingSquareId, fruit: '' }),
+      });
+    }
+    // Place the fruit in the new square
+    placeFruitInSquare(squareEl, customName);
+    // Save the new fruit's position to the database
+    const squareId = squareEl.dataset.squareId;
+    fetch('/api/positions', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ squareId, fruit: customName }),
+    });
+    return;
+  }
+
   // Highlight categories and show a message
   document.querySelectorAll('.categories').forEach(cat => {
     cat.classList.add('category-selectable');
@@ -243,6 +271,14 @@ function initializeFruitAndCategoryEvents() {
   document.querySelectorAll('.fruit').forEach(el => {
     el.addEventListener('dragstart', e => {
       e.dataTransfer.setData('text/plain', el.dataset.fruit);
+      // Also store the source category name for moving
+      const catDiv = el.closest('.categories');
+      if (catDiv) {
+        const catHeader = catDiv.querySelector('.category-header h4');
+        if (catHeader) {
+          e.dataTransfer.setData('source-category', catHeader.textContent);
+        }
+      }
       const dragImg = createDragImage(el);
       e.dataTransfer.setDragImage(dragImg, dragImg.offsetWidth / 2, dragImg.offsetHeight / 2);
       // cleanup after drag
@@ -298,6 +334,44 @@ function initializeFruitAndCategoryEvents() {
     });
   });
 
+  // --- Enable dropping fruits into other categories ---
+  document.querySelectorAll('.category-content').forEach(content => {
+    content.addEventListener('dragover', e => {
+      // Only allow drop if dragging a fruit
+      if (e.dataTransfer.types.includes('text/plain')) {
+        e.preventDefault();
+      }
+    });
+    content.addEventListener('drop', async e => {
+      e.preventDefault();
+      const fruit = e.dataTransfer.getData('text/plain');
+      const sourceCategory = e.dataTransfer.getData('source-category');
+      // Find the target category name
+      const catDiv = content.closest('.categories');
+      const catHeader = catDiv ? catDiv.querySelector('.category-header h4') : null;
+      const targetCategory = catHeader ? catHeader.textContent : null;
+      if (!fruit || !sourceCategory || !targetCategory || sourceCategory === targetCategory) return;
+
+      // Move fruit: remove from old category, add to new
+      // 1. Remove from old
+      await fetch('/api/delete-fruit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ category: sourceCategory, fruit })
+      });
+      // 2. Add to new
+      await fetch('/api/add-fruit', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ category: targetCategory, fruit })
+      });
+      // 3. Reload categories and re-init events
+      if (window.loadCategories) await window.loadCategories();
+      initializeFruitAndCategoryEvents();
+    });
+  });
+  // --- end drag-to-category ---
+
   // make each square a drop target
   document.querySelectorAll('.square').forEach(sq => {
     sq.addEventListener('dragover', e => e.preventDefault());
@@ -682,3 +756,91 @@ function showDeleteFruitPopup(fruitName, categoryName) {
     });
   };
 }
+
+// --- Touch support for map pan/zoom ---
+(() => {
+  const mapWrapper = document.getElementById('mapWrapper');
+  const map = document.getElementById('map');
+  let isDragging = false;
+  let startX, startY, startPanX, startPanY;
+  let panX = 0, panY = 0;
+  let currentScale = 1;
+  const minScale = 0.5, maxScale = 3;
+  let lastTouchDist = null;
+
+  function updateTransform() {
+    map.style.transform = `translate(${panX}px, ${panY}px) scale(${currentScale})`;
+  }
+
+  mapWrapper.addEventListener('touchstart', (e) => {
+    if (e.target.closest('.fruit') || e.target.closest('.dropped-fruit')) return;
+    if (e.touches.length === 1) {
+      isDragging = true;
+      startX = e.touches[0].clientX;
+      startY = e.touches[0].clientY;
+      startPanX = panX;
+      startPanY = panY;
+      map.style.cursor = 'grabbing';
+    } else if (e.touches.length === 2) {
+      isDragging = false;
+      lastTouchDist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY
+      );
+    }
+  });
+
+  mapWrapper.addEventListener('touchmove', (e) => {
+    if (e.touches.length === 1 && isDragging) {
+      const deltaX = e.touches[0].clientX - startX;
+      const deltaY = e.touches[0].clientY - startY;
+      panX = startPanX + deltaX;
+      panY = startPanY + deltaY;
+      updateTransform();
+    } else if (e.touches.length === 2) {
+      // Pinch zoom
+      const dist = Math.hypot(
+        e.touches[0].clientX - e.touches[1].clientX,
+        e.touches[0].clientY - e.touches[1].clientY
+      );
+      if (lastTouchDist) {
+        let scaleChange = dist / lastTouchDist;
+        let newScale = currentScale * scaleChange;
+        newScale = Math.min(maxScale, Math.max(minScale, newScale));
+        currentScale = newScale;
+        updateTransform();
+      }
+      lastTouchDist = dist;
+    }
+  });
+
+  mapWrapper.addEventListener('touchend', (e) => {
+    isDragging = false;
+    lastTouchDist = null;
+    map.style.cursor = 'grab';
+  });
+})();
+
+// --- Touch support for fruit drag (basic fallback for mobile) ---
+function enableTouchFruitDrag() {
+  document.querySelectorAll('.fruit').forEach(el => {
+    el.addEventListener('touchstart', function(e) {
+      if (e.touches.length !== 1) return;
+      const fruitName = el.dataset.fruit;
+      // Find first empty square
+      const emptySq = Array.from(document.querySelectorAll('.square')).find(sq => !sq.dataset.fruit && !sq.querySelector('.dropped-fruit'));
+      if (emptySq) {
+        placeFruitInSquare(emptySq, fruitName);
+        // Save to server
+        const squareId = emptySq.dataset.squareId;
+        fetch('/api/positions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ squareId, fruit: fruitName }),
+        });
+      }
+      e.preventDefault();
+    });
+  });
+}
+document.addEventListener('DOMContentLoaded', enableTouchFruitDrag);