Final Board State:
(Matched pairs are faded)
`;
// Clone the final board state
const pdfBoard = cmg_pdfRenderClone.querySelector('#pdf-game-board');
cmg_cards.forEach(card => {
const cardClone = document.createElement('div');
cardClone.className = 'aspect-ratio-1/1 rounded border flex justify-center items-center text-2xl';
cardClone.style.fontSize = '2rem'; // Fixed size for PDF
if (card.isMatched) {
cardClone.textContent = card.symbol;
cardClone.classList.add('bg-gray-100', 'text-gray-400');
} else if (card.isFlipped) { // Should only happen if PDF is downloaded mid-game (unlikely)
cardClone.textContent = card.symbol;
cardClone.classList.add('bg-gray-50', 'text-gray-800');
} else {
cardClone.classList.add('bg-blue-400'); // Face down color
}
pdfBoard.appendChild(cardClone);
});
}
/**
* Generates and downloads a PDF of the results
*/
async function cmg_downloadPDF() {
if (typeof jspdf === 'undefined' || typeof html2canvas === 'undefined') {
console.error("CMG Tool Error: jsPDF or html2canvas library not loaded.");
alert("Error: PDF libraries failed to load. Please check console.");
return;
}
cmg_renderPdfClone(); // Create and populate the clone
const { jsPDF } = window.jspdf;
try {
// Target the entire clone div
const canvas = await html2canvas(cmg_pdfRenderClone, {
scale: 2, // High resolution
useCORS: true,
});
const imgData = canvas.toDataURL('image/png');
const imgWidth = canvas.width;
const imgHeight = canvas.height;
const pdf = new jsPDF({ orientation: 'p', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const pdfHeight = pdf.internal.pageSize.getHeight();
// Scale image to fit pdf width with margins
const margin = 40;
const ratio = Math.min((pdfWidth - margin * 2) / imgWidth, (pdfHeight - margin * 2) / imgHeight);
const w = imgWidth * ratio;
const h = imgHeight * ratio;
const x = (pdfWidth - w) / 2; // Center horizontally
const y = margin; // Top margin
pdf.addImage(imgData, 'PNG', x, y, w, h);
pdf.save('Concentration_Game_Summary.pdf');
} catch (error) {
console.error("CMG Tool Error: PDF generation failed.", error);
alert("An error occurred while generating the PDF. Please try again.");
}
}
// --- EVENT LISTENERS ---
// Tab link clicks
cmg_tabLinks.forEach((link, index) => {
link.addEventListener('click', () => cmg_switchTab(index));
});
// Next/Prev button clicks
if (cmg_prevButton) {
cmg_prevButton.addEventListener('click', () => {
if (cmg_currentTab > 0) cmg_switchTab(cmg_currentTab - 1);
});
}
if (cmg_nextButton) {
cmg_nextButton.addEventListener('click', () => {
if (cmg_currentTab < cmg_tabLinks.length - 1) cmg_switchTab(cmg_currentTab + 1);
});
}
// PDF download
if (cmg_downloadPdfButton) {
cmg_downloadPdfButton.addEventListener('click', cmg_downloadPDF);
}
// Reset Button
if (cmg_resetGameButton) {
cmg_resetGameButton.addEventListener('click', cmg_initializeGame);
}
// --- INITIALIZATION ---
cmg_loadSymbols();
cmg_renderConfig(); // Populate config tab on load
cmg_initializeGame(); // Start the game
// Set initial tab state
cmg_tabPanes.forEach((pane, index) => {
pane.classList.toggle('hidden', index !== 0);
pane.classList.toggle('cmg-active', index === 0);
});
cmg_tabLinks.forEach((link, index) => {
TAB_CLASSES.active.forEach(cls => link.classList.remove(cls));
TAB_CLASSES.inactive.forEach(cls => link.classList.remove(cls));
if (index === 0) {
TAB_CLASSES.active.forEach(cls => link.classList.add(cls));
} else {
TAB_CLASSES.inactive.forEach(cls => link.classList.add(cls));
}
});
});
