boymath

\n \n \n \n\n",[],[150,204],"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,220,212],"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,220,222],"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,220,230],"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,220,238],"b730f996-39a1-11f1-9b89-42b51c65c3df",5,["D",1776350215107],[184,185,186,187],[150,220],["D",1776350213606],[183,188,189],[150],"b7b07554-39a1-11f1-bee9-42b51c65c3df","routes","b7b0761c-39a1-11f1-bee9-42b51c65c3df",7,["D",1776350215939],[],[156,254],"b779d210-39a1-11f1-a658-42b51c65c3df","database","b779d2ba-39a1-11f1-a658-42b51c65c3df",6,["D",1776350215584],[],[156,261],["D",1776350214413],[180,181],[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,271],["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":319,"_320":321,"_322":323,"_324":24,"_325":24,"_326":24,"_327":137,"_328":-5,"_329":-7,"_330":-7,"_331":59,"_332":24,"_333":24,"_334":-5,"_335":24,"_336":24,"_337":24,"_338":-5},"ENV",{"_290":291,"_292":293,"_294":86,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v15