boymath

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_295":296,"_297":298},"routes/_app.x.$handle.$name",{"_96":95,"_31":44,"_104":86,"_26":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":24,"_119":120,"_121":24,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","backend/database/queries.ts","latestPath","fileId","b8464dd6-39a1-11f1-b2d2-42b51c65c3df","name","queries.ts","fileType","script","content","import { sqlite } from \"https://esm.town/v/stevekrouse/sqlite/main.tsx\";\nimport type { SavingsRecord, ChartDataPoint } from \"../../shared/types.ts\";\n\nconst TABLE = \"boymath_savings_1\";\n\nexport async function insertSaving(amount_cents: number): Promise {\n const result = await sqlite.execute(\n `INSERT INTO ${TABLE} (amount_cents) VALUES (?) RETURNING id, amount_cents, recorded_at`,\n [amount_cents],\n );\n const row = result.rows[0] as unknown as {\n id: number | bigint;\n amount_cents: number | bigint;\n recorded_at: string;\n };\n return {\n id: Number(row.id),\n amount_cents: Number(row.amount_cents),\n recorded_at: row.recorded_at,\n };\n}\n\nexport async function getSavings(\n period: \"day\" | \"week\" | \"month\",\n): Promise<{ total_cents: number; records: SavingsRecord[] }> {\n const intervalMap = {\n day: \"-1 day\",\n week: \"-7 days\",\n month: \"-30 days\",\n };\n const result = await sqlite.execute(\n `SELECT id, amount_cents, recorded_at\n FROM ${TABLE}\n WHERE recorded_at >= datetime('now', ?)\n ORDER BY recorded_at DESC`,\n [intervalMap[period]],\n );\n const records: SavingsRecord[] = (\n result.rows as unknown as Array<{\n id: number | bigint;\n amount_cents: number | bigint;\n recorded_at: string;\n }>\n ).map((row) => ({\n id: Number(row.id),\n amount_cents: Number(row.amount_cents),\n recorded_at: row.recorded_at,\n }));\n const total_cents = records.reduce((sum, r) => sum + r.amount_cents, 0);\n return { total_cents, records };\n}\n\nexport async function getDailyChart(): Promise {\n const result = await sqlite.execute(`\n SELECT date(recorded_at) as day, SUM(amount_cents) as total_cents\n FROM ${TABLE}\n WHERE recorded_at >= date('now', '-30 days')\n GROUP BY date(recorded_at)\n ORDER BY day ASC\n `);\n\n const rawDays = (\n result.rows as unknown as Array<{ day: string; total_cents: number | bigint }>\n ).map((r) => ({\n day: r.day,\n total_cents: Number(r.total_cents),\n }));\n\n // Compute 7-day rolling average over the days that have data\n return rawDays.map((row, i) => {\n const window = rawDays.slice(Math.max(0, i - 6), i + 1);\n const avg = window.reduce((sum, d) => sum + d.total_cents, 0) / window.length;\n return {\n day: row.day,\n total_cents: row.total_cents,\n rolling_avg_cents: Math.round(avg),\n };\n });\n}\n","createdAt",["D",1776350216848],"branchVersion","branchId","51d85ee2-3986-11f1-b93b-42b51c65c3df","id","51d7ce64-3986-11f1-b93b-42b51c65c3df","boymath",["D",1776338448663],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019a1633-2013-759e-8afb-72b87d8e75e3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019a1633-2013-759e-8afb-744404a5f5e3","tursoName","51d7ce64398611f1b93b42b51c65c3df","tursoHostname","51d7ce64398611f1b93b42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789506093912],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":85,"_31":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",46,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","figleaf","handle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/f5d90c6c-8ea7-493d-4a3e-abb94ff90b00/square512?exp=1789567199&sig=78ba9775af7a0dd25abc19b66b3898d619c303527e2af1c43f9f2bbd0f85d1e2","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":290,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":291,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":292,"_80":293,"_82":294,"_84":24},"tree",[177,179,183,191,192],"files",[177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192],"counts",{"_167":59,"_168":164,"_169":59,"_170":171,"_172":173},"contents",[126,127,128,129,130],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":161,"_31":162,"_29":163,"_134":-5,"_40":41,"_39":164,"_136":137,"_37":165,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":166},{"_42":155,"_31":156,"_29":157,"_134":-5,"_40":41,"_39":158,"_136":137,"_37":159,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":160},{"_42":149,"_31":150,"_29":151,"_134":-5,"_40":41,"_39":152,"_136":137,"_37":153,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":154},{"_42":142,"_31":143,"_29":144,"_134":-5,"_40":41,"_39":145,"_136":137,"_37":146,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_26":148},{"_42":131,"_31":132,"_29":133,"_134":-5,"_40":41,"_39":135,"_136":137,"_37":138,"_13":59,"_33":20,"_35":139,"_23":24,"_140":-5,"_26":141},"b825629c-39a1-11f1-9b89-42b51c65c3df","deno.json","b8256350-39a1-11f1-9b89-42b51c65c3df","parentId",13,"latest",true,["D",1776350216700],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}","label",[132],"b6fea78e-39a1-11f1-aa77-42b51c65c3df","shared","b6fea900-39a1-11f1-aa77-42b51c65c3df",4,["D",1776350214771],"directory",[143],"b64cf7be-39a1-11f1-9908-42b51c65c3df","frontend","b64cf89a-39a1-11f1-9908-42b51c65c3df",1,["D",1776350213606],[150],"b6c71f76-39a1-11f1-9908-42b51c65c3df","backend","b6c72016-39a1-11f1-9908-42b51c65c3df",3,["D",1776350214413],[156],"b68945ac-39a1-11f1-aae8-42b51c65c3df",".claude","b689466a-39a1-11f1-aae8-42b51c65c3df",2,["D",1776350214001],[162],"pulls","branches","forks","envVars",{"_174":59,"_176":59},"connections",{"_174":59,"_175":59},"count","unfilledCount","emptyCount",{"_42":161,"_31":162,"_29":163,"_134":-5,"_40":41,"_39":164,"_136":137,"_37":287,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":288,"_26":289},{"_42":279,"_31":280,"_29":281,"_134":163,"_40":41,"_39":282,"_136":24,"_37":283,"_13":59,"_33":20,"_35":284,"_23":24,"_140":-5,"_194":285,"_26":286},{"_42":155,"_31":156,"_29":157,"_134":-5,"_40":41,"_39":158,"_136":137,"_37":276,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":277,"_26":278},{"_42":271,"_31":270,"_29":266,"_134":157,"_40":41,"_39":272,"_136":137,"_37":273,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":274,"_26":275},{"_42":265,"_31":32,"_29":30,"_134":266,"_40":41,"_39":14,"_136":24,"_37":267,"_13":59,"_33":34,"_35":36,"_23":24,"_140":-5,"_194":268,"_26":269},{"_42":258,"_31":259,"_29":260,"_134":157,"_40":41,"_39":261,"_136":137,"_37":262,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":263,"_26":264},{"_42":149,"_31":150,"_29":151,"_134":-5,"_40":41,"_39":152,"_136":137,"_37":255,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":256,"_26":257},{"_42":250,"_31":225,"_29":219,"_134":151,"_40":41,"_39":251,"_136":137,"_37":252,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":253,"_26":254},{"_42":242,"_31":243,"_29":244,"_134":219,"_40":41,"_39":245,"_136":137,"_37":246,"_13":59,"_33":34,"_35":247,"_23":24,"_140":-5,"_194":248,"_26":249},{"_42":234,"_31":235,"_29":236,"_134":219,"_40":41,"_39":237,"_136":137,"_37":238,"_13":59,"_33":34,"_35":239,"_23":24,"_140":-5,"_194":240,"_26":241},{"_42":226,"_31":227,"_29":228,"_134":219,"_40":41,"_39":229,"_136":24,"_37":230,"_13":59,"_33":34,"_35":231,"_23":24,"_140":-5,"_194":232,"_26":233},{"_42":216,"_31":217,"_29":218,"_134":219,"_40":41,"_39":220,"_136":24,"_37":221,"_13":59,"_33":34,"_35":222,"_23":24,"_140":-5,"_194":223,"_26":224},{"_42":208,"_31":209,"_29":210,"_134":151,"_40":41,"_39":211,"_136":24,"_37":212,"_13":59,"_33":20,"_35":213,"_23":24,"_140":-5,"_194":214,"_26":215},{"_42":200,"_31":201,"_29":202,"_134":151,"_40":41,"_39":203,"_136":137,"_37":204,"_13":59,"_33":34,"_35":205,"_23":24,"_140":-5,"_194":206,"_26":207},{"_42":142,"_31":143,"_29":144,"_134":-5,"_40":41,"_39":145,"_136":137,"_37":197,"_13":59,"_33":147,"_35":-5,"_23":24,"_140":-5,"_194":198,"_26":199},{"_42":131,"_31":132,"_29":133,"_134":-5,"_40":41,"_39":135,"_136":137,"_37":193,"_13":59,"_33":20,"_35":139,"_23":24,"_140":-5,"_194":195,"_26":196},["D",1776350216700],"children",[],[132],["D",1776350214771],[],[143],"b83835a2-39a1-11f1-aa77-42b51c65c3df","index.tsx","b8383656-39a1-11f1-aa77-42b51c65c3df",15,["D",1776350216819],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst container = document.getElementById(\"root\")!;\nconst root = createRoot(container);\nroot.render();\n",[],[150,201],"b7e620dc-39a1-11f1-9699-42b51c65c3df","index.html","b7e6217c-39a1-11f1-9699-42b51c65c3df",8,["D",1776350216288],"\n\n \n \n \n boymath\n \n \n \n \n

\n \n \n \n\n",[],[150,209],"b7f7efe2-39a1-11f1-8ee4-42b51c65c3df","MainPage.tsx","b7f7f0d2-39a1-11f1-8ee4-42b51c65c3df","b730fa68-39a1-11f1-9b89-42b51c65c3df",10,["D",1776350216307],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport CoinExplosion from \"./CoinExplosion.tsx\";\n\ntype Mode = \"none\" | \"inputs\" | \"direct\" | \"buttons\";\n\nconst PRESET_BUTTONS: { label: string; cents: number }[] = [\n { label: \"$1\", cents: 100 },\n { label: \"$2\", cents: 200 },\n { label: \"$3\", cents: 300 },\n { label: \"$4\", cents: 400 },\n { label: \"5¢\", cents: 5 },\n { label: \"10¢\", cents: 10 },\n { label: \"20¢\", cents: 20 },\n { label: \"50¢\", cents: 50 },\n];\n\n// Raw digit string treated as cents: \"300\" → 300 cents → $3.00\nfunction centsFromDigits(digits: string): number {\n return parseInt(digits.replace(/\\D/g, \"\") || \"0\", 10);\n}\n\nfunction formatCents(cents: number): string {\n const abs = Math.abs(cents);\n const sign = cents < 0 ? \"-\" : \"\";\n return `${sign}$${(abs / 100).toFixed(2)}`;\n}\n\nconst FONT = '-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", sans-serif';\n\ninterface Props {\n onHistory: () => void;\n}\n\nexport default function MainPage({ onHistory }: Props) {\n const [mode, setMode] = useState(\"none\");\n const [input1Digits, setInput1Digits] = useState(\"\");\n const [input2Digits, setInput2Digits] = useState(\"\");\n const [directDigits, setDirectDigits] = useState(\"\");\n const [buttonCents, setButtonCents] = useState(0);\n const [explosion, setExplosion] = useState<{ x: number; y: number } | null>(null);\n\n const submitRef = useRef(null);\n const directInputRef = useRef(null);\n\n // Compute the displayed amount based on the active mode\n let amountCents = 0;\n if (mode === \"inputs\") {\n amountCents = centsFromDigits(input1Digits) - centsFromDigits(input2Digits);\n } else if (mode === \"direct\") {\n amountCents = centsFromDigits(directDigits);\n } else if (mode === \"buttons\") {\n amountCents = buttonCents;\n }\n\n const isNegative = amountCents < 0;\n const canSubmit = amountCents > 0;\n\n const resetAll = () => {\n setMode(\"none\");\n setInput1Digits(\"\");\n setInput2Digits(\"\");\n setDirectDigits(\"\");\n setButtonCents(0);\n };\n\n const handleInput1Change = (e: React.ChangeEvent) => {\n const digits = e.target.value.replace(/\\D/g, \"\");\n setInput1Digits(digits);\n if (mode !== \"inputs\") {\n setMode(\"inputs\");\n setDirectDigits(\"\");\n setButtonCents(0);\n }\n };\n\n const handleInput2Change = (e: React.ChangeEvent) => {\n const digits = e.target.value.replace(/\\D/g, \"\");\n setInput2Digits(digits);\n if (mode !== \"inputs\") {\n setMode(\"inputs\");\n setDirectDigits(\"\");\n setButtonCents(0);\n }\n };\n\n const handleInput1Focus = () => {\n if (mode !== \"inputs\") {\n setMode(\"inputs\");\n setDirectDigits(\"\");\n setButtonCents(0);\n }\n };\n\n const handleInput2Focus = () => {\n if (mode !== \"inputs\") {\n setMode(\"inputs\");\n setDirectDigits(\"\");\n setButtonCents(0);\n }\n };\n\n const handleDirectChange = (e: React.ChangeEvent) => {\n const digits = e.target.value.replace(/\\D/g, \"\");\n setDirectDigits(digits);\n };\n\n const handleAmountSavedClick = () => {\n setMode(\"direct\");\n setInput1Digits(\"\");\n setInput2Digits(\"\");\n setButtonCents(0);\n setDirectDigits(\"\");\n setTimeout(() => directInputRef.current?.focus(), 0);\n };\n\n const handleButtonPress = (cents: number) => {\n if (mode === \"buttons\") {\n setButtonCents((prev) => prev + cents);\n } else {\n setMode(\"buttons\");\n setInput1Digits(\"\");\n setInput2Digits(\"\");\n setDirectDigits(\"\");\n setButtonCents(cents);\n }\n };\n\n const handleSubmit = async () => {\n if (!canSubmit) return;\n try {\n const resp = await fetch(\"/api/savings\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ amount_cents: amountCents }),\n });\n if (resp.ok) {\n const rect = submitRef.current?.getBoundingClientRect();\n if (rect) {\n setExplosion({\n x: rect.left + rect.width / 2,\n y: rect.top + rect.height / 2,\n });\n }\n resetAll();\n }\n } catch (err) {\n console.error(\"Failed to save:\", err);\n }\n };\n\n // Colors\n const bgColor = isNegative ? \"#ef4444\" : \"#ffffff\";\n const textColor = isNegative ? \"#ffffff\" : \"#000000\";\n const dividerColor = isNegative ? \"rgba(255,255,255,0.4)\" : \"#000000\";\n const submitBgColor = isNegative ? \"#b91c1c\" : canSubmit ? \"#FFBC00\" : \"#e5e5e5\";\n\n return (\n \n {/* ── Input row: minus sign + two stacked inputs ── */}\n \n {/* Minus sign, vertically centered between the two inputs */}\n \n −\n \n\n {/* Inputs stacked */}\n

\n {/* Input 1: would-have-spent */}\n \n {/* Input 2: actually-spent */}\n \n

\n \n\n {/* ── Solid divider line ── */}\n \n\n {/* ── Amount Saved display / direct input ── */}\n \n {mode === \"direct\" ? (\n \n ) : (\n \n {formatCents(amountCents)}\n \n )}\n \n\n {/* ── Submit button ── */}\n \n \n $\n \n \n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── Preset buttons (2 rows × 4) ── */}\n \n {PRESET_BUTTONS.map(({ label, cents }) => (\n handleButtonPress(cents)}\n style={{\n aspectRatio: \"1\",\n borderRadius: \"50%\",\n backgroundColor: \"#FFCF48\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"clamp(16px, 6vw, 26px)\",\n fontWeight: 300,\n fontFamily: FONT,\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n color: \"#000000\",\n }}\n >\n {label}\n \n ))}\n

\n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── History icon (bottom right) ── */}\n \n \n {/* Increasing bars icon matching Figma vector */}\n \n \n

\n\n {/* ── Coin explosion overlay ── */}\n {explosion && (\n setExplosion(null)}\n />\n )}\n \n );\n}\n",[],[150,225,217],"components","b7f138c8-39a1-11f1-b2d2-42b51c65c3df","HistoryPage.tsx","b7f13972-39a1-11f1-b2d2-42b51c65c3df",9,["D",1776350216300],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n ComposedChart,\n Bar,\n Line,\n XAxis,\n YAxis,\n CartesianGrid,\n Tooltip,\n ResponsiveContainer,\n} from \"https://esm.sh/recharts@2.8.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport type { ChartDataPoint } from \"../../shared/types.ts\";\n\ntype Period = \"day\" | \"week\" | \"month\";\n\nconst PERIODS: { label: string; value: Period }[] = [\n { label: \"1 Day\", value: \"day\" },\n { label: \"1 Week\", value: \"week\" },\n { label: \"1 Month\", value: \"month\" },\n];\n\nconst FONT = '-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"Helvetica Neue\", sans-serif';\n\nfunction formatCents(cents: number): string {\n return `$${(cents / 100).toFixed(2)}`;\n}\n\n// \"2026-04-16\" → \"4/16\"\nfunction formatShortDate(dateStr: string): string {\n const parts = dateStr.split(\"-\");\n return `${parseInt(parts[1])}/${parseInt(parts[2])}`;\n}\n\ninterface Props {\n onBack: () => void;\n}\n\nexport default function HistoryPage({ onBack }: Props) {\n const [period, setPeriod] = useState(\"week\");\n const [totalCents, setTotalCents] = useState(0);\n const [chartData, setChartData] = useState([]);\n const [loadingTotal, setLoadingTotal] = useState(true);\n const [loadingChart, setLoadingChart] = useState(true);\n\n useEffect(() => {\n fetchTotal(period);\n }, [period]);\n\n useEffect(() => {\n fetchChart();\n }, []);\n\n const fetchTotal = async (p: Period) => {\n setLoadingTotal(true);\n try {\n const resp = await fetch(`/api/savings?period=${p}`);\n const data = await resp.json();\n setTotalCents(data.total_cents ?? 0);\n } catch (err) {\n console.error(\"Failed to fetch savings:\", err);\n } finally {\n setLoadingTotal(false);\n }\n };\n\n const fetchChart = async () => {\n setLoadingChart(true);\n try {\n const resp = await fetch(\"/api/savings/chart\");\n const data = await resp.json();\n setChartData(data.days ?? []);\n } catch (err) {\n console.error(\"Failed to fetch chart:\", err);\n } finally {\n setLoadingChart(false);\n }\n };\n\n return (\n \n {/* ── Header: back button ── */}\n \n \n ←\n \n \n\n {/* ── Period selector pills ── */}\n \n {PERIODS.map(({ label, value }) => (\n setPeriod(value)}\n style={{\n flex: 1,\n padding: \"10px 0\",\n borderRadius: \"50px\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"15px\",\n fontWeight: period === value ? 500 : 300,\n fontFamily: FONT,\n backgroundColor: period === value ? \"#FFCF48\" : \"#f3f4f6\",\n color: \"#000000\",\n transition: \"background-color 0.15s ease\",\n }}\n >\n {label}\n \n ))}\n \n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── Total saved display ── */}\n \n \n Total Saved\n

