Update script.js

script.js

@@ -10,21 +10,18 @@ document.addEventListener('DOMContentLoaded', () => {
     const scoreDisplay = document.getElementById('score-display');
 
     // --- Game Settings ---
-    const gridSize = 12; // << INCREASED GRID SIZE (e.g., 12x12)
-    const cellSize = 40; // Keep cell size, or adjust (e.g., 35 for smaller cells on bigger grid)
+    const gridSize = 8; // << REVERTED to 8x8 grid
+    const cellSize = 40; // Keep cell size from previous working version
 
-    // --- Items to Find --- << ADDED MORE ITEMS
+    // --- Items to Find --- << REVERTED to 10 items for 8x8 grid
     const itemsToFind = [
         { name: "a sparkling diamond", emoji: "💎" }, { name: "a red apple", emoji: "🍎" },
         { name: "a yummy pizza slice", emoji: "🍕" }, { name: "a fast rocket", emoji: "🚀" },
         { name: "a cute puppy", emoji: "🐶" }, { name: "a bright star", emoji: "⭐" },
         { name: "a cool robot", emoji: "🤖" }, { name: "a friendly ghost", emoji: "👻" },
-        { name: "a birthday cake", emoji: "🎂" }, { name: "a magical unicorn", emoji: "🦄" },
-        { name: "a buzzing bee", emoji: "🐝" }, { name: "a soccer ball", emoji: "⚽" },
-        { name: "a juicy strawberry", emoji: "🍓" }, { name: "a treasure chest", emoji: "🪙" },// Use coin if chest unavailable
-        { name: "a sleepy koala", emoji: "🐨" }
+        { name: "a birthday cake", emoji: "🎂" }, { name: "a magical unicorn", emoji: "🦄" }
     ];
-    const totalItems = itemsToFind.length; // **Dynamically get count**
+    const totalItems = itemsToFind.length; // Dynamic count
 
     // --- Game State ---
     let targetX = -1, targetY = -1, currentItemIndex = 0, foundCurrent = false, score = 0;
@@ -36,13 +33,13 @@ document.addEventListener('DOMContentLoaded', () => {
         yAxisLabelsContainer.innerHTML = '';
         score = 0;
         currentItemIndex = 0;
-        updateScoreDisplay(); // **Use dynamic totalItems here**
+        updateScoreDisplay(); // Use dynamic totalItems
 
         document.documentElement.style.setProperty('--cell-size', `${cellSize}px`);
 
         const gridTotalSize = gridSize * cellSize;
-        const yAxisWidth = 20;
-        const yAxisMargin = 5;
+        const yAxisWidth = 20; // Match CSS .y-axis-label width
+        const yAxisMargin = 5; // Match CSS #y-axis-labels margin-right
 
         // Configure Grid Container Styles Explicitly
         gridContainer.style.width = `${gridTotalSize}px`;
@@ -54,7 +51,6 @@ document.addEventListener('DOMContentLoaded', () => {
         // Configure Axis Containers
         yAxisLabelsContainer.style.height = `${gridTotalSize}px`;
         xAxisLabelsContainer.style.width = `${gridTotalSize}px`;
-        // Make the outer X container wide enough for Y axis space + grid
         xAxisContainer.style.width = `${yAxisWidth + yAxisMargin + gridTotalSize}px`;
         xAxisLabelsContainer.style.marginLeft = `${yAxisWidth + yAxisMargin}px`;
 
@@ -92,29 +88,23 @@ document.addEventListener('DOMContentLoaded', () => {
 
      // --- Update Score Display ---
      function updateScoreDisplay() {
-        // **Use totalItems variable**
         scoreDisplay.textContent = `Score: ${score} / ${totalItems}`;
     }
 
     // --- Set New Target ---
     function setNewTarget() {
         foundCurrent = false;
-
-        // Game Over Check
         if (currentItemIndex >= totalItems) {
             let finalMessage = `All done! Your final score: ${score} / ${totalItems}! 🎉`;
             if (score === totalItems) finalMessage += " Perfect score! 🥳";
-            else if (score >= totalItems * 0.7) finalMessage += " Great job! 👍"; // Adjust threshold
+            else if (score >= totalItems * 0.7) finalMessage += " Great job! 👍";
             feedbackDisplay.textContent = finalMessage;
             feedbackDisplay.className = 'correct-feedback';
             targetCoordsDisplay.textContent = "(✔,✔)";
             itemNameDisplay.textContent = 'all the items';
             return;
         }
-
         const currentItem = itemsToFind[currentItemIndex];
-
-        // Find Empty Cell (same logic as before)
         let newTargetFound = false, attempts = 0;
         const maxAttempts = gridSize * gridSize * 2;
         while (!newTargetFound && attempts < maxAttempts) {
@@ -123,20 +113,18 @@ document.addEventListener('DOMContentLoaded', () => {
             const potentialCell = gridContainer.querySelector(`.grid-cell[data-x="${targetX}"][data-y="${targetY}"]`);
             if (potentialCell && potentialCell.textContent.trim() === '') { newTargetFound = true; }
             attempts++;
-            if(attempts >= maxAttempts){ // Add the check after incrementing attempts
+            if(attempts >= maxAttempts){
                  let allFilled = true;
                  gridContainer.querySelectorAll('.grid-cell').forEach(cell => { if(cell.textContent === '') allFilled = false; });
-                 if(allFilled) { console.warn("Grid appears full!"); break; } // Break if grid full
-                 else { attempts = 0; } // Reset attempts if grid not full but just unlucky
+                 if(allFilled) { console.warn("Grid appears full!"); break; }
+                 else { attempts = 0; }
              }
         }
          if (!newTargetFound) {
-              console.error("Could not find an empty cell after many attempts!");
-              feedbackDisplay.textContent = "Uh oh, map is too full! Refresh maybe?";
+              console.error("Could not find an empty cell!");
+              feedbackDisplay.textContent = "Uh oh, map is full! Refresh maybe?";
               return;
          }
-
-        // Update display
         itemNameDisplay.textContent = currentItem.name;
         targetCoordsDisplay.textContent = `(${targetX}, ${targetY})`;
         feedbackDisplay.textContent = `Where is ${currentItem.name}? (${currentItemIndex + 1}/${totalItems})`;
@@ -147,7 +135,7 @@ document.addEventListener('DOMContentLoaded', () => {
         console.log(`Round ${currentItemIndex + 1}: Find ${currentItem.name} at (${targetX}, ${targetY})`);
     }
 
-    // --- Handle Cell Click (same as before) ---
+    // --- Handle Cell Click ---
     function handleCellClick(event) {
         if (foundCurrent || currentItemIndex >= totalItems) return;
         const clickedCell = event.target;