From d5dd306d741d174a6f5e55690797ace515957d78 Mon Sep 17 00:00:00 2001
From: brandon <brandon@bbrunson.com>
Date: Wed, 4 Jun 2025 15:20:36 -0700
Subject: [PATCH] improvements and style changes of adding name to team
 functionality

---
 .gitignore       |   2 +-
 positions.db     | Bin 12288 -> 12288 bytes
 public/script.js |  53 ++++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9909d06..4ec9213 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
 node_modules/
-positions.db
\ No newline at end of file
+positions.db
diff --git a/positions.db b/positions.db
index 7a9d483eadac49e1a271f74f29f75e1147958a96..3db3987d9c9bd3035e940a9d7f36d80816a73936 100644
GIT binary patch
delta 555
zcmXAmKWq~*6vmS}X__?kmrE)JiomF<LRAUy<xj(enzXcvC`j!9V@&GmPPzENccCgv
zGG~E^feon=6J4l4EU>`@6ANre3@nJP8xy|k@_x_X^PlfMk2<5yvxQ`7a-o$hopg?{
zl1L<q^f-Y(_>Rwbha)`20Ulr*H*po`k)fyb7yU{<(BqRwLpr2IVqN0)w%e0z#}5K(
z5nR5pIS5#DphI8H7l^gOueY2*x5t{oNC!dBEr4LDaYqV|wZ#6umWM@3u)KQ9^_5_o
zo>W39Y0VLoYwdyO%8=bHZwW1md9$rzvd8j}?LL&lZm1<@2^M+VcNAOqwJTIUN2~?A
z+Kh6xUdj?{*{*DOt{<{BZ%^vLSEZRqG`_ozkRH1ygHWn-83Jy%9HBiK7-zbFRxV5v
zYtiOyskM2v?}m<*Ce{*f><nGg)~--pM?RscXcYBb89MB?+ZP35PVrjoYfJR|QWvL)
zRp!+V?RL+uF-GQ-(SRyVE!3W`SW^#_QFGBhV4T2vyucX$aEib9ji302ANYb#_=q=n
zjaMnW#N_Q7yMoE6{(OAx;{8>cCP>!iqFBjCk<S|YNxPbhQOU-zXQGmwi5Gl20&k>a
Q)Kf8PBt~`0w3_9W|0tD=_W%F@

delta 726
zcmZ8fL1+^}6y0>PY13xsXOpx6D>_n2DIS{H-DH!aNoz}}3XPyA>6lL0rOB*LHkOKz
zf(NA_SbFdxqR^8Ep?dJ77ZLFyUPQcjsweg2%|mf^d-L+&%>VP>fB(<lUfo`OIGH%y
zJ=sVc9;`ltGJdQTanpeJ_yzs~I=%-lVIND_gKN--6Zi-oz;9T@*TKaf@K5{{zTxJ<
z%_Cz_FpzoHD%B+uYk?qj*%!S)OcW7NtKl)(;XTq|vg@}!#yi+VaHh7{?~!_6hJnbB
zAamBT7dn0rl5?FkE>&_~kDS(p;}mj*_d+i4TP>LxN9H80UFK_KnR7gZ%+mu}Y4Ok_
z%YK*PPg;74mYac|N2WntnA3(0S}q`^klOz#Gz-X_rqva{y+K+`v^{=XSFIRUDVs!Q
zOydc%#JXKB4O+`(5X`#g{Xj6X*x`Z+!Ckno4N^wcTE;mgg(}4xoU8=BULhNmEH%8o
zVy`pR>1J=k_j03(#9m_Z7T+SR8@wG#4u)%vA($yQ`yHQ$<kF0aGfmTUBZ(0h6-XnP
zqRl|5nGdATL}pk`!E)-+nGEK$DJ9pUO)jM(?fRjY%q5UHL!AZbw~sw)sOE$!;<P-r
zDWcM%&83qC1k=@voORR}t*=YI6^^RPMesFv2ajL}e!*Y(0e|2w+);br!*low-{B*C
zhBpwvYuHc00X%`-SCrUrMn{maijj3Dl&S=+jmJ<e#Ng)lcIHl9t>EZpm5k`2n~7|B
lEVA}!WNA7M+aobJ!!giQ43-`NEhl5JQ4EzKwJ&Mv`~!l!uI2y$

diff --git a/public/script.js b/public/script.js
index 43bce58..974f693 100644
--- a/public/script.js
+++ b/public/script.js
@@ -118,8 +118,30 @@ function waitForCategorySelection(customName, squareEl, squareNumber) {
   document.querySelectorAll('.categories').forEach(cat => {
     cat.classList.add('category-selectable');
   });
+
+  // --- Add overlay to dim only the map area with transition ---
+  let mapWrapper = document.getElementById('mapWrapper');
+  let overlay = document.createElement('div');
+  overlay.id = 'category-select-overlay';
+  overlay.style.position = 'absolute';
+  overlay.style.top = '0';
+  overlay.style.left = '0';
+  overlay.style.width = '100%';
+  overlay.style.height = '100%';
+  overlay.style.background = 'rgba(0,0,0,0.55)';
+  overlay.style.zIndex = '999';
+  overlay.style.pointerEvents = 'auto';
+  overlay.style.opacity = '0';
+  overlay.style.transition = 'opacity 0.3s ease';
+  mapWrapper.appendChild(overlay);
+  // Trigger fade-in
+  requestAnimationFrame(() => {
+    overlay.style.opacity = '1';
+  });
+  // --- end overlay ---
+
   const msg = document.createElement('div');
-  msg.textContent = 'Click a category to add "' + customName + '"';
+  msg.innerHTML = 'Select a team to add <span style="color:#d103f9;">' + customName + '</span> to';
   msg.className = 'category-select-msg';
   msg.style.position = 'absolute';
   msg.style.top = '40%';
@@ -133,6 +155,27 @@ function waitForCategorySelection(customName, squareEl, squareNumber) {
   msg.style.fontSize = '1.1em';
   document.body.appendChild(msg);
 
+  // --- Overlay click cancels the add operation ---
+  overlay.addEventListener('click', function cancelAddFruit() {
+    // Remove highlight/selectable from categories
+    document.querySelectorAll('.categories').forEach(cat => {
+      cat.classList.remove('category-selectable');
+      cat.removeEventListener('click', onCategoryClick, true);
+    });
+    // Remove overlay and message
+    document.body.removeChild(msg);
+    overlay.style.opacity = '0';
+    setTimeout(() => {
+      if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+    }, 300);
+    // Restore the square to its original state (just the number)
+    squareEl.innerHTML = '';
+    const numDiv = document.createElement('div');
+    numDiv.className = 'square-number';
+    numDiv.textContent = squareNumber;
+    squareEl.appendChild(numDiv);
+  });
+
   // Handler for category click
   function onCategoryClick(e) {
     e.stopPropagation();
@@ -141,6 +184,14 @@ function waitForCategorySelection(customName, squareEl, squareNumber) {
       cat.removeEventListener('click', onCategoryClick, true);
     });
     document.body.removeChild(msg);
+    // --- Remove overlay with fade-out ---
+    if (overlay && overlay.parentNode) {
+      overlay.style.opacity = '0';
+      setTimeout(() => {
+        if (overlay.parentNode) overlay.parentNode.removeChild(overlay);
+      }, 300);
+    }
+    // --- end remove overlay ---
 
     // Find category name
     const catHeader = e.currentTarget.querySelector('.category-header h4');