\n \n {formatCents(totalCents)}\n \n \n\n {/* ── Dashed divider ── */}\n

\n\n {/* ── Chart ── */}\n

\n \n Last 30 Days\n

\n\n {loadingChart ? (\n \n Loading…\n

\n ) : chartData.length === 0 ? (\n \n No data yet — start saving!\n \n ) : (\n \n \n \n \n `$${(v / 100).toFixed(0)}`}\n tick={{ fontSize: 10, fill: \"#9ca3af\", fontFamily: FONT }}\n axisLine={false}\n tickLine={false}\n width={32}\n />\n [\n formatCents(value),\n name === \"total_cents\" ? \"Daily total\" : \"7-day avg\",\n ]}\n labelFormatter={formatShortDate}\n contentStyle={{\n borderRadius: \"10px\",\n border: \"none\",\n boxShadow: \"0 2px 12px rgba(0,0,0,0.08)\",\n fontSize: \"13px\",\n fontFamily: FONT,\n }}\n />\n \n \n \n \n )}\n\n {/* Legend */}\n {chartData.length > 0 && (\n \n

\n \n Daily total\n

\n \n 7-day avg\n

\n \n )}\n \n \n );\n}\n",[],[150,225,227],"b81ea36c-39a1-11f1-8ee4-42b51c65c3df","CoinExplosion.tsx","b81ea434-39a1-11f1-8ee4-42b51c65c3df",12,["D",1776350216666],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface CoinExplosionProps {\n x: number;\n y: number;\n onDone: () => void;\n}\n\ninterface Coin {\n id: number;\n tx: number;\n ty: number;\n delay: number;\n size: number;\n}\n\nexport default function CoinExplosion({ x, y, onDone }: CoinExplosionProps) {\n const coinRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n const [coins] = useState(() =>\n Array.from({ length: 20 }, (_, i) => {\n const angle = (360 / 20) * i + (Math.random() * 18 - 9);\n const distance = 80 + Math.random() * 120;\n const rad = (angle * Math.PI) / 180;\n return {\n id: i,\n tx: Math.cos(rad) * distance,\n ty: Math.sin(rad) * distance,\n delay: Math.random() * 80,\n size: 20 + Math.floor(Math.random() * 16),\n };\n })\n );\n\n useEffect(() => {\n // Animate each coin using the Web Animations API for precise per-coin control\n coinRefs.current.forEach((el, i) => {\n if (!el) return;\n const coin = coins[i];\n el.animate(\n [\n {\n transform: \"translate(-50%, -50%) scale(0.3)\",\n opacity: \"1\",\n },\n {\n transform: `translate(calc(-50% + ${coin.tx}px), calc(-50% + ${coin.ty}px)) scale(1.2)`,\n opacity: \"0\",\n },\n ],\n {\n duration: 800,\n delay: coin.delay,\n easing: \"ease-out\",\n fill: \"forwards\",\n },\n );\n });\n\n const timer = setTimeout(onDone, 1000);\n return () => clearTimeout(timer);\n }, []);\n\n return (\n \n {coins.map((coin, i) => (\n {\n coinRefs.current[i] = el;\n }}\n style={{\n position: \"absolute\",\n fontSize: coin.size,\n lineHeight: 1,\n transform: \"translate(-50%, -50%)\",\n willChange: \"transform, opacity\",\n userSelect: \"none\",\n }}\n >\n 🪙\n \n ))}\n \n );\n}\n",[],[150,225,235],"b8020dc4-39a1-11f1-9908-42b51c65c3df","App.tsx","b8020eaa-39a1-11f1-9908-42b51c65c3df",11,["D",1776350216304],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport MainPage from \"./MainPage.tsx\";\nimport HistoryPage from \"./HistoryPage.tsx\";\n\ntype Page = \"main\" | \"history\";\n\nfunction getPageFromHash(): Page {\n return window.location.hash === \"#/history\" ? \"history\" : \"main\";\n}\n\nexport default function App() {\n const [page, setPage] = useState(getPageFromHash);\n\n useEffect(() => {\n const handleHashChange = () => setPage(getPageFromHash());\n window.addEventListener(\"hashchange\", handleHashChange);\n return () => window.removeEventListener(\"hashchange\", handleHashChange);\n }, []);\n\n const navigate = (to: Page) => {\n window.location.hash = to === \"history\" ? \"#/history\" : \"#/\";\n setPage(to);\n };\n\n if (page === \"history\") {\n return navigate(\"main\")} />;\n }\n return navigate(\"history\")} />;\n}\n",[],[150,225,243],"b730f996-39a1-11f1-9b89-42b51c65c3df",5,["D",1776350215107],[185,186,187,188],[150,225],["D",1776350213606],[184,189,190],[150],"b7b07554-39a1-11f1-bee9-42b51c65c3df","routes","b7b0761c-39a1-11f1-bee9-42b51c65c3df",7,["D",1776350215939],[],[156,259],"b8464cdc-39a1-11f1-b2d2-42b51c65c3df","b779d2ba-39a1-11f1-a658-42b51c65c3df",["D",1776350216848],[],[156,270,32],"database","b779d210-39a1-11f1-a658-42b51c65c3df",6,["D",1776350215584],[181],[156,270],["D",1776350214413],[180,182],[156],"b82914c8-39a1-11f1-8ee4-42b51c65c3df","settings.local.json","b8291568-39a1-11f1-8ee4-42b51c65c3df",14,["D",1776350216721],"{\n \"permissions\": {\n \"allow\": [\n \"mcp__plugin_discord_discord__reply\",\n \"mcp__figma__get_design_context\"\n ]\n }\n}\n",[],[162,280],["D",1776350214001],[178],[162],["D",1776338448663],["D",1789506093912],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":85,"_31":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_123":328,"_329":330,"_331":332,"_333":24,"_334":24,"_335":24,"_336":137,"_337":-5,"_338":-7,"_339":-7,"_340":59,"_341":24,"_342":24,"_343":-5,"_344":24,"_345":24,"_346":24,"_347":-5},"ENV",{"_299":300,"_301":302,"_303":86,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327},"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"]

Diff · v16