viewof singleCellGallery = { // Define Galaxy Theme Colors (New Palette) const COLOR_BRIGHT_YELLOW = "#f9de3f"; // Bright Gold/Star const COLOR_DEEP_GOLD = "#e5b902"; // Deep Gold Accent const COLOR_DEEP_BLUE = "#00227e"; // Deep Primary Blue const COLOR_DARK_BLUE = "#041463"; // Darker Background Blue const COLOR_DEEP_VIOLET = "#0d024f"; // Deep Violet Background const allData = data; const tricks = ["All", ...new Set(allData.map(d => d.Trick))]; // --- SHUFFLE HELPER FUNCTION --- function shuffle(array) { let currentIndex = array.length, randomIndex; while (currentIndex !== 0) { randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex] ]; } return array; } // ------------------------------ const container = html`

Hoop Trick Shapes Gallery

Filter by:

`; const select = container.querySelector("#trickSelect"); const wrapper = container.querySelector(".gallery-wrapper"); let currentTrick = "All"; function render(selectedTrick) { const isAll = selectedTrick === "All"; const filteredData = isAll ? allData : allData.filter(d => d.Trick === selectedTrick); const shuffledData = shuffle(filteredData.slice()); const titleText = isAll ? `All Drawings Combined (${shuffledData.length} total)` : `${selectedTrick} Drawings (${shuffledData.length} results)`; const minGridSize = isAll ? '100px' : '180px'; const gridGap = isAll ? '8px' : '15px'; // Function to determine tooltip content (FIXED) // Function to determine tooltip content (UPDATED for Name and Standard) const getTooltipText = (d, isAll) => { // 1. Start with Name let tooltip = d.Name; // 2. Add Standard (e.g., ", 4th Standard") if (d.Standard) { tooltip += `, ${d.Standard} Standard`; } // 3. Add Trick if the 'All' filter is selected if (isAll) { tooltip += ` (${d.Trick})`; } // 4. (Optional) Add School if needed, though we will skip it for conciseness here // if (d.School) { // tooltip += `, ${d.School}`; // } return tooltip; // Example Output: "Ananya, 4th Standard (Barrel Roll)" }; // Function to determine helper description (FIXED) const getHelperDescription = (isAll) => { return isAll ? `Hover over a drawing to see the student's name and trick.` : `Hover over a drawing to see the student's name.`; }; // Clear previous content wrapper.innerHTML = ""; wrapper.appendChild(html`

${titleText}

${getHelperDescription(isAll)}

${shuffledData.map(d => `

`).join('')}

`); wrapper.value = selectedTrick; } // --- Event Handlers --- select.value = currentTrick; render(currentTrick); select.addEventListener("change", () => { currentTrick = select.value; render(currentTrick); }); return container; }