[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_271":272,"_273":274},"routes/_app.x.$handle.$name",{"_99":98,"_32":46,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":126,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/FlashCards.tsx","latestPath","fileId","5280c30e-7de0-11f1-bc93-1607ee4eb77e","name","FlashCards.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { speak } from \"./speech.ts\";\n\ninterface Field {\n id: number;\n name: string;\n side: string;\n speak: number;\n sort_order: number;\n}\n\ninterface Word {\n id: number;\n data: Record;\n}\n\nexport default function FlashCards({ fields, words }: { fields: Field[]; words: Word[] }) {\n const [index, setIndex] = useState(0);\n const [flipped, setFlipped] = useState(false);\n const [slide, setSlide] = useState(\"\");\n const start = useRef<{ x: number; y: number } | null>(null);\n const swiped = useRef(false);\n\n const frontFields = fields.filter((f) => f.side === \"front\");\n const backFields = fields.filter((f) => f.side !== \"front\");\n const n = words.length;\n\n if (!n) {\n return

単語がまだ登録されていません

{i + 1} / {n}

\n\n setSlide(\"\")}\n >\n \n {/* 表面 */}\n speak(frontText)}\n >\n {frontFields.map((f) => (\n

\n {val(f)}\n

\n ))}\n

🔊 タップで発音　⇄ 横スワイプでめくる

\n\n {/* 裏面 */}\n

\n {backFields.map((f) => (\n

{f.name}

\n {f.speak ? (\n { e.stopPropagation(); speak(val(f)); }}\n >\n 🔊\n {val(f)}\n \n ) : (\n

\n {val(f)}\n

\n )}\n

\n ))}\n

\n \n \n\n

\n \n \n \n

↕ 上下スワイプで前後のカードへ

\n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { speak } from \"./speech.ts\";\n\ninterface Field {\n id: number;\n name: string;\n side: string;\n speak: number;\n sort_order: number;\n}\n\ninterface Word {\n id: number;\n data: Record;\n}\n\nexport default function FlashCards({ fields, words }: { fields: Field[]; words: Word[] }) {\n const [index, setIndex] = useState(0);\n const [flipped, setFlipped] = useState(false);\n const [slide, setSlide] = useState(\"\");\n const start = useRef<{ x: number; y: number } | null>(null);\n const handled = useRef(false);\n const captured = useRef(false);\n const swiped = useRef(false);\n\n const frontFields = fields.filter((f) => f.side === \"front\");\n const backFields = fields.filter((f) => f.side !== \"front\");\n const n = words.length;\n\n if (!n) {\n return

単語がまだ登録されていません

;\n }\n\n const i = ((index % n) + n) % n;\n const word = words[i];\n const val = (f: Field) => word.data[String(f.id)] ?? \"\";\n const frontText = frontFields.map(val).filter(Boolean).join(\", \");\n\n const go = (dir: number) => {\n setFlipped(false);\n setSlide(dir > 0 ? \"slide-next\" : \"slide-prev\");\n setIndex((p) => ((p + dir) % n + n) % n);\n };\n\n // Gesture handling: act as soon as the movement threshold is crossed\n // (during pointermove), instead of waiting for pointerup. The pointer is\n // captured once a drag starts so the gesture completes even when the\n // pointer leaves the card (mouse drag on PC) or crosses the speak button\n // / back face (touch on mobile).\n const onPointerDown = (e: any) => {\n start.current = { x: e.clientX, y: e.clientY };\n handled.current = false;\n captured.current = false;\n swiped.current = false;\n };\n\n const onPointerMove = (e: any) => {\n if (!start.current || handled.current) return;\n const dx = e.clientX - start.current.x;\n const dy = e.clientY - start.current.y;\n\n // Capture only after real movement so plain taps still deliver\n // normal click events to the card / speak buttons.\n if (!captured.current && (Math.abs(dx) > 8 || Math.abs(dy) > 8)) {\n captured.current = true;\n try {\n e.currentTarget.setPointerCapture(e.pointerId);\n } catch { /* capture unsupported */ }\n }\n\n if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.2) {\n handled.current = true;\n swiped.current = true;\n setFlipped((f) => !f);\n } else if (Math.abs(dy) > 50 && Math.abs(dy) > Math.abs(dx) * 1.2) {\n handled.current = true;\n swiped.current = true;\n go(dy < 0 ? 1 : -1);\n }\n };\n\n const onPointerEnd = (e: any) => {\n start.current = null;\n if (captured.current) {\n try {\n e.currentTarget.releasePointerCapture(e.pointerId);\n } catch { /* already released */ }\n captured.current = false;\n }\n };\n\n // Swallow the click that fires right after a swipe so it doesn't trigger speech\n const onClickCapture = (e: any) => {\n if (swiped.current) {\n e.stopPropagation();\n e.preventDefault();\n swiped.current = false;\n }\n };\n\n return (\n

