Update script.js

script.js

@@ -10,25 +10,24 @@ document.addEventListener('DOMContentLoaded', () => {
     const scoreDisplay = document.getElementById('score-display');
 
     // --- Game Settings ---
-    const gridSize = 8;
-    const cellSize = 40; // Pixels
+    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)
 
-    // --- Items to Find ---
+    // --- Items to Find --- << ADDED MORE ITEMS
     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 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: "🐨" }
     ];
-    const totalItems = itemsToFind.length;
+    const totalItems = itemsToFind.length; // **Dynamically get count**
 
     // --- Game State ---
-    let targetX = -1;
-    let targetY = -1;
-    let currentItemIndex = 0;
-    let foundCurrent = false;
-    let score = 0;
+    let targetX = -1, targetY = -1, currentItemIndex = 0, foundCurrent = false, score = 0;
 
     // --- Initialize Grid and Axes ---
     function initializeGameArea() {
@@ -37,30 +36,29 @@ document.addEventListener('DOMContentLoaded', () => {
         yAxisLabelsContainer.innerHTML = '';
         score = 0;
         currentItemIndex = 0;
-        updateScoreDisplay();
+        updateScoreDisplay(); // **Use dynamic totalItems here**
 
-        // CSS variable for reference if needed, though direct style is used now
         document.documentElement.style.setProperty('--cell-size', `${cellSize}px`);
 
         const gridTotalSize = gridSize * cellSize;
-        const yAxisWidth = 20; // Must match CSS .y-axis-label width
-        const yAxisMargin = 5; // Must match CSS #y-axis-labels margin-right
+        const yAxisWidth = 20;
+        const yAxisMargin = 5;
 
-        // --- Configure Grid Container Styles Explicitly ---
+        // Configure Grid Container Styles Explicitly
         gridContainer.style.width = `${gridTotalSize}px`;
         gridContainer.style.height = `${gridTotalSize}px`;
-        gridContainer.style.display = 'grid'; // **Ensure grid layout**
-        gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, ${cellSize}px)`; // **Ensure columns**
-        gridContainer.style.gridTemplateRows = `repeat(${gridSize}, ${cellSize}px)`; // **Ensure rows**
-        // ---
+        gridContainer.style.display = 'grid';
+        gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, ${cellSize}px)`;
+        gridContainer.style.gridTemplateRows = `repeat(${gridSize}, ${cellSize}px)`;
 
         // Configure Axis Containers
-        yAxisLabelsContainer.style.height = `${gridTotalSize}px`; // Match grid height
-        xAxisLabelsContainer.style.width = `${gridTotalSize}px`; // Inner label container matches grid width
-        xAxisContainer.style.width = `${yAxisWidth + yAxisMargin + gridTotalSize}px`; // Outer width includes Y-axis space
-        xAxisLabelsContainer.style.marginLeft = `${yAxisWidth + yAxisMargin}px`; // Align labels under grid
+        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`;
 
-        // Create Y-axis labels (1 to N, bottom-up visually)
+        // Create Y-axis labels
         for (let y = 1; y <= gridSize; y++) {
             const label = document.createElement('div');
             label.classList.add('axis-label', 'y-axis-label');
@@ -69,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
             yAxisLabelsContainer.appendChild(label);
         }
 
-        // Create X-axis labels (1 to N, left-to-right)
+        // Create X-axis labels
         for (let x = 1; x <= gridSize; x++) {
             const label = document.createElement('div');
             label.classList.add('axis-label', 'x-axis-label');
@@ -79,140 +77,106 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         // Create grid cells
-        // Loop Y from gridSize down to 1 so that Y=1 is the bottom row visually
         for (let y = gridSize; y >= 1; y--) {
-            // Loop X from 1 to gridSize as usual (left-to-right)
             for (let x = 1; x <= gridSize; x++) {
                 const cell = document.createElement('div');
                 cell.classList.add('grid-cell');
-                cell.dataset.x = x; // Store correct X coordinate
-                cell.dataset.y = y; // Store correct Y coordinate
-                cell.style.width = `${cellSize}px`; // Explicit size
-                cell.style.height = `${cellSize}px`; // Explicit size
+                cell.dataset.x = x; cell.dataset.y = y;
+                cell.style.width = `${cellSize}px`; cell.style.height = `${cellSize}px`;
                 cell.addEventListener('click', handleCellClick);
                 gridContainer.appendChild(cell);
             }
         }
-        console.log("Grid, Axes, and Score Initialized.");
+        console.log(`Grid (${gridSize}x${gridSize}), Axes, and Score Initialized.`);
     }
 
      // --- Update Score Display ---
      function updateScoreDisplay() {
+        // **Use totalItems variable**
         scoreDisplay.textContent = `Score: ${score} / ${totalItems}`;
     }
 
-    // --- Set a New Target Item and Location ---
+    // --- Set New Target ---
     function setNewTarget() {
         foundCurrent = false;
 
-        // --- Game Over Check ---
+        // 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 / 2) {
-                finalMessage += " Great job! 👍";
-            }
+            if (score === totalItems) finalMessage += " Perfect score! 🥳";
+            else if (score >= totalItems * 0.7) finalMessage += " Great job! 👍"; // Adjust threshold
             feedbackDisplay.textContent = finalMessage;
             feedbackDisplay.className = 'correct-feedback';
             targetCoordsDisplay.textContent = "(✔,✔)";
             itemNameDisplay.textContent = 'all the items';
-            // Optional: Add a visible reset button here instead of forcing refresh
             return;
         }
 
         const currentItem = itemsToFind[currentItemIndex];
 
-        // --- Find Empty Cell for New Target ---
-        let newTargetFound = false;
-        let attempts = 0; // Prevent infinite loop
-        const maxAttempts = gridSize * gridSize * 2; // Generous limit
-
+        // Find Empty Cell (same logic as before)
+        let newTargetFound = false, attempts = 0;
+        const maxAttempts = gridSize * gridSize * 2;
         while (!newTargetFound && attempts < maxAttempts) {
             targetX = Math.floor(Math.random() * gridSize) + 1;
             targetY = Math.floor(Math.random() * gridSize) + 1;
             const potentialCell = gridContainer.querySelector(`.grid-cell[data-x="${targetX}"][data-y="${targetY}"]`);
-
-            // Check if the cell exists AND is visually empty (no emoji)
-            if (potentialCell && potentialCell.textContent.trim() === '') {
-                newTargetFound = true;
-            }
+            if (potentialCell && potentialCell.textContent.trim() === '') { newTargetFound = true; }
             attempts++;
+            if(attempts >= maxAttempts){ // Add the check after incrementing attempts
+                 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
+             }
         }
-
-        // Handle unlikely case where no empty cell is found
-        if (!newTargetFound) {
-             console.error("Could not find an empty cell for the next target!");
-             feedbackDisplay.textContent = "Uh oh, the map is full! Please refresh.";
-             return;
+         if (!newTargetFound) {
+              console.error("Could not find an empty cell after many attempts!");
+              feedbackDisplay.textContent = "Uh oh, map is too full! Refresh maybe?";
+              return;
          }
 
-        // --- Update Display ---
+        // Update display
         itemNameDisplay.textContent = currentItem.name;
         targetCoordsDisplay.textContent = `(${targetX}, ${targetY})`;
         feedbackDisplay.textContent = `Where is ${currentItem.name}? (${currentItemIndex + 1}/${totalItems})`;
         feedbackDisplay.className = '';
-
-        // Reset temporary styles from previous round
         document.querySelectorAll('.grid-cell').forEach(cell => {
             cell.classList.remove('just-found', 'incorrect');
         });
         console.log(`Round ${currentItemIndex + 1}: Find ${currentItem.name} at (${targetX}, ${targetY})`);
     }
 
-    // --- Handle Cell Click ---
+    // --- Handle Cell Click (same as before) ---
     function handleCellClick(event) {
-        // Prevent action if round/game is over or cell already found
         if (foundCurrent || currentItemIndex >= totalItems) return;
-
         const clickedCell = event.target;
         if (clickedCell.classList.contains('found-item')) return;
 
         const clickedX = parseInt(clickedCell.dataset.x);
         const clickedY = parseInt(clickedCell.dataset.y);
+        document.querySelectorAll('.grid-cell.incorrect').forEach(cell => { cell.classList.remove('incorrect'); });
 
-        // Clear any lingering incorrect styles
-        document.querySelectorAll('.grid-cell.incorrect').forEach(cell => {
-            cell.classList.remove('incorrect');
-        });
-
-        // --- Check if Correct ---
         if (clickedX === targetX && clickedY === targetY) {
-            foundCurrent = true;
-            score++;
-            updateScoreDisplay();
-
+            foundCurrent = true; score++; updateScoreDisplay();
             const currentItem = itemsToFind[currentItemIndex];
-
             feedbackDisplay.textContent = `You found ${currentItem.name}! 👍`;
             feedbackDisplay.className = 'correct-feedback';
-
-            clickedCell.textContent = currentItem.emoji; // Add emoji
-            clickedCell.classList.add('just-found'); // Temporary highlight
-
-            // After highlight animation, switch to permanent 'found' style
+            clickedCell.textContent = currentItem.emoji;
+            clickedCell.classList.add('just-found');
             setTimeout(() => {
                 clickedCell.classList.remove('just-found');
                 clickedCell.classList.add('found-item');
-            }, 600); // Duration should be >= pulse animation time
-
-            currentItemIndex++; // Move to next item
-
-            setTimeout(setNewTarget, 1800); // Delay before next target
-
+            }, 600);
+            currentItemIndex++;
+            setTimeout(setNewTarget, 1800);
         } else {
-            // --- Incorrect Guess ---
             feedbackDisplay.textContent = "Not quite! Try again. 🤔";
             feedbackDisplay.className = 'incorrect-feedback';
             clickedCell.classList.add('incorrect');
-
-            // Remove incorrect style after shake animation
             setTimeout(() => {
-                // Check if still marked incorrect (user might click fast)
-                if (clickedCell.classList.contains('incorrect')) {
-                    clickedCell.classList.remove('incorrect');
-                }
-            }, 500); // Match shake animation duration
+                if (clickedCell.classList.contains('incorrect')) { clickedCell.classList.remove('incorrect'); }
+            }, 500);
         }
     }