Merge pull request #76 from geekahedron/main

Add popup with overlap percentage

Author: maitri-vv

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];

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;

index.html

@@ -96,6 +96,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>