{i + 1} / {n}

\n\n setSlide(\"\")}\n >\n \n {/* 表面 */}\n speak(frontText)}\n >\n {frontFields.map((f) => (\n

\n {val(f)}\n

\n ))}\n

🔊 タップで発音　⇄ 横スワイプでめくる

\n\n {/* 裏面 — overflow は hidden にする（スクロール可能領域があると\n モバイルブラウザがスワイプを横取りしてしまうため） */}\n

\n {backFields.map((f) => (\n

{f.name}

\n {f.speak ? (\n { e.stopPropagation(); speak(val(f)); }}\n >\n 🔊\n {val(f)}\n \n ) : (\n

\n {val(f)}\n

\n )}\n

\n ))}\n

\n \n \n\n

\n \n \n \n

↕ 上下スワイプで前後のカードへ

\n \n );\n}\n","createdAt",["D",1783855077676],"branchVersion","branchId","b3e7c51c-aea8-4acd-9488-a54b3a91aca6","id","6e165e38-56b2-4876-b810-9593b0bda755","pronunciation-flashcards",["D",1783853674493],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","発音単語帳 - English pronunciation flashcards app","imageUrl","2e5f3a11-3ecf-4768-a436-abfe0467880b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019f3378-c037-7109-869d-8900c383fcb3","tursoName","6e165e3856b24876b8109593b0bda755","tursoHostname","6e165e3856b24876b8109593b0bda755-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789560647748],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":56,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"isOwned",27,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yoshiokaren","handle","displayName","吉岡蓮","avatar","https://lh3.googleusercontent.com/a/ACg8ocJoAQzKMObUH_Y10IrLwHP-VLUVThbIP7Q-p0QkGvJB2Re_AQ=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":266,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":-5,"_58":25,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":267,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":268,"_83":269,"_85":270,"_87":25},"tree",[169,172,181],"files",[169,170,171,172,173,174,175,176,177,178,179,180,181],"counts",{"_159":62,"_160":141,"_161":62,"_162":163,"_164":165},"contents",[131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_44":153,"_32":154,"_30":155,"_137":-5,"_42":43,"_41":156,"_139":126,"_39":157,"_13":62,"_34":151,"_36":-5,"_24":25,"_144":-5,"_27":158},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":126,"_39":150,"_13":62,"_34":151,"_36":-5,"_24":25,"_144":-5,"_27":152},{"_44":134,"_32":135,"_30":136,"_137":-5,"_42":43,"_41":138,"_139":25,"_39":140,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_27":145},"fb436230-b81b-452e-bb6b-330bb71e25a7","main.ts","1183fb6e-7de0-11f1-9593-1607ee4eb77e","parentId",12,"latest",["D",1783853849113],1,"http","import { Hono } from \"npm:hono\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { initDb } from \"./backend/db.ts\";\nimport {\n bearerToken,\n createSession,\n deleteSession,\n getUserFromRequest,\n hashPassword,\n newSalt,\n} from \"./backend/auth.ts\";\n\nawait initDb();\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ---------- auth ----------\n\napp.post(\"/api/register\", async (c) => {\n const { username, password } = await c.req.json().catch(() => ({}));\n if (!username || typeof username !== \"string\" || !password || String(password).length < 6) {\n return c.json({ error: \"ユーザー名と6文字以上のパスワードを入力してください\" }, 400);\n }\n const existing = await sqlite.execute({ sql: \"SELECT id FROM users WHERE username = ?\", args: [username] });\n if (existing.rows.length) return c.json({ error: \"このユーザー名は既に使われています\" }, 409);\n const salt = newSalt();\n const hash = await hashPassword(password, salt);\n const res = await sqlite.execute({\n sql: \"INSERT INTO users (username, password_hash, salt, is_admin) VALUES (?, ?, ?, 0)\",\n args: [username, hash, salt],\n });\n const userId = Number(res.lastInsertRowid);\n const token = await createSession(userId);\n return c.json({ token, user: { id: userId, username, isAdmin: false } });\n});\n\napp.post(\"/api/login\", async (c) => {\n const { username, password } = await c.req.json().catch(() => ({}));\n if (!username || !password) return c.json({ error: \"ユーザー名とパスワードを入力してください\" }, 400);\n const res = await sqlite.execute({ sql: \"SELECT * FROM users WHERE username = ?\", args: [username] });\n if (!res.rows.length) return c.json({ error: \"ユーザー名またはパスワードが違います\" }, 401);\n const u = res.rows[0] as Record;\n const hash = await hashPassword(String(password), String(u.salt));\n if (hash !== String(u.password_hash)) return c.json({ error: \"ユーザー名またはパスワードが違います\" }, 401);\n const token = await createSession(Number(u.id));\n return c.json({\n token,\n user: { id: Number(u.id), username: String(u.username), isAdmin: Number(u.is_admin) === 1 },\n });\n});\n\nconst requireAuth = async (c: any, next: any) => {\n const user = await getUserFromRequest(c.req.raw);\n if (!user) return c.json({ error: \"ログインが必要です\" }, 401);\n c.set(\"user\", user);\n await next();\n};\n\nconst requireAdmin = async (c: any, next: any) => {\n const user = c.get(\"user\");\n if (!user?.isAdmin) return c.json({ error: \"管理者権限が必要です\" }, 403);\n await next();\n};\n\napp.post(\"/api/logout\", requireAuth, async (c) => {\n const token = bearerToken(c.req.raw);\n if (token) await deleteSession(token);\n return c.json({ ok: true });\n});\n\napp.get(\"/api/me\", requireAuth, (c) => {\n const user = c.get(\"user\");\n return c.json({ user: { id: user.id, username: user.username, isAdmin: user.isAdmin } });\n});\n\n// ---------- data (any logged-in user) ----------\n\napp.get(\"/api/data\", requireAuth, async (c) => {\n const [fields, words] = await Promise.all([\n sqlite.execute(\"SELECT * FROM fields ORDER BY sort_order, id\"),\n sqlite.execute(\"SELECT * FROM words ORDER BY id\"),\n ]);\n return c.json({\n fields: fields.rows.map((r: any) => ({\n id: Number(r.id),\n name: String(r.name),\n side: String(r.side),\n speak: Number(r.speak),\n sort_order: Number(r.sort_order),\n })),\n words: words.rows.map((r: any) => ({ id: Number(r.id), data: JSON.parse(String(r.data)) })),\n });\n});\n\n// ---------- admin ----------\n\napp.use(\"/api/admin/*\", requireAuth, requireAdmin);\n\napp.post(\"/api/admin/fields\", async (c) => {\n const { name, side, speak } = await c.req.json().catch(() => ({}));\n if (!name || typeof name !== \"string\" || !name.trim()) return c.json({ error: \"項目名を入力してください\" }, 400);\n const s = side === \"front\" ? \"front\" : \"back\";\n const max = await sqlite.execute(\"SELECT COALESCE(MAX(sort_order), 0) AS m FROM fields\");\n const res = await sqlite.execute({\n sql: \"INSERT INTO fields (name, side, speak, sort_order) VALUES (?, ?, ?, ?)\",\n args: [name.trim(), s, speak ? 1 : 0, Number((max.rows[0] as any).m) + 1],\n });\n return c.json({ ok: true, id: Number(res.lastInsertRowid) });\n});\n\napp.delete(\"/api/admin/fields/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const f = await sqlite.execute({ sql: \"SELECT * FROM fields WHERE id = ?\", args: [id] });\n if (!f.rows.length) return c.json({ error: \"項目が見つかりません\" }, 404);\n if (String((f.rows[0] as any).side) === \"front\") {\n const fronts = await sqlite.execute(\"SELECT COUNT(*) AS n FROM fields WHERE side = 'front'\");\n if (Number((fronts.rows[0] as any).n) <= 1) {\n return c.json({ error: \"表面に表示する項目が無くなるため削除できません\" }, 400);\n }\n }\n await sqlite.execute({ sql: \"DELETE FROM fields WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\napp.post(\"/api/admin/words\", async (c) => {\n const { data } = await c.req.json().catch(() => ({}));\n if (!data || typeof data !== \"object\" || Array.isArray(data)) {\n return c.json({ error: \"データの形式が不正です\" }, 400);\n }\n const clean: Record = {};\n for (const [k, v] of Object.entries(data)) {\n if (typeof v === \"string\" && v.trim()) clean[k] = v.trim();\n }\n if (!Object.keys(clean).length) return c.json({ error: \"少なくとも1つの項目を入力してください\" }, 400);\n const res = await sqlite.execute({\n sql: \"INSERT INTO words (data) VALUES (?)\",\n args: [JSON.stringify(clean)],\n });\n return c.json({ ok: true, id: Number(res.lastInsertRowid) });\n});\n\napp.delete(\"/api/admin/words/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM words WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// ---------- frontend ----------\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\nexport default app.fetch;\n","label",[135],"13a74445-c574-4f4f-b085-d54ce5b1f523","frontend","873be4d0-fa78-4b5f-83d1-d5e8d1bd0fae",4,["D",1783853732693],"directory",[147],"220ad4f1-5d52-4c85-b95d-d8681cf9dbf8","backend","bc0cc0c3-e517-4e74-9e58-d314b7ca4588",2,["D",1783853691891],[154],"pulls","branches","forks","envVars",{"_166":62,"_168":62},"connections",{"_166":62,"_167":62},"count","unfilledCount","emptyCount",{"_44":153,"_32":154,"_30":155,"_137":-5,"_42":43,"_41":156,"_139":126,"_39":263,"_13":62,"_34":151,"_36":-5,"_24":25,"_144":-5,"_183":264,"_27":265},{"_44":256,"_32":257,"_30":258,"_137":155,"_42":43,"_41":156,"_139":126,"_39":259,"_13":62,"_34":35,"_36":260,"_24":25,"_144":-5,"_183":261,"_27":262},{"_44":248,"_32":249,"_30":250,"_137":155,"_42":43,"_41":251,"_139":25,"_39":252,"_13":62,"_34":35,"_36":253,"_24":25,"_144":-5,"_183":254,"_27":255},{"_44":146,"_32":147,"_30":148,"_137":-5,"_42":43,"_41":149,"_139":126,"_39":245,"_13":62,"_34":151,"_36":-5,"_24":25,"_144":-5,"_183":246,"_27":247},{"_44":237,"_32":238,"_30":239,"_137":148,"_42":43,"_41":240,"_139":25,"_39":241,"_13":62,"_34":35,"_36":242,"_24":25,"_144":-5,"_183":243,"_27":244},{"_44":229,"_32":230,"_30":231,"_137":148,"_42":43,"_41":232,"_139":25,"_39":233,"_13":62,"_34":35,"_36":234,"_24":25,"_144":-5,"_183":235,"_27":236},{"_44":225,"_32":33,"_30":31,"_137":148,"_42":43,"_41":14,"_139":25,"_39":226,"_13":141,"_34":35,"_36":38,"_24":25,"_144":-5,"_183":227,"_27":228},{"_44":217,"_32":218,"_30":219,"_137":148,"_42":43,"_41":220,"_139":126,"_39":221,"_13":62,"_34":35,"_36":222,"_24":25,"_144":-5,"_183":223,"_27":224},{"_44":209,"_32":210,"_30":211,"_137":148,"_42":43,"_41":212,"_139":126,"_39":213,"_13":62,"_34":35,"_36":214,"_24":25,"_144":-5,"_183":215,"_27":216},{"_44":202,"_32":203,"_30":204,"_137":148,"_42":43,"_41":149,"_139":126,"_39":205,"_13":62,"_34":20,"_36":206,"_24":25,"_144":-5,"_183":207,"_27":208},{"_44":194,"_32":195,"_30":196,"_137":148,"_42":43,"_41":197,"_139":126,"_39":198,"_13":62,"_34":35,"_36":199,"_24":25,"_144":-5,"_183":200,"_27":201},{"_44":186,"_32":187,"_30":188,"_137":148,"_42":43,"_41":189,"_139":25,"_39":190,"_13":62,"_34":35,"_36":191,"_24":25,"_144":-5,"_183":192,"_27":193},{"_44":134,"_32":135,"_30":136,"_137":-5,"_42":43,"_41":138,"_139":25,"_39":182,"_13":141,"_34":142,"_36":143,"_24":25,"_144":-5,"_183":184,"_27":185},["D",1783853849113],"children",[],[135],"8db7b956-119c-4929-829d-9cd11f205e2c","speech.ts","38d0a140-7de0-11f1-b3d5-1607ee4eb77e",6,["D",1783853740393],"let voices: SpeechSynthesisVoice[] = [];\n\nfunction loadVoices() {\n voices = window.speechSynthesis?.getVoices() ?? [];\n}\n\nif (\"speechSynthesis\" in window) {\n loadVoices();\n window.speechSynthesis.onvoiceschanged = loadVoices;\n}\n\nexport function speak(text: string): void {\n if (!(\"speechSynthesis\" in window) || !text) return;\n window.speechSynthesis.cancel();\n const isJapanese = /[぀-ヿ一-鿿]/.test(text);\n const lang = isJapanese ? \"ja-JP\" : \"en-US\";\n const u = new SpeechSynthesisUtterance(text);\n u.lang = lang;\n const exact = voices.find((v) => v.lang.replace(\"_\", \"-\") === lang);\n const partial = voices.find((v) => v.lang.startsWith(lang.slice(0, 2)));\n const voice = exact || partial;\n if (voice) u.voice = voice;\n u.rate = 0.95;\n window.speechSynthesis.speak(u);\n}\n",[],[147,187],"a3ee06bc-2cc7-4929-aea5-45e13f72edba","index.tsx","3e6bac62-7de0-11f1-9921-1607ee4eb77e",7,["D",1783853749849],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./App.tsx\";\n\ncreateRoot(document.getElementById(\"root\")!).render();\n",[],[147,195],"5ae790cb-8bc0-4d25-b838-0e23ec8e24c7","index.html","3432a250-7de0-11f1-babe-1607ee4eb77e",["D",1783853732693],"\n\n\n \n \n 発音単語帳\n \n \n \n\n\n

