Memory Master 🧠

\n resetGame(e.target.value)}\n >\n \n \n \n \n resetGame(difficulty, e.target.value)}\n >\n {Object.keys(CARD_THEMES).map(t => (\n \n ))}\n \n

\n Moves: {moves}\n Time: {time}s\n

\n\n \n {cards.map(card => (\n handleCardClick(card)}\n >\n

❓

{card.emoji}

\n ))}\n \n\n {matchedCards.length === cards.length && (\n

\n 🎉 Congratulations! You won in {moves} moves and {time} seconds! 🎉\n

\n )}\n\n

High Scores

\n {Object.entries(highScores).map(([diff, score]) => (\n

\n {diff.charAt(0).toUpperCase() + diff.slice(1)}:\n {score.moves !== Infinity\n ? `${score.moves} moves in ${score.time} seconds`\n : \"No score yet\"}\n

\n ))}\n

\n\n \n\n \n View Source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Memory Master Game\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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: #333;\n}\n\n.memory-game {\n background-color: white;\n border-radius: 15px;\n padding: 30px;\n box-shadow: 0 10px 25px rgba(0,0,0,0.2);\n text-align: center;\n max-width: 600px;\n width: 95%;\n}\n\n.game-controls {\n display: flex;\n justify-content: space-between;\n margin-bottom: 20px;\n}\n\n.game-settings select {\n margin-right: 10px;\n padding: 5px;\n border-radius: 5px;\n border: 1px solid #ddd;\n}\n\n.card-grid {\n display: grid;\n gap: 10px;\n margin: 0 auto;\n}\n\n.card {\n aspect-ratio: 1;\n perspective: 1000px;\n cursor: pointer;\n transition: transform 0.3s;\n}\n\n.card:hover {\n transform: scale(1.05);\n}\n\n.card-inner {\n width: 100%;\n height: 100%;\n position: relative;\n transition: transform 0.6s;\n transform-style: preserve-3d;\n}\n\n.card.flipped .card-inner {\n transform: rotateY(180deg);\n}\n\n.card-front, .card-back {\n position: absolute;\n width: 100%;\n height: 100%;\n backface-visibility: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 10px;\n font-size: 3rem;\n border: 2px solid #764ba2;\n}\n\n.card-front {\n background-color: #667eea;\n color: white;\n}\n\n.card-back {\n background-color: #e9d5ff;\n transform: rotateY(180deg);\n}\n\n.reset-btn {\n margin-top: 20px;\n padding: 10px 20px;\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: transform 0.2s;\n}\n\n.reset-btn:hover {\n transform: scale(1.05);\n}\n\n.win-message {\n margin: 20px 0;\n font-size: 1.2rem;\n color: #764ba2;\n font-weight: bold;\n}\n\n.high-scores {\n margin-top: 20px;\n padding: 10px;\n background-color: #f3e5f5;\n border-radius: 5px;\n}\n\n@media (max-width: 600px) {\n .game-controls {\n flex-direction: column;\n align-items: center;\n }\n .game-settings, .game-stats {\n margin-bottom: 10px;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/AryanSingh/MEMORY_MASTER/code/main.tsx","extension","actionData","errors"]