SkyFall

\n ))}\n \n );\n };\n\n // Component for the high score celebration effect\n const HighScoreCelebration = () => {\n const [confettiPosition, setConfettiPosition] = useState([]);\n\n useEffect(() => {\n // Function to generate confetti particles\n const generateConfetti = () => {\n const newConfetti = Array.from({ length: 50 }, () => ({\n x: Math.random() * 300,\n y: Math.random() * 400,\n color: `hsl(${Math.random() * 360}, 100%, 50%)`,\n size: Math.random() * 10 + 5,\n }));\n setConfettiPosition(newConfetti);\n };\n\n // Generate initial confetti and set interval to regenerate\n generateConfetti();\n const interval = setInterval(generateConfetti, 1000);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n {/* Map through confetti positions to create confetti elements */}\n {confettiPosition.map((particle, index) => (\n \n ))}\n {/* CSS keyframes for the confetti falling animation */}\n \n \n );\n };\n\n // Component for generic game screens (start, game over, etc.)\n const GameScreen = ({\n title,\n message,\n buttonText,\n buttonColor,\n onButtonClick,\n additionalContent,\n children,\n }) => (\n \n {children}\n \n {title}\n \n \n {message}\n

\n\n {additionalContent}\n\n \n {buttonText}\n \n \n );\n\n // Main game component return\n return (\n \n {/* Render different screens based on the game state */}\n {gameState === \"waiting\" && (\n 0 && }\n />\n )}\n\n {gameState === \"playing\" && (\n <>\n \n \n \n )}\n\n {gameState === \"escaped\" && (\n \n \n \n }\n />\n )}\n\n {gameState === \"highScore\" && (\n \n }\n >\n \n \n )}\n\n {gameState === \"gameOver\" && (\n 0 && }\n />\n )}\n \n );\n}\n\n// Root component for the app\nfunction App() {\n return (\n \n \n \n );\n}\n\n// Client-side rendering\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\n// Check if running in a browser environment before rendering\nif (typeof document !== \"undefined\") {\n client();\n}\n\n// Server-side rendering (for potential future use)\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n SkyFall\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}",["D",1737486257663],"version",66,"currentUserHasLiked","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_96":97,"_101":102},"forkedVal","interval","description","@jsxImportSource https://esm.sh/react@18.2.0","latestEvaluation","slug","qkiii/Skyfall","versions",[159,163,167,171,175,179,183,187,191,195],{"_98":160,"_141":142,"_161":162},["D",1737486257663],"n","1",{"_98":164,"_141":165,"_161":166},["D",1737483431825],65,"2",{"_98":168,"_141":169,"_161":170},["D",1737483394318],64,"3",{"_98":172,"_141":173,"_161":174},["D",1737483353056],63,"4",{"_98":176,"_141":177,"_161":178},["D",1737483340508],62,"5",{"_98":180,"_141":181,"_161":182},["D",1737483252301],61,"6",{"_98":184,"_141":185,"_161":186},["D",1737483199667],60,"7",{"_98":188,"_141":189,"_161":190},["D",1737483132740],59,"8",{"_98":192,"_141":193,"_161":194},["D",1737482879860],58,"9",{"_98":196,"_141":197,"_161":198},["D",1737482649521],57,"10",{"_122":200,"_124":201},"4f52a540-a906-11ef-8c93-e6cdfca9ef9f",{"_126":202,"_128":95,"_122":200,"_129":-5,"_108":-5,"_130":131,"_132":203,"_133":134,"_135":204,"_137":26,"_94":204,"_138":205,"_98":206,"_141":207,"_143":26,"_110":31,"_144":31,"_145":31,"_146":31,"_111":208,"_147":31,"_148":-5,"_20":209,"_150":-5,"_151":-7,"_152":203,"_154":-5,"_155":210,"_157":211},"mathFlashcardApp","hi","c0c9042c-d902-11ef-bde7-e6cdfca9ef9f","/** @jsxImportSource https://esm.sh/react */\nimport React, { useState } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nfunction generateProblem(config) {\n const operations = [];\n if (config.addition) operations.push(\"+\");\n if (config.subtraction) operations.push(\"-\");\n if (config.multiplication) operations.push(\"×\");\n\n const operation = operations[Math.floor(Math.random() * operations.length)];\n\n const possibleRanges = [\n ...(config.range1to10 ? [{ min: 1, max: 10 }] : []),\n ...(config.range10to90 ? [{ min: 10, max: 90, step: 10 }] : []),\n ...(config.range100to900 ? [{ min: 100, max: 900, step: 100 }] : []),\n ];\n\n const range = possibleRanges[Math.floor(Math.random() * possibleRanges.length)] || { min: 1, max: 10 };\n\n let a, b, result;\n\n const generateNumber = (range) => {\n if (range.step) {\n const steps = Math.floor((range.max - range.min) / range.step) + 1;\n const randomStep = Math.floor(Math.random() * steps);\n return range.min + randomStep * range.step;\n }\n return Math.floor(Math.random() * (range.max - range.min + 1)) + range.min;\n };\n\n a = generateNumber(range);\n\n if (operation === \"+\") {\n b = generateNumber(range);\n result = a + b;\n } else if (operation === \"-\") {\n b = Math.min(a, generateNumber(range));\n result = a - b;\n } else if (operation === \"×\") {\n // Multiplication logic specifically for 1-10 range\n if (config.range1to10) {\n a = Math.floor(Math.random() * 10) + 1;\n b = Math.floor(Math.random() * 10) + 1;\n } else {\n a = generateNumber(range);\n b = generateNumber(range);\n }\n result = a * b;\n }\n\n const generateChoices = (result, operation) => {\n const choices = [result];\n const maxAttempts = 20;\n let attempts = 0;\n\n while (choices.length < 3 && attempts < maxAttempts) {\n let choice;\n\n if (operation === \"×\") {\n // Multiplication-specific choice generation\n const variations = [\n Math.max(1, result - a),\n Math.max(1, result + a),\n Math.max(1, result - b),\n Math.max(1, result + b),\n Math.max(1, Math.floor(result * 0.8)),\n Math.max(1, Math.floor(result * 1.2)),\n ];\n\n choice = variations[Math.floor(Math.random() * variations.length)];\n } else {\n // Addition/Subtraction choice generation\n choice = result + (Math.random() > 0.5 ? 1 : -1) * Math.floor(Math.random() * (result / 2 + 1));\n }\n\n // Ensure choice is positive and not already in choices\n choice = Math.max(1, Math.abs(Math.floor(choice)));\n\n if (\n !choices.includes(choice)\n && Math.abs(choice - result) > 1\n && Math.abs(choice - result) < result * 0.5\n ) {\n choices.push(choice);\n }\n\n attempts++;\n }\n\n // Fallback to ensure 3 choices\n while (choices.length < 3) {\n const fallbackChoice = Math.max(1, result + Math.floor(Math.random() * 5) + 1);\n if (!choices.includes(fallbackChoice)) {\n choices.push(fallbackChoice);\n }\n }\n\n return choices.slice(0, 3);\n };\n\n const choices = generateChoices(result, operation);\n\n return {\n a,\n b,\n operation,\n result,\n choices: choices.sort(() => Math.random() - 0.5),\n };\n}\n\nfunction MathFlashcards() {\n const [problem, setProblem] = useState(() =>\n generateProblem({\n addition: true,\n subtraction: true,\n multiplication: false,\n range1to10: true,\n range10to90: false,\n range100to900: false,\n })\n );\n const [showResult, setShowResult] = useState(false);\n const [isSettingsVisible, setIsSettingsVisible] = useState(false);\n const [selectedAnswer, setSelectedAnswer] = useState(null);\n const [config, setConfig] = useState({\n addition: true,\n subtraction: true,\n multiplication: false,\n range1to10: true,\n range10to90: false,\n range100to900: false,\n });\n\n const nextProblem = () => {\n setProblem(generateProblem(config));\n setShowResult(false);\n setSelectedAnswer(null);\n };\n\n const handleAnswerSelect = (choice) => {\n setSelectedAnswer(choice);\n setShowResult(true);\n };\n\n const toggleConfig = (key) => {\n const newConfig = { ...config, [key]: !config[key] };\n\n // Ensure at least one operation is selected\n if (!newConfig.addition && !newConfig.subtraction && !newConfig.multiplication) {\n newConfig.addition = true;\n }\n\n // Ensure at least one range is selected\n if (!newConfig.range1to10 && !newConfig.range10to90 && !newConfig.range100to900) {\n newConfig.range1to10 = true;\n }\n\n setConfig(newConfig);\n setProblem(generateProblem(newConfig));\n };\n\n return React.createElement(\n \"div\",\n { className: `math-flashcard-container ${isSettingsVisible ? \"flipped\" : \"\"}` },\n React.createElement(\n \"div\",\n { className: \"flashcard-inner\" },\n React.createElement(\n \"div\",\n { className: \"flashcard-front\" },\n React.createElement(\n \"div\",\n { className: \"flashcard-header\" },\n React.createElement(\"h1\", null, \"Math Flashcards 🧮\"),\n React.createElement(\n \"button\",\n {\n onClick: () => setIsSettingsVisible(true),\n className: \"settings-button\",\n },\n \"⚙️\",\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"flashcard\" },\n React.createElement(\n \"div\",\n { className: \"problem\" },\n React.createElement(\"div\", { className: \"first-number\" }, problem.a),\n React.createElement(\n \"div\",\n { className: \"second-line\" },\n React.createElement(\"span\", { className: \"operation\" }, problem.operation),\n React.createElement(\"span\", { className: \"second-number\" }, problem.b),\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"result-display\" },\n showResult && React.createElement(\"div\", { className: \"result\" }, problem.result),\n ),\n React.createElement(\n \"div\",\n { className: \"multiple-choice\" },\n problem.choices.map((choice, index) =>\n React.createElement(\n \"button\",\n {\n key: index,\n className: `choice-button \n ${\n selectedAnswer === choice\n ? choice === problem.result\n ? \"correct\"\n : \"incorrect\"\n : \"\"\n }`,\n onClick: () => handleAnswerSelect(choice),\n },\n choice,\n )\n ),\n ),\n React.createElement(\n \"button\",\n {\n className: \"next-button\",\n onClick: nextProblem,\n },\n \"Next Problem\",\n ),\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"flashcard-back\" },\n React.createElement(\"h2\", null, \"Settings\"),\n React.createElement(\n \"div\",\n { className: \"settings-section\" },\n React.createElement(\"h3\", null, \"Operations\"),\n React.createElement(\n \"div\",\n { className: \"toggle-group\" },\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", {\n type: \"checkbox\",\n checked: config.addition,\n onChange: () => toggleConfig(\"addition\"),\n }),\n \"Addition (+)\",\n ),\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", {\n type: \"checkbox\",\n checked: config.subtraction,\n onChange: () => toggleConfig(\"subtraction\"),\n }),\n \"Subtraction (-)\",\n ),\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", {\n type: \"checkbox\",\n checked: config.multiplication,\n onChange: () => toggleConfig(\"multiplication\"),\n }),\n \"Multiplication (×)\",\n ),\n ),\n ),\n React.createElement(\n \"div\",\n { className: \"settings-section\" },\n React.createElement(\"h3\", null, \"Number Ranges\"),\n React.createElement(\n \"div\",\n { className: \"toggle-group\" },\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", {\n type: \"checkbox\",\n checked: config.range1to10,\n onChange: () => toggleConfig(\"range1to10\"),\n }),\n \"1-10\",\n ),\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", {\n type: \"checkbox\",\n checked: config.range10to90,\n onChange: () => toggleConfig(\"range10to90\"),\n }),\n \"10-90 (by 10's)\",\n ),\n React.createElement(\n \"label\",\n null,\n React.createElement(\"input\", {\n type: \"checkbox\",\n checked: config.range100to900,\n onChange: () => toggleConfig(\"range100to900\"),\n }),\n \"100-900 (by 100's)\",\n ),\n ),\n ),\n React.createElement(\n \"button\",\n {\n onClick: () => setIsSettingsVisible(false),\n className: \"back-button\",\n },\n \"Back to Flashcard\",\n ),\n ),\n ),\n );\n}\n\nfunction App() {\n return React.createElement(\"div\", { className: \"app\" }, React.createElement(MathFlashcards, null));\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render(React.createElement(App, null));\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Teacher's Math Flashcards\n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Google Sans', 'Arial', sans-serif;\n background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n padding: 0;\n touch-action: manipulation;\n perspective: 1000px;\n overflow: hidden;\n}\n\n.math-flashcard-container {\n width: 99vw;\n max-width: 600px;\n height: 99vh;\n max-height: auto;\n position: relative;\n perspective: 1000px;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n}\n\n.math-flashcard-container.flipped {\n transform: rotateY(180deg);\n}\n\n.flashcard-inner {\n position: relative;\n width: 100%;\n height: 100%;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n}\n\n.flashcard-front, .flashcard-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n flex-direction: column;\n background: linear-gradient(145deg, #ffffff, #e6e6e6);\n border-radius: 25px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n padding: 10px;\n box-sizing: border-box;\n}\n\n.flashcard-back {\n transform: rotateY(180deg);\n}\n\n.flashcard-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0px;\n}\n\nh1, h2 {\n color: #4a4a4a;\n font-size: 2rem;\n margin: 0;\n text-align: center;\n}\n\n.flashcard {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n.problem {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n\n.first-number, .second-number {\n font-size: clamp(3rem, 15vh, 10rem);\n font-weight: bold;\n color: #2c3e50;\n text-align: center;\n}\n\n.second-line {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 5px;\n position: relative;\n}\n\n.second-line::after {\n content: '';\n position: absolute;\n bottom: -10px;\n left: 0;\n width: 100%;\n height: 5px;\n background-color: #2c3e50;\n}\n\n.operation {\n font-size: clamp(3rem, 15vw, 8rem);\n color: #2c3e50;\n}\n\n.result-display {\n height: 115px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.result {\n font-size: clamp(3rem, 15vw, 8rem);\n color: #27ae60;\n text-align: center;\n margin-top: 5px;\n margin-bottom: 5px;\n}\n\n.multiple-choice {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n width: 100%;\n margin-top: 0px;\n}\n\n.choice-button {\n background-color: #3498db;\n color: white;\n border: none;\n padding: clamp(10px, 4vw, 15px);\n font-size: clamp(1rem, 4vw, 1.5rem);\n border-radius: 10px;\n cursor: pointer;\n transition: background-color 0.3s, transform 0.1s;\n}\n\n.choice-button:active {\n transform: scale(0.95);\n}\n\n.choice-button.correct {\n background-color: #2ecc71;\n}\n\n.choice-button.incorrect {\n background-color: #e74c3c;\n}\n\n.next-button {\n width: 100%;\n background-color: #2ecc71;\n color: white;\n border: none;\n padding: 15px;\n font-size: 1.2rem;\n border-radius: 10px;\n margin-top: 10px;\n cursor: pointer;\n}\n\n.settings-button {\n background-color: #f1c40f;\n color: white;\n border: none;\n width: 50px;\n height: 50px;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 1.5rem;\n cursor: pointer;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n transition: transform 0.2s;\n}\n\n.settings-button:active {\n transform: scale(0.9);\n}\n\n.settings-section {\n margin-bottom: 20px;\n}\n\n.toggle-group {\n display: flex;\n flex-direction: column;\n}\n\n.toggle-group label {\n display: flex;\n align-items: center;\n margin: 10px 0;\n background-color: #ecf0f1;\n padding: 10px;\n border-radius: 10px;\n}\n\n.toggle-group input {\n margin-right: 10px;\n transform: scale(1.5);\n}\n\n.back-button {\n background-color: #3498db;\n color: white;\n border: none;\n padding: 15px;\n font-size: 1.2rem;\n border-radius: 10px;\n cursor: pointer;\n margin-top: 20px;\n width: 100%;\n}\n`;",["D",1737579131915],45,1,{"_96":97,"_101":102},"qkiii/mathFlashcardApp",[212,214,217,220,223,226,229,232,235,238],{"_98":213,"_141":207,"_161":162},["D",1737579131915],{"_98":215,"_141":216,"_161":166},["D",1732308413754],44,{"_98":218,"_141":219,"_161":170},["D",1732308290435],43,{"_98":221,"_141":222,"_161":174},["D",1732308223957],42,{"_98":224,"_141":225,"_161":178},["D",1732307029284],41,{"_98":227,"_141":228,"_161":182},["D",1732306992229],40,{"_98":230,"_141":231,"_161":186},["D",1732306933739],39,{"_98":233,"_141":234,"_161":190},["D",1732306891704],38,{"_98":236,"_141":237,"_161":194},["D",1732306824214],37,{"_98":239,"_141":240,"_161":198},["D",1732306755878],36,"hasNext","filters",{"_244":245,"_246":247,"_130":131},"sort","newest","type","all","routes/_app","actionData","errors"]