`; } else { resultsArea.innerHTML = '

No matching rocks found in the database for the selected properties.

'; } }); } // --- PDF Download Function --- if (pdfDownloadBtn) { pdfDownloadBtn.addEventListener("click", () => { // II.C & V.A: PDF Download if ( typeof window.jspdf === "undefined" || typeof window.jspdf.jsPDF === "undefined" ) { alert( "Error: PDF library (jsPDF) is not loaded. Please check your internet connection." ); return; } if (typeof window.jspdf.plugin.autotable === "undefined") { alert( "Error: PDF library (jsPDF-AutoTable) is not loaded. Please check your internet connection." ); return; } if (!lastIdentification.inputs) { alert("Please run an identification first before downloading."); return; } generatePDF(); }); } function generatePDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const { inputs, bestMatch } = lastIdentification; const primaryColor = getComputedStyle(container).getPropertyValue( "--rmi-primary-color" ) || "#4a5568"; const headStyles = { fillColor: primaryColor, textColor: "#ffffff", fontStyle: "bold", }; // Title doc.setFont("helvetica", "bold"); doc.setFontSize(18); doc.setTextColor(primaryColor); doc.text("Rock Identification Report", 105, 20, { align: "center", }); doc.setFontSize(10); doc.setTextColor("#888"); doc.text( `Report Generated: ${new Date().toLocaleDateString()}`, 105, 26, { align: "center" } ); // 1. User Input Table const inputHead = [["Property", "Selected Value"]]; const inputBody = [ ["Color", inputs.color || "Not specified"], ["Luster", inputs.luster || "Not specified"], ["Streak", inputs.streak || "Not specified"], ["Hardness", inputs.hardness || "Not specified"], ]; doc.autoTable({ startY: 40, head: inputHead, body: inputBody, theme: "striped", headStyles: headStyles, }); // 2. Results Table let lastY = doc.autoTable.previous.finalY; if (bestMatch && bestMatch.score > 0) { const rock = bestMatch.rock; const resultHead = [[ { content: `Best Match: ${rock.name}`, colSpan: 2, styles: { halign: 'center' } } ]]; const resultBody = [ ["Colors", rock.colors.join(", ")], ["Luster", rock.luster], ["Streak", rock.streak], ["Hardness", `${rock.hardness} (Mohs)`], ]; doc.autoTable({ startY: lastY + 15, head: resultHead, body: resultBody, theme: "grid", headStyles: headStyles }); } else { doc.setFont("helvetica", "normal"); doc.setFontSize(12); doc.text("No matching rocks were found for the selected properties.", 15, lastY + 15); } doc.save("Rock-Identification-Report.pdf"); } // --- Utility Function --- function escapeHTML(str) { if (!str) return ""; return str .toString() .replace(/&/g, "&") .replace(//g, ">") .replace(/"g, """) .replace(/'/g, "'"); } // --- Initial Load --- function loadSampleData() { // Per spec: USA-relevant sample data const sampleData = [ { id: "rock_1", name: "Quartz", colors: ["White", "Clear", "Pink", "Gray", "Purple"], luster: "Glassy", streak: "White", hardness: 7 }, { id: "rock_2", name: "Pyrite", colors: ["Gold", "Brass-Yellow"], luster: "Metallic", streak: "Greenish-Black", hardness: 6.5 }, { id: "rock_3", name: "Hematite", colors: ["Red", "Brown", "Black", "Silver"], luster: "Metallic", streak: "Red-Brown", hardness: 6 }, { id: "rock_4", name: "Calcite", colors: ["White", "Clear", "Yellow", "Blue"], luster: "Glassy", streak: "White", hardness: 3 }, { id: "rock_5", name: "Talc", colors: ["White", "Green", "Gray"], luster: "Pearly", streak: "White", hardness: 1 }, { id: "rock_6", name: "Gypsum (Alabaster)", colors: ["White", "Clear"], luster: "Pearly", streak: "White", hardness: 2 }, { id: "rock_7", name: "Feldspar (Orthoclase)", colors: ["Pink", "White", "Gray"], luster: "Glassy", streak: "White", hardness: 6 }, { id: "rock_8", name: "Magnetite", colors: ["Black"], luster: "Metallic", streak: "Black", hardness: 6 }, ]; sampleData.forEach((rock) => { db.rocks[rock.id] = rock; }); } loadSampleData(); renderDatabaseTable(); updatePropertyDropdowns(); updateNavButtons(); // Set initial state } // --- End of initializeRockIdentifier() function --- /* * This new logic checks if the page is already loaded (common in Elementor). * If it is, it runs the setup function immediately. * If it's still loading (rare), it waits for the DOM event. */ if ( document.readyState === "complete" || document.readyState === "interactive" ) { // DOM is already ready, run the function now. initializeRockIdentifier(); } else { // Still loading, wait for the event document.addEventListener( "DOMContentLoaded", initializeRockIdentifier ); }