Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n",[170],"69434134-bef5-11f0-b262-42dde27851f2",".vtignore","694341de-bef5-11f0-b262-42dde27851f2",["D",1762862169069],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor",[177],"5d01d4d4-bef6-11f0-ab02-42dde27851f2","shared","5d01d60a-bef6-11f0-ab02-42dde27851f2",5,["D",1762862578002],"directory",[183],"a24e7718-bef6-11f0-9a99-42dde27851f2","frontend","a24e77ea-bef6-11f0-9a99-42dde27851f2",17,["D",1762862694272],[190],"60cb118e-bef6-11f0-b262-42dde27851f2","backend","60cb1242-bef6-11f0-b262-42dde27851f2",7,["D",1762862584356],[196],"pulls","forks","envVars",{"_207":54,"_209":54},"connections",{"_207":54,"_208":54},"count","unfilledCount","emptyCount",{"_20":195,"_13":196,"_125":197,"_126":-5,"_127":21,"_128":198,"_130":50,"_22":381,"_29":54,"_133":187,"_135":-5,"_137":38,"_138":-5,"_236":382,"_90":383},{"_20":376,"_13":335,"_125":329,"_126":197,"_127":21,"_128":377,"_130":50,"_22":378,"_29":54,"_133":187,"_135":-5,"_137":38,"_138":-5,"_236":379,"_90":380},{"_20":368,"_13":369,"_125":370,"_126":329,"_127":21,"_128":371,"_130":50,"_22":372,"_29":159,"_133":262,"_135":373,"_137":38,"_138":-5,"_236":374,"_90":375},{"_20":360,"_13":361,"_125":362,"_126":329,"_127":21,"_128":363,"_130":50,"_22":364,"_29":159,"_133":262,"_135":365,"_137":38,"_138":-5,"_236":366,"_90":367},{"_20":352,"_13":353,"_125":354,"_126":329,"_127":21,"_128":355,"_130":50,"_22":356,"_29":54,"_133":262,"_135":357,"_137":38,"_138":-5,"_236":358,"_90":359},{"_20":344,"_13":345,"_125":346,"_126":329,"_127":21,"_128":347,"_130":50,"_22":348,"_29":54,"_133":262,"_135":349,"_137":38,"_138":-5,"_236":350,"_90":351},{"_20":336,"_13":337,"_125":338,"_126":329,"_127":21,"_128":339,"_130":50,"_22":340,"_29":159,"_133":262,"_135":341,"_137":38,"_138":-5,"_236":342,"_90":343},{"_20":326,"_13":327,"_125":328,"_126":329,"_127":21,"_128":330,"_130":50,"_22":331,"_29":54,"_133":262,"_135":332,"_137":38,"_138":-5,"_236":333,"_90":334},{"_20":319,"_13":148,"_125":320,"_126":197,"_127":21,"_128":321,"_130":50,"_22":322,"_29":54,"_133":102,"_135":323,"_137":38,"_138":-5,"_236":324,"_90":325},{"_20":311,"_13":312,"_125":313,"_126":197,"_127":21,"_128":314,"_130":50,"_22":315,"_29":54,"_133":262,"_135":316,"_137":38,"_138":-5,"_236":317,"_90":318},{"_20":303,"_13":304,"_125":305,"_126":197,"_127":21,"_128":306,"_130":50,"_22":307,"_29":185,"_133":262,"_135":308,"_137":38,"_138":-5,"_236":309,"_90":310},{"_20":189,"_13":190,"_125":191,"_126":-5,"_127":21,"_128":192,"_130":50,"_22":300,"_29":54,"_133":187,"_135":-5,"_137":38,"_138":-5,"_236":301,"_90":302},{"_20":293,"_13":148,"_125":294,"_126":191,"_127":21,"_128":295,"_130":50,"_22":296,"_29":54,"_133":102,"_135":297,"_137":38,"_138":-5,"_236":298,"_90":299},{"_20":284,"_13":285,"_125":286,"_126":191,"_127":21,"_128":287,"_130":50,"_22":288,"_29":289,"_133":102,"_135":290,"_137":38,"_138":-5,"_236":291,"_90":292},{"_20":276,"_13":277,"_125":278,"_126":191,"_127":21,"_128":30,"_130":50,"_22":279,"_29":280,"_133":262,"_135":281,"_137":38,"_138":-5,"_236":282,"_90":283},{"_20":182,"_13":183,"_125":184,"_126":-5,"_127":21,"_128":185,"_130":50,"_22":273,"_29":54,"_133":187,"_135":-5,"_137":38,"_138":-5,"_236":274,"_90":275},{"_20":266,"_13":148,"_125":267,"_126":184,"_127":21,"_128":268,"_130":50,"_22":269,"_29":54,"_133":102,"_135":270,"_137":38,"_138":-5,"_236":271,"_90":272},{"_20":257,"_13":258,"_125":259,"_126":184,"_127":21,"_128":260,"_130":50,"_22":261,"_29":54,"_133":262,"_135":263,"_137":38,"_138":-5,"_236":264,"_90":265},{"_20":176,"_13":177,"_125":178,"_126":-5,"_127":21,"_128":132,"_130":50,"_22":254,"_29":54,"_133":102,"_135":180,"_137":38,"_138":-5,"_236":255,"_90":256},{"_20":169,"_13":170,"_125":171,"_126":-5,"_127":21,"_128":172,"_130":50,"_22":251,"_29":54,"_133":102,"_135":174,"_137":38,"_138":-5,"_236":252,"_90":253},{"_20":162,"_13":163,"_125":164,"_126":-5,"_127":21,"_128":165,"_130":50,"_22":248,"_29":159,"_133":102,"_135":167,"_137":38,"_138":-5,"_236":249,"_90":250},{"_20":154,"_13":155,"_125":156,"_126":-5,"_127":21,"_128":157,"_130":50,"_22":245,"_29":159,"_133":102,"_135":160,"_137":38,"_138":-5,"_236":246,"_90":247},{"_20":147,"_13":148,"_125":149,"_126":-5,"_127":21,"_128":150,"_130":50,"_22":242,"_29":54,"_133":102,"_135":152,"_137":38,"_138":-5,"_236":243,"_90":244},{"_20":140,"_13":141,"_125":142,"_126":-5,"_127":21,"_128":143,"_130":50,"_22":239,"_29":54,"_133":102,"_135":145,"_137":38,"_138":-5,"_236":240,"_90":241},{"_20":123,"_13":124,"_125":48,"_126":-5,"_127":21,"_128":129,"_130":50,"_22":235,"_29":132,"_133":134,"_135":136,"_137":38,"_138":14,"_236":237,"_90":238},["D",1762862995360],"children",[],[124],["D",1762862169050],[],[141],["D",1762862886168],[],[148],["D",1762862993727],[],[155],["D",1762862993461],[],[163],["D",1762862169069],[],[170],["D",1762862169069],[],[177],"5d1f70ac-bef6-11f0-a52c-42dde27851f2","types.ts","5d1f717e-bef6-11f0-a52c-42dde27851f2",6,["D",1762862578199],"script","// Shared types for the flashcard application\n// These types work in both frontend and backend environments\n\nexport interface Deck {\n id: string;\n name: string;\n description: string;\n createdAt: string;\n}\n\nexport interface Card {\n id: string;\n deckId: string;\n front: string;\n back: string;\n easeFactor: number; // SM-2 ease factor (default 2.5)\n interval: number; // Days until next review\n nextReview: string; // ISO date string\n reviewCount: number;\n}\n\nexport interface StudySession {\n id: string;\n date: string; // ISO date string\n deckId: string;\n deckName: string;\n duration: number; // seconds\n cardsReviewed: number;\n correctCount: number; // \"Good\" or \"Easy\" ratings\n}\n\nexport interface UserStats {\n totalCards: number;\n totalReviews: number;\n totalTime: number; // seconds\n averageAccuracy: number; // 0-100 percentage\n}\n\nexport interface UserData {\n username: string;\n decks: Deck[];\n cards: Card[];\n sessions: StudySession[];\n stats: UserStats;\n}\n\n// SM-2 Spaced Repetition Algorithm\n// Based on the SuperMemo SM-2 algorithm used in Anki\n\nexport enum Rating {\n Again = 1,\n Hard = 2,\n Good = 3,\n Easy = 4,\n}\n\nexport interface ReviewResult {\n easeFactor: number;\n interval: number;\n nextReview: string;\n}\n\n/**\n * Calculate the next review parameters based on the SM-2 algorithm\n * @param card - The card being reviewed\n * @param rating - User's rating (1=Again, 2=Hard, 3=Good, 4=Easy)\n * @returns Updated card review parameters\n */\nexport function calculateNextReview(\n card: Card,\n rating: Rating\n): ReviewResult {\n let easeFactor = card.easeFactor;\n let interval = card.interval;\n\n switch (rating) {\n case Rating.Again:\n // Failed recall - reset to beginning\n interval = 1;\n easeFactor = Math.max(1.3, easeFactor - 0.2);\n break;\n\n case Rating.Hard:\n // Difficult recall\n interval = Math.max(1, interval * 1.2);\n easeFactor = Math.max(1.3, easeFactor - 0.15);\n break;\n\n case Rating.Good:\n // Successful recall\n if (card.reviewCount === 0) {\n interval = 1;\n } else if (card.reviewCount === 1) {\n interval = 6;\n } else {\n interval = Math.round(interval * easeFactor);\n }\n break;\n\n case Rating.Easy:\n // Easy recall\n if (card.reviewCount === 0) {\n interval = 4;\n } else {\n interval = Math.round(interval * easeFactor * 1.3);\n }\n easeFactor = easeFactor + 0.15;\n break;\n }\n\n // Calculate next review date\n const nextReview = new Date();\n nextReview.setDate(nextReview.getDate() + interval);\n\n return {\n easeFactor: Math.max(1.3, easeFactor),\n interval,\n nextReview: nextReview.toISOString(),\n };\n}\n\n/**\n * Check if a card is due for review\n */\nexport function isCardDue(card: Card): boolean {\n return new Date(card.nextReview) <= new Date();\n}\n\n/**\n * Generate a unique ID\n */\nexport function generateId(): string {\n return Date.now().toString(36) + Math.random().toString(36).substring(2);\n}\n\n",[],[183,258],"2669db46-bef7-11f0-a5fc-42dde27851f2","2669dbf0-bef7-11f0-a5fc-42dde27851f2",25,["D",1762862915908],"# Shared\n\nThis directory contains code shared between frontend and backend.\n\n## Files\n\n- **types.ts** - TypeScript interfaces and spaced repetition algorithm\n\n## Important Notes\n\nCode in this directory must work in **both** environments:\n- ✅ Standard JavaScript/TypeScript\n- ❌ No Deno-specific APIs (`Deno.*`)\n- ❌ No browser-specific APIs (`window`, `document`)\n- ✅ Use only standard ES modules\n\n## Types\n\n### Data Models\n- `Deck` - Flashcard deck\n- `Card` - Individual flashcard with SR parameters\n- `StudySession` - Completed study session record\n- `UserStats` - Calculated statistics\n- `UserData` - Complete user data structure\n\n### Algorithm\n- `Rating` - Enum for card difficulty ratings (1-4)\n- `ReviewResult` - Result of SR calculation\n\n## Spaced Repetition Functions\n\n### calculateNextReview()\nImplements the SM-2 algorithm to determine:\n- Next review date\n- Updated ease factor\n- Updated interval\n\n### isCardDue()\nChecks if a card should be shown for review.\n\n### generateId()\nCreates unique IDs for new records.\n\n## Algorithm Details\n\nThe SM-2 (SuperMemo 2) algorithm is the foundation of Anki's spaced repetition:\n\n- **easeFactor**: How \"easy\" the card is (higher = longer intervals)\n- **interval**: Days until next review\n- **nextReview**: Specific date/time for next review\n\nSee [ARCHITECTURE.md](../ARCHITECTURE.md) for full algorithm documentation.\n\n",[],[183,148],["D",1762862578002],[226,227],[183],"e2dcd72c-befe-11f0-8692-42dde27851f2","index.js","ce4ef18a-bef6-11f0-85bf-42dde27851f2",["D",1762866238515],44,"// Frontend JavaScript for Flashcard App\nconsole.log(\"🚀 Flashcard app JavaScript loaded\");\n\n// Global error handler\nwindow.addEventListener('error', (e) => {\n console.error('💥 Global error:', e.error || e.message);\n});\n\nwindow.addEventListener('unhandledrejection', (e) => {\n console.error('💥 Unhandled promise rejection:', e.reason);\n});\n\n// Rating enum (same as backend)\nconst Rating = {\n Again: 1,\n Hard: 2,\n Good: 3,\n Easy: 4,\n};\n\n// Global state\nlet currentUser = null;\nlet userData = null;\nlet currentDeckId = null;\nlet currentCardId = null;\nlet studyCards = [];\nlet currentStudyIndex = 0;\nlet sessionStartTime = null;\nlet sessionCorrectCount = 0;\nlet studyTimerInterval = null;\n\n// API Helper\nasync function apiCall(endpoint, options = {}) {\n console.log(`📡 API Call: ${options.method || 'GET'} ${endpoint}`);\n\n const headers = {\n \"Content-Type\": \"application/json\",\n ...options.headers,\n };\n\n if (currentUser) {\n headers[\"X-Username\"] = currentUser;\n }\n\n const response = await fetch(endpoint, {\n ...options,\n headers,\n });\n\n console.log(`📡 Response: ${response.status} ${response.statusText}`);\n\n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: \"Request failed\" }));\n console.error(`❌ API Error:`, error);\n throw new Error(error.error || \"Request failed\");\n }\n\n const data = await response.json();\n console.log(`✅ API Success:`, data);\n return data;\n}\n\n// View Navigation\nfunction showView(viewId) {\n console.log(`👁️ Showing view: ${viewId}`);\n document.querySelectorAll(\".view\").forEach((view) => {\n view.classList.remove(\"active\");\n });\n document.getElementById(viewId)?.classList.add(\"active\");\n}\n\n// Show a view inside the app (not login)\nfunction showAppInnerView(viewId) {\n console.log(`👁️ Showing inner view: ${viewId}`);\n // Hide all inner views (deck-list, deck-editor, card-manager, study, stats, backup)\n const innerViews = [\n \"deck-list-view\",\n \"deck-editor-view\",\n \"card-manager-view\",\n \"study-view\",\n \"stats-view\",\n \"backup-view\"\n ];\n innerViews.forEach(id => {\n document.getElementById(id)?.classList.remove(\"active\");\n });\n // Show the requested view\n document.getElementById(viewId)?.classList.add(\"active\");\n}\n\nfunction showAppView() {\n console.log(\"🏠 Showing app view\");\n // Hide login view\n document.getElementById(\"login-view\").classList.remove(\"active\");\n // Show app view\n document.getElementById(\"app-view\").classList.add(\"active\");\n // Show deck list inside app view\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n}\n\n// Authentication\nasync function login() {\n console.log(\"🔐 Login attempt starting...\");\n const username = document.getElementById(\"username-input\").value.trim().toLowerCase();\n console.log(`Username entered: \"${username}\"`);\n\n if (!username) {\n console.warn(\"⚠️ No username entered\");\n alert(\"Please enter a username\");\n return;\n }\n\n try {\n console.log(\"📤 Sending login request...\");\n userData = await apiCall(\"/api/auth/login\", {\n method: \"POST\",\n body: JSON.stringify({ username }),\n });\n\n console.log(\"✅ Login successful, user data:\", userData);\n currentUser = username;\n sessionStorage.setItem(\"flashcard_username\", username);\n document.getElementById(\"username-display\").textContent = `👤 ${username}`;\n console.log(\"🎯 Showing app view...\");\n showAppView();\n } catch (error) {\n console.error(\"❌ Login failed:\", error);\n alert(\"Login failed: \" + error.message);\n }\n}\n\nfunction logout() {\n currentUser = null;\n userData = null;\n sessionStorage.removeItem(\"flashcard_username\");\n document.getElementById(\"username-input\").value = \"\";\n showView(\"login-view\");\n}\n\n// Deck Management\nasync function loadDecks() {\n console.log(\"📚 Loading decks...\");\n try {\n const decks = await apiCall(\"/api/decks\");\n const deckList = document.getElementById(\"deck-list\");\n const noDecksMsg = document.getElementById(\"no-decks-message\");\n\n if (decks.length === 0) {\n deckList.innerHTML = \"\";\n noDecksMsg.style.display = \"block\";\n return;\n }\n\n noDecksMsg.style.display = \"none\";\n\n // Get card counts for each deck\n const cards = await apiCall(\"/api/cards/deck/\" + decks[0].id).catch(() => []);\n\n deckList.innerHTML = decks.map((deck) => {\n const deckCards = userData?.cards?.filter((c) => c.deckId === deck.id) || [];\n const dueCards = deckCards.filter((c) => new Date(c.nextReview) <= new Date());\n\n return `\n

