The Password Game

Level {level}

\n\n

\n setPassword(e.target.value)}\n placeholder=\"Enter your password...\"\n className=\"password-input\"\n disabled={loading}\n />\n

\n\n {failedRequirements.length > 0 && (\n

\n {failedRequirements.map((error, i) => {\n const requirement = JSON.parse(error);\n const isValidatorVisible = visibleValidators.has(i);\n if (dismissedRequirements.has(i)) return null;\n \n return (\n

{\n setVisibleValidators(prev => {\n const next = new Set(prev);\n isValidatorVisible ? next.delete(i) : next.add(i);\n return next;\n });\n }}\n >\n {requirement.description} {isValidatorVisible ? '🔽' : '🔼'}\n \n

\n {isValidatorVisible && {requirement.validator}}\n

\n );\n })}\n

\n )}\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(req: Request): Promise {\n if (req.method === \"POST\") {\n const client = new Cerebras();\n const { level, password, requirements } = await req.json();\n\n const existingRequirements = requirements\n .map((req: Requirement, i: number) => \n `Level ${i + 1}: ${req.description} (Validator: ${req.validator})`\n )\n .join('\\n');\n\n const completion = await client.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content: `You are a hilarious game show host. Make each password requirement funnier and more ridiculous than the last. \n Focus on humor, not difficulty. Think dad jokes and silly requirements. \n IMPORTANT: Ensure your new requirement doesn't conflict with any existing requirements listed below:\\n\\n${existingRequirements}`,\n },\n {\n role: \"user\",\n content: `Generate the next password requirement for level ${level + 1}.`,\n },\n ],\n model: \"llama3.1-70b\",\n tools: [{\n type: \"function\",\n function: {\n name: \"generateRequirement\",\n description: `Generate a creative password requirement with two fields:\n 1. A clear description of what the password must contain\n 2. A JavaScript expression that validates the requirement\n\n Examples of increasing difficulty:\n {\n \"description\": \"Password must contain at least one number\",\n \"validator\": \"password.match(/\\\\d/) !== null\"\n }\n {\n \"description\": \"Password must contain an uppercase letter\",\n \"validator\": \"password.match(/[A-Z]/) !== null\"\n }\n {\n \"description\": \"Password must contain a dad joke (Example: 'Why don't eggs tell jokes? They'd crack up!')\",\n \"validator\": \"password.toLowerCase().includes('joke')\"\n }\n {\n \"description\": \"Password must include at least one 🦄 unicorn emoji because who doesn't love unicorns?\",\n \"validator\": \"password.includes('🦄')\"\n }\n \n Be creative! Ideas:\n - Silly emoji combinations\n - Dad jokes or puns\n - Animal sounds\n - Food combinations\n - Internet memes\n - Funny character patterns\n - Pop culture references`,\n parameters: {\n type: \"object\",\n properties: {\n description: {\n type: \"string\",\n description: \"A funny description of what the password must contain, including the reason why (make it silly!)\",\n },\n validator: {\n type: \"string\",\n description: \"JavaScript expression that returns true/false when evaluated with the password variable\",\n },\n },\n required: [\"description\", \"validator\"],\n },\n },\n }],\n });\n\n const functionCall = completion.choices?.at(0)?.message?.tool_calls?.at(0)?.function;\n if (functionCall?.name === \"generateRequirement\") {\n return new Response(functionCall.arguments, {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n console.log(completion);\n throw new Error(\"Unexpected function call\");\n }\n }\n\n return new Response(\n `\n \n \n \n The Password Game\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n margin: 0;\n padding: 20px;\n font-family: system-ui, sans-serif;\n background: #1a1a1a;\n color: #fff;\n display: flex;\n justify-content: center;\n }\n \n .container {\n max-width: 600px;\n width: 100%;\n text-align: center;\n }\n \n .password-section {\n display: flex;\n gap: 10px;\n margin: 20px 0;\n }\n \n .password-input {\n width: 100%;\n padding: 10px;\n border: 1px solid #333;\n border-radius: 4px;\n background: #2a2a2a;\n color: #fff;\n font-size: 16px;\n }\n \n .password-input:disabled {\n opacity: 0.7;\n cursor: not-allowed;\n }\n \n .errors {\n display: flex;\n flex-direction: column;\n gap: 10px;\n margin-top: 20px;\n }\n \n .error {\n color: #ff4444;\n padding: 10px;\n background: rgba(255, 68, 68, 0.1);\n border-radius: 4px;\n text-align: left;\n cursor: pointer;\n position: relative;\n }\n\n .error-description {\n margin-bottom: 5px;\n padding-right: 30px;\n }\n\n .validator-code {\n font-family: monospace;\n color: #888;\n margin-top: 8px;\n padding: 8px;\n background: rgba(0, 0, 0, 0.2);\n border-radius: 4px;\n display: block;\n }\n\n .dismiss-button {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 20px;\n height: 20px;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: #fff;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 16px;\n opacity: 0.5;\n transition: opacity 0.2s;\n }\n\n .dismiss-button:hover {\n opacity: 1;\n }\n`;","deleted","label",[100],"permalink","https://www.val.town/x/stevekrouse/passwordgame/code/main.tsx","extension","actionData","errors"]