User Interface Component Library Style Guide

TECHNOLOGY FOCUS: ${techFocus}

`; html += `

SOCIAL DIVIDE/UNITY: ${socialFocus}

`; container.innerHTML = html; } function udspLoadExample() { if(!confirm("Overwrite current inputs with example Dystopian parameters?")) return; document.getElementById('inp-theme').value = 'dystopian'; document.getElementById('inp-world-name').value = 'Sector 77: The Regulated Zone'; document.getElementById('inp-mechanism').value = 'The Central Monitoring Authority (CMA) via mandatory biometric implants.'; document.getElementById('inp-tech-focus').value = 'Biometric ID Tracking and AI-driven behavior prediction.'; document.getElementById('inp-social-focus').value = 'Genetic Purity vs. Non-Compliant (The Undesirables).'; udspChangeTheme(); // Update colors udspGenerateAndSwitch(); } /* --- PDF Generation --- */ function udspGeneratePDF() { udspRenderReport(); // Final render const { jsPDF } = window.jspdf; const doc = new jsPDF('p', 'mm', 'a4'); const data = { theme: document.getElementById('inp-theme').value, worldName: document.getElementById('inp-world-name').value || "The Unknown World", mechanism: document.getElementById('inp-mechanism').value || "Undetermined", techFocus: document.getElementById('inp-tech-focus').value || "Undetermined", socialFocus: document.getElementById('inp-social-focus').value || "Undetermined" }; const matrix = udspMatrix[data.theme]; const headerColor = data.theme === 'utopian' ? [0, 184, 148] : [184, 60, 0]; const accentColor = data.theme === 'utopian' ? [0, 184, 148] : [192, 57, 43]; let y = 20; // 1. Header doc.setFillColor(...headerColor); doc.rect(0, 0, 210, 20, 'F'); doc.setTextColor(255, 255, 255); doc.setFontSize(16); doc.text(`${data.worldName.toUpperCase()} - Societal Blueprint`, 14, 13); // 2. Core Mechanics doc.setTextColor(0, 0, 0); doc.setFontSize(11); doc.setFont("helvetica", "bold"); doc.text("CORE MECHANISM", 14, y + 10); doc.setFont("helvetica", "normal"); doc.setTextColor(50, 50, 50); const splitMech = doc.splitTextToSize(`Enforced by: ${data.mechanism}`, 180); doc.text(splitMech, 14, y + 16); y += (splitMech.length * 5) + 20; // 3. Parameter Table doc.setFontSize(14); doc.setFont("helvetica", "bold"); doc.setTextColor(44, 62, 80); doc.text("SOCIETAL PARAMETERS", 14, y); y += 5; const tableBody = [ ['GOVERNMENT', matrix.government.title, matrix.government.desc], ['ECONOMY', matrix.economy.title, matrix.economy.desc], ['TECHNOLOGY', matrix.technology.title, matrix.technology.desc], ['SOCIAL ORDER', matrix.social_order.title, matrix.social_order.desc], ]; doc.autoTable({ startY: y, head: [['Category', 'Core Principle', 'Description']], body: tableBody, theme: 'grid', headStyles: { fillColor: headerColor, fontSize: 10 }, styles: { fontSize: 8.5 }, columnStyles: { 0: { cellWidth: 30, fontStyle: 'bold' }, 1: { cellWidth: 50, textColor: accentColor }, 2: { cellWidth: 'auto', overflow: 'linebreak' } } }); // 4. Focus Areas y = doc.lastAutoTable.finalY + 15; doc.setFontSize(12); doc.setFont("helvetica", "bold"); doc.text("SECONDARY FOCUS AREAS", 14, y); y += 5; doc.setFontSize(10); doc.setFont("helvetica", "normal"); doc.text(`TECHNOLOGY FOCUS: ${data.techFocus}`, 14, y + 5); doc.text(`SOCIAL DIVIDE/UNITY: ${data.socialFocus}`, 14, y + 10); doc.save(`WorldForge_${data.worldName.replace(/\s/g, '_')}.pdf`); }