${escapeHtml(deck.name)}

${escapeHtml(deck.description)}

\n ${deckCards.length} cards · ${dueCards.length} due\n

\n \n 🎯 Study\n \n \n 📝 Edit\n \n \n ✏️\n \n \n 🗑️\n \n

\n `;\n }).join(\"\");\n\n // Reload user data to get updated card info\n userData = await apiCall(\"/api/auth/login\", {\n method: \"POST\",\n body: JSON.stringify({ username: currentUser }),\n });\n } catch (error) {\n console.error(\"Failed to load decks:\", error);\n alert(\"Failed to load decks: \" + error.message);\n }\n}\n\nfunction createDeck() {\n currentDeckId = null;\n document.getElementById(\"deck-editor-title\").textContent = \"Create Deck\";\n document.getElementById(\"deck-name-input\").value = \"\";\n document.getElementById(\"deck-description-input\").value = \"\";\n showAppInnerView(\"deck-editor-view\");\n}\n\nasync function editDeck(deckId) {\n console.log(\"✏️ Edit deck clicked:\", deckId);\n currentDeckId = deckId;\n const deck = userData.decks.find((d) => d.id === deckId);\n console.log(\"Found deck:\", deck);\n\n if (!deck) {\n console.warn(\"⚠️ Deck not found!\");\n return;\n }\n\n document.getElementById(\"deck-editor-title\").textContent = \"Edit Deck\";\n document.getElementById(\"deck-name-input\").value = deck.name;\n document.getElementById(\"deck-description-input\").value = deck.description;\n showAppInnerView(\"deck-editor-view\");\n console.log(\"✅ Deck editor shown\");\n}\n\nasync function saveDeck() {\n const name = document.getElementById(\"deck-name-input\").value.trim();\n const description = document.getElementById(\"deck-description-input\").value.trim();\n\n if (!name) {\n alert(\"Please enter a deck name\");\n return;\n }\n\n try {\n if (currentDeckId) {\n // Update existing deck\n await apiCall(`/api/decks/${currentDeckId}`, {\n method: \"PUT\",\n body: JSON.stringify({ name, description }),\n });\n } else {\n // Create new deck\n await apiCall(\"/api/decks\", {\n method: \"POST\",\n body: JSON.stringify({ name, description }),\n });\n }\n\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n } catch (error) {\n alert(\"Failed to save deck: \" + error.message);\n }\n}\n\nasync function deleteDeck(deckId) {\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) return;\n\n if (!confirm(`Delete deck \"${deck.name}\" and all its cards?`)) return;\n\n try {\n await apiCall(`/api/decks/${deckId}`, { method: \"DELETE\" });\n loadDecks();\n } catch (error) {\n alert(\"Failed to delete deck: \" + error.message);\n }\n}\n\n// Card Management\nasync function viewCards(deckId) {\n currentDeckId = deckId;\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) return;\n\n document.getElementById(\"card-manager-deck-name\").textContent = deck.name;\n document.getElementById(\"card-editor-form\").style.display = \"none\";\n showAppInnerView(\"card-manager-view\");\n await loadCards();\n}\n\nasync function loadCards() {\n try {\n const cards = await apiCall(`/api/cards/deck/${currentDeckId}`);\n const cardList = document.getElementById(\"card-list\");\n const noCardsMsg = document.getElementById(\"no-cards-message\");\n\n if (cards.length === 0) {\n cardList.innerHTML = \"\";\n noCardsMsg.style.display = \"block\";\n return;\n }\n\n noCardsMsg.style.display = \"none\";\n cardList.innerHTML = cards.map((card) => {\n const nextReview = new Date(card.nextReview);\n const isDue = nextReview <= new Date();\n const dueText = isDue ? \"Due now\" : `Due ${formatDate(nextReview)}`;\n\n return `\n