\n \n\n\n",[],[147,203],"d575e13e-f5ef-481a-b5c6-9878aac203f9","api.ts","3682dcd2-7de0-11f1-80e2-1607ee4eb77e",5,["D",1783853736579],"const KEY = \"vocab_token\";\n\nexport const getToken = (): string | null => localStorage.getItem(KEY);\nexport const setToken = (t: string | null): void => {\n if (t) localStorage.setItem(KEY, t);\n else localStorage.removeItem(KEY);\n};\n\nexport async function api(path: string, opts: RequestInit = {}): Promise {\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n ...(opts.headers as Record || {}),\n };\n const t = getToken();\n if (t) headers.Authorization = `Bearer ${t}`;\n const res = await fetch(path, { ...opts, headers });\n let data: any = {};\n try {\n data = await res.json();\n } catch { /* non-JSON response */ }\n if (!res.ok) throw new Error(data.error || `エラーが発生しました (${res.status})`);\n return data;\n}\n",[],[147,210],"f21049dc-92f1-4d50-a5ad-f9755c7beb3c","Login.tsx","4439f784-7de0-11f1-938d-1607ee4eb77e",8,["D",1783853759578],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, setToken } from \"./api.ts\";\n\nexport default function Login({ onLogin }: { onLogin: (user: any) => void }) {\n const [mode, setMode] = useState<\"login\" | \"register\">(\"login\");\n const [username, setUsername] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n const submit = async (e: any) => {\n e.preventDefault();\n setBusy(true);\n setError(\"\");\n try {\n const r = await api(mode === \"login\" ? \"/api/login\" : \"/api/register\", {\n method: \"POST\",\n body: JSON.stringify({ username, password }),\n });\n setToken(r.token);\n onLogin(r.user);\n } catch (err: any) {\n setError(err.message);\n } finally {\n setBusy(false);\n }\n };\n\n return (\n

