Habit Tracker

\n \n

\n\n

\n Total XP: {userProgress.totalXP}\n Habits: {userProgress.completedHabits}/{userProgress.totalHabits}\n

\n {motivation && (\n

{motivation}

\n )}\n

\n\n

\n \n setNewHabit(e.target.value)}\n placeholder=\"Enter a new habit\"\n className=\"flex-grow p-2 border rounded-l dark:bg-gray-700\"\n />\n \n

\n\n {habits.map(habit => (\n

\n {HABIT_ICONS[habit.icon] || '✨'}\n {habit.name}\n

\n \n 🔥 {habit.streak} {determineBadge(habit.streak)}\n \n completeHabit(habit.id)} />\n \n

\n ))}\n

\n );\n}\n\n// Client initialization with error handling\nfunction client() {\n try {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n ReactDOM.createRoot(rootElement).render(React.createElement(HabitTracker));\n } else {\n console.error(\"Root element not found\");\n }\n } catch (err) {\n console.error(\"Client-side rendering error:\", err);\n }\n}\n\n// Ensure client runs only in browser environment\nif (typeof window !== 'undefined' && typeof document !== 'undefined') {\n window.addEventListener('load', client);\n}\n\nexport default async function server(request: Request): Promise {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const KEY = \"habitTrackerApp\";\n const SCHEMA_VERSION = 6;\n\n // Enhanced table schema\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_habits_${SCHEMA_VERSION} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n icon TEXT DEFAULT 'fitness',\n streak INTEGER DEFAULT 0,\n last_completed DATETIME,\n xp_earned INTEGER DEFAULT 0\n )\n `);\n\n // Existing route handlers with minor modifications to support new schema\n if (request.method === 'POST' && new URL(request.url).pathname === '/add-habit') {\n const { name, icon = 'fitness' } = await request.json();\n await sqlite.execute(\n `INSERT INTO ${KEY}_habits_${SCHEMA_VERSION} (name, icon, streak) VALUES (?, ?, 0)`, \n [name, icon]\n );\n return new Response(JSON.stringify({ success: true }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n if (request.method === 'POST' && new URL(request.url).pathname === '/complete-habit') {\n const { habitId } = await request.json();\n \n await sqlite.execute(\n `UPDATE ${KEY}_habits_${SCHEMA_VERSION} \n SET streak = streak + 1, \n xp_earned = xp_earned + 10,\n last_completed = CURRENT_TIMESTAMP \n WHERE id = ?`, \n [habitId]\n );\n\n const result = await sqlite.execute(\n `SELECT streak FROM ${KEY}_habits_${SCHEMA_VERSION} WHERE id = ?`, \n [habitId]\n );\n\n return new Response(JSON.stringify({ \n success: true, \n newStreak: result.rows[0]?.streak || 0 \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n if (request.method === 'GET' && new URL(request.url).pathname === '/get-habits') {\n const result = await sqlite.execute(`\n SELECT * FROM ${KEY}_habits_${SCHEMA_VERSION}\n `);\n\n return new Response(JSON.stringify({ \n habits: result.rows || [] \n }), { \n headers: { 'Content-Type': 'application/json' } \n });\n }\n\n // Serve HTML with Tailwind and catch script\n return new Response(`\n \n \n \n \n \n Advanced Habit Tracker\n \n \n \n \n \n

\n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/shouser/habitTrackerApp/code/main.tsx","extension","actionData","errors"]