\n \n

Front:

${renderMarkdown(card.front)}

Back:

${renderMarkdown(card.back)}

\n \n ✏️\n \n \n 🗑️\n \n

\n Reviewed ${card.reviewCount} times · ${dueText}\n

\n\n \n

💡 Tip: You can use Markdown!

\n ${escapeHtml(card.front)}\n ${escapeHtml(card.back)}\n

\n \n 💾 Save\n \n \n ✖️ Cancel\n \n

\n `;\n }).join(\"\");\n\n // Update userData cards\n const index = userData.decks.findIndex((d) => d.id === currentDeckId);\n if (index !== -1) {\n userData.cards = userData.cards.filter((c) => c.deckId !== currentDeckId).concat(cards);\n }\n } catch (error) {\n console.error(\"Failed to load cards:\", error);\n alert(\"Failed to load cards: \" + error.message);\n }\n}\n\nfunction addCard() {\n currentCardId = null;\n document.getElementById(\"card-editor-title\").textContent = \"Add Card\";\n document.getElementById(\"card-front-input\").value = \"\";\n document.getElementById(\"card-back-input\").value = \"\";\n document.getElementById(\"card-editor-form\").style.display = \"block\";\n\n // Scroll to the form\n document.getElementById(\"card-editor-form\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n}\n\n// Inline card editing\nfunction editCardInline(cardId) {\n console.log(\"✏️ Inline edit card:\", cardId);\n // Hide view mode, show edit mode\n document.getElementById(`card-view-${cardId}`).style.display = \"none\";\n document.getElementById(`card-edit-${cardId}`).style.display = \"block\";\n}\n\nfunction cancelCardInline(cardId) {\n console.log(\"✖️ Cancel inline edit:\", cardId);\n // Show view mode, hide edit mode\n document.getElementById(`card-view-${cardId}`).style.display = \"block\";\n document.getElementById(`card-edit-${cardId}`).style.display = \"none\";\n}\n\nasync function saveCardInline(cardId) {\n console.log(\"💾 Save inline edit:\", cardId);\n const front = document.getElementById(`card-front-edit-${cardId}`).value.trim();\n const back = document.getElementById(`card-back-edit-${cardId}`).value.trim();\n\n if (!front || !back) {\n alert(\"Please fill in both front and back\");\n return;\n }\n\n try {\n await apiCall(`/api/cards/${cardId}`, {\n method: \"PUT\",\n body: JSON.stringify({ front, back }),\n });\n\n // Reload cards to show updated content\n await loadCards();\n } catch (error) {\n alert(\"Failed to save card: \" + error.message);\n }\n}\n\n// Keep old editCard for compatibility (now unused)\nasync function editCard(cardId) {\n console.log(\"✏️ Edit card clicked:\", cardId);\n currentCardId = cardId;\n const card = userData.cards.find((c) => c.id === cardId);\n console.log(\"Found card:\", card);\n\n if (!card) {\n console.warn(\"⚠️ Card not found!\");\n return;\n }\n\n document.getElementById(\"card-editor-title\").textContent = \"Edit Card\";\n document.getElementById(\"card-front-input\").value = card.front;\n document.getElementById(\"card-back-input\").value = card.back;\n document.getElementById(\"card-editor-form\").style.display = \"block\";\n console.log(\"✅ Card editor form shown\");\n\n // Scroll to the form\n document.getElementById(\"card-editor-form\").scrollIntoView({ behavior: \"smooth\", block: \"start\" });\n}\n\nasync function saveCard() {\n const front = document.getElementById(\"card-front-input\").value.trim();\n const back = document.getElementById(\"card-back-input\").value.trim();\n\n if (!front || !back) {\n alert(\"Please fill in both front and back\");\n return;\n }\n\n try {\n if (currentCardId) {\n // Update existing card\n await apiCall(`/api/cards/${currentCardId}`, {\n method: \"PUT\",\n body: JSON.stringify({ front, back }),\n });\n } else {\n // Create new card\n await apiCall(\"/api/cards\", {\n method: \"POST\",\n body: JSON.stringify({ deckId: currentDeckId, front, back }),\n });\n }\n\n document.getElementById(\"card-editor-form\").style.display = \"none\";\n await loadCards();\n } catch (error) {\n alert(\"Failed to save card: \" + error.message);\n }\n}\n\nfunction cancelCard() {\n document.getElementById(\"card-editor-form\").style.display = \"none\";\n}\n\nasync function deleteCard(cardId) {\n if (!confirm(\"Delete this card?\")) return;\n\n try {\n await apiCall(`/api/cards/${cardId}`, { method: \"DELETE\" });\n await loadCards();\n } catch (error) {\n alert(\"Failed to delete card: \" + error.message);\n }\n}\n\n// Study Mode\nasync function studyDeck(deckId) {\n currentDeckId = deckId;\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) return;\n\n try {\n studyCards = await apiCall(`/api/study/${deckId}`);\n\n if (studyCards.length === 0) {\n alert(\"No cards due for review!\");\n return;\n }\n\n document.getElementById(\"study-deck-name\").textContent = deck.name;\n currentStudyIndex = 0;\n sessionStartTime = Date.now();\n sessionCorrectCount = 0;\n\n showAppInnerView(\"study-view\");\n showStudyCard();\n startStudyTimer();\n } catch (error) {\n alert(\"Failed to start study session: \" + error.message);\n }\n}\n\nfunction showStudyCard() {\n if (currentStudyIndex >= studyCards.length) {\n completeStudySession();\n return;\n }\n\n const card = studyCards[currentStudyIndex];\n document.getElementById(\"card-front-text\").innerHTML = renderMarkdown(card.front);\n document.getElementById(\"card-front-text\").classList.add(\"markdown-content\");\n document.getElementById(\"card-back-text\").innerHTML = renderMarkdown(card.back);\n document.getElementById(\"card-back-text\").classList.add(\"markdown-content\");\n document.getElementById(\"study-progress-current\").textContent = currentStudyIndex + 1;\n document.getElementById(\"study-progress-total\").textContent = studyCards.length;\n\n // Reset card flip\n document.getElementById(\"card-inner\").classList.remove(\"flipped\");\n document.getElementById(\"study-flip-controls\").style.display = \"block\";\n document.getElementById(\"study-rating-controls\").style.display = \"none\";\n\n // Adjust card height based on content\n adjustCardHeight();\n}\n\nfunction adjustCardHeight() {\n // Wait for content to render\n setTimeout(() => {\n const cardInner = document.getElementById(\"card-inner\");\n const cardFront = cardInner.querySelector(\".card-front\");\n const cardBack = cardInner.querySelector(\".card-back\");\n\n if (cardFront && cardBack) {\n const frontHeight = cardFront.scrollHeight;\n const backHeight = cardBack.scrollHeight;\n const maxHeight = Math.max(frontHeight, backHeight);\n\n // Set the height to accommodate the taller side\n cardInner.style.height = maxHeight + \"px\";\n }\n }, 100);\n}\n\nfunction flipCard() {\n document.getElementById(\"card-inner\").classList.add(\"flipped\");\n document.getElementById(\"study-flip-controls\").style.display = \"none\";\n document.getElementById(\"study-rating-controls\").style.display = \"grid\";\n\n // Adjust height when flipping (back might be taller)\n adjustCardHeight();\n}\n\nasync function rateCard(rating) {\n const card = studyCards[currentStudyIndex];\n\n try {\n await apiCall(\"/api/study/review\", {\n method: \"POST\",\n body: JSON.stringify({ cardId: card.id, rating }),\n });\n\n // Track correct answers (Good or Easy)\n if (rating === Rating.Good || rating === Rating.Easy) {\n sessionCorrectCount++;\n }\n\n currentStudyIndex++;\n showStudyCard();\n } catch (error) {\n alert(\"Failed to record review: \" + error.message);\n }\n}\n\nfunction startStudyTimer() {\n if (studyTimerInterval) clearInterval(studyTimerInterval);\n\n studyTimerInterval = setInterval(() => {\n const elapsed = Math.floor((Date.now() - sessionStartTime) / 1000);\n const minutes = Math.floor(elapsed / 60);\n const seconds = elapsed % 60;\n document.getElementById(\"study-timer\").textContent =\n `${minutes}:${seconds.toString().padStart(2, \"0\")}`;\n }, 1000);\n}\n\nfunction stopStudyTimer() {\n if (studyTimerInterval) {\n clearInterval(studyTimerInterval);\n studyTimerInterval = null;\n }\n}\n\nasync function completeStudySession() {\n stopStudyTimer();\n\n const duration = Math.floor((Date.now() - sessionStartTime) / 1000);\n const accuracy = studyCards.length > 0\n ? Math.round((sessionCorrectCount / studyCards.length) * 100)\n : 0;\n\n document.getElementById(\"session-cards-count\").textContent = studyCards.length;\n document.getElementById(\"session-accuracy\").textContent = accuracy;\n\n document.getElementById(\"study-card\").style.display = \"none\";\n document.getElementById(\"study-flip-controls\").style.display = \"none\";\n document.getElementById(\"study-rating-controls\").style.display = \"none\";\n document.getElementById(\"study-complete-message\").style.display = \"block\";\n\n // Save session\n try {\n await apiCall(\"/api/stats/sessions\", {\n method: \"POST\",\n body: JSON.stringify({\n deckId: currentDeckId,\n duration,\n cardsReviewed: studyCards.length,\n correctCount: sessionCorrectCount,\n }),\n });\n } catch (error) {\n console.error(\"Failed to save session:\", error);\n }\n}\n\nfunction endStudySession() {\n if (!confirm(\"End study session early?\")) return;\n completeStudySession();\n}\n\nfunction finishStudy() {\n document.getElementById(\"study-card\").style.display = \"block\";\n document.getElementById(\"study-complete-message\").style.display = \"none\";\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n}\n\n// Statistics\nasync function viewStats() {\n try {\n const data = await apiCall(\"/api/stats\");\n\n // Update overall stats\n document.getElementById(\"stat-total-cards\").textContent = data.stats.totalCards;\n document.getElementById(\"stat-total-reviews\").textContent = data.stats.totalReviews;\n\n const hours = Math.floor(data.stats.totalTime / 3600);\n const minutes = Math.floor((data.stats.totalTime % 3600) / 60);\n document.getElementById(\"stat-total-time\").textContent = `${hours}h ${minutes}m`;\n document.getElementById(\"stat-accuracy\").textContent =\n `${Math.round(data.stats.averageAccuracy)}%`;\n\n // Update session history\n const tbody = document.getElementById(\"session-history-body\");\n const noSessionsMsg = document.getElementById(\"no-sessions-message\");\n\n if (data.sessions.length === 0) {\n tbody.innerHTML = \"\";\n noSessionsMsg.style.display = \"block\";\n } else {\n noSessionsMsg.style.display = \"none\";\n tbody.innerHTML = data.sessions\n .sort((a, b) => new Date(b.date) - new Date(a.date))\n .map((session) => {\n const accuracy = session.cardsReviewed > 0\n ? Math.round((session.correctCount / session.cardsReviewed) * 100)\n : 0;\n const duration = formatDuration(session.duration);\n\n return `\n \n ${formatDate(new Date(session.date))}\n ${escapeHtml(session.deckName)}\n ${duration}\n ${session.cardsReviewed}\n ${accuracy}%\n \n `;\n })\n .join(\"\");\n }\n\n showAppInnerView(\"stats-view\");\n } catch (error) {\n alert(\"Failed to load statistics: \" + error.message);\n }\n}\n\n// Backup & Restore\nfunction showBackup() {\n showAppInnerView(\"backup-view\");\n}\n\nasync function downloadBackup() {\n try {\n const data = await apiCall(\"/api/backup\");\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: \"application/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url;\n a.download = `flashcard-backup-${currentUser}-${Date.now()}.json`;\n a.click();\n URL.revokeObjectURL(url);\n } catch (error) {\n alert(\"Failed to download backup: \" + error.message);\n }\n}\n\nasync function restoreBackup() {\n const fileInput = document.getElementById(\"restore-file-input\");\n const file = fileInput.files[0];\n\n if (!file) {\n alert(\"Please select a backup file\");\n return;\n }\n\n if (!confirm(\"This will replace all your current data. Continue?\")) {\n return;\n }\n\n try {\n const text = await file.text();\n const backupData = JSON.parse(text);\n\n await apiCall(\"/api/backup/restore\", {\n method: \"POST\",\n body: JSON.stringify(backupData),\n });\n\n alert(\"Backup restored successfully!\");\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n } catch (error) {\n alert(\"Failed to restore backup: \" + error.message);\n }\n}\n\n// Utility Functions\nfunction escapeHtml(text) {\n const div = document.createElement(\"div\");\n div.textContent = text;\n return div.innerHTML;\n}\n\nfunction renderMarkdown(text) {\n try {\n // Use marked.js to parse markdown\n return marked.parse(text);\n } catch (error) {\n console.error(\"Markdown parsing error:\", error);\n return escapeHtml(text);\n }\n}\n\nfunction formatDate(date) {\n return new Intl.DateTimeFormat(\"en-US\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n }).format(date);\n}\n\nfunction formatDuration(seconds) {\n const minutes = Math.floor(seconds / 60);\n const secs = seconds % 60;\n return minutes > 0 ? `${minutes}m ${secs}s` : `${secs}s`;\n}\n\n// Event Listeners\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n console.log(\"🎬 DOM Content Loaded - Initializing app...\");\n\n // Login\n console.log(\"🔗 Setting up event listeners...\");\n document.getElementById(\"login-btn\").addEventListener(\"click\", login);\n document.getElementById(\"username-input\").addEventListener(\"keypress\", (e) => {\n if (e.key === \"Enter\") login();\n });\n\n // Navigation\n document.getElementById(\"logout-btn\").addEventListener(\"click\", logout);\n document.getElementById(\"view-stats-btn\").addEventListener(\"click\", viewStats);\n document.getElementById(\"backup-btn\").addEventListener(\"click\", showBackup);\n\n // Deck management\n document.getElementById(\"create-deck-btn\").addEventListener(\"click\", createDeck);\n document.getElementById(\"save-deck-btn\").addEventListener(\"click\", saveDeck);\n document.getElementById(\"cancel-deck-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n document.getElementById(\"back-to-decks-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n\n // Card management\n document.getElementById(\"add-card-btn\").addEventListener(\"click\", addCard);\n document.getElementById(\"save-card-btn\").addEventListener(\"click\", saveCard);\n document.getElementById(\"cancel-card-btn\").addEventListener(\"click\", cancelCard);\n document.getElementById(\"study-deck-btn\").addEventListener(\"click\", () => {\n studyDeck(currentDeckId);\n });\n document.getElementById(\"back-to-decks-from-cards-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n loadDecks();\n });\n\n // Study mode\n document.getElementById(\"flip-card-btn\").addEventListener(\"click\", flipCard);\n document.querySelectorAll(\".rating-btn\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n rateCard(parseInt(btn.dataset.rating));\n });\n });\n document.getElementById(\"end-session-btn\").addEventListener(\"click\", endStudySession);\n document.getElementById(\"finish-study-btn\").addEventListener(\"click\", finishStudy);\n document.getElementById(\"back-to-cards-btn\").addEventListener(\"click\", () => {\n stopStudyTimer();\n viewCards(currentDeckId);\n });\n\n // Statistics\n document.getElementById(\"back-to-decks-from-stats-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n\n // Backup/Restore\n document.getElementById(\"back-to-decks-from-backup-btn\").addEventListener(\"click\", () => {\n showAppInnerView(\"deck-list-view\");\n });\n document.getElementById(\"download-backup-btn\").addEventListener(\"click\", downloadBackup);\n document.getElementById(\"restore-backup-btn\").addEventListener(\"click\", restoreBackup);\n\n // Check for existing session\n const savedUsername = sessionStorage.getItem(\"flashcard_username\");\n console.log(\"💾 Saved username from session:\", savedUsername);\n if (savedUsername) {\n console.log(\"🔄 Auto-logging in with saved username...\");\n document.getElementById(\"username-input\").value = savedUsername;\n login();\n } else {\n console.log(\"👋 No saved session, showing login screen\");\n }\n\n console.log(\"✨ App initialization complete\");\n});\n\n// Make functions globally accessible for onclick handlers\nwindow.studyDeck = studyDeck;\nwindow.viewCards = viewCards;\nwindow.editDeck = editDeck;\nwindow.deleteDeck = deleteDeck;\nwindow.editCard = editCard;\nwindow.editCardInline = editCardInline;\nwindow.saveCardInline = saveCardInline;\nwindow.cancelCardInline = cancelCardInline;\nwindow.deleteCard = deleteCard;\n\n",[],[190,277],"c85b92f4-befd-11f0-b938-42dde27851f2","index.html","a26fe61e-bef6-11f0-9594-42dde27851f2",93,["D",1762865764584],19,"\n\n\n \n \n Flashcard Learning App\n \n \n \n \n\n\n\n \n \n\n \n

\n \n \n\n

\n\n \n

My Decks

\n \n

No decks yet

Create your first deck to get started!

\n\n \n

\n \n

Create Deck

\n \n \n

\n\n \n

\n \n

\n \n \n

\n\n \n

Add Card

💡 Tip: You can use Markdown! Try **bold**, *italic*, lists, code, etc.

\n \n \n

\n\n \n

\n \n

No cards yet

Add your first card to start learning!

\n\n \n

\n \n\n

\n Card 1 of 0\n · ⏱️ 0:00\n

\n \n

\n\n \n

\n \n

\n\n

\n \n \n \n \n

\n\n

🎉 Session Complete!

\n Reviewed 0 cards\n

\n Accuracy: 0%\n

\n \n

\n\n \n

\n \n\n

📊 Your Statistics

\n\n \n

Total Cards

Total Reviews

0h 0m

Study Time

Accuracy

\n\n \n

Study Sessions

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

Date	Deck	Duration	Cards	Accuracy

No study sessions yet

\n\n \n

\n \n\n

💾 Backup & Restore

\n\n \n

Export Data

Download all your decks, cards, and study sessions as a JSON file.

\n \n

\n\n \n

Import Data

Restore your data from a previously exported JSON file.

⚠️ Warning: This will replace all your current data!

\n \n \n

\n\n

\n\n \n\n\n\n",[],[190,285],"217d2958-bef7-11f0-914a-42dde27851f2","217d2a3e-bef7-11f0-914a-42dde27851f2",24,["D",1762862907645],"# Frontend\n\nThis directory contains the client-side code for the Flashcard Learning App.\n\n## Files\n\n- **index.html** - Single-page application with all views and layouts\n- **index.js** - Client-side JavaScript for UI logic and API calls\n\n## Views\n\nThe app uses a view-based navigation system where views are shown/hidden:\n\n1. **Login View** - Username entry\n2. **Deck List View** - Dashboard showing all decks\n3. **Deck Editor View** - Create/edit deck form\n4. **Card Manager View** - List and manage cards in a deck\n5. **Study View** - Spaced repetition study session\n6. **Statistics View** - Performance metrics and history\n7. **Backup View** - Data export/import\n\n## Key Features\n\n### Card Flip Animation\nCSS 3D transforms create realistic card flipping effect:\n- Front shows question\n- Back shows answer\n- Smooth 0.6s transition\n\n### Study Timer\nReal-time timer tracks session duration:\n- Updates every second\n- Displays as MM:SS format\n- Stops when session ends\n\n### Session Persistence\nUsername stored in `sessionStorage` for auto-login on page reload.\n\n## State Management\n\nGlobal state variables in `index.js`:\n- `currentUser` - Logged-in username\n- `userData` - Full user data object\n- `currentDeckId` - Active deck being viewed/studied\n- `studyCards` - Cards in current study session\n- `sessionStartTime` - Study session start time\n- `sessionCorrectCount` - Correct answers counter\n\n## API Communication\n\nAll API calls use the `apiCall()` wrapper:\n- Adds `X-Username` header automatically\n- Handles JSON parsing\n- Provides error handling with user feedback\n\n## Styling\n\n- **TailwindCSS** via CDN for utility-first styling\n- **Custom CSS** for card flip animations\n- **Responsive design** works on mobile and desktop\n\n## Adding New Features\n\n1. Add HTML in `index.html` (or create new view)\n2. Add JavaScript logic in `index.js`\n3. Connect event listeners in DOMContentLoaded\n4. Style with TailwindCSS classes\n\n",[],[190,148],["D",1762862694272],[222,223,224],[190],"e2d87c22-befe-11f0-8f01-42dde27851f2","storage.ts","60ec6b54-bef6-11f0-8b97-42dde27851f2",100,["D",1762866238514],"import { blob } from \"https://esm.town/v/std/blob\";\nimport type { UserData, UserStats } from \"../shared/types.ts\";\n\n// Storage version - increment when making breaking changes to data structure\nconst STORAGE_VERSION = \"v1\";\n\n/**\n * Get user data from blob storage\n * Creates new user data if it doesn't exist\n */\nexport async function getUserData(username: string): Promise {\n // Normalize username to lowercase for consistency\n const normalizedUsername = username.toLowerCase().trim();\n const key = `flashcard_user_${normalizedUsername}:${STORAGE_VERSION}`;\n\n try {\n const data = await blob.getJSON(key);\n if (data) {\n return data as UserData;\n }\n } catch (error) {\n // User doesn't exist yet, will create new\n }\n\n // Initialize new user\n const newUser: UserData = {\n username: normalizedUsername,\n decks: [],\n cards: [],\n sessions: [],\n stats: {\n totalCards: 0,\n totalReviews: 0,\n totalTime: 0,\n averageAccuracy: 0,\n },\n };\n\n await saveUserData(normalizedUsername, newUser);\n return newUser;\n}\n\n/**\n * Save user data to blob storage\n */\nexport async function saveUserData(\n username: string,\n data: UserData\n): Promise {\n // Normalize username to lowercase for consistency\n const normalizedUsername = username.toLowerCase().trim();\n const key = `flashcard_user_${normalizedUsername}:${STORAGE_VERSION}`;\n await blob.setJSON(key, data);\n}\n\n/**\n * Update user statistics\n */\nexport function updateUserStats(data: UserData): void {\n const totalCorrect = data.sessions.reduce(\n (sum, session) => sum + session.correctCount,\n 0\n );\n const totalReviewed = data.sessions.reduce(\n (sum, session) => sum + session.cardsReviewed,\n 0\n );\n\n data.stats = {\n totalCards: data.cards.length,\n totalReviews: totalReviewed,\n totalTime: data.sessions.reduce((sum, session) => sum + session.duration, 0),\n averageAccuracy: totalReviewed > 0 ? (totalCorrect / totalReviewed) * 100 : 0,\n };\n}\n\n",[],[196,304],"81af052c-bef6-11f0-9f19-42dde27851f2","index.ts","81af0626-bef6-11f0-9f19-42dde27851f2",16,["D",1762862639537],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { serveFile, readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport auth from \"./routes/auth.ts\";\nimport decks from \"./routes/decks.ts\";\nimport cards from \"./routes/cards.ts\";\nimport study from \"./routes/study.ts\";\nimport stats from \"./routes/stats.ts\";\nimport backup from \"./routes/backup.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Mount API routes\napp.route(\"/api/auth\", auth);\napp.route(\"/api/decks\", decks);\napp.route(\"/api/cards\", cards);\napp.route(\"/api/study\", study);\napp.route(\"/api/stats\", stats);\napp.route(\"/api/backup\", backup);\n\n// Serve static frontend files\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Serve main HTML page\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;\n\n",[],[196,312],"1b177af0-bef7-11f0-9a02-42dde27851f2","1b177be0-bef7-11f0-9a02-42dde27851f2",23,["D",1762862896913],"# Backend\n\nThis directory contains the server-side code for the Flashcard Learning App.\n\n## Structure\n\n- **index.ts** - Main Hono app setup, route mounting, and static file serving\n- **storage.ts** - Blob storage utilities for user data persistence\n- **routes/** - API endpoint implementations\n\n## Routes\n\n### auth.ts\n- Handles user login and initialization\n- Creates new user data if doesn't exist\n\n### decks.ts\n- CRUD operations for flashcard decks\n- Cascade deletion of cards when deck is deleted\n\n### cards.ts\n- CRUD operations for flashcards\n- Validates deck existence before card creation\n\n### study.ts\n- Fetches due cards based on spaced repetition\n- Processes card reviews and updates SM-2 parameters\n\n### stats.ts\n- Retrieves user statistics\n- Saves completed study sessions\n\n### backup.ts\n- Exports user data as JSON\n- Imports user data from JSON backup\n\n## Key Patterns\n\n### Authentication\nAll routes (except login) require `X-Username` header for user identification.\n\n### Error Handling\nHono's `onError` is configured to throw errors for full stack traces.\n\n### Data Flow\n1. Load user data from blob storage\n2. Perform in-memory operations\n3. Save back to blob storage\n\n## Adding New Routes\n\n1. Create new file in `routes/`\n2. Export a Hono instance\n3. Mount in `index.ts` with `app.route()`\n4. Add `X-Username` header check if needed\n\n",[],[196,148],"73d386d0-bef6-11f0-a0cd-42dde27851f2","study.ts","73d3878e-bef6-11f0-a0cd-42dde27851f2","65ea71d2-bef6-11f0-bf10-42dde27851f2",13,["D",1762862616288],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport { calculateNextReview, isCardDue, Rating } from \"../../shared/types.ts\";\n\nconst study = new Hono();\n\n// Get due cards for a deck\nstudy.get(\"/:deckId\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"deckId\");\n const userData = await getUserData(username);\n\n // Get all cards in the deck that are due for review\n const dueCards = userData.cards\n .filter((card) => card.deckId === deckId && isCardDue(card))\n .sort((a, b) => {\n // Sort by next review date (earlier cards first)\n return new Date(a.nextReview).getTime() - new Date(b.nextReview).getTime();\n });\n\n return c.json(dueCards);\n});\n\n// Process a card review\nstudy.post(\"/review\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { cardId, rating } = await c.req.json();\n\n if (!cardId || rating === undefined) {\n return c.json({ error: \"cardId and rating are required\" }, 400);\n }\n\n if (![Rating.Again, Rating.Hard, Rating.Good, Rating.Easy].includes(rating)) {\n return c.json({ error: \"Invalid rating\" }, 400);\n }\n\n const userData = await getUserData(username);\n const card = userData.cards.find((c) => c.id === cardId);\n\n if (!card) {\n return c.json({ error: \"Card not found\" }, 404);\n }\n\n // Calculate next review using SM-2 algorithm\n const reviewResult = calculateNextReview(card, rating);\n\n // Update card\n card.easeFactor = reviewResult.easeFactor;\n card.interval = reviewResult.interval;\n card.nextReview = reviewResult.nextReview;\n card.reviewCount++;\n\n await saveUserData(username, userData);\n\n return c.json({\n card,\n reviewResult,\n });\n});\n\nexport default study;\n\n",[],[196,335,327],"routes","54bb7928-bef7-11f0-9fe1-42dde27851f2","stats.ts","77340e3a-bef6-11f0-aee4-42dde27851f2",32,["D",1762862993541],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData, updateUserStats } from \"../storage.ts\";\nimport { generateId } from \"../../shared/types.ts\";\nimport type { StudySession } from \"../../shared/types.ts\";\n\nconst stats = new Hono();\n\n// Get user statistics\nstats.get(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const userData = await getUserData(username);\n updateUserStats(userData);\n\n return c.json({\n stats: userData.stats,\n sessions: userData.sessions,\n });\n});\n\n// Save completed study session\nstats.post(\"/sessions\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { deckId, duration, cardsReviewed, correctCount } = await c.req.json();\n\n if (deckId === undefined || duration === undefined ||\n cardsReviewed === undefined || correctCount === undefined) {\n return c.json(\n { error: \"deckId, duration, cardsReviewed, and correctCount are required\" },\n 400\n );\n }\n\n const userData = await getUserData(username);\n\n // Get deck name\n const deck = userData.decks.find((d) => d.id === deckId);\n const deckName = deck ? deck.name : \"Unknown Deck\";\n\n const newSession: StudySession = {\n id: generateId(),\n date: new Date().toISOString(),\n deckId,\n deckName,\n duration,\n cardsReviewed,\n correctCount,\n };\n\n userData.sessions.push(newSession);\n updateUserStats(userData);\n await saveUserData(username, userData);\n\n return c.json(newSession, 201);\n});\n\nexport default stats;\n\n",[],[196,335,337],"6b04dac2-bef6-11f0-bd0b-42dde27851f2","decks.ts","6b04db94-bef6-11f0-bd0b-42dde27851f2",11,["D",1762862601508],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport { generateId } from \"../../shared/types.ts\";\nimport type { Deck } from \"../../shared/types.ts\";\n\nconst decks = new Hono();\n\n// Get all decks\ndecks.get(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const userData = await getUserData(username);\n return c.json(userData.decks);\n});\n\n// Create a new deck\ndecks.post(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { name, description } = await c.req.json();\n\n if (!name || name.trim().length === 0) {\n return c.json({ error: \"Deck name is required\" }, 400);\n }\n\n const userData = await getUserData(username);\n\n const newDeck: Deck = {\n id: generateId(),\n name: name.trim(),\n description: description?.trim() || \"\",\n createdAt: new Date().toISOString(),\n };\n\n userData.decks.push(newDeck);\n await saveUserData(username, userData);\n\n return c.json(newDeck, 201);\n});\n\n// Update a deck\ndecks.put(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"id\");\n const { name, description } = await c.req.json();\n\n const userData = await getUserData(username);\n const deck = userData.decks.find((d) => d.id === deckId);\n\n if (!deck) {\n return c.json({ error: \"Deck not found\" }, 404);\n }\n\n if (name !== undefined) deck.name = name.trim();\n if (description !== undefined) deck.description = description.trim();\n\n await saveUserData(username, userData);\n return c.json(deck);\n});\n\n// Delete a deck and all its cards\ndecks.delete(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"id\");\n const userData = await getUserData(username);\n\n // Remove deck\n const deckIndex = userData.decks.findIndex((d) => d.id === deckId);\n if (deckIndex === -1) {\n return c.json({ error: \"Deck not found\" }, 404);\n }\n\n userData.decks.splice(deckIndex, 1);\n\n // Remove all cards in the deck\n userData.cards = userData.cards.filter((card) => card.deckId !== deckId);\n\n // Remove sessions for this deck\n userData.sessions = userData.sessions.filter(\n (session) => session.deckId !== deckId\n );\n\n await saveUserData(username, userData);\n return c.json({ success: true });\n});\n\nexport default decks;\n\n",[],[196,335,345],"6fb38956-bef6-11f0-bd35-42dde27851f2","cards.ts","6fb38a5a-bef6-11f0-bd35-42dde27851f2",12,["D",1762862609367],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport { generateId } from \"../../shared/types.ts\";\nimport type { Card } from \"../../shared/types.ts\";\n\nconst cards = new Hono();\n\n// Get all cards in a deck\ncards.get(\"/deck/:deckId\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const deckId = c.req.param(\"deckId\");\n const userData = await getUserData(username);\n const deckCards = userData.cards.filter((card) => card.deckId === deckId);\n\n return c.json(deckCards);\n});\n\n// Create a new card\ncards.post(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const { deckId, front, back } = await c.req.json();\n\n if (!deckId || !front || !back) {\n return c.json(\n { error: \"deckId, front, and back are required\" },\n 400\n );\n }\n\n const userData = await getUserData(username);\n\n // Verify deck exists\n const deck = userData.decks.find((d) => d.id === deckId);\n if (!deck) {\n return c.json({ error: \"Deck not found\" }, 404);\n }\n\n const newCard: Card = {\n id: generateId(),\n deckId,\n front: front.trim(),\n back: back.trim(),\n easeFactor: 2.5,\n interval: 0,\n nextReview: new Date().toISOString(), // Due immediately for new cards\n reviewCount: 0,\n };\n\n userData.cards.push(newCard);\n await saveUserData(username, userData);\n\n return c.json(newCard, 201);\n});\n\n// Update a card\ncards.put(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const cardId = c.req.param(\"id\");\n const { front, back } = await c.req.json();\n\n const userData = await getUserData(username);\n const card = userData.cards.find((c) => c.id === cardId);\n\n if (!card) {\n return c.json({ error: \"Card not found\" }, 404);\n }\n\n if (front !== undefined) card.front = front.trim();\n if (back !== undefined) card.back = back.trim();\n\n await saveUserData(username, userData);\n return c.json(card);\n});\n\n// Delete a card\ncards.delete(\"/:id\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const cardId = c.req.param(\"id\");\n const userData = await getUserData(username);\n\n const cardIndex = userData.cards.findIndex((c) => c.id === cardId);\n if (cardIndex === -1) {\n return c.json({ error: \"Card not found\" }, 404);\n }\n\n userData.cards.splice(cardIndex, 1);\n await saveUserData(username, userData);\n\n return c.json({ success: true });\n});\n\nexport default cards;\n\n",[],[196,335,353],"54c75d92-bef7-11f0-92b2-42dde27851f2","backup.ts","7a21eda6-bef6-11f0-a7da-42dde27851f2",33,["D",1762862993697],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData, saveUserData } from \"../storage.ts\";\nimport type { UserData } from \"../../shared/types.ts\";\n\nconst backup = new Hono();\n\n// Export all user data as JSON\nbackup.get(\"/\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const userData = await getUserData(username);\n\n // Return as downloadable JSON\n return c.json(userData, 200, {\n \"Content-Disposition\": `attachment; filename=\"flashcard-backup-${username}-${Date.now()}.json\"`,\n });\n});\n\n// Restore user data from JSON backup\nbackup.post(\"/restore\", async (c) => {\n const username = c.req.header(\"X-Username\");\n if (!username) {\n return c.json({ error: \"Username header required\" }, 401);\n }\n\n const backupData = await c.req.json() as UserData;\n\n // Validate backup data structure\n if (!backupData.username || !Array.isArray(backupData.decks) ||\n !Array.isArray(backupData.cards) || !Array.isArray(backupData.sessions)) {\n return c.json({ error: \"Invalid backup data format\" }, 400);\n }\n\n // Override username with current user\n backupData.username = username;\n\n await saveUserData(username, backupData);\n\n return c.json({ success: true, message: \"Backup restored successfully\" });\n});\n\nexport default backup;\n\n",[],[196,335,361],"d65182d2-befe-11f0-9a0a-42dde27851f2","auth.ts","6605cea0-bef6-11f0-ae62-42dde27851f2",98,["D",1762866217496],"import { Hono } from \"https://esm.sh/hono@4.0.2\";\nimport { getUserData } from \"../storage.ts\";\n\nconst auth = new Hono();\n\n// Login - Load or initialize user data\nauth.post(\"/login\", async (c) => {\n const { username } = await c.req.json();\n\n if (!username || username.trim().length === 0) {\n return c.json({ error: \"Username is required\" }, 400);\n }\n\n // Normalize username to lowercase\n const normalizedUsername = username.toLowerCase().trim();\n const userData = await getUserData(normalizedUsername);\n return c.json(userData);\n});\n\nexport default auth;\n\n",[],[196,335,369],"65ea710a-bef6-11f0-bf10-42dde27851f2",9,["D",1762862592951],[212,213,214,215,216,217],[196,335],["D",1762862584356],[211,218,219,220],[196],["D",1762862116973],{"_11":12,"_88":84},{"_11":12,"_82":-5,"_83":84,"_45":46,"_85":86,"_87":38},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":-5,"_32":-5,"_77":-5,"_78":-5,"_79":-5,"_80":14,"_81":12},"ctx",{"_70":-5,"_110":421,"_422":423,"_424":425,"_426":38,"_427":38,"_428":38,"_429":50,"_430":-5,"_431":-7,"_432":-7,"_433":54,"_434":38,"_435":38,"_436":-5,"_437":38,"_438":38,"_439":38,"_440":-5},"ENV",{"_392":393,"_394":395,"_396":26,"_397":398,"_399":400,"_401":402,"_403":404,"_405":406,"_407":408,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Hi

${escapeHtml(deck.name)}

📚 Flashcard Learning

My Decks

Create Deck

Add Card

🎉 Session Complete!

📊 Your Statistics

Study Sessions

💾 Backup & Restore

Export Data

Import Data

Branches1

Branches
1