📖

発音単語帳

タップして発音を聞ける英単語カード

\n {error &&

{error}

}\n setUsername(e.target.value)}\n placeholder=\"ユーザー名\"\n autoComplete=\"username\"\n className=\"border border-gray-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-300\"\n />\n setPassword(e.target.value)}\n placeholder=\"パスワード（6文字以上）\"\n autoComplete={mode === \"login\" ? \"current-password\" : \"new-password\"}\n className=\"border border-gray-200 rounded-xl px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-indigo-300\"\n />\n \n {busy ? \"処理中...\" : mode === \"login\" ? \"ログイン\" : \"新規登録\"}\n \n { setMode(mode === \"login\" ? \"register\" : \"login\"); setError(\"\"); }}\n className=\"text-sm text-indigo-500 hover:underline\"\n >\n {mode === \"login\" ? \"アカウントを作成する\" : \"ログイン画面へ戻る\"}\n \n \n

\n );\n}\n",[],[147,218],"7e13a832-035b-4c1b-9414-17f2f099515a",["D",1783855077676],[],[147,33],"30003fc7-afb4-4246-b8ce-715e9f812f1a","App.tsx","672a889e-7de0-11f1-a514-1607ee4eb77e",11,["D",1783853818197],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, getToken, setToken } from \"./api.ts\";\nimport Login from \"./Login.tsx\";\nimport FlashCards from \"./FlashCards.tsx\";\nimport Admin from \"./Admin.tsx\";\n\nexport default function App() {\n const [user, setUser] = useState(null);\n const [checking, setChecking] = useState(true);\n const [view, setView] = useState<\"cards\" | \"admin\">(\"cards\");\n const [data, setData] = useState(null);\n\n useEffect(() => {\n if (!getToken()) {\n setChecking(false);\n return;\n }\n api(\"/api/me\")\n .then((r) => setUser(r.user))\n .catch(() => setToken(null))\n .finally(() => setChecking(false));\n }, []);\n\n const refresh = useCallback(async () => {\n const d = await api(\"/api/data\");\n setData(d);\n }, []);\n\n useEffect(() => {\n if (user) refresh().catch((e) => console.error(e));\n }, [user, refresh]);\n\n const logout = async () => {\n try {\n await api(\"/api/logout\", { method: \"POST\" });\n } catch { /* session may already be gone */ }\n setToken(null);\n setUser(null);\n setData(null);\n setView(\"cards\");\n };\n\n if (checking) {\n return

