Create script.js

script.js

@@ -0,0 +1,223 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Get Elements ---
+    const gridContainer = document.getElementById('grid-container');
+    const targetCoordsDisplay = document.getElementById('target-coords');
+    const feedbackDisplay = document.getElementById('feedback');
+    const itemNameDisplay = document.getElementById('item-name');
+    const yAxisLabelsContainer = document.getElementById('y-axis-labels');
+    const xAxisLabelsContainer = document.getElementById('x-axis-labels');
+    const xAxisContainer = document.getElementById('x-axis-container');
+    const scoreDisplay = document.getElementById('score-display');
+
+    // --- Game Settings ---
+    const gridSize = 8;
+    const cellSize = 40; // Pixels
+
+    // --- Items to Find ---
+    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: "🦄" }
+    ];
+    const totalItems = itemsToFind.length;
+
+    // --- Game State ---
+    let targetX = -1;
+    let targetY = -1;
+    let currentItemIndex = 0;
+    let foundCurrent = false;
+    let score = 0;
+
+    // --- Initialize Grid and Axes ---
+    function initializeGameArea() {
+        gridContainer.innerHTML = '';
+        xAxisLabelsContainer.innerHTML = '';
+        yAxisLabelsContainer.innerHTML = '';
+        score = 0;
+        currentItemIndex = 0;
+        updateScoreDisplay();
+
+        // 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
+
+        // --- 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**
+        // ---
+
+        // 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
+
+        // Create Y-axis labels (1 to N, bottom-up visually)
+        for (let y = 1; y <= gridSize; y++) {
+            const label = document.createElement('div');
+            label.classList.add('axis-label', 'y-axis-label');
+            label.textContent = y;
+            label.style.height = `${cellSize}px`;
+            yAxisLabelsContainer.appendChild(label);
+        }
+
+        // Create X-axis labels (1 to N, left-to-right)
+        for (let x = 1; x <= gridSize; x++) {
+            const label = document.createElement('div');
+            label.classList.add('axis-label', 'x-axis-label');
+            label.textContent = x;
+            label.style.width = `${cellSize}px`;
+            xAxisLabelsContainer.appendChild(label);
+        }
+
+        // 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.addEventListener('click', handleCellClick);
+                gridContainer.appendChild(cell);
+            }
+        }
+        console.log("Grid, Axes, and Score Initialized.");
+    }
+
+     // --- Update Score Display ---
+     function updateScoreDisplay() {
+        scoreDisplay.textContent = `Score: ${score} / ${totalItems}`;
+    }
+
+    // --- Set a New Target Item and Location ---
+    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 / 2) {
+                finalMessage += " Great job! 👍";
+            }
+            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
+
+        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;
+            }
+            attempts++;
+        }
+
+        // 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;
+         }
+
+        // --- 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 ---
+    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);
+
+        // 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();
+
+            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
+            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
+
+        } 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
+        }
+    }
+
+    // --- Start the Game ---
+    initializeGameArea();
+    setNewTarget();
+
+}); // End DOMContentLoaded