CyberMetaX: Cyber Training Platform

Check the browser console for more details.

\n \n );\n }\n\n return children;\n}\n\nfunction FileDownloadButton({ files }) {\n const handleDownload = async (file) => {\n try {\n const response = await fetch(`/download?filename=${encodeURIComponent(file.name)}`, {\n method: \"GET\",\n });\n\n if (!response.ok) {\n throw new Error(\"File download failed\");\n }\n\n const blob = await response.blob();\n const downloadUrl = window.URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = downloadUrl;\n link.download = file.name;\n document.body.appendChild(link);\n link.click();\n link.remove();\n } catch (error) {\n console.error(\"Download error:\", error);\n alert(`Failed to download ${file.name}`);\n }\n };\n\n return (\n

\n {files.map((file, index) => (\n handleDownload(file)}\n style={{\n backgroundColor: \"#00ff41\",\n color: \"#0a0a1a\",\n border: \"none\",\n padding: \"5px 10px\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Download {file.name}\n \n ))}\n

\n );\n}\n\nfunction TrainingModule({ module, onSelect }) {\n return (\n onSelect(module)}\n style={{\n backgroundColor: \"rgba(0,0,0,0.7)\",\n border: \"2px solid #00ff41\",\n borderRadius: \"10px\",\n padding: \"20px\",\n margin: \"10px\",\n cursor: \"pointer\",\n transition: \"transform 0.3s\",\n color: \"#00ff41\",\n textAlign: \"center\",\n }}\n onMouseOver={(e) => e.currentTarget.style.transform = \"scale(1.05)\"}\n onMouseOut={(e) => e.currentTarget.style.transform = \"scale(1)\"}\n >\n

{module.icon}

{module.name}

{module.description}

\n \n );\n}\n\nfunction ChallengeModal({ challenge, onClose, onSubmitFlag }) {\n const [submittedFlag, setSubmittedFlag] = useState(\"\");\n const [flagStatus, setFlagStatus] = useState(null);\n\n const handleFlagSubmit = () => {\n const isCorrect = submittedFlag.trim() === challenge.flag;\n setFlagStatus(isCorrect);\n onSubmitFlag(isCorrect);\n };\n\n return (\n \n \n

{challenge.name}

{challenge.description}

\n\n

\n Difficulty: {challenge.difficulty}\n
\n Points: {challenge.points}\n

\n\n \n\n

Hints:

{hint}

\n\n

\n setSubmittedFlag(e.target.value)}\n placeholder=\"Enter CTF Flag\"\n style={{\n width: \"100%\",\n padding: \"10px\",\n backgroundColor: \"#000\",\n color: \"#00ff41\",\n border: \"1px solid #00ff41\",\n }}\n />\n \n Submit Flag\n \n {flagStatus !== null && (\n \n {flagStatus ? \"Correct Flag! 🚩\" : \"Incorrect Flag. Try Again.\"}\n

\n )}\n \n\n \n Close Challenge\n \n \n \n );\n}\n\nfunction App() {\n const [selectedModule, setSelectedModule] = useState(null);\n const [selectedChallenge, setSelectedChallenge] = useState(null);\n const [solvedChallenges, setSolvedChallenges] = useState({});\n\n const startChallenge = (module, challenge) => {\n console.log(\"Starting challenge:\", { module, challenge });\n setSelectedModule(module);\n setSelectedChallenge(challenge);\n };\n\n const handleFlagSubmission = (isCorrect) => {\n if (isCorrect) {\n setSolvedChallenges(prev => {\n const updatedSolvedChallenges = {\n ...prev,\n [selectedModule.id]: [\n ...(prev[selectedModule.id] || []),\n selectedChallenge.id,\n ],\n };\n console.log(\"Solved Challenges:\", updatedSolvedChallenges);\n return updatedSolvedChallenges;\n });\n }\n };\n\n return (\n \n \n \n \n 🌐 CyberMetaX: Metaverse Cyber Training Hub\n \n\n \n {TRAINING_MODULES.map((module) => (\n

\n setSelectedModule(module)}\n />\n {selectedModule?.id === module.id && (\n \n {module.challenges.map((challenge) => (\n startChallenge(module, challenge)}\n style={{\n backgroundColor: \"rgba(0,255,65,0.1)\",\n border: \"1px solid #00ff41\",\n padding: \"10px\",\n cursor: \"pointer\",\n color: solvedChallenges[module.id]?.includes(challenge.id) ? \"#888\" : \"#00ff41\",\n }}\n >\n {challenge.name}\n {solvedChallenges[module.id]?.includes(challenge.id) && \" ✅\"}\n

\n ))}\n \n )}\n \n ))}\n \n\n {selectedChallenge && (\n {\n setSelectedChallenge(null);\n setSelectedModule(null);\n }}\n onSubmitFlag={handleFlagSubmission}\n />\n )}\n \n \n \n );\n}\n\nfunction client() {\n console.log(\"Client function called\");\n try {\n const rootElement = document.getElementById(\"root\");\n console.log(\"Root element:\", rootElement);\n\n if (rootElement) {\n const root = createRoot(rootElement);\n console.log(\"Creating root\");\n root.render(\n \n \n ,\n );\n } else {\n console.error(\"Root element not found\");\n }\n } catch (error) {\n console.error(\"Rendering error:\", error);\n }\n}\n\n// Ensure client function runs only in browser\nif (typeof document !== \"undefined\") {\n console.log(\"Document is defined, calling client\");\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n // Handle file download requests\n if (url.pathname === \"/download\") {\n const filename = url.searchParams.get(\"filename\");\n\n // Find the file across all modules and challenges\n for (const module of TRAINING_MODULES) {\n for (const challenge of module.challenges) {\n const file = challenge.files.find(f => f.name === filename);\n if (file) {\n return new Response(file.content, {\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Content-Disposition\": `attachment; filename=\"${filename}\"`,\n },\n });\n }\n }\n }\n\n return new Response(\"File not found\", { status: 404 });\n }\n\n // Regular HTML response\n return new Response(\n `\n \n \n CyberMetaX: Cyber Training Platform\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n },\n );\n}","deleted","label",[99],"permalink","https://www.val.town/x/CyberK14/CyberMetax/code/main.tsx","extension","actionData","errors"]