読み込み中...

;\n }\n if (!user) return ;\n\n const tab = (active: boolean) =>\n `px-3 py-1.5 rounded-lg text-sm transition ${active ? \"bg-indigo-600 text-white font-bold\" : \"text-gray-600 hover:bg-indigo-50\"}`;\n\n return (\n

📖 発音単語帳

\n \n

\n\n

\n {!data ? (\n

読み込み中...

\n ) : view === \"admin\" && user.isAdmin ? (\n \n ) : (\n \n )}\n

\n\n \n

\n );\n}\n",[],[147,230],"9daf8047-64fc-4bdb-806c-8719d6ff2d07","Admin.tsx","61518896-7de0-11f1-bd63-1607ee4eb77e",10,["D",1783853808398],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"./api.ts\";\n\nexport default function Admin({ fields, words, refresh }: { fields: any[]; words: any[]; refresh: () => Promise }) {\n const [newField, setNewField] = useState({ name: \"\", side: \"back\", speak: false });\n const [newWord, setNewWord] = useState>({});\n const [error, setError] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n const run = async (fn: () => Promise) => {\n setBusy(true);\n setError(\"\");\n try {\n await fn();\n await refresh();\n } catch (e: any) {\n setError(e.message);\n } finally {\n setBusy(false);\n }\n };\n\n const addField = () => run(async () => {\n if (!newField.name.trim()) throw new Error(\"項目名を入力してください\");\n await api(\"/api/admin/fields\", { method: \"POST\", body: JSON.stringify(newField) });\n setNewField({ name: \"\", side: \"back\", speak: false });\n });\n\n const delField = (f: any) => {\n if (!confirm(`項目「${f.name}」を削除しますか？（各単語のこの項目の内容も表示されなくなります）`)) return;\n run(() => api(`/api/admin/fields/${f.id}`, { method: \"DELETE\" }));\n };\n\n const addWord = () => run(async () => {\n if (!Object.values(newWord).some((v) => v && v.trim())) throw new Error(\"少なくとも1つの項目を入力してください\");\n await api(\"/api/admin/words\", { method: \"POST\", body: JSON.stringify({ data: newWord }) });\n setNewWord({});\n });\n\n const delWord = (w: any) => {\n if (!confirm(\"このレコードを削除しますか？\")) return;\n run(() => api(`/api/admin/words/${w.id}`, { method: \"DELETE\" }));\n };\n\n return (\n

