Civilization Builder

`; const traitHTML = ` Unique Trait: ${escapeHTML(trait.name)}

${escapeHTML(trait.desc)}

`; summaryOutput.innerHTML = summaryHTML; traitOutput.innerHTML = traitHTML; }; const downloadPDF = () => { if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF === 'undefined') { alert('Error: jsPDF library not loaded.'); return; } const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'mm', 'a4'); const data = getCivData(); const trait = determineUniqueTrait(data); const margin = 20; const pageWidth = doc.internal.pageSize.getWidth(); const usableWidth = pageWidth - (margin * 2); let yPos = 30; // Start position // Helper function to add a formatted section const addSection = (title, text) => { if (yPos > 260) { // Check for page break doc.addPage(); yPos = 20; } doc.setFontSize(14); doc.setFont(undefined, 'bold'); doc.setTextColor(44, 62, 80); // Dark blue doc.text(title, margin, yPos); yPos += 8; doc.setFontSize(11); doc.setFont(undefined, 'normal'); doc.setTextColor(52, 73, 94); // Dark gray const splitText = doc.splitTextToSize(text, usableWidth); doc.text(splitText, margin, yPos); yPos += (splitText.length * 5) + 5; // 5mm per line + 5mm buffer }; // --- Build PDF Document --- doc.setFontSize(22); doc.setFont(undefined, 'bold'); doc.setTextColor(0, 123, 255); // Blue doc.text(data.name || "Civilization Profile", pageWidth / 2, 20, { align: 'center' }); // Identity addSection("Identity", `Biome: ${data.biome}`); // Society addSection("Society", `Government: ${data.government}\nSocial Structure: ${data.structure}`); // Culture addSection("Culture", `Core Value: ${data.value}\nPrimary Strength: ${data.strength}`); // Economy addSection("Economy", `Key Resource: ${data.resource}\nEconomic Focus: ${data.focus}`); // Trait addSection("Unique Trait: " + trait.name, trait.desc); // Add the full summary paragraph const summaryText = `Hailing from the ${data.biome}, the people of ${data.name || 'this civilization'} are a ${data.structure} society ruled by a ${data.government}. Their culture is defined by a deep-seated value for ${data.value}, and their greatest strength is their ${data.strength}. Their economy is fueled by ${data.resource}, with a primary focus on ${data.focus}.`; addSection("Summary", summaryText); doc.save(`${data.name || 'civilization'}-profile.pdf`); }; // --- Utility --- const escapeHTML = (str) => { if (typeof str !== 'string') return ''; return str.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, '''); }; // --- Event Listeners --- // Tab Buttons tabButtons.forEach((btn, index) => { btn.addEventListener('click', () => showTab(index + 1)); }); // Next/Prev Navigation nextBtn.addEventListener('click', () => showTab(currentTab + 1)); prevBtn.addEventListener('click', () => showTab(currentTab - 1)); // Tab 5 Actions downloadPdfBtn.addEventListener('click', downloadPDF); // Re-generate summary if any input changes (for instant feedback on Tab 5) Object.values(inputs).forEach(input => { input.addEventListener('change', () => { if (currentTab === totalTabs) { generateSummary(); } }); }); // --- Initialization --- showTab(1); // Set initial state });