From 12692081e1f4b296f8971367aae6cbe459636ffc Mon Sep 17 00:00:00 2001
From: geekahedron <d_j_@hotmail.com>
Date: Fri, 31 Oct 2025 12:00:48 -0400
Subject: [PATCH] Add popup with overlap percentage

---
 Js/script.js  | 27 +++++++++++++++++++++++++++
 css/style.css | 26 ++++++++++++++++++++++++++
 index.html    |  4 ++++
 3 files changed, 57 insertions(+)

diff --git a/Js/script.js b/Js/script.js
index 3e0dcd4..b8af3de 100644
--- a/Js/script.js
+++ b/Js/script.js
@@ -412,6 +412,10 @@ function splitBlockAndAddNextOneIfOverlaps() {
   const overhangSize = Math.abs(delta);
   const overlap = size - overhangSize;
 
+  const overlapPercent = Math.max(0,Math.round((overlap / size) * 100));
+  showOverlapPopup(overlapPercent);
+
+
   if (overlap > 0) {
     cutBox(top, overlap, size, delta);
     const shift = (overlap / 2 + overhangSize / 2) * Math.sign(delta);
@@ -440,6 +444,29 @@ function splitBlockAndAddNextOneIfOverlaps() {
   }
 }
 
+// Function to display overlap percentage
+function showOverlapPopup(percent) {
+  const popup = document.getElementById("overlap-popup");
+  popup.textContent = `${percent}%`;
+
+  // Color feedback
+  if (percent >= 90) {
+    popup.style.background = "rgba(0, 128, 0, 0.8)"; // green
+  } else if (percent >= 60) {
+    popup.style.background = "rgba(255, 165, 0, 0.8)"; // orange
+  } else {
+    popup.style.background = "rgba(178, 34, 34, 0.8)"; // red
+  }
+
+  popup.classList.add("show");
+
+  setTimeout(() => {
+    popup.classList.remove("show");
+  }, 1000);
+}
+
+
+
 // Function to handle game over scenario
 function missedTheSpot() {
   const top = stack[stack.length - 1];
diff --git a/css/style.css b/css/style.css
index 5b4ea15..2c593c2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -412,6 +412,32 @@ body {
   animation: score-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }
 
+/* Overlop feedback styles */
+#overlap-popup {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(0, 0, 0, 0.8);
+  color: white;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-family: 'Segoe UI', sans-serif;
+  font-size: 18px;
+  font-weight: bold;
+  display: none;
+  z-index: 1000;
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+#overlap-popup.show {
+  display: block;
+  opacity: 1;
+  transform: translateX(-50%) scale(1.05);
+}
+
+
+
 #youtube {
   position: absolute;
   bottom: 10px;
diff --git a/index.html b/index.html
index 0ac86e8..058fd3f 100644
--- a/index.html
+++ b/index.html
@@ -94,6 +94,10 @@ <h1>Game Over!</h1>
   <!-- score box -->
   <div id="score">0</div>
 
+  <!-- overlap feedback box -->
+<div id="overlap-popup">100%</div>
+
+
   <!-- Theme Buttons -->
 <div id="theme-controls">
   <button id="theme-default" class="theme-btn active" data-tooltip="Default Theme">🌅</button>