\n {error &&

{error}

}\n\n

📋 データ項目の管理

\n \n \n \n \n \n \n \n \n \n \n {fields.map((f) => (\n \n \n \n \n \n \n ))}\n \n

項目名	面	音声
{f.name}	{f.side === \"front\" ? \"表\" : \"裏\"}	{f.speak ? \"🔊 あり\" : \"－\"}	\n \n

\n setNewField({ ...newField, name: e.target.value })}\n placeholder=\"新しい項目名\"\n className=\"border border-gray-200 rounded-lg px-3 py-1.5 text-sm flex-1 min-w-[8rem]\"\n />\n setNewField({ ...newField, side: e.target.value })}\n className=\"border border-gray-200 rounded-lg px-2 py-1.5 text-sm bg-white\"\n >\n \n \n \n \n setNewField({ ...newField, speak: e.target.checked })}\n />\n タップで音声\n \n \n

\n\n

📚 単語データの管理（{words.length}件）

\n \n \n \n {fields.map((f) => )}\n \n \n \n \n \n {fields.map((f) => (\n \n ))}\n \n \n {words.map((w) => (\n \n {fields.map((f) => )}\n \n \n ))}\n \n

{f.name}
\n setNewWord({ ...newWord, [String(f.id)]: e.target.value })}\n placeholder={f.name}\n className=\"border border-gray-200 rounded-lg px-2 py-1 text-sm w-full min-w-[6rem]\"\n />\n	\n \n
{w.data[String(f.id)] \|\| \"\"}	\n \n

\n );\n}\n",[],[147,238],["D",1783853732693],[173,174,175,176,177,178,179,180],[147],"b967def7-0773-4a57-87fd-d38ad9bfaf4d","db.ts","2c26b704-7de0-11f1-8ee6-1607ee4eb77e",3,["D",1783853719179],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { hashPassword, newSalt } from \"./auth.ts\";\n\n// [word, phonetic, meaning, example]\nconst SEED_WORDS: [string, string, string, string][] = [\n [\"apple\", \"/ˈæp.əl/\", \"りんご\", \"I eat an apple every morning.\"],\n [\"beautiful\", \"/ˈbjuː.tɪ.fəl/\", \"美しい\", \"The sunset was beautiful tonight.\"],\n [\"comfortable\", \"/ˈkʌmf.tə.bəl/\", \"快適な\", \"This sofa is very comfortable.\"],\n [\"decide\", \"/dɪˈsaɪd/\", \"決める\", \"I decided to study abroad next year.\"],\n [\"environment\", \"/ɪnˈvaɪ.rən.mənt/\", \"環境\", \"We must protect the environment.\"],\n [\"February\", \"/ˈfeb.ru.er.i/\", \"2月\", \"My birthday is in February.\"],\n [\"government\", \"/ˈɡʌv.ərn.mənt/\", \"政府\", \"The government announced a new policy.\"],\n [\"hour\", \"/ˈaʊər/\", \"1時間\", \"The meeting lasted an hour.\"],\n [\"interesting\", \"/ˈɪn.trə.stɪŋ/\", \"興味深い\", \"I read an interesting book yesterday.\"],\n [\"journey\", \"/ˈdʒɜːr.ni/\", \"旅\", \"Life is a long journey.\"],\n [\"knowledge\", \"/ˈnɑː.lɪdʒ/\", \"知識\", \"Knowledge is power.\"],\n [\"language\", \"/ˈlæŋ.ɡwɪdʒ/\", \"言語\", \"English is a global language.\"],\n [\"mountain\", \"/ˈmaʊn.tən/\", \"山\", \"We climbed the mountain last summer.\"],\n [\"necessary\", \"/ˈnes.ə.ser.i/\", \"必要な\", \"Sleep is necessary for good health.\"],\n [\"opportunity\", \"/ˌɑː.pərˈtuː.nə.ti/\", \"機会\", \"This is a great opportunity to learn.\"],\n [\"probably\", \"/ˈprɑː.bə.bli/\", \"おそらく\", \"It will probably rain tomorrow.\"],\n [\"question\", \"/ˈkwes.tʃən/\", \"質問\", \"May I ask you a question?\"],\n [\"restaurant\", \"/ˈres.tə.rɑːnt/\", \"レストラン\", \"We had dinner at an Italian restaurant.\"],\n [\"schedule\", \"/ˈskedʒ.uːl/\", \"予定\", \"My schedule is full this week.\"],\n [\"vegetable\", \"/ˈvedʒ.tə.bəl/\", \"野菜\", \"You should eat more vegetables.\"],\n];\n\nexport async function initDb(): Promise {\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS users (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL UNIQUE,\n password_hash TEXT NOT NULL,\n salt TEXT NOT NULL,\n is_admin INTEGER NOT NULL DEFAULT 0,\n created_at INTEGER NOT NULL DEFAULT (unixepoch() * 1000)\n )`,\n `CREATE TABLE IF NOT EXISTS sessions (\n token TEXT PRIMARY KEY,\n user_id INTEGER NOT NULL,\n expires_at INTEGER NOT NULL\n )`,\n `CREATE TABLE IF NOT EXISTS fields (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n side TEXT NOT NULL DEFAULT 'back',\n speak INTEGER NOT NULL DEFAULT 0,\n sort_order INTEGER NOT NULL DEFAULT 0\n )`,\n `CREATE TABLE IF NOT EXISTS words (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n data TEXT NOT NULL,\n created_at INTEGER NOT NULL DEFAULT (unixepoch() * 1000)\n )`,\n ]);\n\n // Seed initial fields\n const fieldCount = await sqlite.execute(\"SELECT COUNT(*) AS n FROM fields\");\n if (Number((fieldCount.rows[0] as any).n) === 0) {\n await sqlite.batch([\n { sql: \"INSERT INTO fields (name, side, speak, sort_order) VALUES (?, ?, ?, ?)\", args: [\"単語\", \"front\", 1, 1] },\n { sql: \"INSERT INTO fields (name, side, speak, sort_order) VALUES (?, ?, ?, ?)\", args: [\"発音記号\", \"back\", 0, 2] },\n { sql: \"INSERT INTO fields (name, side, speak, sort_order) VALUES (?, ?, ?, ?)\", args: [\"日本語での意味\", \"back\", 0, 3] },\n { sql: \"INSERT INTO fields (name, side, speak, sort_order) VALUES (?, ?, ?, ?)\", args: [\"例文\", \"back\", 1, 4] },\n ]);\n }\n\n // Seed initial words\n const wordCount = await sqlite.execute(\"SELECT COUNT(*) AS n FROM words\");\n if (Number((wordCount.rows[0] as any).n) === 0) {\n const fields = await sqlite.execute(\"SELECT id, name FROM fields\");\n const idByName: Record = {};\n for (const r of fields.rows as any[]) idByName[String(r.name)] = Number(r.id);\n const [wId, pId, mId, eId] = [idByName[\"単語\"], idByName[\"発音記号\"], idByName[\"日本語での意味\"], idByName[\"例文\"]];\n if (wId && pId && mId && eId) {\n await sqlite.batch(SEED_WORDS.map(([word, phonetic, meaning, example]) => ({\n sql: \"INSERT INTO words (data) VALUES (?)\",\n args: [JSON.stringify({ [wId]: word, [pId]: phonetic, [mId]: meaning, [eId]: example })],\n })));\n }\n }\n\n // Seed admin account\n const admin = await sqlite.execute(\"SELECT id FROM users WHERE is_admin = 1 LIMIT 1\");\n if (!admin.rows.length) {\n const salt = newSalt();\n const hash = await hashPassword(\"admin1234\", salt);\n await sqlite.execute({\n sql: \"INSERT OR IGNORE INTO users (username, password_hash, salt, is_admin) VALUES (?, ?, ?, 1)\",\n args: [\"admin\", hash, salt],\n });\n }\n}\n",[],[154,249],"3251c776-2094-4870-8ddf-d95bddf18d3e","auth.ts","1be18464-7de0-11f1-aa5c-1607ee4eb77e",["D",1783853691891],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;\n\nfunction toHex(bytes: Uint8Array): string {\n return [...bytes].map((b) => b.toString(16).padStart(2, \"0\")).join(\"\");\n}\n\nexport function newSalt(): string {\n return toHex(crypto.getRandomValues(new Uint8Array(16)));\n}\n\nexport async function hashPassword(password: string, salt: string): Promise {\n const enc = new TextEncoder();\n const key = await crypto.subtle.importKey(\"raw\", enc.encode(password), \"PBKDF2\", false, [\"deriveBits\"]);\n const bits = await crypto.subtle.deriveBits(\n { name: \"PBKDF2\", salt: enc.encode(salt), iterations: 100_000, hash: \"SHA-256\" },\n key,\n 256,\n );\n return toHex(new Uint8Array(bits));\n}\n\nexport async function createSession(userId: number): Promise {\n const token = crypto.randomUUID().replaceAll(\"-\", \"\") + crypto.randomUUID().replaceAll(\"-\", \"\");\n await sqlite.execute({\n sql: \"INSERT INTO sessions (token, user_id, expires_at) VALUES (?, ?, ?)\",\n args: [token, userId, Date.now() + THIRTY_DAYS],\n });\n return token;\n}\n\nexport async function deleteSession(token: string): Promise {\n await sqlite.execute({ sql: \"DELETE FROM sessions WHERE token = ?\", args: [token] });\n}\n\nexport function bearerToken(req: Request): string | null {\n const h = req.headers.get(\"Authorization\") || \"\";\n return h.startsWith(\"Bearer \") ? h.slice(7) : null;\n}\n\nexport interface AuthUser {\n id: number;\n username: string;\n isAdmin: boolean;\n token: string;\n}\n\nexport async function getUserFromRequest(req: Request): Promise {\n const token = bearerToken(req);\n if (!token) return null;\n const res = await sqlite.execute({\n sql: `SELECT u.id, u.username, u.is_admin\n FROM sessions s JOIN users u ON u.id = s.user_id\n WHERE s.token = ? AND s.expires_at > ?`,\n args: [token, Date.now()],\n });\n if (!res.rows.length) return null;\n const r = res.rows[0] as Record;\n return { id: Number(r.id), username: String(r.username), isAdmin: Number(r.is_admin) === 1, token };\n}\n",[],[154,257],["D",1783853691891],[170,171],[154],["D",1783853674493],["D",1789560647748],{"_99":98,"_107":103},{"_99":98,"_100":101,"_102":103,"_18":56,"_104":105,"_106":25},{"_13":88,"_32":89,"_44":43,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":46,"_97":98},"ctx",{"_81":-5,"_128":304,"_305":306,"_307":308,"_309":25,"_310":25,"_311":25,"_312":126,"_313":-5,"_314":-7,"_315":-7,"_316":62,"_317":25,"_318":25,"_319":-5,"_320":25,"_321":25,"_322":25,"_323":-5},"ENV",{"_275":276,"_277":278,"_279":89,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Diff · v13