function MainComponent() { const [elements, setElements] = useState([]); const [basicElements, setBasicElements] = useState([]); const [dropZone1, setDropZone1] = useState(null); const [dropZone2, setDropZone2] = useState(null); const [loading, setLoading] = useState(false); const [newElement, setNewElement] = useState(null); const [searchTerm, setSearchTerm] = useState(""); const [showConfirm, setShowConfirm] = useState(false); const [showSettings, setShowSettings] = useState(false); const [theme, setTheme] = useState("dark"); const getThemeClasses = ()=>{ switch(theme){ case "light": return { background: "bg-gray-100", surface: "bg-white", text: "text-gray-900", border: "border-gray-200", highlight: "from-blue-400 to-purple-600" }; case "wolfcraft": return { background: "bg-[#1F1F3A]", surface: "bg-[#2B2B4B]", text: "text-emerald-400", border: "border-emerald-500", highlight: "from-emerald-400 to-teal-600" }; default: return { background: "bg-[#1a1a2e]", text: "text-white", surface: "bg-[#2a2a3e]", border: "border-gray-600", highlight: "from-blue-400 to-purple-600" }; } }; const themeClasses = getThemeClasses(); useEffect(()=>{ loadElements(); }, []); const loadElements = async ()=>{ const [elementsResponse, basicElementsResponse] = await Promise.all([ fetch("/api/elements/list", { method: "POST" }), fetch("/api/elements/basic", { method: "POST" }) ]); const elementsData = await elementsResponse.json(); const basicElementsData = await basicElementsResponse.json(); setElements(elementsData.elements); setBasicElements(basicElementsData.elements); }; const handleDragStart = (e, element)=>{ e.dataTransfer.setData("element", JSON.stringify(element)); }; const handleDrop = async (e, zone)=>{ e.preventDefault(); const element = JSON.parse(e.dataTransfer.getData("element")); if (zone === 1) { setDropZone1(element); } else { setDropZone2(element); } if (dropZone1 && zone === 2 || dropZone2 && zone === 1) { setLoading(true); setNewElement(null); try { const response = await fetch("/api/combine2", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ element1Id: zone === 1 ? element.id : dropZone1.id, element2Id: zone === 2 ? element.id : dropZone2.id }) }); if (!response.ok) { throw new Error(`Failed to combine elements: ${response.status}`); } const data = await response.json(); if (data.result) { setNewElement(data.result); await loadElements(); } else { throw new Error("No result returned from combination"); } } catch (error) { console.error("Error combining elements:", error); alert("Oops! Something went wrong while combining elements. Please try again."); } finally{ setLoading(false); setDropZone1(null); setDropZone2(null); } } }; const handleDragOver = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen ${themeClasses.background} ${themeClasses.text} p-2`, __source: { fileName: "", lineNumber: 108, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto relative", __source: { fileName: "", lineNumber: 111, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "group relative", __source: { fileName: "", lineNumber: 113, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-3xl font-bold text-center bg-gradient-to-r ${themeClasses.highlight} bg-clip-text text-transparent animate-howl cursor-help`, __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "Wolfcraft: Infinite Alchemy"), /*#__PURE__*/ React.createElement("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity absolute -bottom-8 left-0 bg-black/80 text-white text-sm p-2 rounded-lg whitespace-nowrap", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }, "Combine elements to create anything you can imagine!")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettings(true), className: `p-2 rounded-lg ${themeClasses.surface} hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z", __source: { fileName: "", lineNumber: 139, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-5xl mx-auto relative", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 150, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: `text-3xl font-bold text-center bg-gradient-to-r ${themeClasses.highlight} bg-clip-text text-transparent`, __source: { fileName: "", lineNumber: 151, columnNumber: 11 }, __self: this }, "Wolfcraft"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettings(true), className: `p-2 rounded-lg ${themeClasses.surface} hover:opacity-80 transition-opacity`, __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z", __source: { fileName: "", lineNumber: 166, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z", __source: { fileName: "", lineNumber: 172, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-4 max-w-5xl mx-auto", __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 p-3 bg-[#2a2a3e] rounded-lg", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 185, columnNumber: 13 }, __self: this }, "Basic Elements"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 overflow-x-auto pb-2", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, basicElements.map((element)=>/*#__PURE__*/ React.createElement("div", { key: element.id, draggable: true, onDragStart: (e)=>handleDragStart(e, element), className: "bg-gradient-to-br from-[#2B4C7C] to-[#1a2d3e] p-2 rounded-lg text-center cursor-move hover:scale-105 transition-all duration-300 min-w-[100px] animate-mystical", __source: { fileName: "", lineNumber: 188, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 194, columnNumber: 19 }, __self: this }, element.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }, element.description))))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 justify-center items-center mb-4", __source: { fileName: "", lineNumber: 202, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onDrop: (e)=>handleDrop(e, 1), onDragOver: handleDragOver, className: `w-[175px] h-[175px] rounded-lg border-2 border-dashed ${dropZone1 ? "border-purple-500 bg-[#2d2d44]" : "border-gray-600"} flex items-center justify-center transition-all duration-300 hover:border-purple-400`, __source: { fileName: "", lineNumber: 203, columnNumber: 13 }, __self: this }, dropZone1 ? /*#__PURE__*/ React.createElement("div", { className: "text-center p-2", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }, dropZone1.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 213, columnNumber: 19 }, __self: this }, dropZone1.description)) : /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 218, columnNumber: 17 }, __self: this }, "Drag First Element Here")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center w-12 h-12 rounded-full bg-[#2d2d44]", __source: { fileName: "", lineNumber: 224, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 225, columnNumber: 15 }, __self: this }, "+")), /*#__PURE__*/ React.createElement("div", { onDrop: (e)=>handleDrop(e, 2), onDragOver: handleDragOver, className: `w-[175px] h-[175px] rounded-lg border-2 border-dashed ${dropZone2 ? "border-purple-500 bg-[#2d2d44]" : "border-gray-600"} flex items-center justify-center transition-all duration-300 hover:border-purple-400`, __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, dropZone2 ? /*#__PURE__*/ React.createElement("div", { className: "text-center p-2", __source: { fileName: "", lineNumber: 236, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 237, columnNumber: 19 }, __self: this }, dropZone2.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 238, columnNumber: 19 }, __self: this }, dropZone2.description)) : /*#__PURE__*/ React.createElement("div", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, "Drag Second Element Here"))), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-white", __source: { fileName: "", lineNumber: 252, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 253, columnNumber: 15 }, __self: this }, "Combining elements...")), newElement && /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8 animate-fadeIn", __source: { fileName: "", lineNumber: 258, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-600 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, "New Discovery!"), /*#__PURE__*/ React.createElement("div", { className: "text-xl", __source: { fileName: "", lineNumber: 262, columnNumber: 15 }, __self: this }, newElement.name), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400", __source: { fileName: "", lineNumber: 263, columnNumber: 15 }, __self: this }, newElement.description))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a3e] rounded-lg p-3 h-[calc(100vh-6rem)] sticky top-4", __source: { fileName: "", lineNumber: 267, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 268, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 269, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 270, columnNumber: 15 }, __self: this }, "Your Discoveries"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowConfirm(true), className: "px-2 py-1 text-sm bg-red-500 hover:bg-red-600 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 271, columnNumber: 15 }, __self: this }, "Reset")), /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search discoveries...", value: searchTerm, onChange: (e)=>setSearchTerm(e.target.value), className: "px-3 py-1.5 mb-2 rounded-lg bg-[#1a1a2e] border border-gray-600 focus:border-purple-500 focus:outline-none text-sm", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto pr-2 space-y-2", __source: { fileName: "", lineNumber: 285, columnNumber: 13 }, __self: this }, elements.filter((element)=>!element.is_basic && (element.name.toLowerCase().includes(searchTerm.toLowerCase()) || element.description?.toLowerCase().includes(searchTerm.toLowerCase()))).map((element)=>/*#__PURE__*/ React.createElement("div", { key: element.id, draggable: true, onDragStart: (e)=>handleDragStart(e, element), className: "bg-[#2d2d44] p-2 rounded-lg text-center cursor-move hover:scale-105 hover:shadow-lg hover:shadow-purple-500/20 transition-all duration-300", __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 304, columnNumber: 21 }, __self: this }, element.name), /*#__PURE__*/ React.createElement("div", { className: "text-xs text-gray-400", __source: { fileName: "", lineNumber: 305, columnNumber: 21 }, __self: this }, element.description))))))), showConfirm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 315, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a3e] p-6 rounded-lg max-w-sm mx-4 animate-fadeIn", __source: { fileName: "", lineNumber: 316, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 317, columnNumber: 13 }, __self: this }, "Reset Progress?"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-300 mb-6", __source: { fileName: "", lineNumber: 318, columnNumber: 13 }, __self: this }, "Are you sure you want to delete all your discoveries? This cannot be undone."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-3", __source: { fileName: "", lineNumber: 322, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowConfirm(false), className: "px-4 py-2 bg-gray-600 hover:bg-gray-700 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 323, columnNumber: 15 }, __self: this }, "No, Keep"), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ try { await fetch("/api/reset-progress", { method: "POST" }); await loadElements(); setShowConfirm(false); } catch (error) { console.error("Error resetting progress:", error); alert("Failed to reset progress. Please try again."); } }, className: "px-4 py-2 bg-red-500 hover:bg-red-600 rounded-lg transition-colors", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, "Yes, Reset")))), showSettings && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 349, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${themeClasses.surface} p-6 rounded-lg max-w-md mx-4 animate-fadeIn w-full`, __source: { fileName: "", lineNumber: 350, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 353, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 354, columnNumber: 15 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowSettings(false), className: "text-gray-400 hover:text-gray-300", __source: { fileName: "", lineNumber: 355, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 359, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12", __source: { fileName: "", lineNumber: 365, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 375, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 376, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-3", __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this }, "Theme"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-3", __source: { fileName: "", lineNumber: 378, columnNumber: 17 }, __self: this }, [ "dark", "light", "wolfcraft" ].map((t)=>/*#__PURE__*/ React.createElement("button", { key: t, onClick: ()=>setTheme(t), className: `p-3 rounded-lg border-2 transition-all ${theme === t ? `${themeClasses.border} border-opacity-100` : "border-transparent hover:border-opacity-50"}`, __source: { fileName: "", lineNumber: 380, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium capitalize", __source: { fileName: "", lineNumber: 389, columnNumber: 23 }, __self: this }, t))))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 395, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-medium mb-3", __source: { fileName: "", lineNumber: 396, columnNumber: 17 }, __self: this }, "About"), /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-lg ${themeClasses.background} text-sm`, __source: { fileName: "", lineNumber: 397, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 400, columnNumber: 19 }, __self: this }, "Made by Wolf Tech Innovations"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400", __source: { fileName: "", lineNumber: 401, columnNumber: 19 }, __self: this }, "Version 0.0.1")))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 408, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); filter: blur(8px); } 50% { filter: blur(4px); transform: translateY(-10px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes mysticalGlow { 0% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.2); } 50% { box-shadow: 0 0 20px rgba(138, 43, 226, 0.4); } 100% { box-shadow: 0 0 10px rgba(138, 43, 226, 0.2); } } @keyframes wolfcraftGlow { 0% { box-shadow: 0 0 10px rgba(52, 211, 153, 0.2); } 50% { box-shadow: 0 0 25px rgba(52, 211, 153, 0.4); } 100% { box-shadow: 0 0 10px rgba(52, 211, 153, 0.2); } } @keyframes howl { 0% { transform: translateY(0); } 2% { transform: translateY(-2px); } 4% { transform: translateY(0); } 6% { transform: translateY(-1px); } 8% { transform: translateY(0); } 100% { transform: translateY(0); } } .animate-howl { animation: howl 10s ease-in-out infinite; } .animate-fadeIn { animation: fadeIn 1s ease-out forwards; } .animate-mystical { animation: mysticalGlow 2s ease-in-out infinite; } .theme-wolfcraft .animate-mystical { animation: wolfcraftGlow 3s ease-in-out infinite; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #1a1a2e; } ::-webkit-scrollbar-thumb { background: #2B4C7C; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #1a2d3e; } `)); }